From 8131a5b330c6fb20ca9aa5cd1ba04c7f9ddc33d2 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 2 May 2023 14:47:04 +0200 Subject: [PATCH] Add ALT badges to media that has alternative text in web UI (#24782) --- .../mastodon/components/media_gallery.jsx | 57 +++++-------------- .../styles/mastodon/components.scss | 46 ++++++++------- 2 files changed, 41 insertions(+), 62 deletions(-) diff --git a/app/javascript/mastodon/components/media_gallery.jsx b/app/javascript/mastodon/components/media_gallery.jsx index 859d16a32f..54470f9402 100644 --- a/app/javascript/mastodon/components/media_gallery.jsx +++ b/app/javascript/mastodon/components/media_gallery.jsx @@ -81,12 +81,10 @@ class Item extends React.PureComponent { render () { const { attachment, lang, index, size, standalone, displayWidth, visible } = this.props; + let badges = [], thumbnail; + let width = 50; let height = 100; - let top = 'auto'; - let left = 'auto'; - let bottom = 'auto'; - let right = 'auto'; if (size === 1) { width = 100; @@ -96,45 +94,13 @@ class Item extends React.PureComponent { height = 50; } - if (size === 2) { - if (index === 0) { - right = '2px'; - } else { - left = '2px'; - } - } else if (size === 3) { - if (index === 0) { - right = '2px'; - } else if (index > 0) { - left = '2px'; - } - - if (index === 1) { - bottom = '2px'; - } else if (index > 1) { - top = '2px'; - } - } else if (size === 4) { - if (index === 0 || index === 2) { - right = '2px'; - } - - if (index === 1 || index === 3) { - left = '2px'; - } - - if (index < 2) { - bottom = '2px'; - } else { - top = '2px'; - } + if (attachment.get('description')?.length > 0) { + badges.push(ALT); } - let thumbnail = ''; - if (attachment.get('type') === 'unknown') { return ( -
+
GIF); + thumbnail = (
); } return ( -
+
+ {visible && thumbnail} + + {badges && ( +
+ {badges} +
+ )}
); } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 3710695e0b..ea92af1c3b 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -6330,30 +6330,25 @@ a.status-card.compact:hover { z-index: 9999; } -.media-gallery__gifv__label { - display: block; +.media-gallery__item__badges { position: absolute; - color: $primary-text-color; - background: rgba($base-overlay-background, 0.5); bottom: 6px; inset-inline-start: 6px; - padding: 2px 6px; - border-radius: 2px; - font-size: 11px; - font-weight: 600; - z-index: 1; - pointer-events: none; - opacity: 0.9; - transition: opacity 0.1s ease; - line-height: 18px; + display: flex; + gap: 2px; } -.media-gallery__gifv { - &:hover { - .media-gallery__gifv__label { - opacity: 1; - } - } +.media-gallery__gifv__label { + display: block; + color: $white; + background: rgba($black, 0.65); + padding: 2px 6px; + border-radius: 4px; + font-size: 11px; + font-weight: 700; + z-index: 1; + pointer-events: none; + line-height: 18px; } .attachment-list { @@ -6428,17 +6423,28 @@ a.status-card.compact:hover { position: relative; width: 100%; min-height: 64px; + display: grid; + grid-template-columns: 50% 50%; + grid-template-rows: 50% 50%; + gap: 2px; } .media-gallery__item { border: 0; box-sizing: border-box; display: block; - float: left; position: relative; border-radius: 4px; overflow: hidden; + &--tall { + grid-row: span 2; + } + + &--wide { + grid-column: span 2; + } + &.standalone { .media-gallery__item-gifv-thumbnail { transform: none;