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

UX: Prevent experimental sidebar scroll jumps (#17352)

This commit is contained in:
Kris 2022-07-05 22:36:44 -04:00 committed by GitHub
parent 02286186c3
commit 59c8774957
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
<DSection @pageClass="has-sidebar" @class="sidebar-container"> <DSection @pageClass="has-sidebar" @class="sidebar-container" @scrollTop={{false}}>
<div class="sidebar-scroll-wrap"> <div class="sidebar-scroll-wrap">
<Sidebar::TopicsSection /> <Sidebar::TopicsSection />
<Sidebar::CategoriesSection /> <Sidebar::CategoriesSection />

60
app/assets/stylesheets/mobile/discourse.scss
View File

@ -123,6 +123,12 @@ blockquote {
#main-outlet { #main-outlet {
padding-top: 1.25em; padding-top: 1.25em;
&:after {
// setup overlay for sidebar
content: "";
opacity: 0;
transition: opacity 0.2s;
}
} }
#main { #main {
@ -135,56 +141,48 @@ blockquote {
width: 90%; width: 90%;
} }
#main-outlet-wrapper { // Sidebar styles
width: 100%;
#main-outlet {
&.main-outlet-animate {
width: 95vw; // prevents content width shift during animation
}
}
}
.sidebar-wrapper { .sidebar-wrapper {
width: 0; width: 0;
transition: width 0.25s ease-in-out; transition: width 0.2s ease-in-out;
z-index: z("modal", "content");
}
#main-outlet-wrapper {
grid-template-columns: 0 minmax(0, 100vw);
gap: 0;
.sidebar-container {
padding-bottom: 6.6em; // extra space to watch out for navbar
}
} }
body.has-sidebar-page { body.has-sidebar-page {
position: fixed; .d-header-wrap {
height: calc(100vh - var(--header-offset)); // edits the z-index when the sidebar is open:
// header
#main { // sidebar & body overlay
overflow: hidden; // composer
z-index: z("modal", "content") + 1;
} }
.sidebar-wrapper { .sidebar-wrapper {
width: var(--d-sidebar-width); width: var(--d-sidebar-width);
grid-area: content;
margin-left: -10px; // compensate for main-outlet-wrapper padding
} }
#main-outlet { #main-outlet {
position: relative;
width: 95vw; // prevents content width shift during animation
&:after { &:after {
content: ""; content: "";
background: rgba(0, 0, 0, 0.5); background: rgb(0, 0, 0); // always a black overlay
position: absolute; position: absolute;
top: 0; top: 0;
left: -2em; // compensate for gap left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: z("dropdown"); z-index: z("modal", "overlay");
} opacity: 0.5;
}
#main-outlet-wrapper {
grid-template-columns: min-content minmax(0, 100vw);
gap: 0 2em;
padding-left: 0;
.sidebar-container {
padding-bottom: 6.6em;
transition: width 0.25s;
} }
} }
} }