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';
#app {
min-height: 100vh;
max-width: 100%;
body {
overflow: hidden;
}
#app-loaded {
min-height: 100vh;
min-width: 100vw;
overflow: hidden;
--navbar-height: 50px;
}
.navbar {
height: var(--navbar-height);
}
.app-bg-wrapper {
position: fixed;
z-index: -1;
@ -16,11 +26,7 @@
background-repeat: no-repeat;
background-color: var(--wallpaper);
background-image: var(--body-background-image);
background-position: 50% 50px;
}
i[class^='icon-'] {
user-select: none;
background-position: 50%;
}
h4 {
@ -28,12 +34,69 @@ h4 {
}
#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;
padding-top: 60px;
margin: auto;
min-height: 100vh;
max-width: 980px;
margin: 0 auto;
height: 100vh;
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 {
@ -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 {
flex: 1
}
@ -598,10 +654,6 @@ nav {
}
@media all and (min-width: 800px) {
body {
overflow-y: scroll;
}
.sidebar-bounds {
overflow: hidden;
max-height: 100vh;
@ -856,10 +908,6 @@ nav {
height: 100%;
// 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.
// Prevents the mobile browser bars from overlapping or hiding the message posting form.
@media all and (max-width: 800px) {

View file

@ -7,20 +7,18 @@
id="app_bg_wrapper"
class="app-bg-wrapper"
/>
<MobileNav v-if="isMobileLayout" />
<DesktopNav v-else />
<MobileNav class="navbar" v-if="isMobileLayout" />
<DesktopNav class="navbar" v-else />
<div class="app-bg-wrapper app-container-wrapper" />
<div
id="content"
class="container underlay"
class="app-layout container"
>
<div class="underlay"/>
<div
class="sidebar-flexer mobile-hidden"
class="column -scrollable -mini mobile-hidden"
:style="sidebarAlign"
>
<div class="sidebar-bounds">
<div class="sidebar-scroller">
<div class="sidebar">
<user-panel />
<div v-if="!isMobileLayout">
<nav-panel />
@ -30,10 +28,7 @@
<notifications v-if="currentUser" />
</div>
</div>
</div>
</div>
</div>
<div class="main">
<div class="column main">
<div
v-if="!currentUser"
class="login-hint panel panel-default"

View file

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

View file

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