Statuses collapse to value set?

Ember-ruby · Jun 30, 2024 · d6b090a · d6b090a
1 parent e662d4e
commit d6b090a
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 11 deletions.
diff --git a/app/javascript/flavours/blobfox/components/status.jsx b/app/javascript/flavours/blobfox/components/status.jsx
@@ -553,6 +553,7 @@ class Status extends ImmutablePureComponent {
     } = this.props;
     const { isCollapsed } = this.state;
     let background = null;
+    let collapsedHeight = null;
     let attachments = null;
 
     //  Depending on user settings, some media are considered as parts of the
@@ -636,6 +637,14 @@ class Status extends ImmutablePureComponent {
       background = status.getIn(['account', 'header']);
     }
 
+    collapsedHeight = (
+      settings.getIn(['collapsed', 'auto', 'height'])
+    )
+
+    if (status.get('media_attachments').size && !muted) {
+      collapsedHeight += 210;
+    }
+
     //  This handles our media attachments.
     //  If a media file is of unknwon type or if the status is muted
     //  (notification), we show a list of links instead of embedded media.
@@ -811,7 +820,7 @@ class Status extends ImmutablePureComponent {
       <HotKeys handlers={handlers}>
         <div
           className={computedClass}
-          style={isCollapsed && background ? { backgroundImage: `url(${background})` } : null}
+          style={isCollapsed && background ? { backgroundImage: `url(${background})`} : null}
           {...selectorAttribs}
           ref={handleRef}
           tabIndex={0}
@@ -846,6 +855,7 @@ class Status extends ImmutablePureComponent {
           </header>
           <StatusContent
             status={status}
+            style={isCollapsed ? { height: `${collapsedHeight}px`} : null}
             media={contentMedia}
             extraMedia={extraMedia}
             mediaIcons={contentMediaIcons}

diff --git a/app/javascript/flavours/blobfox/styles/components/status.scss b/app/javascript/flavours/blobfox/styles/components/status.scss
@@ -329,7 +329,7 @@
     }
 
     .status__content {
-      height: 20px;
+      height: 12em;
       overflow: hidden;
       text-overflow: ellipsis;
       padding-top: 0;
@@ -355,15 +355,15 @@
 
     &:focus > .status__content::after {
       background: linear-gradient(
-        rgba(lighten($ui-base-color, 4%), 0),
-        rgba(lighten($ui-base-color, 4%), 1)
+        rgba(lighten($ui-base-color, 4%), 0) 0.1em,
+        rgba(lighten($ui-base-color, 4%), 1) 4em
       );
     }
 
     &.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)
+        rgba(mix($ui-base-color, $ui-highlight-color, 95%), 0) 0.1em,
+        rgba(mix($ui-base-color, $ui-highlight-color, 95%), 1) 4em
       );
     }
 

diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -322,7 +322,7 @@
     }
 
     .status__content {
-      height: 20px;
+      height: 12em;
       overflow: hidden;
       text-overflow: ellipsis;
       padding-top: 0;
@@ -335,8 +335,8 @@
         inset-inline-start: 0;
         inset-inline-end: 0;
         background: linear-gradient(
-          rgba($ui-base-color, 0),
-          rgba($ui-base-color, 1)
+          rgba($ui-base-color, 0) 0.1em,
+          rgba($ui-base-color, 1) 4em
         );
         pointer-events: none;
       }
@@ -348,8 +348,8 @@
 
     &:focus > .status__content::after {
       background: linear-gradient(
-        rgba(lighten($ui-base-color, 4%), 0),
-        rgba(lighten($ui-base-color, 4%), 1)
+        rgba(lighten($ui-base-color, 4%), 0) 0.1em,
+        rgba(lighten($ui-base-color, 4%), 1) 4em
       );
     }