forked from srxl/akkoma-fe
refactored how main app layout works
This commit is contained in:
parent
a613447105
commit
0e83ced25b
4 changed files with 89 additions and 49 deletions
102
src/App.scss
102
src/App.scss
|
@ -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) {
|
||||
|
|
31
src/App.vue
31
src/App.vue
|
@ -7,33 +7,28 @@
|
|||
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 />
|
||||
<instance-specific-panel v-if="showInstanceSpecificPanel" />
|
||||
<features-panel v-if="!currentUser && showFeaturesPanel" />
|
||||
<who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
|
||||
<notifications v-if="currentUser" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<user-panel />
|
||||
<div v-if="!isMobileLayout">
|
||||
<nav-panel />
|
||||
<instance-specific-panel v-if="showInstanceSpecificPanel" />
|
||||
<features-panel v-if="!currentUser && showFeaturesPanel" />
|
||||
<who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
|
||||
<notifications v-if="currentUser" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="column main">
|
||||
<div
|
||||
v-if="!currentUser"
|
||||
class="login-hint panel panel-default"
|
||||
|
|
|
@ -1,9 +1,7 @@
|
|||
@import '../../_variables.scss';
|
||||
|
||||
.DesktopNav {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
|
||||
a {
|
||||
color: var(--topBarLink, $fallback--link);
|
||||
|
|
|
@ -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%;
|
||||
|
|
Loading…
Reference in a new issue