fix(collapsing): fix and simplify post collapsing CSS (glitch-soc#2757)

dftba-club · Jul 3, 2024 · 57596af · 57596af
1 parent c47378f
commit 57596af
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 61 deletions.
diff --git a/app/javascript/flavours/glitch/components/status.jsx b/app/javascript/flavours/glitch/components/status.jsx
@@ -802,7 +802,7 @@ class Status extends ImmutablePureComponent {
           {prepend}
 
           <div
-            className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), 'status--in-thread': !!rootId, 'status--first-in-thread': previousId && (!connectUp || connectToRoot), muted: this.props.muted, 'has-background': isCollapsed && background, collapsed: isCollapsed })}
+            className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), 'status--in-thread': !!rootId, 'status--first-in-thread': previousId && (!connectUp || connectToRoot), muted: this.props.muted, 'has-background': isCollapsed && background })}
             data-id={status.get('id')}
             style={isCollapsed && background ? { backgroundImage: `url(${background})` } : null}
           >

diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
@@ -1541,74 +1541,49 @@ body > [data-popper-placement] {
       }
     }
   }
+}
 
-  &.collapsed {
+.status__wrapper.collapsed {
+  .status {
     background-position: center;
     background-size: cover;
     user-select: none;
     min-height: 0;
+  }
 
-    &.has-background::before {
-      display: block;
-      position: absolute;
-      inset-inline-start: 0;
-      inset-inline-end: 0;
-      top: 0;
-      bottom: 0;
-      background-image: linear-gradient(
-        to bottom,
-        rgba($base-shadow-color, 0.75),
-        rgba($base-shadow-color, 0.65) 24px,
-        rgba($base-shadow-color, 0.8)
-      );
-      pointer-events: none;
-      content: '';
-    }
-
-    .display-name:hover .display-name__html {
-      text-decoration: none;
-    }
-
-    .status__content {
-      height: 20px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      padding-top: 0;
-
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        inset-inline-start: 0;
-        inset-inline-end: 0;
-        background: linear-gradient(transparent, var(--background-color));
-        pointer-events: none;
-      }
+  &.has-background::before {
+    display: block;
+    position: absolute;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    top: 0;
+    bottom: 0;
+    background-image: linear-gradient(
+      to bottom,
+      rgba($base-shadow-color, 0.75),
+      rgba($base-shadow-color, 0.65) 24px,
+      rgba($base-shadow-color, 0.8)
+    );
+    pointer-events: none;
+    content: '';
+  }
 
-      a:hover {
-        text-decoration: none;
-      }
-    }
+  .display-name:hover .display-name__html {
+    text-decoration: none;
+  }
 
-    &:focus > .status__content::after {
-      background: linear-gradient(
-        rgba(lighten($ui-base-color, 4%), 0),
-        rgba(lighten($ui-base-color, 4%), 1)
-      );
-    }
+  .status__content {
+    height: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-top: 0;
+    mask-image: linear-gradient(rgb(0 0 0 / 100%), transparent);
 
-    // TODO: review
-    &.status-direct > .status__content::after {
-      background: linear-gradient(
-        rgba(mix($ui-base-color, $ui-highlight-color, 95%), 0),
-        rgba(mix($ui-base-color, $ui-highlight-color, 95%), 1)
-      );
+    a:hover {
+      text-decoration: none;
     }
   }
-}
 
-.status__wrapper.collapsed {
   .notification__message {
     margin-bottom: 0;
     white-space: nowrap;
@@ -1819,10 +1794,6 @@ body > [data-popper-placement] {
 .status__wrapper-direct {
   background: rgba($ui-highlight-color, 0.05);
 
-  &:focus {
-    background: rgba($ui-highlight-color, 0.05);
-  }
-
   .status__prepend {
     color: $highlight-text-color;
   }