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