Content filter styling

TryGhost · Apr 10, 2017 · 9081e33 · 9081e33
1 parent e0c9ee6
commit 9081e33
Show file tree

Hide file tree

Showing 6 changed files with 145 additions and 61 deletions.
diff --git a/app/controllers/posts.js b/app/controllers/posts.js
@@ -37,10 +37,10 @@ export default Controller.extend({
     }],
 
     availableOrders: [{
-        name: 'Latest',
+        name: 'Newest',
         value: null
     }, {
-        name: 'Earliest',
+        name: 'Oldest',
         value: 'published_at asc'
     }],
 

diff --git a/app/styles/components/power-select.css b/app/styles/components/power-select.css
@@ -2,7 +2,13 @@
     padding: 0 16px 0 8px;
     border: 1px solid #dfe1e3;
     border-radius: var(--border-radius);
-    color: #666;
+}
+
+.ember-power-select-trigger svg {
+    height: 4px;
+    width: auto;
+    margin-left: 2px;
+    vertical-align: middle;
 }
 
 .ember-power-select-search {
@@ -28,6 +34,23 @@
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
 }
 
+.ember-power-select-option {
+    margin: 0;
+    padding: 6px 10px;
+    color: color(var(--darkgrey) lightness(+20%));
+}
+
+.ember-power-select-option[aria-current="true"] {
+    background: color(var(--blue) alpha(-85%));
+    color: var(--darkgrey);
+}
+
+.ember-power-select-option[aria-selected="true"] {
+    color: var(--darkgrey);
+    font-weight: 500;
+    background: transparent;
+}
+
 .ember-power-select-options:not([role="group"]) {
     max-height: 70vh;
 }
@@ -114,9 +137,12 @@
     HACK: ember-power-select has no separate class for the loading message
     Issue: https://github.com/cibernox/ember-power-select/issues/479
  */
-.ember-power-select-dropdown > .ember-power-select-options > .ember-power-select-option:first-of-type,
 .ember-power-select-option--no-matches-message {
     padding: 7px 8px;
     color: var(--midgrey);
     font-size: 0.9em;
 }
+
+.ember-power-select-option[aria-current="true"] {
+
+}
diff --git a/app/styles/layouts/content.css b/app/styles/layouts/content.css
@@ -19,12 +19,11 @@
 }
 
 .gh-contentfilter-left .gh-contentfilter-menu {
-    margin-right: 10px;
+    margin-right: 30px;
 }
 
 .gh-contentfilter-right {
     display: flex;
-    align-items: center;
 }
 
 .gh-contentfilter-right .gh-contentfilter-menu {
@@ -62,6 +61,38 @@
     color: var(--darkgrey);
 }
 
+.gh-contentfilter-menu-trigger,
+.gh-contentfilter-menu-trigger:focus,
+.gh-contentfilter-menu-trigger--active {
+    padding: 0;
+    border: none;
+    outline: 0;
+}
+
+.gh-contentfilter-menu-trigger:hover {
+    cursor: pointer;
+}
+
+.gh-contentfilter .ember-power-select-selected-item,
+.gh-contentfilter .ember-power-select-placeholder {
+    margin-left: 0;
+}
+
+.gh-contentfilter-menu-dropdown {
+    min-width: 150px;
+    margin-top: 10px;
+    padding: 5px 0 7px 0;
+    border: none !important;
+    font-size: 1.3rem;
+    box-shadow: 0 0 0 1px rgba(99,114,130,0.16), 0 8px 16px rgba(27,39,51,0.08);
+    border-radius: 4px !important;
+}
+
+.gh-contentfilter-menu-dropdown .ember-power-select-search input {
+    display: block !important;
+    margin: 0 10px !important;
+}
+
 
 /* Content List
 /* ---------------------------------------------------------- */
@@ -162,7 +193,7 @@
     align-items: center;
     margin: 0 auto;
     padding: 0;
-    height: 90%;
+    height: 70vh;
 }
 
 .no-posts-box .no-posts {
@@ -176,6 +207,7 @@
     color: var(--midgrey);
     font-size: 2em;
     font-weight: 200;
+    letter-spacing: 1px;
 }
 
 

diff --git a/app/templates/components/power-select/trigger.hbs b/app/templates/components/power-select/trigger.hbs
@@ -10,4 +10,4 @@
 {{else}}
     {{component placeholderComponent placeholder=placeholder}}
 {{/if}}
-<span class="ember-power-select-status-icon"></span>
+{{inline-svg "arrow-down-small"}}
diff --git a/app/templates/posts-loading.hbs b/app/templates/posts-loading.hbs
@@ -7,59 +7,74 @@
     </header>
 
     <div class="gh-contentfilter">
-        {{#power-select
-            placeholder="All posts"
-            selected=selectedType
-            options=availableTypes
-            searchField="name"
-            onchange=(action (mut k))
-            tagName="div"
-            data-test-type-select=true
-            as |type|
-        }}
-            {{type.name}}
-        {{/power-select}}
+        <div class="gh-contentfilter-left">
+            {{#power-select
+                placeholder="All posts"
+                selected=selectedType
+                options=availableTypes
+                searchField="name"
+                onchange=(action (mut k))
+                tagName="div"
+                classNames="gh-contentfilter-menu gh-contentfilter-type"
+                triggerClass="gh-contentfilter-menu-trigger"
+                dropdownClass="gh-contentfilter-menu-dropdown"
+                data-test-type-select=true
+                as |type|
+            }}
+                {{type.name}}
+            {{/power-select}}
 
