Skip to content

Commit

Permalink
FIX Button alignment tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
emteknetnz committed Oct 14, 2020
1 parent 351405f commit fe08b1f
Show file tree
Hide file tree
Showing 6 changed files with 45 additions and 26 deletions.
2 changes: 1 addition & 1 deletion client/dist/js/bundle.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion client/dist/styles/bundle.css

Large diffs are not rendered by default.

29 changes: 17 additions & 12 deletions client/src/components/GalleryToolbar/GalleryToolbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ class GalleryToolbar extends Component {
if (this.props.view !== 'tile') {
return null;
}

return (
<div className="gallery__sort fieldholder-small">
<select
Expand All @@ -49,17 +50,21 @@ class GalleryToolbar extends Component {
style={{ width: '160px' }}
defaultValue={this.props.sort}
>
{this.props.sorters.map((sorter) => (
<option
key={`${sorter.field}-${sorter.direction}`}
onClick={this.handleSelectSort}
data-field={sorter.field}
data-direction={sorter.direction}
value={`${sorter.field},${sorter.direction}`}
>
{sorter.label}
</option>
))}
{this.props.sorters.map((sorter) => {
// upper case first letter of words
const label = sorter.label.replace(/^\w|[\s\-]+\w/g, c => c.toUpperCase());
return (
<option
key={`${sorter.field}-${sorter.direction}`}
onClick={this.handleSelectSort}
data-field={sorter.field}
data-direction={sorter.direction}
value={`${sorter.field},${sorter.direction}`}
>
{label}
</option>
);
})}
</select>
</div>
);
Expand Down Expand Up @@ -118,7 +123,7 @@ class GalleryToolbar extends Component {
return (
<div className="toolbar--content toolbar--space-save">
<div className="fill-width">
<div className="flexbox-area-grow">
<div className="gallery__btn-toolbar flexbox-area-grow">
<div className="btn-toolbar">
<BackButton
folder={folder}
Expand Down
5 changes: 4 additions & 1 deletion client/src/containers/AssetAdmin/AssetAdmin.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,8 @@

.asset-admin__toolbar-extra {
width: auto;
}

button:last-of-type {
margin-right: -10px;
}
}
29 changes: 20 additions & 9 deletions client/src/containers/Gallery/Gallery.scss
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@
.gallery__sort {
display: inline-block;
vertical-align: middle;
padding: $input-btn-padding-y $input-btn-padding-x;
padding: 0 $input-btn-padding-x;

// Override chosen inline width to fit to icon
.chosen-container {
Expand All @@ -124,6 +124,10 @@
}

.chosen-single {
display: flex;
align-items: center;
justify-content: flex-end;

&:focus {
box-shadow: $dropdown-shadow;
}
Expand All @@ -134,18 +138,21 @@

@include media-breakpoint-down(sm) {
font-size: 0;

&:after {
content: "\e003";
font-size: $font-size-lg;
font-family: silverstripe;
color: $btn-secondary-color;
}
}
}

> span::before {
content: "Sort by ";
content: "\e003";
font-family: silverstripe;
color: $btn-secondary-color;
margin-right: 5px;
position: relative;
top: 1px;
font-size: $font-size-sm;

@include media-breakpoint-down(sm) {
font-size: $font-size-lg;
}
}
}

Expand Down Expand Up @@ -178,6 +185,10 @@
vertical-align: middle;
}

.gallery__btn-toolbar .btn-toolbar:first-child {
margin-left: -10px;
}

.gallery__state-buttons {
@include media-breakpoint-up(sm) {
margin-right: -$panel-padding-x + $input-btn-padding-x;
Expand Down
4 changes: 2 additions & 2 deletions tests/behat/features/change-sort-order.feature
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ Feature: Change view for asset admin
When I click on the file named "folder1" in the gallery
And I click the ".gallery__sort a" element
And I wait until I see the ".gallery__sort .chosen-results" element
And I click "title z-a" in the ".gallery__sort .chosen-results" element
And I click "Title Z-A" in the ".gallery__sort .chosen-results" element
Then I should see the gallery item "file2" in position "1"
And I should see the gallery item "file1" in position "2"
When I click the ".gallery__sort a" element
And I wait until I see the ".gallery__sort .chosen-results" element
And I click "title a-z" in the ".gallery__sort .chosen-results" element
And I click "Title A-Z" in the ".gallery__sort .chosen-results" element
Then I should see the gallery item "file1" in position "1"
And I should see the gallery item "file2" in position "2"

Expand Down

0 comments on commit fe08b1f

Please sign in to comment.