From d15159dff7773e08859bbc1fac2e7836118957ac Mon Sep 17 00:00:00 2001 From: Kris Date: Wed, 6 Jan 2021 16:15:28 -0500 Subject: [PATCH] UX: Refactor topic list nav (#11285) --- .../app/templates/components/d-navigation.hbs | 126 ++++++------- .../app/templates/navigation/category.hbs | 28 +-- .../stylesheets/common/base/_topic-list.scss | 165 ++++++++++++------ .../stylesheets/common/components/navs.scss | 2 +- .../stylesheets/desktop/topic-list.scss | 63 ------- app/assets/stylesheets/mobile/topic-list.scss | 137 +++------------ 6 files changed, 211 insertions(+), 310 deletions(-) diff --git a/app/assets/javascripts/discourse/app/templates/components/d-navigation.hbs b/app/assets/javascripts/discourse/app/templates/components/d-navigation.hbs index c9b4d4b345f..72259b6d2ca 100644 --- a/app/assets/javascripts/discourse/app/templates/components/d-navigation.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/d-navigation.hbs @@ -5,71 +5,75 @@ {{navigation-bar navItems=navItems filterMode=filterMode category=category}} {{/unless}} -{{#if showCategoryAdmin}} - {{categories-admin-dropdown - onChange=(action "selectCategoryAdminDropdownAction") - options=(hash - triggerOnChangeOnTab=false - ) - }} -{{/if}} +
-{{#if category}} - {{#unless tag}} - {{!-- don't show category notification menu on tag pages --}} - {{#if showCategoryNotifications}} - {{category-notifications-button - value=category.notification_level - category=category - onChange=(action "changeCategoryNotificationLevel") - }} - {{/if}} - {{/unless}} -{{/if}} + {{#if showCategoryAdmin}} + {{categories-admin-dropdown + onChange=(action "selectCategoryAdminDropdownAction") + options=(hash + triggerOnChangeOnTab=false + ) + }} + {{/if}} -{{#if tag}} - {{#if tagNotification}} - {{#unless additionalTags}} - {{!-- don't show tag notification menu on tag intersections --}} - {{tag-notifications-button - onChange=changeTagNotificationLevel - value=tagNotification.notification_level - }} + {{#if category}} + {{#unless tag}} + {{!-- don't show category edit button on tag pages --}} + {{#if showCategoryEdit}} + {{d-button + class="btn-default edit-category" + action=editCategory + icon="wrench" + label="category.edit"}} + {{/if}} {{/unless}} {{/if}} -{{/if}} -{{plugin-outlet name="before-create-topic-button" - args=(hash - canCreateTopic=canCreateTopic - createTopicDisabled=createTopicDisabled - createTopicLabel=createTopicLabel) -}} - -{{create-topic-button - canCreateTopic=canCreateTopic - action=(action "clickCreateTopicButton") - disabled=createTopicButtonDisabled - label=createTopicLabel - btnClass=createTopicClass - canCreateTopicOnTag=canCreateTopicOnTag -}} - -{{#if category}} - {{#unless tag}} - {{!-- don't show category edit button on tag pages --}} - {{#if showCategoryEdit}} - {{d-button - class="btn-default edit-category" - action=editCategory - icon="wrench" - label="category.edit"}} + {{#if tag}} + {{#if showToggleInfo}} + {{d-button icon="tag" class="btn-default" label="tagging.info" action=toggleInfo id="show-tag-info"}} {{/if}} - {{/unless}} -{{/if}} - -{{#if tag}} - {{#if showToggleInfo}} - {{d-button icon="tag" class="btn-default" label="tagging.info" action=toggleInfo id="show-tag-info"}} {{/if}} -{{/if}} + + {{plugin-outlet name="before-create-topic-button" tagName="" + args=(hash + canCreateTopic=canCreateTopic + createTopicDisabled=createTopicDisabled + createTopicLabel=createTopicLabel) + }} + + {{create-topic-button + canCreateTopic=canCreateTopic + action=(action "clickCreateTopicButton") + disabled=createTopicButtonDisabled + label=createTopicLabel + btnClass=createTopicClass + canCreateTopicOnTag=canCreateTopicOnTag + }} + + {{#if category}} + {{#unless tag}} + {{!-- don't show category notification menu on tag pages --}} + {{#if showCategoryNotifications}} + {{category-notifications-button + value=category.notification_level + category=category + onChange=(action "changeCategoryNotificationLevel") + }} + {{/if}} + {{/unless}} + {{/if}} + + {{#if tag}} + {{#if tagNotification}} + {{#unless additionalTags}} + {{!-- don't show tag notification menu on tag intersections --}} + {{tag-notifications-button + onChange=changeTagNotificationLevel + value=tagNotification.notification_level + }} + {{/unless}} + {{/if}} + {{/if}} + +
\ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/templates/navigation/category.hbs b/app/assets/javascripts/discourse/app/templates/navigation/category.hbs index 9e6b65acbcf..8dfed14a72c 100644 --- a/app/assets/javascripts/discourse/app/templates/navigation/category.hbs +++ b/app/assets/javascripts/discourse/app/templates/navigation/category.hbs @@ -1,5 +1,4 @@ -{{#d-section class="navigation-container"}} - {{add-category-tag-classes category=category}} + {{add-category-tag-classes category=category tagName=""}}
{{#if category.uploaded_logo.url}} @@ -16,17 +15,18 @@ {{plugin-outlet name="category-heading" args=(hash category=category)}}
-
- {{d-navigation - category=category - filterMode=filterMode - noSubcategories=noSubcategories - canCreateTopic=canCreateTopic - createTopic=(route-action "createTopic") - createTopicDisabled=cannotCreateTopicOnCategory - hasDraft=draft - editCategory=(route-action "editCategory" category)}} +{{#d-section class="navigation-container category-navigation"}} + + {{d-navigation + category=category + filterMode=filterMode + noSubcategories=noSubcategories + canCreateTopic=canCreateTopic + createTopic=(route-action "createTopic") + createTopicDisabled=cannotCreateTopicOnCategory + hasDraft=draft + editCategory=(route-action "editCategory" category)}} + + {{plugin-outlet name="category-navigation" args=(hash category=category)}} - {{plugin-outlet name="category-navigation" args=(hash category=category)}} -
{{/d-section}} diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss index 46161547e86..d362f9876b0 100644 --- a/app/assets/stylesheets/common/base/_topic-list.scss +++ b/app/assets/stylesheets/common/base/_topic-list.scss @@ -1,5 +1,86 @@ -.topic-list.shared-drafts { - margin-bottom: 1.5em; +// Topic list navigation & controls + +.list-controls { + margin-bottom: 0.25em; + + .btn { + &:not(:first-child) { + margin-left: 0.5em; + } + .d-button-label { + font-size: $font-up-1; + font-weight: normal; + } + } + + .notifications-button { + margin-left: 0.5em; + } + + a.badge-category { + padding: 3px 12px; + font-size: $font-up-1; + } + + .combo-box .combo-box-header { + background: var(--secondary); + color: var(--primary); + border: 1px solid var(--primary-medium); + font-size: $font-0; + transition: none; + } + .select-kit { + .select-kit-collection { + max-height: 40vh; + } + } + + @include breakpoint(medium) { + // hide button labels to save space + .btn { + .d-button-label { + display: none; + } + .d-icon { + margin: 0; + } + } + } +} + +.navigation-container { + width: 100%; + --nav-space: 0.75em; + display: flex; + flex-wrap: wrap; +} + +.category-breadcrumb { + display: block; + list-style: none; + padding: 0; + margin: 0; + li { + float: left; + margin-bottom: var(--nav-space); + margin-right: 0.5em; + } +} + +#navigation-bar { + display: flex; + flex-wrap: wrap; + margin: 0 0 var(--nav-space); + margin-right: auto; +} + +.navigation-controls { + display: flex; + align-items: stretch; + margin-bottom: var(--nav-space); + > * { + white-space: nowrap; + } } .show-more { @@ -11,41 +92,38 @@ } } -.list-controls { - clear: both; - margin-bottom: 5px; - .combo-box .combo-box-header { - background: var(--secondary); - color: var(--primary); - border: 1px solid var(--primary-medium); - font-size: $font-0; - transition: none; - } - .select-kit { - align-self: center; - .select-kit-collection { - font-size: $font-down-1; - max-height: 40vh; - .texts, - .icons { - font-size: $font-up-1; - } - } - &.categories-admin-dropdown, - &.tags-admin-dropdown, - &.category-notifications-button, - &.tag-notifications-button { - float: right; - button { - display: inline-block; - } - } - } - .category-heading { +.category-heading { + max-width: 100%; +} + +.category-logo.aspect-image { + width: auto; + max-height: 150px; +} + +@supports (--custom: property) { + .category-logo.aspect-image { + --max-height: 150px; + max-height: var(--max-height); + width: calc(var(--max-height) * var(--aspect-ratio)); max-width: 100%; + height: auto; + + img { + width: 100%; + height: inherit; + max-width: initial; + max-height: initial; + } } } +.topic-list.shared-drafts { + margin-bottom: 1.5em; +} + +// Topic list body + .topic-list-item.visited, .latest-topic-list-item.visited, .category-topic-link.visited { @@ -266,27 +344,6 @@ } } -ol.category-breadcrumb.hidden { - display: none; -} - -ol.category-breadcrumb { - display: block; - float: left; - list-style: none; - margin: 0 10px 10px 0; - padding: 0; - - li { - float: left; - margin-right: 5px; - } - - .bread-crumbs-right-outlet { - float: left; - } -} - .d-icon-thumbtack.unpinned { @include fa-rotate(180deg, 1); } diff --git a/app/assets/stylesheets/common/components/navs.scss b/app/assets/stylesheets/common/components/navs.scss index f43114d7925..1f1b3f65807 100644 --- a/app/assets/stylesheets/common/components/navs.scss +++ b/app/assets/stylesheets/common/components/navs.scss @@ -23,7 +23,7 @@ > li { float: left; - margin-right: 5px; + margin-right: 0.5em; > a { border: none; diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss index 866a7612d71..a09fca51320 100644 --- a/app/assets/stylesheets/desktop/topic-list.scss +++ b/app/assets/stylesheets/desktop/topic-list.scss @@ -2,33 +2,6 @@ // Topic lists // -------------------------------------------------- -// List controls -// -------------------------------------------------- - -.list-controls { - .nav { - float: left; - margin-bottom: 10px; - } - - .btn { - float: right; - margin-left: 8px; - margin-bottom: 9px; - font-size: $font-up-1; - font-weight: normal; - } - - .search .btn { - float: none; - } - - a.badge-category { - padding: 3px 12px; - font-size: $font-up-1; - } -} - // Base list // -------------------------------------------------- @@ -227,35 +200,9 @@ button.dismiss-read { } } -.category-navigation { - clear: both; -} - .category-logo.aspect-image { float: left; margin: 0.25em 1em 0.5em 0; - - img { - width: auto; - max-height: 150px; - } -} - -@supports (--custom: property) { - .category-logo.aspect-image { - --max-height: 150px; - max-height: var(--max-height); - max-width: 60%; - height: auto; - width: calc(var(--max-height) * var(--aspect-ratio)); - - img { - width: 100%; - height: inherit; - max-width: initial; - max-height: initial; - } - } } /* Tablet (portrait) ----------- */ @@ -269,16 +216,6 @@ button.dismiss-read { } } - // new topic just a "+" no text - button#create-topic { - span { - display: none; - } - .d-icon { - margin-right: 0; - } - } - .topic-list { // tighter table header spacing th:first-of-type { diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss index 0c2a4fab0a5..b90ae68001f 100644 --- a/app/assets/stylesheets/mobile/topic-list.scss +++ b/app/assets/stylesheets/mobile/topic-list.scss @@ -6,11 +6,6 @@ // -------------------------------------------------- .list-controls { - margin: 10px -3px 5px -3px; - .category-breadcrumb.hidden { - display: none; - } - .container { display: flex; flex-wrap: wrap; @@ -20,8 +15,6 @@ display: flex; align-self: stretch; align-items: center; - margin: 0 3px 10px 3px; - order: 10; // always last for consistent placement } } @@ -34,11 +27,9 @@ display: flex; flex-wrap: wrap; width: 100%; - margin: 5px 0; + margin: 0.5em 0 0; button { - margin: 0 3px; - &.select-kit-header { display: flex; height: 100%; @@ -47,36 +38,8 @@ } } - .select-kit:not(.is-hidden) { - display: flex; - align-self: stretch; - margin-bottom: 10px; - } - - .btn:not(.select-kit-header) { - margin-bottom: 10px; - } - - .categories-admin-dropdown, - .tag-notifications-button { - order: 2; // after main nav - } - - .category-navigation { - display: flex; - flex-wrap: wrap; - width: 100%; - .edit-category { - @media screen and (max-width: 374px) { - // Hide edit label on very tiny screens - .d-icon { - margin: 0; - } - .d-button-label { - display: none; - } - } - } + .navigation-controls { + margin-bottom: 0.667em; } .nav-pills { @@ -86,7 +49,6 @@ position: relative; .navigation-toggle { flex: 0 1 auto; - margin-bottom: 5px; } > li { margin-right: 0; @@ -130,6 +92,23 @@ margin-left: 0; } +ol.category-breadcrumb { + margin: 0 -3px 5px -3px; + display: flex; + flex-wrap: wrap; + flex: 1 1 100%; + li.select-kit { + flex: 1 1 33%; + margin: 0 3px 5px 3px; + .select-kit-header .selected-name { + max-width: 80vw; + .badge-wrapper { + max-width: 100%; + } + } + } +} + // Base list // -------------------------------------------------- @@ -419,10 +398,6 @@ tr.category-topic-link { // Misc. stuff // -------------------------------------------------- -.btn-group .dropdown-toggle:active, -.btn-group.open .dropdown-toggle { - outline: 0; -} .dropdown { position: relative; @@ -431,55 +406,11 @@ tr.category-topic-link { .open .dropdown-toggle { outline: 0; } -.caret { - display: inline-block; - width: 0; - height: 0; - vertical-align: middle; - border-top: 4px solid var(--primary); - border-right: 4px solid transparent; - border-left: 4px solid transparent; - content: ""; - margin-left: 5px; -} .fade.in { opacity: 1; } -ol.category-breadcrumb { - margin: 0 0 5px 0; - display: flex; - flex-wrap: wrap; - flex: 1 1 100%; - li.select-kit { - flex: 1 1 33%; - margin: 0 3px 5px 3px; - .select-kit-header .selected-name { - max-width: 80vw; - .badge-wrapper { - max-width: 100%; - } - } - } -} - -.top-lists { - h2 { - margin-left: 10px; - } - .topic-list { - padding-bottom: 10px; - } - .btn-default.pull-right { - margin-right: 10px; - } -} - -.tags-admin-menu { - display: none; -} - .tags-controls { display: flex; h2 { @@ -488,40 +419,12 @@ ol.category-breadcrumb { } } -.staff.tags-page #create-topic { - clear: right; -} - -.topic-list-bottom h3 { - clear: both; - padding-top: 10px; -} - .category-logo.aspect-image { display: block; margin: 8px 0; img { - width: auto; max-width: 100%; - max-height: 150px; - } -} - -@supports (--custom: property) { - .category-logo.aspect-image { - --max-height: 150px; - max-height: var(--max-height); - width: calc(var(--max-height) * var(--aspect-ratio)); - max-width: 100%; - height: auto; - - img { - width: 100%; - height: inherit; - max-width: initial; - max-height: initial; - } } }