github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-26 13:23:38 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: improve experimental sidebar scrollbar (#17293)

Browse Source
This commit is contained in:
Kris 2022-06-30 16:14:29 -04:00 committed by GitHub
parent b1f7da4fe3
commit 321dc29583
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/assets/javascripts/discourse/app/templates/components/sidebar.hbs
View File

@ -1,14 +1,16 @@
{{#d-section pageClass="has-sidebar" class="sidebar-wrapper"}}
<div class="sidebar-container">
<Sidebar::TopicsSection />
<Sidebar::CategoriesSection />
<div class="sidebar-scroll-wrap">
<Sidebar::TopicsSection />
<Sidebar::CategoriesSection />
{{#if this.siteSettings.tagging_enabled}}
<Sidebar::TagsSection />
{{/if}}
{{#if this.siteSettings.tagging_enabled}}
<Sidebar::TagsSection />
{{/if}}
{{#if this.siteSettings.enable_personal_messages}}
<Sidebar::MessagesSection />
{{/if}}
{{#if this.siteSettings.enable_personal_messages}}
<Sidebar::MessagesSection />
{{/if}}
</div>
</div>
{{/d-section}}

31
app/assets/stylesheets/common/base/sidebar.scss
View File

@ -44,7 +44,36 @@
box-sizing: border-box;
height: 100%;
width: 240px;
padding: 1em 0.5em 1em 0;
padding: 1em 0;
overflow-x: hidden;
overflow-y: auto;
// custom scrollbar styling
--scrollbarBg: transparent;
--scrollbarThumbBg: var(--primary-low);
--scrollbarWidth: 1em;
scrollbar-color: transparent var(--scrollbarBg);
transition: scrollbar-color 0.2s ease-in-out;
&::-webkit-scrollbar-thumb {
background-color: transparent;
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 {
background-color: var(--scrollbarThumbBg);
}
}
&::-webkit-scrollbar {
width: var(--scrollbarWidth);
}
}
.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));
}
.sidebar-toggle {