Merge pull request #1145 from creative-commoners/pulls/1.6/issue-896

FIX Button alignment tweaks
silverstripe · Oct 14, 2020 · b8ca98d · b8ca98d
2 parents 351405f + fe08b1f
commit b8ca98d
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 26 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css
diff --git a/client/src/components/GalleryToolbar/GalleryToolbar.js b/client/src/components/GalleryToolbar/GalleryToolbar.js
@@ -41,6 +41,7 @@ class GalleryToolbar extends Component {
     if (this.props.view !== 'tile') {
       return null;
     }
+
     return (
       <div className="gallery__sort fieldholder-small">
         <select
@@ -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>
     );
@@ -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}

diff --git a/client/src/containers/AssetAdmin/AssetAdmin.scss b/client/src/containers/AssetAdmin/AssetAdmin.scss
@@ -2,5 +2,8 @@
 
 .asset-admin__toolbar-extra {
   width: auto;
-}
 
+  button:last-of-type {
+    margin-right: -10px;
+  }
+}
diff --git a/client/src/containers/Gallery/Gallery.scss b/client/src/containers/Gallery/Gallery.scss
@@ -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 {
@@ -124,6 +124,10 @@
   }
 
   .chosen-single {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
     &:focus {
       box-shadow: $dropdown-shadow;
     }
@@ -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;
+      }
     }
   }
 
@@ -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;

diff --git a/tests/behat/features/change-sort-order.feature b/tests/behat/features/change-sort-order.feature
@@ -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"