-        {{#unless session.user.isAuthor}}
-        {{#power-select
-            placeholder="All authors"
-            selected=selectedAuthor
-            options=availableAuthors
-            searchField="name"
-            onchange=(action (mut k))
-            tagName="div"
-            data-test-author-select=true
-            as |author|
-        }}
-            {{author.name}}
-        {{/power-select}}
-        {{/unless}}
+            {{#unless session.user.isAuthor}}
+            {{#power-select
+                placeholder="All authors"
+                selected=selectedAuthor
+                options=availableAuthors
+                searchField="name"
+                onchange=(action (mut k))
+                tagName="div"
+                classNames="gh-contentfilter-menu gh-contentfilter-author"
+                triggerClass="gh-contentfilter-menu-trigger"
+                dropdownClass="gh-contentfilter-menu-dropdown"
+                data-test-author-select=true
+                as |author|
+            }}
+                {{author.name}}
+            {{/power-select}}
+            {{/unless}}
 
-        {{#power-select
-            placeholder="All tags"
-            selected=selectedTag
-            options=availableTags
-            searchField="name"
-            onchange=(action (mut k))
-            tagName="div"
-            data-test-tag-select=true
-            as |tag|
-        }}
-            {{tag.name}}
-        {{/power-select}}
-
-        Sort by:
-        {{#power-select
-            selected=selectedOrder
-            options=availableOrders
-            searchEnabled=false
-            onchange=(action (mut k))
-            tagName="div"
-            data-test-order-select=true
-            as |order|
-        }}
-            {{order.name}}
-        {{/power-select}}
+            {{#power-select
+                placeholder="All tags"
+                selected=selectedTag
+                options=availableTags
+                searchField="name"
+                onchange=(action (mut k))
+                tagName="div"
+                classNames="gh-contentfilter-menu gh-contentfilter-tag"
+                triggerClass="gh-contentfilter-menu-trigger"
+                dropdownClass="gh-contentfilter-menu-dropdown"
+                data-test-tag-select=true
+                as |tag|
+            }}
+                {{tag.name}}
+            {{/power-select}}
+        </div>
+        <div class="gh-contentfilter-right">
+            Sort by:
+            {{#power-select
+                selected=selectedOrder
+                options=availableOrders
+                searchEnabled=false
+                onchange=(action (mut k))
+                tagName="div"
+                classNames="gh-contentfilter-menu gh-contentfilter-sort"
+                triggerClass="gh-contentfilter-menu-trigger"
+                dropdownClass="gh-contentfilter-menu-dropdown"
+                data-test-order-select=true
+                as |order|
+            }}
+                {{order.name}}
+            {{/power-select}}
+        </div>
     </div>
 
     {{gh-loading-spinner}}

diff --git a/app/templates/posts.hbs b/app/templates/posts.hbs
@@ -10,10 +10,12 @@
             {{#power-select
                 selected=selectedType
                 options=availableTypes
-                searchField="name"
+                searchEnabled=false
                 onchange=(action "changeType")
                 tagName="div"
                 classNames="gh-contentfilter-menu gh-contentfilter-type"
+                triggerClass="gh-contentfilter-menu-trigger"
+                dropdownClass="gh-contentfilter-menu-dropdown"
                 matchTriggerWidth=false
                 data-test-type-select=true
                 as |type|
@@ -29,6 +31,9 @@
                 onchange=(action "changeAuthor")
                 tagName="div"
                 classNames="gh-contentfilter-menu gh-contentfilter-author"
+                triggerClass="gh-contentfilter-menu-trigger"
+                dropdownClass="gh-contentfilter-menu-dropdown"
+                searchPlaceholder="Search authors"
                 matchTriggerWidth=false
                 data-test-author-select=true
                 as |author|
@@ -44,6 +49,9 @@
                 onchange=(action "changeTag")
                 tagName="div"
                 classNames="gh-contentfilter-menu gh-contentfilter-tag"
+                triggerClass="gh-contentfilter-menu-trigger"
+                dropdownClass="gh-contentfilter-menu-dropdown"
+                searchPlaceholder="Search tags"
                 matchTriggerWidth=false
                 data-test-tag-select=true
                 as |tag|
@@ -61,6 +69,9 @@
                 onchange=(action "changeOrder")
                 tagName="div"
                 classNames="gh-contentfilter-menu gh-contentfilter-sort"
+                triggerClass="gh-contentfilter-menu-trigger"
+                dropdownClass="gh-contentfilter-menu-dropdown"
+                horizontalPosition="right"
                 matchTriggerWidth=false
                 data-test-order-select=true
                 as |order|
@@ -85,7 +96,7 @@
                             <h3>You Haven't Written Any Posts Yet!</h3>
                             {{#link-to "editor.new"}}<button type="button" class="gh-btn gh-btn-green gh-btn-lg"><span>Write a new Post</span></button>{{/link-to}}
                         {{else}}
-                            <h3>No posts that match the current filter</h3>
+                            <h3>No posts match the current filter</h3>
                             {{#link-to "posts.index" (query-params type=null)}}<button type="button" class="gh-btn gh-btn-lg"><span>Show all posts</span></button>{{/link-to}}
                         {{/if}}
                     </div>