github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-18 20:03:15 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Improve styling of sidebar on mobile (#18246)

Browse Source 
* Make sidebar footer is sticky
* Ensure that only the sidebar sections is scrollable
This commit is contained in:
Alan Guo Xiang Tan 2022-09-15 11:35:33 +08:00 committed by GitHub
parent 4abc323c8d
commit 2583d21aa7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -45,10 +45,6 @@
box-sizing: border-box; box-sizing: border-box;
flex: 1; flex: 1;
padding: 1em 0; padding: 1em 0;
box-sizing: border-box;
flex: 1;
display: flex;
flex-direction: column;
overflow-x: hidden; overflow-x: hidden;
overflow-y: overlay; overflow-y: overlay;

1
app/assets/stylesheets/mobile/_index.scss
View File

@ -24,7 +24,6 @@
@import "reviewables"; @import "reviewables";
@import "ring"; @import "ring";
@import "search"; @import "search";
@import "sidebar";
@import "tagging"; @import "tagging";
@import "topic-list"; @import "topic-list";
@import "topic-post"; @import "topic-post";

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

@ -1,5 +1,6 @@
.hamburger-panel .menu-panel.slide-in { .hamburger-panel .menu-panel.slide-in {
left: 0; left: 0;
.panel-body { .panel-body {
display: block; display: block;
} }
@ -61,7 +62,7 @@
.panel-body-contents { .panel-body-contents {
// 2em padding very useful for iOS Safari's overlayed bottom nav // 2em padding very useful for iOS Safari's overlayed bottom nav
padding-bottom: calc(env(safe-area-inset-bottom) + 2em); // padding-bottom: calc(env(safe-area-inset-bottom) + 2em);
.user-menu.revamped & { .user-menu.revamped & {
height: 100%; height: 100%;
@ -69,11 +70,23 @@
} }
.hamburger-panel .revamped { .hamburger-panel .revamped {
--d-sidebar-row-horizontal-padding: 0.5rem; --d-sidebar-row-horizontal-padding: 1rem;
--d-sidebar-highlight-color: var(--primary-low); --d-sidebar-highlight-color: var(--primary-low);
box-sizing: border-box;
padding: 0;
.panel-body-contents {
height: 100%;
.sidebar-hamburger-dropdown {
display: flex;
flex-direction: column;
height: 100%;
}
}
.sidebar-row { .sidebar-row {
padding: 0.5rem var(--d-sidebar-row-horizontal-padding); padding: 1.2rem var(--d-sidebar-row-horizontal-padding);
height: 27px; height: 27px;
align-items: center; align-items: center;
font-size: var(--font-0); font-size: var(--font-0);
@ -82,4 +95,16 @@
.sidebar-section-wrapper { .sidebar-section-wrapper {
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
.sidebar-footer-wrapper {
margin-top: 0;
}
.sidebar-sections {
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
box-sizing: border-box;
}
} }

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

@ -1,8 +0,0 @@
.sidebar-footer-wrapper {
position: static;
margin-top: 1em;
.sidebar-footer-container {
background: transparent;
padding: 0.5em 0.1em;
}
}