Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: sidebar styling, spacing consistency, etc (#18059)

This commit is contained in:
Kris 2022-08-23 21:33:15 -04:00 committed by GitHub
parent 6fb3610f4e
commit 3068df4cea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 178 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/app/components/sidebar.hbs
View File

@ -6,6 +6,4 @@
<Sidebar::Anonymous::Sections />
{{/if}}
</div>
<Sidebar::Footer />
</DSection>

1
app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.hbs
View File

@ -4,7 +4,6 @@
<div class="panel-body-contents">
<div class="sidebar-hamburger-dropdown">
<Sidebar::User::Sections @collapsableSections={{false}}/>
<Sidebar::Footer @tagName="" />
</div>
</div>
</div>

11
app/assets/javascripts/discourse/app/components/sidebar/section.hbs
View File

@ -1,15 +1,14 @@
<div class={{concat "sidebar-section-wrapper sidebar-section-" @sectionName}}>
<div class="sidebar-section-header-wrapper sidebar-row">
<Sidebar::SectionHeader @collapsable={{@collapsable}} @toggleSectionDisplay={{this.toggleSectionDisplay}}>
<span class="sidebar-section-header-caret">
{{#if @collapsable}}
{{d-icon this.headerCaretIcon}}
{{/if}}
</span>
<span class="sidebar-section-header-text">
{{@headerLinkText}}
</span>
{{#if @collapsable}}
<span class="sidebar-section-header-caret">
{{d-icon this.headerCaretIcon}}
</span>
{{/if}}
</Sidebar::SectionHeader>
{{#if this.isSingleHeaderAction}}

1
app/assets/javascripts/discourse/app/components/sidebar/user/sections.hbs
View File

@ -45,4 +45,5 @@
{{/each}}
</Sidebar::Section>
{{/each}}
<Sidebar::Footer />
</div>

81
app/assets/stylesheets/common/base/sidebar-footer.scss
View File

@ -1,19 +1,35 @@
.sidebar-wrapper {
.sidebar-footer-wrapper {
.sidebar-footer-container {
margin-right: 0.15em;
margin-left: 1em;
}
}
}
.sidebar-footer-wrapper {
border-top: 1.5px solid var(--primary-low);
padding: 0.5em 0 0.5em 0.33em;
box-sizing: border-box;
width: 100%;
margin-top: auto;
padding-top: 1em;
position: sticky;
bottom: 0;
.sidebar-footer-container {
display: flex;
align-items: stretch;
position: relative;
border-top: 1.5px solid var(--primary-low);
background: var(--primary-very-low);
padding: 0.5em 0.8em;
&:before {
// fade to make scroll more apparent
position: absolute;
content: "";
display: block;
height: 1.5em;
top: calc(-1.5em - 1px);
left: -0.5em;
right: -0.5em;
width: calc(100% + 0.5em);
pointer-events: none;
background: linear-gradient(
to bottom,
transparent,
rgba(var(--primary-very-low-rgb), 1)
);
}
}
.sidebar-footer-link {
@ -52,46 +68,3 @@
}
}
}
.sidebar-footer-wrapper {
background: var(--primary-very-low);
.desktop-view & {
position: sticky;
bottom: 0;
.sidebar-footer-container {
position: relative;
&:before {
// fade to make scroll more apparent
position: absolute;
content: "";
display: block;
height: 1.5em;
top: calc(-2em - 1px);
left: -0.5em;
right: -0.5em;
pointer-events: none;
background: linear-gradient(
to bottom,
transparent,
rgba(var(--primary-very-low-rgb), 1)
);
}
}
}
}
.hamburger-panel .revamped {
.sidebar-footer-wrapper {
background: var(--secondary);
.sidebar-footer-container {
&:before {
// fade to make scroll more apparent
background: linear-gradient(
to bottom,
transparent,
rgba(var(--secondary-rgb), 1)
);
}
}
}
}

3
app/assets/stylesheets/common/base/sidebar-more-section-links.scss
View File

@ -1,5 +1,5 @@
.sidebar-more-section-links-details {
&:focus,
&:focus-within,
&:hover {
background: var(--d-sidebar-highlight-color);
}
@ -32,7 +32,6 @@
.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 {

19
app/assets/stylesheets/common/base/sidebar-section-link.scss
View File

@ -1,6 +1,7 @@
.sidebar-section-link-wrapper {
display: flex;
align-items: center;
position: relative;
.sidebar-section-link {
box-sizing: border-box;
@ -13,6 +14,7 @@
&:focus,
&:hover {
background: var(--d-sidebar-highlight-color);
outline: none;
}
&.active {
@ -73,12 +75,17 @@
flex-shrink: 0;
&.image {
position: absolute;
img {
border-radius: 50%;
width: 20px;
aspect-ratio: auto 20 / 20;
height: 20px;
margin-right: 0.75em;
margin-right: 0.5em;
}
+ .sidebar-section-link-content-text {
margin-left: calc(20px + 0.5em);
}
}
@ -122,9 +129,17 @@
color: var(--primary-medium);
border: none;
background: transparent;
padding: 0.35em 0.5em;
padding: 0 0 0 0.5em;
height: 100%;
transition: background-color 0.25s;
&:focus,
.discourse-no-touch & {
&:hover {
color: var(--primary);
}
}
svg {
font-size: var(--font-down-1);
}

48
app/assets/stylesheets/common/base/sidebar-section.scss
View File

@ -1,10 +1,18 @@
.sidebar-section-wrapper {
margin-bottom: 1em;
margin-bottom: 0.5em;
.sidebar-section-header-wrapper {
display: flex;
align-items: stretch;
box-sizing: border-box;
padding: 0;
.discourse-no-touch & {
&:hover,
&:focus-within {
background: var(--d-sidebar-highlight-color);
}
}
.select-kit {
.btn {
@ -21,23 +29,35 @@
}
summary {
padding: 0.25em 0.5em;
height: 100%;
padding: 0 var(--d-sidebar-row-horizontal-padding) 0
calc(var(--d-sidebar-row-horizontal-padding) / 2);
&:focus,
&:hover {
border-color: transparent;
.d-icon {
color: var(--primary);
}
}
}
}
}
.sidebar-section-header {
@include ellipsis;
flex: 1 1 auto;
text-transform: uppercase;
font-weight: bold;
font-size: var(--font-1);
color: var(--primary);
align-items: center;
padding: calc(var(--d-sidebar-row-horizontal-padding) / 2)
calc(var(--d-sidebar-row-horizontal-padding) / 2)
calc(var(--d-sidebar-row-horizontal-padding) / 2)
var(--d-sidebar-row-horizontal-padding);
min-width: 0;
&.sidebar-section-header-collapsable {
justify-content: flex-start;
padding: 0;
&:focus {
background: transparent;
@ -48,27 +68,39 @@
.sidebar-section-header-text {
font-weight: bold;
margin-right: 0.25em;
@include ellipsis;
}
.sidebar-section-header-caret {
display: block;
width: 1.5em;
margin-left: -1.5em;
font-size: var(--font-down-2);
flex: 0 0 auto;
}
.sidebar-section-header-button {
background: none;
border: none;
padding: 0.25em 0.5em;
padding: 0 var(--d-sidebar-row-horizontal-padding) 0
calc(var(--d-sidebar-row-horizontal-padding) / 2);
.d-icon {
font-size: var(--font-down-1);
color: var(--primary-medium);
}
&:focus,
&:hover {
background: var(--d-sidebar-highlight-color);
.discourse-no-touch & {
&:hover,
&:focus {
outline: none;
.d-icon {
color: var(--primary);
}
}
}
}
.select-kit-collection {
.texts {
font-size: var(--font-0);

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

@ -6,22 +6,22 @@
.sidebar-wrapper {
--d-sidebar-highlight-color: var(--primary-low);
--d-sidebar-row-horizontal-padding: 1.5rem;
// 1.25rem gets text left-aligned with the hamburger icon
--d-sidebar-row-horizontal-padding: 1.25rem;
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;
padding: 0.33rem var(--d-sidebar-row-horizontal-padding);
align-items: center;
font-size: var(--font-down-1);
}
@ -31,8 +31,7 @@
flex-direction: column;
box-sizing: border-box;
height: 100%;
width: var(--d-sidebar-width);
padding: 1em 0 0;
padding: 0;
overflow-x: hidden;
}
@ -47,7 +46,7 @@
// custom scrollbar styling
--scrollbarBg: transparent;
--scrollbarThumbBg: var(--primary-low);
--scrollbarWidth: 1.2em;
--scrollbarWidth: 1em;
scrollbar-color: transparent var(--scrollbarBg);
transition: scrollbar-color 0.25s ease-in-out;
@ -56,7 +55,11 @@
&::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: calc(var(--scrollbarWidth) / 2);
border: calc(var(--scrollbarWidth) / 4) solid transparent;
background-color: transparent;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
&:hover {
@ -64,24 +67,62 @@
&::-webkit-scrollbar-thumb {
background-color: var(--scrollbarThumbBg);
border-color: var(--primary-very-low);
}
transition-delay: 0s;
}
&::-webkit-scrollbar {
width: var(--scrollbarWidth);
// 0.5em gives webkit browsers a little space between the scrollbar and the content
width: calc(var(--scrollbarWidth) - 0.45em);
}
.composer-open & {
// allows sidebar to scroll to the bottom when the composer is open
margin-bottom: var(--composer-height);
padding-bottom: var(--composer-ipad-padding);
}
// allows sidebar to scroll to the bottom when the composer is open
margin-bottom: var(--composer-height);
padding-bottom: var(--composer-ipad-padding);
}
.sidebar-sections {
display: flex;
flex-direction: column;
box-sizing: border-box;
flex: 1;
padding: 1em 0 0;
max-width: calc(var(--d-sidebar-width) - var(--scrollbarWidth));
background-color: var(--primary-very-low);
}
}
.sidebar-hamburger-dropdown {
// note that these apply to mobile and desktop dropdowns
.sidebar-section-wrapper {
.sidebar-section-header-wrapper.sidebar-row {
padding-right: 0;
}
.sidebar-section-header {
padding: 0;
}
}
.discourse-no-touch & {
.sidebar-section-wrapper .sidebar-section-header-wrapper:hover,
.sidebar-section-wrapper .sidebar-section-header-wrapper:focus-within {
background: transparent;
}
}
.sidebar-footer-wrapper {
margin-top: 1em;
.sidebar-footer-container {
background: var(--secondary);
&:before {
background: linear-gradient(
to bottom,
transparent,
rgba(var(--secondary-rgb), 1)
);
}
}
}
}

2
app/assets/stylesheets/desktop/discourse.scss
View File

@ -195,7 +195,7 @@ body.has-sidebar-page {
#main-outlet-wrapper {
grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr);
gap: 0 2em;
gap: 0 0.5em;
padding-left: 0;
}
}

18
app/assets/stylesheets/desktop/menu-panel.scss
View File

@ -37,9 +37,25 @@
color: var(--primary-high);
background: var(--tertiary-low);
}
.sidebar-section-header-wrapper .select-kit .btn:hover {
background: transparent;
}
}
.sidebar-section-link-wrapper
.sidebar-section-link-hover:hover
.sidebar-section-hover-button {
background: transparent;
}
.sidebar-footer-wrapper {
padding: 0.5em 0 0;
padding: 0;
.sidebar-footer-container {
padding: 0;
&:before {
top: calc(-100% + 2px);
}
}
}
}

4
app/assets/stylesheets/desktop/sidebar-section.scss
View File

@ -1,12 +1,12 @@
#main-outlet-wrapper {
.sidebar-wrapper {
.sidebar-section-wrapper {
.sidebar-section-header-button,
.sidebar-section-header-caret,
.sidebar-section-header-dropdown {
.discourse-no-touch & {
opacity: 0;
transition: opacity 0.25s;
transition-delay: 0.5s;
transition-delay: 0.25s;
}
}

4
app/assets/stylesheets/mobile/menu-panel.scss
View File

@ -78,4 +78,8 @@
align-items: center;
font-size: var(--font-down-1);
}
.sidebar-section-wrapper .sidebar-section-header {
padding: 0;
}
}

11
app/assets/stylesheets/mobile/sidebar.scss
View File

@ -12,10 +12,13 @@
}
}
.sidebar-wrapper .sidebar-footer-wrapper .sidebar-footer-container {
margin-top: 0.5em;
margin-right: 0;
padding-left: 0.25em;
.sidebar-footer-wrapper {
position: static;
margin-top: 1em;
.sidebar-footer-container {
background: transparent;
padding: 0.5em 0.1em;
}
}
.sidebar-more-section-links-details