refactored how main app layout works

This commit is contained in:
Henry Jameson 2022-04-04 09:42:52 +03:00
parent a613447105
commit 0e83ced25b
4 changed files with 89 additions and 49 deletions

View file

@ -1,11 +1,21 @@
@import './_variables.scss'; @import './_variables.scss';
#app { body {
min-height: 100vh;
max-width: 100%;
overflow: hidden; overflow: hidden;
} }
#app-loaded {
min-height: 100vh;
min-width: 100vw;
overflow: hidden;
--navbar-height: 50px;
}
.navbar {
height: var(--navbar-height);
}
.app-bg-wrapper { .app-bg-wrapper {
position: fixed; position: fixed;
z-index: -1; z-index: -1;
@ -16,11 +26,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: var(--wallpaper); background-color: var(--wallpaper);
background-image: var(--body-background-image); background-image: var(--body-background-image);
background-position: 50% 50px; background-position: 50%;
}
i[class^='icon-'] {
user-select: none;
} }
h4 { h4 {
@ -28,12 +34,69 @@ h4 {
} }
#content { #content {
overflow-y: auto;
position: sticky;
}
.app-layout {
position: relative;
display: grid;
grid-template-columns: auto auto;
grid-template-rows: 1fr;
box-sizing: border-box; box-sizing: border-box;
padding-top: 60px; margin: 0 auto;
margin: auto; height: 100vh;
min-height: 100vh;
max-width: 980px;
align-content: flex-start; align-content: flex-start;
flex-wrap: wrap;
padding: 0 10px 0 10px;
grid-template-columns: auto auto;
justify-content: center;
}
.underlay {
height: 100%;
width: 100%;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 1;
margin: -0.5em;
padding: 0.5em;
}
.column {
max-width: 615px;
padding-top: 10px;
grid-row-start: 1;
grid-row-end: 1;
&:nth-child(2) {
grid-column: 1;
}
&:nth-child(3) {
grid-column: 2;
}
&.-mini {
max-width: 345px;
}
&.-scrollable {
position: sticky;
top: 0;
margin-top: calc(-1 * var(--navbar-padding));
max-height: 100vh;
overflow-y: auto;
}
}
body,
.column.-scrollable {
&::-webkit-scrollbar {
display: block;
width: 0;
}
} }
.underlay { .underlay {
@ -362,13 +425,6 @@ i[class*=icon-], .svg-inline--fa {
} }
} }
.container {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0 10px 0 10px;
}
.auto-size { .auto-size {
flex: 1 flex: 1
} }
@ -598,10 +654,6 @@ nav {
} }
@media all and (min-width: 800px) { @media all and (min-width: 800px) {
body {
overflow-y: scroll;
}
.sidebar-bounds { .sidebar-bounds {
overflow: hidden; overflow: hidden;
max-height: 100vh; max-height: 100vh;
@ -856,10 +908,6 @@ nav {
height: 100%; height: 100%;
// Get rid of scrollbar on body as scrolling happens on different element // Get rid of scrollbar on body as scrolling happens on different element
body {
overflow: hidden;
}
// Ensures the fixed position of the mobile browser bars on scroll up / down events. // Ensures the fixed position of the mobile browser bars on scroll up / down events.
// Prevents the mobile browser bars from overlapping or hiding the message posting form. // Prevents the mobile browser bars from overlapping or hiding the message posting form.
@media all and (max-width: 800px) { @media all and (max-width: 800px) {

View file

@ -7,33 +7,28 @@
id="app_bg_wrapper" id="app_bg_wrapper"
class="app-bg-wrapper" class="app-bg-wrapper"
/> />
<MobileNav v-if="isMobileLayout" /> <MobileNav class="navbar" v-if="isMobileLayout" />
<DesktopNav v-else /> <DesktopNav class="navbar" v-else />
<div class="app-bg-wrapper app-container-wrapper" /> <div class="app-bg-wrapper app-container-wrapper" />
<div <div
id="content" id="content"
class="container underlay" class="app-layout container"
> >
<div class="underlay"/>
<div <div
class="sidebar-flexer mobile-hidden" class="column -scrollable -mini mobile-hidden"
:style="sidebarAlign" :style="sidebarAlign"
> >
<div class="sidebar-bounds"> <user-panel />
<div class="sidebar-scroller"> <div v-if="!isMobileLayout">
<div class="sidebar"> <nav-panel />
<user-panel /> <instance-specific-panel v-if="showInstanceSpecificPanel" />
<div v-if="!isMobileLayout"> <features-panel v-if="!currentUser && showFeaturesPanel" />
<nav-panel /> <who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
<instance-specific-panel v-if="showInstanceSpecificPanel" /> <notifications v-if="currentUser" />
<features-panel v-if="!currentUser && showFeaturesPanel" />
<who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
<notifications v-if="currentUser" />
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="main"> <div class="column main">
<div <div
v-if="!currentUser" v-if="!currentUser"
class="login-hint panel panel-default" class="login-hint panel panel-default"

View file

@ -1,9 +1,7 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.DesktopNav { .DesktopNav {
height: 50px;
width: 100%; width: 100%;
position: fixed;
a { a {
color: var(--topBarLink, $fallback--link); color: var(--topBarLink, $fallback--link);

View file

@ -92,8 +92,7 @@
.MobileNav { .MobileNav {
.mobile-nav { .mobile-nav {
display: grid; display: grid;
line-height: 50px; line-height: var(--navbar-height);
height: 50px;
grid-template-rows: 50px; grid-template-rows: 50px;
grid-template-columns: 2fr auto; grid-template-columns: 2fr auto;
width: 100%; width: 100%;