pleroma-fe

commit: 6d77bc2bd5e96ca213496b726afb3c821e4d4fd7
parent ce5552ae3c53b563126aae2c3c9b77a321880eed
Author: Henry Jameson <me@hjkos.com>
Date:   Thu,  7 Mar 2024 00:28:16 +0200

more transparent panels fixes

Diffstat:
M
src/components/button.style.js
4
++--
M
src/components/timeline/timeline.js
8
++++----
M
src/components/timeline/timeline.scss
7
++++++-
M
src/components/user_profile/user_profile.vue
2
++
M
src/panel.scss
2
+-

5 files changed, 15 insertions(+), 8 deletions(-)
diff --git a/src/components/button.style.js b/src/components/button.style.js
@@ -68,14 +68,14 @@ export default {
     {
       state: ['toggled'],
       directives: {
-        background: '--inheritedBackground,-24.2',
+        background: '--inheritedBackground,-14.2',
         shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
       }
     },
     {
       state: ['toggled', 'hover'],
       directives: {
-        background: '--inheritedBackground,-24.2',
+        background: '--inheritedBackground,-14.2',
         shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
       }
     },
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
@@ -77,13 +77,13 @@ const Timeline = {
       }
     },
     classes () {
-      let rootClasses = !this.embedded ? ['panel', 'panel-default'] : ['-nonpanel']
+      let rootClasses = !this.embedded ? ['panel', 'panel-default'] : ['-embedded']
       if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
       return {
         root: rootClasses,
-        header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading', '-sticky'] : []),
-        body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
-        footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
+        header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading', '-sticky'] : ['panel-body']),
+        body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : ['panel-body']),
+        footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : ['panel-body'])
       }
     },
     // id map of statuses which need to be hidden in the main list due to pinning logic
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
@@ -29,12 +29,17 @@
     z-index: 2;
   }
 
-  &.-nonpanel {
+  &.-embedded {
     .timeline-heading {
       text-align: center;
       line-height: 2.75em;
       padding: 0 0.5em;
 
+      // Override the shrug empty filler
+      &:empty::before {
+        content: initial;
+      }
+
       .button-default,
       .alert {
         line-height: 2em;
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
@@ -74,6 +74,7 @@
         <div
           v-if="followsTabVisible"
           key="followees"
+          class="panel-body"
           :label="$t('user_card.followees')"
           :disabled="!user.friends_count"
         >
@@ -88,6 +89,7 @@
         </div>
         <div
           v-if="followersTabVisible"
+          class="panel-body"
           key="followers"
           :label="$t('user_card.followers')"
           :disabled="!user.followers_count"
diff --git a/src/panel.scss b/src/panel.scss
@@ -37,7 +37,7 @@
   &:empty::before {
     content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
     display: block;
-    margin: 1em;
+    padding: 1em;
     text-align: center;
   }