feat: multiline alt text (#1765)

aeharding · Dec 4, 2024 · ad3e89a · ad3e89a
1 parent 0857625
commit ad3e89a
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 6 deletions.
diff --git a/src/core/globalCssOverrides.css b/src/core/globalCssOverrides.css
@@ -124,6 +124,11 @@ ion-alert.preserve-newlines {
   display: none;
 }
 
+.pswp__hide-on-close {
+  /* Photoswipe `will-change: opacity` breaks alt text backdrop-filter (when opened) */
+  will-change: auto !important;
+}
+
 ion-action-sheet .detail::before {
   content: "";
   z-index: 1;

diff --git a/src/features/media/gallery/actions/AltText.module.css b/src/features/media/gallery/actions/AltText.module.css
@@ -2,6 +2,12 @@
   max-width: 600px;
   width: 100%;
 
+  margin-top: calc(
+    var(--ion-safe-area-top, env(safe-area-inset-top, 0)) + 50px
+  );
+
+  overflow-y: auto;
+
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -46,6 +52,8 @@
   line-height: 1.2;
 
   position: relative;
+
+  white-space: pre-wrap;
 }
 
 .clamped {
@@ -57,4 +65,6 @@
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
+
+  white-space: initial;
 }
diff --git a/src/features/media/gallery/actions/AltText.tsx b/src/features/media/gallery/actions/AltText.tsx
@@ -14,7 +14,7 @@ export default function AltText({ alt }: AltTextProps) {
   if (!alt) return;
 
   return (
-    <div className={styles.container}>
+    <div className={cx("alt-text", styles.container)}>
       <div
         className={styles.text}
         onClick={() => setShouldClampAltText((v) => !v)}

diff --git a/src/features/media/gallery/actions/ImageMoreActions.tsx b/src/features/media/gallery/actions/ImageMoreActions.tsx
@@ -25,7 +25,7 @@ export default function ImageMoreActions({
       {alt && (
         <BottomContainer>
           <AltText alt={alt} />
-          <BottomContainerActions withBg={false} />
+          <BottomContainerActions withBg={!!alt} />
         </BottomContainer>
       )}
     </>

diff --git a/src/features/media/gallery/actions/shared.module.css b/src/features/media/gallery/actions/shared.module.css
@@ -4,18 +4,22 @@
   right: 0;
   left: 0;
 
+  max-height: 100%;
+
   display: flex;
   flex-direction: column;
   align-items: center;
 
-  --topPadding: 4rem;
+  > *:not(.bottomContainerActions) {
+    position: relative;
+    z-index: 1;
+  }
 }
 
 .bottomContainerActions {
   width: 100%;
 
   padding: 1rem;
-  padding-top: var(--topPadding);
   padding-bottom: calc(
     1rem + var(--ion-safe-area-bottom, env(safe-area-inset-bottom, 0))
   );
@@ -30,5 +34,19 @@
 }
 
 .withBg {
-  background: linear-gradient(0deg, rgba(0, 0, 0, 1), transparent);
+  &:after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+
+    background: linear-gradient(0deg, rgba(0, 0, 0, 1), transparent);
+  }
+
+  > * {
+    position: relative;
+    z-index: 1;
+  }
 }
diff --git a/src/features/post/new/PostEditorRoot.tsx b/src/features/post/new/PostEditorRoot.tsx
@@ -339,9 +339,11 @@ export default function PostEditorRoot({
       message: "Add an accessible caption",
       inputs: [
         {
+          type: "textarea",
           value: altText,
-          placeholder: "Fluffy fur blankets the feline...",
+          placeholder: "Fluffy fur blankets the feline",
           name: "altText",
+          attributes: { rows: 3 },
         },
       ],
       buttons: [