ekzyis
/
stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
Keyan 2024-09-11 20:10:52 -05:00 committed by GitHub
parent 0e0fe1af69
commit fe0678b4cb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 50 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/text.js
View File

@ -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('<sup>', '</sup>', styles.superscript)
@ -264,7 +265,7 @@ export default memo(function Text ({ rel, imgproxyUrls, children, tab, itemId, o
const rehypePlugins = useMemo(() => [rehypeInlineCodeProperty, rehypeSuperscript, rehypeSubscript], [])
return (
<div className={`${styles.text} ${show ? styles.textUncontained : overflowing ? styles.textContained : ''}`} ref={containerRef}>
<div className={classNames(styles.text, topLevel && styles.topLevel, show ? styles.textUncontained : overflowing && styles.textContained)} ref={containerRef}>
<ReactMarkdown
components={components}
remarkPlugins={remarkPlugins}

52
components/text.module.css
View File

@ -106,6 +106,12 @@
margin-bottom: .5rem;
white-space: pre-wrap;
word-break: break-word;
--grid-gap: 0.5rem;
}
.text.topLevel .p {
margin-bottom: 0.75rem;
--grid-gap: 0.75rem;
}
.text pre {
@ -130,15 +136,53 @@
.mediaContainer {
display: block;
margin-top: .5rem;
margin-bottom: .5rem;
width: 100%;
width: calc(100% - var(--grid-gap));
max-width: calc(100% - var(--grid-gap));
height: auto;
overflow: hidden;
max-height: 25vh;
aspect-ratio: var(--aspect-ratio);
}
.p:has(> .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;
}