logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git
commit: 0e83ced25b612250d8126778288b7b44f3b91dfc
parent a6134471055935dcbb94d9b2ed69dc8c2cf57832
Author: Henry Jameson <me@hjkos.com>
Date:   Mon,  4 Apr 2022 09:42:52 +0300

refactored how main app layout works

Diffstat:

Msrc/App.scss100++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------
Msrc/App.vue31+++++++++++++------------------
Msrc/components/desktop_nav/desktop_nav.scss2--
Msrc/components/mobile_nav/mobile_nav.vue3+--
4 files changed, 88 insertions(+), 48 deletions(-)

diff --git a/src/App.scss b/src/App.scss @@ -1,9 +1,19 @@ @import './_variables.scss'; -#app { +body { + overflow: hidden; +} + +#app-loaded { min-height: 100vh; - max-width: 100%; + min-width: 100vw; overflow: hidden; + + --navbar-height: 50px; +} + +.navbar { + height: var(--navbar-height); } .app-bg-wrapper { @@ -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) { diff --git a/src/App.vue b/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" diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss @@ -1,9 +1,7 @@ @import '../../_variables.scss'; .DesktopNav { - height: 50px; width: 100%; - position: fixed; a { color: var(--topBarLink, $fallback--link); diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue @@ -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%;