From fe0678b4cb79f275c915a9ece07b319bbbfc8f11 Mon Sep 17 00:00:00 2001
From: Keyan <34140557+huumn@users.noreply.github.com>
Date: Wed, 11 Sep 2024 20:10:52 -0500
Subject: [PATCH] css to put adjacent images/video into vertical alignment
(#1387)
* css to put adjacent images/video into vertical alignment
* fix grids chrome
* even grid gap with safari support
* fixes for video and horizontal scroll
---
components/text.js | 3 ++-
components/text.module.css | 52 +++++++++++++++++++++++++++++++++++---
2 files changed, 50 insertions(+), 5 deletions(-)
diff --git a/components/text.js b/components/text.js
index f5c2b1a5..1dc2ef5d 100644
--- a/components/text.js
+++ b/components/text.js
@@ -22,6 +22,7 @@ import { UNKNOWN_LINK_REL } from '@/lib/constants'
import isEqual from 'lodash/isEqual'
import UserPopover from './user-popover'
import ItemPopover from './item-popover'
+import classNames from 'classnames'
// Explicitely defined start/end tags & which CSS class from text.module.css to apply
export const rehypeSuperscript = () => rehypeStyler('', '', styles.superscript)
@@ -264,7 +265,7 @@ export default memo(function Text ({ rel, imgproxyUrls, children, tab, itemId, o
const rehypePlugins = useMemo(() => [rehypeInlineCodeProperty, rehypeSuperscript, rehypeSubscript], [])
return (
-
+
.mediaContainer:only-child) ~ .p:has(> .mediaContainer:only-child) {
+ display: inline-block;
+ width: min-content;
+ max-width: calc(100% - var(--grid-gap));
+ margin-bottom: 0;
+}
+
+.mediaContainer ~ .mediaContainer {
+ display: inline-block;
+ width: min-content;
+ margin-right: var(--grid-gap);
+}
+
+.p:has(> .mediaContainer:only-child) ~ .p:has(> .mediaContainer:only-child) > .mediaContainer:only-child {
+ margin-right: var(--grid-gap);
+}
+
+.p:has(> .mediaContainer:only-child):has(+ .p > .mediaContainer:only-child) {
+ display: inline-block;
+ width: min-content;
+ max-width: calc(100% - var(--grid-gap));
+ margin-bottom: 0;
+}
+
+.p:has(> .mediaContainer:only-child):has(+ .p > .mediaContainer:only-child) > .mediaContainer:only-child {
+ margin-right: var(--grid-gap);
+}
+
+.mediaContainer:has(+ .mediaContainer) {
+ display: inline-block;
+ width: min-content;
+ margin-right: var(--grid-gap);
+}
+
+.mediaContainer:first-child:has(+ .mediaContainer) {
+ margin-top: var(--grid-gap);
+}
+
.mediaContainer img, .mediaContainer video {
display: block;
object-fit: contain;
@@ -146,6 +190,7 @@
max-height: inherit;
height: 100%;
aspect-ratio: var(--aspect-ratio);
+ block-size: stretch;
}
.mediaContainer img {
@@ -155,7 +200,6 @@
}
.mediaContainer.topLevel {
- margin-top: .75rem;
margin-bottom: .75rem;
max-height: 35vh;
}
@@ -190,7 +234,7 @@ img.fullScreen {
margin-bottom: 0;
}
-.text li+li {
+.text li {
margin-top: .25rem;
}