diff --git a/app/controllers/posts.js b/app/controllers/posts.js
index 2e5edf617..ba7d9a590 100644
--- 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
index d23435e74..8158c58b1 100644
--- 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
index d76f34aeb..feb172f7d 100644
--- 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
index a58a7fab8..da30729ae 100644
--- 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}}
-
+{{inline-svg "arrow-down-small"}}
diff --git a/app/templates/posts-loading.hbs b/app/templates/posts-loading.hbs
index 61e7926d7..1d6f4f28d 100644
--- a/app/templates/posts-loading.hbs
+++ b/app/templates/posts-loading.hbs
@@ -7,59 +7,74 @@
- {{#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}}
+
+ {{#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}}
+
+
+ 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}}
+
{{gh-loading-spinner}}
diff --git a/app/templates/posts.hbs b/app/templates/posts.hbs
index 1bb568e26..2badae57e 100644
--- 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 @@
You Haven't Written Any Posts Yet!
{{#link-to "editor.new"}}{{/link-to}}
{{else}}
- No posts that match the current filter
+ No posts match the current filter
{{#link-to "posts.index" (query-params type=null)}}{{/link-to}}
{{/if}}