pleroma-fe

commit: 0f28c28760f7a8615da18630fa49ff963d3f7533
parent d9f8091ce648d033a69b47d811edf1c8019fb179
Author: Henry Jameson <me@hjkos.com>
Date:   Sun, 10 Apr 2022 19:29:10 +0300

layout fixes

Diffstat:
M
src/App.scss
46
++++++++++++----------------------------------

1 file changed, 12 insertions(+), 34 deletions(-)
diff --git a/src/App.scss b/src/App.scss
@@ -123,7 +123,7 @@ nav {
 }
 
 #main-scroller {
-  top: var(--navbar-height);
+  margin-top: var(--navbar-height);
   grid-area: content;
   position: relative;
 }
@@ -174,8 +174,9 @@ nav {
   margin: 0 auto;
   align-content: flex-start;
   flex-wrap: wrap;
-  padding: 0 10px;
+  padding: 0 calc(var(--columnGap) / 2);
   justify-content: center;
+  min-height: 100vh;
 
   .column {
     --___columnMargin: var(--columnGap);
@@ -183,17 +184,17 @@ nav {
     display: grid;
     grid-template-columns: 100%;
     box-sizing: border-box;
-    padding-top: 10px;
     grid-row-start: 1;
     grid-row-end: 1;
     margin: 0 calc(var(--___columnMargin) / 2);
+    padding: calc(var(--___columnMargin) / 2) 0;
     row-gap: var(--___columnMargin);
     align-content: start;
 
     &.-scrollable {
       --___paddingIncrease: calc(var(--columnGap) / 2);
 
-      padding-top: 10px;
+      padding-top: calc(var(--columnGap) / 2);
       position: sticky;
       top: var(--navbar-height);
       max-height: calc(100vh - var(--navbar-height));
@@ -216,7 +217,7 @@ nav {
       }
 
       .panel-heading.-sticky {
-        top: -10px;
+        top: calc(var(--columnGap) / -2);
       }
     }
   }
@@ -267,6 +268,12 @@ nav {
       display: none;
     }
   }
+
+  &.-normal {
+    #notifs-column {
+      display: none;
+    }
+  }
 }
 
 .text-center {
@@ -724,35 +731,6 @@ i[class*=icon-],
   flex: 1;
 }
 
-@media all and (min-width: 800px) {
-  .sidebar-bounds {
-    overflow: hidden;
-    max-height: 100vh;
-    width: 345px;
-    position: fixed;
-    margin-top: -10px;
-
-    .sidebar-scroller {
-      height: 96vh;
-      width: 365px;
-      padding-top: 10px;
-      padding-right: 50px;
-      overflow-x: hidden;
-      overflow-y: scroll;
-    }
-
-    .sidebar {
-      width: 345px;
-    }
-  }
-
-  .sidebar-flexer {
-    max-height: 96vh;
-    flex-shrink: 0;
-    flex-grow: 0;
-  }
-}
-
 @media all and (max-width: 800px) {
   .mobile-hidden {
     display: none;