Content filter styling

2023-12-14 02:33:04 +01:00 · 2017-04-10 13:16:19 +02:00 · 2017-04-10 13:16:19 +02:00 · 9081e33f26
parent e0c9ee633b
commit 9081e33f26
6 changed files with 145 additions and 61 deletions
--- 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'
    }],

--- 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"] {
+
+}
--- 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;
 }


--- 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"}}
--- 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}}
--- 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>