UX: Modifications to admin/customize layout

app/assets/javascripts/admin/components/themes-list.js.es6

@@ -61,18 +61,6 @@ export default Ember.Component.extend({
     }
   },
 
-  didRender() {
-    this._super(...arguments);
-
-    // hide scrollbar
-    const $container = this.$(".themes-list-container");
-    const containerNode = $container[0];
-    if (containerNode) {
-      const width = containerNode.offsetWidth - containerNode.clientWidth;
-      $container.css("width", `calc(100% + ${width}px)`);
-    }
-  },
-
   actions: {
     changeView(newTab) {
       if (newTab !== this.get("currentTab")) {

app/assets/javascripts/admin/templates/components/themes-list.hbs

@@ -37,4 +37,11 @@
       <span class="empty">{{I18n "admin.customize.theme.empty"}}</span>
     </div>
   {{/if}}
-</div>
+
+
+</div>
+
+<div class="create-actions">
+  {{d-button label="admin.customize.new" icon="plus" action=(route-action "showCreateModal") class="btn-primary"}}
+  {{d-button action=(route-action "importModal") icon="upload" label="admin.customize.import" class="btn-default"}}
+</div>

app/assets/javascripts/admin/templates/customize-themes.hbs

@@ -1,12 +1,5 @@
 {{#unless editingTheme}}
-  <div class='customize-themes-header'>
-
-
-    <div class="create-actions">
-      {{d-button label="admin.customize.new" icon="plus" action=(route-action "showCreateModal") class="btn-primary"}}
-      {{d-button action=(route-action "importModal") icon="upload" label="admin.customize.import" class="btn-default"}}
-    </div>
-  </div>
   {{themes-list themes=fullThemes components=childThemes currentTab=currentTab}}
+
 {{/unless}}
 {{outlet}}

app/assets/stylesheets/common/admin/customize.scss

@@ -59,19 +59,6 @@
 }
 
 .admin-customize.admin-customize-themes {
-  .customize-themes-header {
-    border-bottom: 1px solid $primary-low;
-    padding-bottom: 8px;
-    display: flex;
-
-    .title {
-      color: $primary-medium;
-      flex-grow: 1;
-      h3 {
-        margin-bottom: 0;
-      }
-    }
-  }
   .admin-container {
     padding: 0;
   }
@@ -141,6 +128,12 @@
       font-size: $font-up-4;
       font-weight: bold;
       margin-bottom: 10px;
+      a {
+        font-size: $font-down-2;
+      }
+      .btn {
+        line-height: $line-height-small;
+      }
     }
 
     .theme-description {
@@ -217,16 +210,17 @@
     }
   }
   .themes-list {
-    border-right: 1px solid $primary-low;
-    border-bottom: 1px solid $primary-low;
     display: inline-block;
-    overflow: hidden;
+    .create-actions {
+      margin-top: 0.5em;
+    }
   }
 
   .themes-list-header {
     width: 100%;
     border-bottom: 1px solid $primary-low;
-
+    border-top: 1px solid $primary-low;
+    border-right: 1px solid $primary-low;
     .tab {
       display: inline-block;
       padding: 10px;
@@ -237,7 +231,8 @@
 
       &.active {
         font-weight: bold;
-        color: $tertiary;
+        color: $secondary;
+        background: $danger;
       }
 
       &:not(.active) {
@@ -251,10 +246,18 @@
   }
 
   .themes-list-container {
-    overflow-y: scroll;
+    overflow-y: auto;
     box-sizing: content-box;
-    max-height: 700px;
-    width: 100%; /* overridden in javascript to hide scrollbar */
+    max-height: 60vh;
+    @media screen and (max-height: 1000px) {
+      max-height: 50vh;
+    }
+    @media screen and (max-height: 800px) {
+      max-height: 40vh;
+    }
+    border-right: 1px solid $primary-low;
+    border-bottom: 1px solid $primary-low;
+    width: 100%;
 
     .themes-list-item:last-child {
       border-bottom: none;
@@ -311,15 +314,12 @@
 
       .info {
         overflow: hidden;
+        display: flex;
         font-weight: bold;
         font-size: $font-up-1;
 
-        .name {
-          float: left;
-        }
-
         .icons {
-          float: right;
+          margin-left: auto;
         }
       }
 

app/assets/stylesheets/desktop/admin_customize.scss

@@ -1,16 +1,10 @@
 .admin-customize {
   .show-current-style {
-    padding-left: 10px;
-    padding-top: 10px;
-    width: 70%;
+    padding-left: 2%;
+    width: 68%;
   }
 
   .themes-list {
     width: 28%;
   }
-
-  .customize-themes-header {
-    flex-direction: row;
-    align-items: center;
-  }
 }

app/assets/stylesheets/mobile/admin_customize.scss

@@ -6,10 +6,10 @@
 
   .themes-list {
     width: 100%;
+    margin-bottom: 1em;
   }
-
-  .customize-themes-header {
-    flex-direction: column;
-    align-items: flex-start;
+  .form-horizontal.theme.settings .setting-label,
+  .admin-container .select-kit {
+    width: 100%;
   }
 }