From 8a590f9269086ac737869e948954c74d6317541e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 Mar 2021 19:18:43 +0200
Subject: Cleaned up panel-footer. No longer uses header styles since those
 look and work ugly.

---
 src/App.scss | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

(limited to 'src/App.scss')

diff --git a/src/App.scss b/src/App.scss
index 90d083bb..a3b2a08e 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -548,8 +548,17 @@ main-router {
 }
 
 .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: 28px;
+  align-items: baseline;
+  border-width: 1px 0 0 0;
+  border-style: solid;
+  border-color: var(--border, $fallback--border);
 
   .faint {
     color: $fallback--faint;
@@ -862,16 +871,10 @@ nav {
 }
 
 .new-status-notification {
-  position:relative;
-  margin-top: -1px;
+  position: relative;
   font-size: 1.1em;
-  border-width: 1px 0 0 0;
-  border-style: solid;
-  border-color: var(--border, $fallback--border);
-  padding: 10px;
   z-index: 1;
-  background-color: $fallback--fg;
-  background-color: var(--panel, $fallback--fg);
+  flex: 1;
 }
 
 .chat-layout {
-- 
cgit v1.2.3-70-g09d2


From 5c064ccf553ffcd3286ad1b3305633c5c4c4c0c4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 11 Mar 2021 15:14:30 +0200
Subject: fix some css problems + tiny bit cleaning up

---
 src/App.scss                                    |  5 +++-
 src/components/notifications/notifications.scss |  7 ++++--
 src/components/notifications/notifications.vue  |  6 ++---
 src/components/timeline/timeline.scss           | 31 +++++++++++++++++++++++++
 src/components/timeline/timeline.vue            | 30 +-----------------------
 5 files changed, 44 insertions(+), 35 deletions(-)
 create mode 100644 src/components/timeline/timeline.scss

(limited to 'src/App.scss')

diff --git a/src/App.scss b/src/App.scss
index a3b2a08e..da0cfca7 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -547,7 +547,10 @@ main-router {
   border-radius: var(--panelRadius, $fallback--panelRadius);
 }
 
-.panel-footer {
+/* TODO Should remove timeline-footer from here when we refactor panels into
+ * separate component and utilize slots
+ */
+.panel-footer, .timeline-footer {
   display: flex;
   border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
   border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 682ae127..2bb627a8 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -1,6 +1,6 @@
 @import '../../_variables.scss';
 
-.notifications {
+.Notifications {
   &:not(.minimal) {
     // a bit of a hack to allow scrolling below notifications
     padding-bottom: 15em;
@@ -11,6 +11,10 @@
     color: var(--text, $fallback--text);
   }
 
+  .notifications-footer {
+    border: none;
+  }
+
   .notification {
     position: relative;
 
@@ -82,7 +86,6 @@
     }
   }
 
-
   .follow-text, .move-text {
     padding: 0.5em 0;
     overflow-wrap: break-word;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index eb951f18..dc663ce2 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     :class="{ minimal: minimalMode }"
-    class="notifications"
+    class="Notifications"
   >
     <div :class="mainClass">
       <div
@@ -34,7 +34,7 @@
           <notification :notification="notification" />
         </div>
       </div>
-      <div class="panel-footer">
+      <div class="panel-footer notifications-footer">
         <div
           v-if="bottomedOut"
           class="new-status-notification text-center faint"
@@ -52,7 +52,7 @@
         </button>
         <div
           v-else
-          class="new-status-notification text-center panel-footer"
+          class="new-status-notification text-center"
         >
           <FAIcon
             icon="circle-notch"
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
new file mode 100644
index 00000000..2c5a67e2
--- /dev/null
+++ b/src/components/timeline/timeline.scss
@@ -0,0 +1,31 @@
+@import '../../_variables.scss';
+
+.Timeline {
+  .loadmore-text {
+    opacity: 1;
+  }
+
+  &.-blocked {
+    cursor: progress;
+  }
+
+  .timeline-heading {
+    max-width: 100%;
+    flex-wrap: nowrap;
+    align-items: center;
+    position: relative;
+
+    .loadmore-button {
+      flex-shrink: 0;
+    }
+
+    .loadmore-text {
+      flex-shrink: 0;
+      line-height: 1em;
+    }
+  }
+
+  .timeline-footer {
+    border: none;
+  }
+}
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 729c4c44..767428f0 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -87,32 +87,4 @@
 
 <script src="./timeline.js"></script>
 
-<style lang="scss">
-@import '../../_variables.scss';
-
-.Timeline {
-  .loadmore-text {
-    opacity: 1;
-  }
-
-  &.-blocked {
-    cursor: progress;
-  }
-}
-
-.timeline-heading {
-  max-width: 100%;
-  flex-wrap: nowrap;
-  align-items: center;
-  position: relative;
-
-  .loadmore-button {
-    flex-shrink: 0;
-  }
-
-  .loadmore-text {
-    flex-shrink: 0;
-    line-height: 1em;
-  }
-}
-</style>
+<style src="./timeline.scss" lang="scss"> </style>
-- 
cgit v1.2.3-70-g09d2