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