pleroma-fe

commit: f0f56bf1485dfbfa73fda5437fa928ce61b4b43a
parent 49db16318b8072cf15f2ffd5a8a237ee86034b74
Author: Henry Jameson <me@hjkos.com>
Date:   Tue, 26 Apr 2022 18:11:46 +0300

more cleanup/fixes, gap b/w panels and topbar is closer to original now

Diffstat:
M
src/App.scss
5
++---
M
src/panel.scss
80
+++++++++++++++++++++++++++++++++++++++++--------------------------------------

2 files changed, 44 insertions(+), 41 deletions(-)
diff --git a/src/App.scss b/src/App.scss
@@ -202,7 +202,7 @@ nav {
     grid-row-start: 1;
     grid-row-end: 1;
     margin: 0 calc(var(--___columnMargin) / 2);
-    padding: calc(var(--___columnMargin) / 2) 0;
+    padding: calc(var(--___columnMargin)) 0;
     row-gap: var(--___columnMargin);
     align-content: start;
 
@@ -218,7 +218,6 @@ nav {
     &.-scrollable {
       --___paddingIncrease: calc(var(--columnGap) / 2);
 
-      padding-top: calc(var(--columnGap) / 2);
       position: sticky;
       top: var(--navbar-height);
       max-height: calc(100vh - var(--navbar-height));
@@ -243,7 +242,7 @@ nav {
       }
 
       .panel-heading.-sticky {
-        top: calc(var(--columnGap) / -2);
+        top: calc(var(--columnGap) / -1);
       }
     }
   }
diff --git a/src/panel.scss b/src/panel.scss
@@ -32,7 +32,8 @@
   text-align: center;
 }
 
-.panel-heading {
+.panel-heading,
+.panel-footer {
   --panel-heading-height-padding: 0.6em;
   --__panel-heading-height: 3.2em;
   --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding));
@@ -45,17 +46,10 @@
   grid-auto-columns: auto;
   grid-column-gap: 0.5em;
   flex: none;
-  border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
-  border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
   background-size: cover;
-  padding: 0.6em 0.6em;
-  text-align: left;
-  line-height: var(--__panel-heading-height-inner);
-  color: var(--panelText);
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
-  align-items: center;
+  padding: 0.6em;
   height: var(--__panel-heading-height);
+  line-height: var(--__panel-heading-height-inner);
   z-index: 2;
 
   &.-flexible-height {
@@ -67,6 +61,14 @@
     }
   }
 
+  &.-stub {
+    &,
+    &::after {
+      border-radius: $fallback--panelRadius;
+      border-radius: var(--panelRadius, $fallback--panelRadius);
+    }
+  }
+
   &.-sticky {
     position: sticky;
     top: var(--navbar-height);
@@ -83,15 +85,6 @@
     pointer-events: none;
   }
 
-  &::after {
-    background-color: $fallback--fg;
-    background-color: var(--panel, $fallback--fg);
-    z-index: -2;
-    border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
-    border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
-    box-shadow: var(--panelHeaderShadow);
-  }
-
   .title {
     font-size: 1.3em;
   }
@@ -125,7 +118,37 @@
       padding-bottom: 0;
       align-self: stretch;
     }
+  }
+}
+
+// TODO Should refactor panels into separate component and utilize slots
+
+.panel-heading {
+  border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
+  border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
+  border-width: 0 0 1px 0;
+  align-items: left;
+  // panel theme
+  color: var(--panelText);
+  background-color: $fallback--bg;
+  background-color: var(--bg, $fallback--bg);
 
+  &::after {
+    background-color: $fallback--fg;
+    background-color: var(--panel, $fallback--fg);
+    z-index: -2;
+    border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
+    border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
+    box-shadow: var(--panelHeaderShadow);
+  }
+
+  a,
+  .-link {
+    color: $fallback--link;
+    color: var(--panelLink, $fallback--link);
+  }
+
+  &:not(.-flexible-height) {
     > .button-default {
       flex-shrink: 0;
 
@@ -153,30 +176,11 @@
       }
     }
   }
-
-  a,
-  .-link {
-    color: $fallback--link;
-    color: var(--panelLink, $fallback--link);
-  }
 }
 
-.panel-heading.stub {
-  border-radius: $fallback--panelRadius;
-  border-radius: var(--panelRadius, $fallback--panelRadius);
-}
-
-/* TODO Should remove timeline-footer from here when we refactor panels into
- * separate component and utilize slots
- */
 .panel-footer {
-  display: flex;
   border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
   border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
-  flex: none;
-  padding: 0.6em 0.6em;
-  text-align: left;
-  line-height: 2;
   align-items: center;
   border-width: 1px 0 0 0;
   border-style: solid;