From 0e83ced25b612250d8126778288b7b44f3b91dfc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Apr 2022 09:42:52 +0300
Subject: [PATCH] refactored how main app layout works

---
 src/App.scss                                | 102 ++++++++++++++------
 src/App.vue                                 |  31 +++---
 src/components/desktop_nav/desktop_nav.scss |   2 -
 src/components/mobile_nav/mobile_nav.vue    |   3 +-
 4 files changed, 89 insertions(+), 49 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 180c0daf..fa2c6a79 100644
--- a/src/App.scss
+++ b/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) {
diff --git a/src/App.vue b/src/App.vue
index b18b3308..dc2359f3 100644
--- 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
index 2d468588..1e731c70 100644
--- 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
index 0f0ea457..229f3006 100644
--- 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%;