about summary refs log tree commit diff
path: root/app/javascript
diff options
context:
space:
mode:
authormultiple creatures <dev@multiple-creature.party>2019-03-09 07:57:02 +0000
committermultiple creatures <dev@multiple-creature.party>2019-05-21 03:16:21 -0500
commitff02142601b18ad69ea0a33d26f5133c63d24211 (patch)
treeee8b7aa93a8fc062bb1b0084027687a948f06234 /app/javascript
parent467170f4a095c5c794ae4d8f46b5d57205590013 (diff)
show captions for media descriptions
Diffstat (limited to 'app/javascript')
-rw-r--r--app/javascript/flavours/glitch/components/media_gallery.js34
1 files changed, 24 insertions, 10 deletions
diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js
index 194800d52..3478766d2 100644
--- a/app/javascript/flavours/glitch/components/media_gallery.js
+++ b/app/javascript/flavours/glitch/components/media_gallery.js
@@ -354,19 +354,33 @@ export default class MediaGallery extends React.PureComponent {
       );
     }
 
+    let descriptions;
+    descriptions = media.take(4).map(
+      (attachment, i) => {
+        if (attachment.get('description'))
+          return <p className='media-spoiler__trigger'>Attachment {1+i}: {attachment.get('description')}</p>
+      }
+    );
+
     return (
-      <div className={computedClass} style={style} ref={this.handleRef}>
-        <div className={classNames('spoiler-button', { 'spoiler-button--minified': visible })}>
-          {spoilerButton}
-          {visible && sensitive && (
-            <span className='sensitive-marker'>
-              <FormattedMessage {...messages.sensitive} />
-            </span>
-          )}
+      <React.Fragment>
+        <div className={computedClass} style={style} ref={this.handleRef}>
+          <div className={classNames('spoiler-button', { 'spoiler-button--minified': visible })}>
+            {spoilerButton}
+            {visible && sensitive && (
+              <span className='sensitive-marker'>
+                <FormattedMessage {...messages.sensitive} />
+              </span>
+            )}
+          </div>
+
+          {children}
         </div>
 
-        {children}
-      </div>
+        <div className='status__content' tabIndex='0'>
+          {descriptions}
+        </div>
+      </React.Fragment>
     );
   }