From ce6ce4b6cdd3aea2712ce73c0b0fd9d64372ac8e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Sep 2022 11:52:48 +0300
Subject: minor improvements

---
 src/panel.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src/panel.scss')

diff --git a/src/panel.scss b/src/panel.scss
index 2e769e27..b5ef67e9 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -45,6 +45,7 @@
 .panel-heading,
 .panel-footer {
   --panel-heading-height-padding: 0.6em;
+  --__panel-heading-gap: 0.5em;
   --__panel-heading-height: 3.2em;
   --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));
 
@@ -54,7 +55,7 @@
   grid-auto-flow: column;
   grid-template-columns: minmax(50%, 1fr);
   grid-auto-columns: auto;
-  grid-column-gap: 0.5em;
+  grid-column-gap: var(--__panel-heading-gap);
   flex: none;
   background-size: cover;
   padding: var(--panel-heading-height-padding);
-- 
cgit v1.2.3-70-g09d2


From 0331e42ee8576893dab2c6319ee5c0d62895b8d8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 9 Oct 2022 18:50:13 +0300
Subject: move definitions for timeline header buttons to Panel.scss, now
 called rightside buttons

---
 src/components/conversation/conversation.vue    |  2 ++
 src/components/notifications/notifications.scss | 21 ----------------
 src/components/notifications/notifications.vue  |  4 ++--
 src/components/timeline/timeline.scss           | 32 -------------------------
 src/components/timeline/timeline.vue            | 10 ++++----
 src/panel.scss                                  | 32 +++++++++++++++++++++++++
 6 files changed, 41 insertions(+), 60 deletions(-)

(limited to 'src/panel.scss')

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 61832566..3752e3c1 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -20,10 +20,12 @@
       <QuickFilterSettings
         v-if="!collapsable"
         :conversation="true"
+        class="rightside-button"
       />
       <QuickViewSettings
         v-if="!collapsable"
         :conversation="true"
+        class="rightside-button"
       />
     </div>
     <div class="conversation-body panel-body">
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 245e3f47..f71f9b76 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -29,27 +29,6 @@
       }
     }
   }
-
-  .timeline-header-button {
-    align-self: stretch;
-    text-align: center;
-    width: var(--__panel-heading-height);
-    height: var(--__panel-heading-height);
-    margin: calc(-1 * var(--panel-heading-height-padding)) 0;
-    margin-right: calc(-1 * var(--__panel-heading-gap));
-
-    > button {
-      box-sizing: border-box;
-      padding: calc(1 * var(--panel-heading-height-padding)) 0;
-      height: 100%;
-      width: 100%;
-      text-align: center;
-
-      svg {
-        font-size: 1.2em;
-      }
-    }
-  }
 }
 
 .notification {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 22f67e65..3f4b1b42 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -21,7 +21,7 @@
             >{{ unseenCount }}</span>
           </div>
           <div
-            class="timeline-header-button"
+            class="rightside-button"
             v-if="showScrollTop"
           >
             <button
@@ -46,7 +46,7 @@
           >
             {{ $t('notifications.read') }}
           </button>
-          <NotificationFilters class="timeline-header-button" />
+          <NotificationFilters class="rightside-button" />
         </div>
         <div class="panel-body">
           <div
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index f5dbb639..900bdad3 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -13,38 +13,6 @@
     background-color: var(--cGreen);
   }
 
-  .timeline-header-button {
-    align-self: stretch;
-    text-align: center;
-    width: var(--__panel-heading-height);
-    height: var(--__panel-heading-height);
-    margin: calc(-1 * var(--panel-heading-height-padding)) 0;
-    margin-right: calc(-1 * var(--__panel-heading-gap));
-
-    > button {
-      box-sizing: border-box;
-      padding: calc(1 * var(--panel-heading-height-padding)) 0;
-      height: 100%;
-      width: 100%;
-      text-align: center;
-
-      svg {
-        font-size: 1.2em;
-      }
-    }
-  }
-
-  .timeline-header-icon {
-    align-self: stretch;
-    text-align: center;
-    width: var(--__panel-heading-height);
-    margin-right: calc(-1 * var(--__panel-heading-gap));
-
-    svg {
-      font-size: 1.2em;
-    }
-  }
-
   .loadmore-button {
     position: relative
   }
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 15d097e8..77480345 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -6,7 +6,7 @@
         :timeline-name="timelineName"
       />
       <div
-        class="timeline-header-button"
+        class="rightside-button"
         v-if="showScrollTop && !embedded"
       >
         <button
@@ -25,7 +25,7 @@
       </div>
       <template v-if="mobileLayout && !embedded">
         <div
-          class="timeline-header-button"
+          class="rightside-button"
           v-if="showLoadButton"
         >
           <button
@@ -41,7 +41,7 @@
         </div>
         <div
           v-else-if="!embedded"
-          class="loadmore-text faint veryfaint timeline-header-icon"
+          class="loadmore-text faint veryfaint rightside-icon"
           @click.prevent
         >
           <FAIcon
@@ -66,8 +66,8 @@
           {{ $t('timeline.up_to_date') }}
         </div>
       </template>
-      <QuickFilterSettings v-if="!embedded" class="timeline-header-button"/>
-      <QuickViewSettings v-if="!embedded" class="timeline-header-button"/>
+      <QuickFilterSettings v-if="!embedded" class="rightside-button"/>
+      <QuickViewSettings v-if="!embedded" class="rightside-button"/>
     </div>
     <div :class="classes.body">
       <div
diff --git a/src/panel.scss b/src/panel.scss
index b5ef67e9..a53e47c6 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -196,6 +196,38 @@
       }
     }
   }
+
+  .rightside-button {
+    align-self: stretch;
+    text-align: center;
+    width: var(--__panel-heading-height);
+    height: var(--__panel-heading-height);
+    margin: calc(-1 * var(--panel-heading-height-padding)) 0;
+    margin-right: calc(-1 * var(--__panel-heading-gap));
+
+    > button {
+      box-sizing: border-box;
+      padding: calc(1 * var(--panel-heading-height-padding)) 0;
+      height: 100%;
+      width: 100%;
+      text-align: center;
+
+      svg {
+        font-size: 1.2em;
+      }
+    }
+  }
+
+  .rightside-icon {
+    align-self: stretch;
+    text-align: center;
+    width: var(--__panel-heading-height);
+    margin-right: calc(-1 * var(--__panel-heading-gap));
+
+    svg {
+      font-size: 1.2em;
+    }
+  }
 }
 
 .panel-footer {
-- 
cgit v1.2.3-70-g09d2