From 5990842dd9b9d3855a38c39996008f8b72aa35d0 Mon Sep 17 00:00:00 2001 From: Alan Guo Xiang Tan Date: Thu, 18 Aug 2022 15:03:28 +0800 Subject: [PATCH] UX: Revamp styling of sidebar The following changes are made in this commit: 1. Move caret icon in sidebar section header to the right. 1. Each row in sidebar takes the full width which enables us to do a full width highlight on hover and when sidebar link is active. 1. Ensure each row in Sidebar is of the same height. Internal refs: /t/70546, /t/72196, /t/71820 --- .../components/sidebar/categories-section.hbs | 2 - .../components/sidebar/community-section.hbs | 3 - .../components/sidebar/messages-section.hbs | 3 - .../components/sidebar/more-section-links.hbs | 26 ++++--- .../app/components/sidebar/section-header.hbs | 14 ++++ .../app/components/sidebar/section-header.js | 3 + .../app/components/sidebar/section-link.hbs | 30 ++++---- .../app/components/sidebar/section-link.js | 1 + .../components/sidebar/section-message.hbs | 2 +- .../app/components/sidebar/section.hbs | 43 +++-------- .../app/components/sidebar/sections.hbs | 1 - .../app/components/sidebar/tags-section.hbs | 2 - .../sidebar/base-custom-sidebar-section.js | 12 --- .../sidebar-categories-section-test.js | 9 +-- .../sidebar-community-section-test.js | 40 ++-------- .../sidebar-messages-section-test.js | 9 +-- .../tests/acceptance/sidebar-mobile-test.js | 2 +- .../acceptance/sidebar-plugin-api-test.js | 27 +------ .../acceptance/sidebar-tags-section-test.js | 11 --- .../components/sidebar/section-link-test.js | 4 +- .../base/sidebar-more-section-links.scss | 37 +++++----- .../common/base/sidebar-section-link.scss | 27 ++----- .../common/base/sidebar-section.scss | 73 +++++-------------- .../stylesheets/common/base/sidebar.scss | 36 +++++---- .../stylesheets/desktop/menu-panel.scss | 8 ++ app/assets/stylesheets/mobile/menu-panel.scss | 12 +++ app/assets/stylesheets/mobile/sidebar.scss | 3 +- config/locales/client.en.yml | 4 - 28 files changed, 166 insertions(+), 278 deletions(-) create mode 100644 app/assets/javascripts/discourse/app/components/sidebar/section-header.hbs create mode 100644 app/assets/javascripts/discourse/app/components/sidebar/section-header.js diff --git a/app/assets/javascripts/discourse/app/components/sidebar/categories-section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/categories-section.hbs index 5da3adc761f..4eb10dc30e6 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/categories-section.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/categories-section.hbs @@ -1,8 +1,6 @@ diff --git a/app/assets/javascripts/discourse/app/components/sidebar/community-section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/community-section.hbs index 94696fa6487..f709e645313 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/community-section.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/community-section.hbs @@ -1,9 +1,6 @@ diff --git a/app/assets/javascripts/discourse/app/components/sidebar/messages-section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/messages-section.hbs index e27bb15a612..35d77d15f93 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/messages-section.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/messages-section.hbs @@ -1,12 +1,9 @@ {{#each this.personalMessagesSectionLinks as |personalMessageSectionLink|}} diff --git a/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs b/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs index 41d3ef7fdbb..0eb84ca6323 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs @@ -3,28 +3,30 @@ {{/if}}
- + {{i18n "sidebar.more"}} {{#if this.shouldDisplaySectionLinks}} -
-
- {{#each this.sectionLinks as |sectionLink|}} - - {{/each}} -
- - {{#if (gt this.secondarySectionLinks.length 0)}} -
- {{#each this.secondarySectionLinks as |sectionLink|}} +
+
+ {{#each this.sectionLinks as |sectionLink|}} {{/each}}
- {{/if}} + + {{#if (gt this.secondarySectionLinks.length 0)}} +
+ {{#each this.secondarySectionLinks as |sectionLink|}} + + {{/each}} +
+ {{/if}} +
{{/if}}
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-header.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section-header.hbs new file mode 100644 index 00000000000..37103bf04c9 --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/sidebar/section-header.hbs @@ -0,0 +1,14 @@ +{{#if @collapsable}} + + {{yield}} + +{{else}} + + {{yield}} + +{{/if}} diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-header.js b/app/assets/javascripts/discourse/app/components/sidebar/section-header.js new file mode 100644 index 00000000000..742bb3c18ef --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/sidebar/section-header.js @@ -0,0 +1,3 @@ +import templateOnly from "@ember/component/template-only"; + +export default templateOnly(); diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs index e6dfc90c2e1..d1978f91641 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs @@ -51,21 +51,21 @@ {{/if}} {{/if}} - - {{#if @hoverValue}} - - - - {{/if}} + {{#if @hoverValue}} + + + + {{/if}} + {{/if}} diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-link.js b/app/assets/javascripts/discourse/app/components/sidebar/section-link.js index d8badbf436a..16385ec1f9c 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/section-link.js +++ b/app/assets/javascripts/discourse/app/components/sidebar/section-link.js @@ -12,6 +12,7 @@ export default class SectionLink extends Component { let classNames = [ "sidebar-section-link", `sidebar-section-link-${this.args.linkName}`, + "sidebar-row", ]; if (this.args.class) { diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-message.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section-message.hbs index d3d92dad946..cb81be10536 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/section-message.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/section-message.hbs @@ -1,4 +1,4 @@ -
+
{{yield}}
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section.hbs index fb8e7cbba96..a5aa5c49d52 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/section.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/section.hbs @@ -1,39 +1,16 @@
-
- {{#if @collapsable}} - - {{/if}} - - {{#if @headerRoute}} - - - {{@headerLinkText}} - - {{else}} - +
+ + {{@headerLinkText}} - {{/if}} + + {{#if @collapsable}} + + {{d-icon this.headerCaretIcon}} + + {{/if}} + {{#if this.isSingleHeaderAction}} {{#each @headerActions as |headerAction|}} diff --git a/app/assets/javascripts/discourse/app/components/sidebar/sections.hbs b/app/assets/javascripts/discourse/app/components/sidebar/sections.hbs index 4b19f4f5450..6c809460918 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/sections.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/sections.hbs @@ -13,7 +13,6 @@ {{#each this.customSections as |customSection|}} diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/base-custom-sidebar-section.js b/app/assets/javascripts/discourse/app/lib/sidebar/base-custom-sidebar-section.js index 260b1a3707d..5e8be1b224c 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/base-custom-sidebar-section.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/base-custom-sidebar-section.js @@ -13,18 +13,6 @@ export default class BaseCustomSidebarSection { this._notImplemented(); } - /** - * @returns {string} The Ember route which the section header link should link to. - */ - get route() {} - - /** - * @returns {string} Title for the header - */ - get title() { - this._notImplemented(); - } - /** * @returns {string} Text for the header */ diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js index 5ed73b48a26..abe3a647715 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js @@ -96,12 +96,11 @@ acceptance("Sidebar - Categories Section", function (needs) { test("clicking on section header link", async function (assert) { await visit("/t/280"); - await click(".sidebar-section-categories .sidebar-section-header-link"); + await click(".sidebar-section-categories .sidebar-section-header"); - assert.strictEqual( - currentURL(), - "/categories", - "it should transition to the categories page" + assert.notOk( + exists(".sidebar-section-categories .sidebar-section-content"), + "hides the content of the section" ); }); diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-community-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-community-section-test.js index 07f7b64de46..5dcadd3cd5d 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-community-section-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-community-section-test.js @@ -67,8 +67,8 @@ acceptance("Sidebar - Community Section", function (needs) { ); }); - test("clicking on section caret button", async function (assert) { - await visit("/"); + test("clicking on section header link", async function (assert) { + await visit("/t/280"); assert.ok( exists(".sidebar-section-community .sidebar-section-content"), @@ -76,19 +76,19 @@ acceptance("Sidebar - Community Section", function (needs) { ); assert.strictEqual( - query(".sidebar-section-community .sidebar-section-header-caret").title, + query(".sidebar-section-community .sidebar-section-header").title, I18n.t("sidebar.toggle_section"), "caret has the right title" ); - await click(".sidebar-section-community .sidebar-section-header-caret"); + await click(".sidebar-section-community .sidebar-section-header"); - assert.ok( - !exists(".sidebar-section-community .sidebar-section-content"), - "hides content section" + assert.notOk( + exists(".sidebar-section-community .sidebar-section-content"), + "hides the content of the section" ); - await click(".sidebar-section-community .sidebar-section-header-caret"); + await click(".sidebar-section-community .sidebar-section-header"); assert.ok( exists(".sidebar-section-community .sidebar-section-content"), @@ -96,30 +96,6 @@ acceptance("Sidebar - Community Section", function (needs) { ); }); - test("clicking on section header link", async function (assert) { - await visit("/t/280"); - await click(".sidebar-section-community .sidebar-section-header-link"); - - assert.strictEqual( - currentURL(), - "/latest", - "it should transition to the homepage" - ); - - assert.strictEqual( - count(".sidebar-section-community .sidebar-section-link.active"), - 1, - "only one link is marked as active" - ); - - assert.ok( - exists( - ".sidebar-section-community .sidebar-section-link-everything.active" - ), - "the everything link is marked as active" - ); - }); - // TODO(tgxworld): Flaky probably due to assertions running before event listener callbacks have completed. skip("clicking on more... link", async function (assert) { await visit("/"); diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-messages-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-messages-section-test.js index 801f6746ece..970a994fb59 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-messages-section-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-messages-section-test.js @@ -82,12 +82,11 @@ acceptance( test("clicking on section header link", async function (assert) { await visit("/"); - await click(".sidebar-section-messages .sidebar-section-header-link"); + await click(".sidebar-section-messages .sidebar-section-header"); - assert.strictEqual( - currentURL(), - `/u/eviltrout/messages`, - "it should transition to the user's messages" + assert.notOk( + exists(".sidebar-section-messages .sidebar-section-content"), + "hides the content of the section" ); }); diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-mobile-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-mobile-test.js index b384c385dab..1e9f4b68f40 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-mobile-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-mobile-test.js @@ -48,7 +48,7 @@ acceptance("Sidebar - Mobile - User with sidebar enabled", function (needs) { ); await click(".hamburger-dropdown"); - await click(".sidebar-section-header-link"); + await click(".sidebar-section-community .sidebar-section-link-everything"); assert.ok( !exists(".sidebar-hamburger-dropdown"), diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js index 70c371c1391..675c69f121f 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js @@ -37,14 +37,6 @@ acceptance("Sidebar - Plugin API", function (needs) { return "test-chat-channels"; } - get route() { - return "discovery.latest"; - } - - get title() { - return "chat channels title"; - } - get text() { return "chat channels text"; } @@ -208,16 +200,9 @@ acceptance("Sidebar - Plugin API", function (needs) { await visit("/"); - assert.strictEqual( - query(".sidebar-section-test-chat-channels .sidebar-section-header-link") - .title, - "chat channels title", - "displays header with correct title attribute" - ); - assert.strictEqual( query( - ".sidebar-section-test-chat-channels .sidebar-section-header-link" + ".sidebar-section-test-chat-channels .sidebar-section-header" ).textContent.trim(), "chat channels text", "displays header with correct text" @@ -367,14 +352,6 @@ acceptance("Sidebar - Plugin API", function (needs) { return "test-chat-channels"; } - get route() { - return "discovery.latest"; - } - - get title() { - return "chat channels title"; - } - get text() { return "chat channels text"; } @@ -404,7 +381,7 @@ acceptance("Sidebar - Plugin API", function (needs) { assert.strictEqual( query( - ".sidebar-section-test-chat-channels .sidebar-section-header-link" + ".sidebar-section-test-chat-channels .sidebar-section-header" ).textContent.trim(), "chat channels text", "displays header with correct text" diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-tags-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-tags-section-test.js index cc5b0924a8a..bc8eee8f0e3 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-tags-section-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-tags-section-test.js @@ -87,17 +87,6 @@ acceptance("Sidebar - Tags section", function (needs) { }); }); - test("clicking on section header link", async function (assert) { - await visit("/"); - await click(".sidebar-section-tags .sidebar-section-header-link"); - - assert.strictEqual( - currentURL(), - "/tags", - "it should transition to the tags page" - ); - }); - test("clicking on section header button", async function (assert) { await visit("/"); await click(".sidebar-section-tags .sidebar-section-header-button"); diff --git a/app/assets/javascripts/discourse/tests/integration/components/sidebar/section-link-test.js b/app/assets/javascripts/discourse/tests/integration/components/sidebar/section-link-test.js index f413c02faae..1267cff3962 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/sidebar/section-link-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/sidebar/section-link-test.js @@ -16,7 +16,7 @@ module("Integration | Component | sidebar | section-link", function (hooks) { assert.strictEqual( query("a").className, - "sidebar-section-link sidebar-section-link-test ember-view", + "sidebar-section-link sidebar-section-link-test sidebar-row ember-view", "has the right class attribute for the link" ); }); @@ -28,7 +28,7 @@ module("Integration | Component | sidebar | section-link", function (hooks) { assert.strictEqual( query("a").className, - "sidebar-section-link sidebar-section-link-test 123 abc ember-view", + "sidebar-section-link sidebar-section-link-test sidebar-row 123 abc ember-view", "has the right class attribute for the link" ); }); diff --git a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss index 6a5bb281a33..72d534c5810 100644 --- a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss +++ b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss @@ -1,37 +1,42 @@ .sidebar-more-section-links-details { + &:focus, + &:hover { + background: var(--d-sidebar-highlight-color); + } + .sidebar-more-section-links-details-summary { - padding: 0.35em 0.5em; color: var(--primary-high); - font-size: var(--font-down-1); transition: background-color 0.25s; display: flex; align-items: center; list-style: none; + box-sizing: border-box; .d-icon { margin-left: auto; color: var(--primary-medium); } - &:focus, - &:hover { - background: var(--d-sidebar-highlight-color); - } - &::before { display: none; } } - .sidebar-more-section-links-details-content { + .sidebar-more-section-links-details-content-wrapper { position: absolute; - background-color: var(--secondary); width: 100%; - box-shadow: shadow("dropdown"); - z-index: z("base") + 1; + z-index: z("modal", "content") + 1; + background: transparent; + } - .sidebar-section-link-wrapper { - margin-left: none; + .sidebar-more-section-link-details-content { + background-color: var(--secondary); + box-shadow: shadow("dropdown"); + border-radius: 5px; + margin: 0 calc(var(--d-sidebar-row-horizontal-padding) * 2 / 3); + + .sidebar-row { + padding: calc(var(--d-sidebar-row-horizontal-padding) / 3); } } @@ -39,9 +44,3 @@ border-top: 1.5px solid var(--primary-low); } } - -#main-outlet-wrapper { - .sidebar-more-section-links-details { - margin-left: 1.5em; - } -} diff --git a/app/assets/stylesheets/common/base/sidebar-section-link.scss b/app/assets/stylesheets/common/base/sidebar-section-link.scss index 7b03341d1ea..d11674b34f7 100644 --- a/app/assets/stylesheets/common/base/sidebar-section-link.scss +++ b/app/assets/stylesheets/common/base/sidebar-section-link.scss @@ -7,22 +7,18 @@ display: inline-flex; width: 100%; align-items: center; - padding: 0.35em 0.5em; color: var(--primary-high); - font-size: var(--font-down-1); transition: background-color 0.25s; &:focus, &:hover { background: var(--d-sidebar-highlight-color); - .sidebar-section-link-prefix.icon svg.prefix-badge { - background: var(--d-sidebar-highlight-color); - } } &.active { color: var(--primary); font-weight: bold; + background: var(--d-sidebar-highlight-color); } .sidebar-section-link-content-badge { @@ -36,7 +32,8 @@ } .sidebar-section-link-suffix { - font-size: var(--font-down-1); + margin-left: 0.25rem; + font-size: var(--font-down-4); } .sidebar-section-link-content-text { @@ -67,7 +64,9 @@ .sidebar-section-link-group-messages-new, .sidebar-section-link-group-messages-unread, .sidebar-section-link-group-messages-archive { - margin-left: 0.5em; + .sidebar-section-link-content-text { + margin-left: 0.5em; + } } .sidebar-section-link-prefix { @@ -113,13 +112,9 @@ } } - .sidebar-section-link-suffix.icon { - align-items: center; - display: flex; - margin-left: 0.5em; - } - .sidebar-section-link-hover { + margin-left: auto; + .sidebar-section-hover-button { display: none; color: var(--primary-medium); @@ -146,9 +141,3 @@ } } } - -#main-outlet-wrapper - .sidebar-section-link-wrapper:not(.sidebar-more-section-links-details-content - .sidebar-section-link-wrapper) { - margin-left: 1.5em; -} diff --git a/app/assets/stylesheets/common/base/sidebar-section.scss b/app/assets/stylesheets/common/base/sidebar-section.scss index 6a4b486542b..9325ba11edc 100644 --- a/app/assets/stylesheets/common/base/sidebar-section.scss +++ b/app/assets/stylesheets/common/base/sidebar-section.scss @@ -1,12 +1,12 @@ .sidebar-section-wrapper { margin-bottom: 1em; - .sidebar-section-header { + .sidebar-section-header-wrapper { display: flex; text-transform: uppercase; - font-size: 1em; font-weight: bold; align-items: stretch; + box-sizing: border-box; .select-kit { .btn { @@ -21,29 +21,32 @@ color: var(--primary-medium); margin-right: 0; } + summary { padding: 0.25em 0.5em; } } } - .sidebar-section-header-link, - .sidebar-section-header-text { + .sidebar-section-header { @include ellipsis; flex: 1 1 auto; + font-size: var(--font-1); color: var(--primary); - font-size: var(--font-down-1); - padding: 0.25em 0.5em; + align-items: center; + + &.sidebar-section-header-collapsable { + cursor: pointer; + } } - .sidebar-section-header-link { - &:visited { - color: var(--primary); - } - &:focus, - &:hover { - background: var(--d-sidebar-highlight-color); - } + .sidebar-section-header-text { + font-weight: bold; + margin-right: 0.25em; + } + + .sidebar-section-header-caret { + font-size: var(--font-down-2); } .sidebar-section-header-button { @@ -77,54 +80,12 @@ } .sidebar-section-message { - padding: 0.25em 0.5em; - font-size: var(--font-down-1); color: var(--primary-high); } - .sidebar-section-header-caret { - flex: 0 0 auto; - width: 1.5em; - display: flex; - justify-content: flex-end; - align-items: center; - border: none; - background: transparent; - padding: 0; - - .d-icon { - top: -0.1em; // visual alignment - } - - .discourse-no-touch & { - &:hover { - svg { - color: var(--primary-high); - } - } - } - - svg { - display: block; - flex: 0 0 auto; - transition: color 0.25s; - } - - .d-icon { - font-size: $font-down-1; - color: var(--primary-medium); - } - } - .sidebar-section-content { hr { margin: 0em 1.5em; } } } - -#main-outlet-wrapper .sidebar-section-wrapper { - .sidebar-section-message-wrapper { - margin-left: 1.5em; - } -} diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss index 3badad0cbef..c3616268af2 100644 --- a/app/assets/stylesheets/common/base/sidebar.scss +++ b/app/assets/stylesheets/common/base/sidebar.scss @@ -4,20 +4,26 @@ --d-sidebar-animation-ease: ease-in-out; } -#main-outlet-wrapper { - .sidebar-wrapper { - --d-sidebar-highlight-color: var(--primary-low); +.sidebar-wrapper { + --d-sidebar-highlight-color: var(--primary-low); + --d-sidebar-row-horizontal-padding: 1.5rem; - grid-area: sidebar; - position: sticky; - top: var(--header-offset); - .footer-nav-ipad & { - top: calc(var(--header-offset) + var(--footer-nav-height)); - } - height: calc(100vh - var(--header-offset)); - align-self: start; - overflow-y: auto; - background-color: var(--primary-very-low); + grid-area: sidebar; + position: sticky; + top: var(--header-offset); + .footer-nav-ipad & { + top: calc(var(--header-offset) + var(--footer-nav-height)); + } + height: calc(100vh - var(--header-offset)); + align-self: start; + overflow-y: auto; + background-color: var(--primary-very-low); + + .sidebar-row { + padding: 0.25rem var(--d-sidebar-row-horizontal-padding); + height: 27px; + align-items: center; + font-size: var(--font-down-1); } .sidebar-container { @@ -44,6 +50,7 @@ border-radius: calc(var(--scrollbarWidth) / 2); border: calc(var(--scrollbarWidth) / 4) solid var(--primary-very-low); } + &:hover { scrollbar-color: var(--scrollbarThumbBg) var(--scrollbarBg); &::-webkit-scrollbar-thumb { @@ -51,6 +58,7 @@ } transition-delay: 0s; } + &::-webkit-scrollbar { width: var(--scrollbarWidth); } @@ -58,7 +66,7 @@ .sidebar-scroll-wrap { // limit the wrapper width, so when the scrollbar is added the content doesn't shift - max-width: calc(var(--d-sidebar-width) - var(--scrollbarWidth)); + max-width: calc(var(--d-sidebar-width)); box-sizing: border-box; flex: 1; display: flex; diff --git a/app/assets/stylesheets/desktop/menu-panel.scss b/app/assets/stylesheets/desktop/menu-panel.scss index baa7227df89..9f9c6b901ae 100644 --- a/app/assets/stylesheets/desktop/menu-panel.scss +++ b/app/assets/stylesheets/desktop/menu-panel.scss @@ -12,8 +12,16 @@ .hamburger-panel .revamped { --d-sidebar-highlight-color: var(--highlight-medium); + --d-sidebar-row-horizontal-padding: 0.5rem; width: var(--d-sidebar-width); + .sidebar-row { + padding: 0.25rem var(--d-sidebar-row-horizontal-padding); + height: 27px; + align-items: center; + font-size: var(--font-down-1); + } + .panel-body-content { width: 100%; min-width: 0; // prevent content blowing out width diff --git a/app/assets/stylesheets/mobile/menu-panel.scss b/app/assets/stylesheets/mobile/menu-panel.scss index 8cd67cb4024..3a827e45c4f 100644 --- a/app/assets/stylesheets/mobile/menu-panel.scss +++ b/app/assets/stylesheets/mobile/menu-panel.scss @@ -67,3 +67,15 @@ height: 100%; } } + +.hamburger-panel .revamped { + --d-sidebar-row-horizontal-padding: 0.5rem; + --d-sidebar-highlight-color: var(--primary-low); + + .sidebar-row { + padding: 0.25rem var(--d-sidebar-row-horizontal-padding); + height: 27px; + align-items: center; + font-size: var(--font-down-1); + } +} diff --git a/app/assets/stylesheets/mobile/sidebar.scss b/app/assets/stylesheets/mobile/sidebar.scss index 2c83a26bbdc..09060dc46ca 100644 --- a/app/assets/stylesheets/mobile/sidebar.scss +++ b/app/assets/stylesheets/mobile/sidebar.scss @@ -1,7 +1,8 @@ #main-outlet-wrapper { - .sidebar-section-header { + .sidebar-section-header-wrapper { margin-bottom: 0.25em; } + .sidebar-section-header-link { font-size: var(--font-0); } diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index a4b5a3d4965..901c0a8e59d 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -4096,7 +4096,6 @@ en: more: "More..." sections: messages: - header_link_title: "personal messages" header_link_text: "Messages" header_action_title: "create a personal message" links: @@ -4110,17 +4109,14 @@ en: tags: none: "You have not added any tags." click_to_get_started: "Click here to get started." - header_link_title: "all tags" header_link_text: "Tags" header_action_title: "edit your sidebar tags" categories: none: "You have not added any categories." click_to_get_started: "Click here to get started." - header_link_title: "all categories" header_link_text: "Categories" header_action_title: "edit your sidebar categories" community: - header_link_title: "home" header_link_text: "Community" header_action_title: "create a new topic" links: