Merge branch 'upstream'
This commit is contained in:
commit
3a8c13feac
|
@ -16,7 +16,7 @@
|
||||||
|
|
||||||
src = lib.cleanSource ./.;
|
src = lib.cleanSource ./.;
|
||||||
|
|
||||||
npmDepsHash = "sha256-gkB7eb9/B3T5fNlF333CqRX8xh9a5EeOHOjlnIaf/Rw=";
|
npmDepsHash = "sha256-cgPhN3hlVob1V4cBQohfLykHqVCHcLOdGv+g5QC19Uc=";
|
||||||
# npmDepsHash = lib.fakeHash;
|
# npmDepsHash = lib.fakeHash;
|
||||||
|
|
||||||
# DTTH-specific env variables
|
# DTTH-specific env variables
|
||||||
|
|
870
package-lock.json
generated
870
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -42,12 +42,12 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@preact/preset-vite": "~2.5.0",
|
"@preact/preset-vite": "~2.5.0",
|
||||||
"@trivago/prettier-plugin-sort-imports": "~4.1.1",
|
"@trivago/prettier-plugin-sort-imports": "~4.2.0",
|
||||||
"postcss": "~8.4.26",
|
"postcss": "~8.4.27",
|
||||||
"postcss-dark-theme-class": "~0.7.3",
|
"postcss-dark-theme-class": "~0.7.3",
|
||||||
"postcss-preset-env": "~9.0.0",
|
"postcss-preset-env": "~9.1.0",
|
||||||
"twitter-text": "~3.1.0",
|
"twitter-text": "~3.1.0",
|
||||||
"vite": "~4.4.4",
|
"vite": "~4.4.7",
|
||||||
"vite-plugin-generate-file": "~0.0.4",
|
"vite-plugin-generate-file": "~0.0.4",
|
||||||
"vite-plugin-html-config": "~1.0.11",
|
"vite-plugin-html-config": "~1.0.11",
|
||||||
"vite-plugin-pwa": "~0.16.4",
|
"vite-plugin-pwa": "~0.16.4",
|
||||||
|
|
41
src/app.css
41
src/app.css
|
@ -264,7 +264,9 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
||||||
.timeline.contextual > li.descendant {
|
.timeline.contextual > li.descendant {
|
||||||
padding-bottom: 1em;
|
padding-bottom: 1em;
|
||||||
}
|
}
|
||||||
.timeline.contextual > li.descendant:not(.thread) > .status-link {
|
.timeline.contextual
|
||||||
|
> li.descendant:not(.thread)
|
||||||
|
> :is(.status-link, .status-focus) {
|
||||||
padding-left: 40px;
|
padding-left: 40px;
|
||||||
}
|
}
|
||||||
.timeline.contextual .replies[data-scroll-left]:not([data-scroll-left='0']) {
|
.timeline.contextual .replies[data-scroll-left]:not([data-scroll-left='0']) {
|
||||||
|
@ -292,7 +294,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
||||||
}
|
}
|
||||||
.timeline.contextual
|
.timeline.contextual
|
||||||
> li.descendant.thread
|
> li.descendant.thread
|
||||||
> .status-link
|
> :is(.status-link, .status-focus)
|
||||||
+ .replies
|
+ .replies
|
||||||
.replies-summary {
|
.replies-summary {
|
||||||
margin-left: calc(
|
margin-left: calc(
|
||||||
|
@ -325,9 +327,9 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
||||||
} */
|
} */
|
||||||
.timeline.contextual
|
.timeline.contextual
|
||||||
> li.descendant.thread
|
> li.descendant.thread
|
||||||
> .status-link
|
> :is(.status-link, .status-focus)
|
||||||
+ .replies
|
+ .replies
|
||||||
.status-link {
|
:is(.status-link, .status-focus) {
|
||||||
padding-left: calc(
|
padding-left: calc(
|
||||||
var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
|
var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
|
||||||
(var(--line-margin-end) * (var(--comments-level) - 1))
|
(var(--line-margin-end) * (var(--comments-level) - 1))
|
||||||
|
@ -358,7 +360,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
||||||
} */
|
} */
|
||||||
.timeline.contextual
|
.timeline.contextual
|
||||||
> li.descendant:not(.thread)
|
> li.descendant:not(.thread)
|
||||||
> .status-link
|
> :is(.status-link, .status-focus)
|
||||||
+ .replies
|
+ .replies
|
||||||
.replies-summary {
|
.replies-summary {
|
||||||
margin-left: calc(
|
margin-left: calc(
|
||||||
|
@ -388,9 +390,9 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
||||||
} */
|
} */
|
||||||
.timeline.contextual
|
.timeline.contextual
|
||||||
> li.descendant:not(.thread)
|
> li.descendant:not(.thread)
|
||||||
> .status-link
|
> :is(.status-link, .status-focus)
|
||||||
+ .replies
|
+ .replies
|
||||||
.status-link {
|
:is(.status-link, .status-focus) {
|
||||||
padding-left: calc(
|
padding-left: calc(
|
||||||
var(--thread-start) + var(--line-margin-end) * var(--comments-level)
|
var(--thread-start) + var(--line-margin-end) * var(--comments-level)
|
||||||
);
|
);
|
||||||
|
@ -437,7 +439,10 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
||||||
var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end)
|
var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
.timeline.contextual > li.thread > .status-link .replies-link {
|
.timeline.contextual
|
||||||
|
> li.thread
|
||||||
|
> :is(.status-link, .status-focus)
|
||||||
|
.replies-link {
|
||||||
margin-left: calc(
|
margin-left: calc(
|
||||||
var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end)
|
var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end)
|
||||||
);
|
);
|
||||||
|
@ -654,7 +659,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
||||||
}
|
}
|
||||||
.timeline:not(.flat)
|
.timeline:not(.flat)
|
||||||
> li.timeline-item-diff-author
|
> li.timeline-item-diff-author
|
||||||
> .status-link
|
> :is(.status-link, .status-focus)
|
||||||
> .status
|
> .status
|
||||||
> a
|
> a
|
||||||
> .avatar {
|
> .avatar {
|
||||||
|
@ -712,6 +717,14 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
|
||||||
animation: appear 0.2s ease-out;
|
animation: appear 0.2s ease-out;
|
||||||
-webkit-touch-callout: none;
|
-webkit-touch-callout: none;
|
||||||
}
|
}
|
||||||
|
@media (pointer: coarse) {
|
||||||
|
.status-focus:not(.hero .status-focus) {
|
||||||
|
/* Only the hero doesn't have context menu */
|
||||||
|
user-select: none;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
:is(.status-link, .status-focus):is(:focus, .is-active) {
|
:is(.status-link, .status-focus):is(:focus, .is-active) {
|
||||||
background-color: var(--link-bg-hover-color);
|
background-color: var(--link-bg-hover-color);
|
||||||
outline-offset: -2px;
|
outline-offset: -2px;
|
||||||
|
@ -2000,7 +2013,7 @@ ul.link-list li a .icon {
|
||||||
transform: none;
|
transform: none;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
#columns li:has(.status-carousel) {
|
#columns li.timeline-item-carousel {
|
||||||
width: auto;
|
width: auto;
|
||||||
transform: none;
|
transform: none;
|
||||||
}
|
}
|
||||||
|
@ -2066,6 +2079,12 @@ ul.link-list li a .icon {
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* NOTIFICATION PEEK */
|
||||||
|
|
||||||
|
.notification-peek .notification {
|
||||||
|
padding-inline: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* OTHERS */
|
/* OTHERS */
|
||||||
|
|
||||||
@media (min-width: 40em) {
|
@media (min-width: 40em) {
|
||||||
|
@ -2159,7 +2178,7 @@ ul.link-list li a .icon {
|
||||||
/* :is(.carousel-top-controls, .carousel-controls) {
|
/* :is(.carousel-top-controls, .carousel-controls) {
|
||||||
padding: 32px;
|
padding: 32px;
|
||||||
} */
|
} */
|
||||||
li:has(.status-carousel) {
|
li.timeline-item-carousel {
|
||||||
width: 95vw;
|
width: 95vw;
|
||||||
max-width: calc(320px * 3.3);
|
max-width: calc(320px * 3.3);
|
||||||
transform: translateX(calc(-50% + 20em));
|
transform: translateX(calc(-50% + 20em));
|
||||||
|
|
|
@ -116,6 +116,13 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
|
||||||
if (smaller) setImageSmallerThanParent(smaller);
|
if (smaller) setImageSmallerThanParent(smaller);
|
||||||
}, [width, height]);
|
}, [width, height]);
|
||||||
|
|
||||||
|
const mediaStyles = {
|
||||||
|
'--width': `${width}px`,
|
||||||
|
'--height': `${height}px`,
|
||||||
|
aspectRatio: `${width} / ${height}`,
|
||||||
|
};
|
||||||
|
const fixedWidth = width > height * 2;
|
||||||
|
|
||||||
if (isImage) {
|
if (isImage) {
|
||||||
// Note: type: unknown might not have width/height
|
// Note: type: unknown might not have width/height
|
||||||
quickPinchZoomProps.containerProps.style.display = 'inherit';
|
quickPinchZoomProps.containerProps.style.display = 'inherit';
|
||||||
|
@ -136,15 +143,18 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
|
||||||
return (
|
return (
|
||||||
<Parent
|
<Parent
|
||||||
ref={parentRef}
|
ref={parentRef}
|
||||||
class={`media media-image`}
|
class={`media media-image ${fixedWidth ? 'media-fixed-width' : ''}`}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
|
data-orientation={orientation}
|
||||||
style={
|
style={
|
||||||
showOriginal && {
|
showOriginal
|
||||||
backgroundImage: `url(${previewUrl})`,
|
? {
|
||||||
backgroundSize: imageSmallerThanParent
|
backgroundImage: `url(${previewUrl})`,
|
||||||
? `${width}px ${height}px`
|
backgroundSize: imageSmallerThanParent
|
||||||
: undefined,
|
? `${width}px ${height}px`
|
||||||
}
|
: undefined,
|
||||||
|
}
|
||||||
|
: mediaStyles
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{showOriginal ? (
|
{showOriginal ? (
|
||||||
|
@ -183,6 +193,13 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
|
||||||
backgroundColor:
|
backgroundColor:
|
||||||
rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
|
rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
|
||||||
backgroundPosition: focalBackgroundPosition || 'center',
|
backgroundPosition: focalBackgroundPosition || 'center',
|
||||||
|
// Duration based on width or height in pixels
|
||||||
|
// 100px per second (rough estimate)
|
||||||
|
// Clamp between 5s and 120s
|
||||||
|
'--anim-duration': `${Math.min(
|
||||||
|
Math.max(Math.max(width, height) / 100, 5),
|
||||||
|
120,
|
||||||
|
)}s`,
|
||||||
}}
|
}}
|
||||||
onLoad={(e) => {
|
onLoad={(e) => {
|
||||||
e.target.closest('.media-image').style.backgroundImage = '';
|
e.target.closest('.media-image').style.backgroundImage = '';
|
||||||
|
@ -228,13 +245,15 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
|
||||||
<Parent
|
<Parent
|
||||||
class={`media media-${isGIF ? 'gif' : 'video'} ${
|
class={`media media-${isGIF ? 'gif' : 'video'} ${
|
||||||
autoGIFAnimate ? 'media-contain' : ''
|
autoGIFAnimate ? 'media-contain' : ''
|
||||||
}`}
|
} ${fixedWidth ? 'media-fixed-width' : ''}`}
|
||||||
|
data-orientation={orientation}
|
||||||
data-formatted-duration={formattedDuration}
|
data-formatted-duration={formattedDuration}
|
||||||
data-label={isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : ''}
|
data-label={isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : ''}
|
||||||
// style={{
|
// style={{
|
||||||
// backgroundColor:
|
// backgroundColor:
|
||||||
// rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
|
// rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
|
||||||
// }}
|
// }}
|
||||||
|
style={!showOriginal && mediaStyles}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
if (hoverAnimate) {
|
if (hoverAnimate) {
|
||||||
try {
|
try {
|
||||||
|
@ -314,6 +333,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
|
||||||
class="media media-audio"
|
class="media media-audio"
|
||||||
data-formatted-duration={formattedDuration}
|
data-formatted-duration={formattedDuration}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
|
style={!showOriginal && mediaStyles}
|
||||||
>
|
>
|
||||||
{showOriginal ? (
|
{showOriginal ? (
|
||||||
<audio src={remoteUrl || url} preload="none" controls autoplay />
|
<audio src={remoteUrl || url} preload="none" controls autoplay />
|
||||||
|
|
|
@ -196,44 +196,43 @@ export default function Poll({
|
||||||
)}
|
)}
|
||||||
</form>
|
</form>
|
||||||
)}
|
)}
|
||||||
{!readOnly && (
|
<p class="poll-meta">
|
||||||
<p class="poll-meta">
|
{!expired && !readOnly && (
|
||||||
{!expired && (
|
<>
|
||||||
<>
|
<button
|
||||||
<button
|
type="button"
|
||||||
type="button"
|
class="textual"
|
||||||
class="textual"
|
disabled={uiState === 'loading'}
|
||||||
disabled={uiState === 'loading'}
|
onClick={(e) => {
|
||||||
onClick={(e) => {
|
e.preventDefault();
|
||||||
e.preventDefault();
|
setUIState('loading');
|
||||||
setUIState('loading');
|
|
||||||
|
|
||||||
(async () => {
|
(async () => {
|
||||||
await refresh();
|
await refresh();
|
||||||
setUIState('default');
|
setUIState('default');
|
||||||
})();
|
})();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Refresh
|
Refresh
|
||||||
</button>{' '}
|
</button>{' '}
|
||||||
•{' '}
|
•{' '}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<span title={votesCount}>{shortenNumber(votesCount)}</span> vote
|
<span title={votesCount}>{shortenNumber(votesCount)}</span> vote
|
||||||
{votesCount === 1 ? '' : 's'}
|
{votesCount === 1 ? '' : 's'}
|
||||||
{!!votersCount && votersCount !== votesCount && (
|
{!!votersCount && votersCount !== votesCount && (
|
||||||
<>
|
<>
|
||||||
{' '}
|
{' '}
|
||||||
•{' '}
|
• <span title={votersCount}>
|
||||||
<span title={votersCount}>{shortenNumber(votersCount)}</span>{' '}
|
{shortenNumber(votersCount)}
|
||||||
voter
|
</span>{' '}
|
||||||
{votersCount === 1 ? '' : 's'}
|
voter
|
||||||
</>
|
{votersCount === 1 ? '' : 's'}
|
||||||
)}{' '}
|
</>
|
||||||
• {expired ? 'Ended' : 'Ending'}{' '}
|
)}{' '}
|
||||||
{!!expiresAtDate && <RelativeTime datetime={expiresAtDate} />}
|
• {expired ? 'Ended' : 'Ending'}{' '}
|
||||||
</p>
|
{!!expiresAtDate && <RelativeTime datetime={expiresAtDate} />}
|
||||||
)}
|
</p>{' '}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -87,6 +87,7 @@
|
||||||
}
|
}
|
||||||
.status-card-link:is(:hover, :focus) .status-card img {
|
.status-card-link:is(:hover, :focus) .status-card img {
|
||||||
animation: position-object 5s ease-in-out 1s 5;
|
animation: position-object 5s ease-in-out 1s 5;
|
||||||
|
animation-duration: var(--anim-duration, 5s);
|
||||||
}
|
}
|
||||||
.status-card-link:is(:active) .status-card {
|
.status-card-link:is(:active) .status-card {
|
||||||
background-color: var(--bg-faded-color);
|
background-color: var(--bg-faded-color);
|
||||||
|
@ -520,6 +521,10 @@
|
||||||
margin-inline: 0;
|
margin-inline: 0;
|
||||||
padding-inline-start: 1.5em;
|
padding-inline-start: 1.5em;
|
||||||
}
|
}
|
||||||
|
.status .content > :is(ul, ol) li > :is(ul, ol),
|
||||||
|
.status .content > div > :is(ul, ol) li > :is(ul, ol) {
|
||||||
|
padding-inline-start: 1.5em;
|
||||||
|
}
|
||||||
.status .content ul {
|
.status .content ul {
|
||||||
list-style-type: disc;
|
list-style-type: disc;
|
||||||
}
|
}
|
||||||
|
@ -552,11 +557,11 @@
|
||||||
height: auto;
|
height: auto;
|
||||||
max-height: max(160px, 33vh);
|
max-height: max(160px, 33vh);
|
||||||
}
|
}
|
||||||
/* .status .media-container.media-eq1 {
|
.status .media-container.media-eq1 {
|
||||||
min-height: 44px;
|
display: flex;
|
||||||
height: auto;
|
/* min-height: 0 !important; */
|
||||||
max-height: 160px;
|
max-height: none !important;
|
||||||
} */
|
}
|
||||||
.status:not(.large):not(.status-carousel .status)
|
.status:not(.large):not(.status-carousel .status)
|
||||||
.media-container.media-eq1:has([data-orientation='portrait']) {
|
.media-container.media-eq1:has([data-orientation='portrait']) {
|
||||||
width: 85%;
|
width: 85%;
|
||||||
|
@ -569,43 +574,92 @@
|
||||||
}
|
}
|
||||||
.status.large :is(.media-container, .media-container.media-gt2) {
|
.status.large :is(.media-container, .media-container.media-gt2) {
|
||||||
height: auto;
|
height: auto;
|
||||||
min-height: 160px;
|
/* min-height: 160px; */
|
||||||
max-height: 60vh;
|
max-height: 60vh;
|
||||||
}
|
}
|
||||||
.status .media-container .media {
|
.status .media-container .media {
|
||||||
--media-radius: 16px;
|
--media-radius: 16px;
|
||||||
|
--media-radius-inner: 4px;
|
||||||
border-radius: var(--media-radius);
|
border-radius: var(--media-radius);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
min-height: 80px;
|
min-height: 80px;
|
||||||
border: 1px solid var(--outline-color);
|
border: 1px solid var(--outline-color);
|
||||||
}
|
}
|
||||||
|
.status .media-container:not(.media-eq1) .media {
|
||||||
|
aspect-ratio: auto !important;
|
||||||
|
}
|
||||||
|
.status .media-container.media-eq1 {
|
||||||
|
width: auto !important;
|
||||||
|
max-width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.status .media-container.media-eq1 .media {
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 100% !important;
|
||||||
|
min-width: 44px;
|
||||||
|
width: auto;
|
||||||
|
min-height: 44px;
|
||||||
|
/* width: min(var(--width), 100%); */
|
||||||
|
/* max-height: min(var(--height), 33vh); */
|
||||||
|
height: min(160px, var(--height), 33vh);
|
||||||
|
}
|
||||||
|
.status .media-container.media-eq1 .media.media-fixed-width {
|
||||||
|
width: min(var(--width), 100%);
|
||||||
|
height: auto;
|
||||||
|
max-height: min(var(--height), 33vh);
|
||||||
|
}
|
||||||
|
.status .media-container.media-eq1 .media[data-orientation='portrait'] {
|
||||||
|
width: auto;
|
||||||
|
height: min(var(--height), 45vh);
|
||||||
|
max-height: none;
|
||||||
|
}
|
||||||
|
.status.large .media-container.media-eq1 {
|
||||||
|
max-height: min(var(--height), 60vh);
|
||||||
|
}
|
||||||
|
.status.large .media-container.media-eq1 .media[data-orientation='portrait'] {
|
||||||
|
height: min(var(--height), 60vh);
|
||||||
|
}
|
||||||
|
.status-carousel .status .media-container.media-eq1 .media {
|
||||||
|
width: min(var(--width), 100%);
|
||||||
|
height: auto;
|
||||||
|
max-height: 60vh;
|
||||||
|
}
|
||||||
/* Special media borders */
|
/* Special media borders */
|
||||||
.status .media-container.media-eq2 .media:first-of-type {
|
.status .media-container.media-eq2 .media:first-of-type {
|
||||||
border-radius: var(--media-radius) 0 0 var(--media-radius);
|
border-radius: var(--media-radius) var(--media-radius-inner)
|
||||||
|
var(--media-radius-inner) var(--media-radius);
|
||||||
}
|
}
|
||||||
.status .media-container.media-eq2 .media:last-of-type {
|
.status .media-container.media-eq2 .media:last-of-type {
|
||||||
border-radius: 0 var(--media-radius) var(--media-radius) 0;
|
border-radius: var(--media-radius-inner) var(--media-radius)
|
||||||
|
var(--media-radius) var(--media-radius-inner);
|
||||||
}
|
}
|
||||||
.status .media-container.media-eq3 .media:first-of-type {
|
.status .media-container.media-eq3 .media:first-of-type {
|
||||||
border-radius: var(--media-radius) 0 0 var(--media-radius);
|
border-radius: var(--media-radius) var(--media-radius-inner)
|
||||||
|
var(--media-radius-inner) var(--media-radius);
|
||||||
}
|
}
|
||||||
.status .media-container.media-eq3 .media:nth-of-type(2) {
|
.status .media-container.media-eq3 .media:nth-of-type(2) {
|
||||||
border-radius: 0 var(--media-radius) 0 0;
|
border-radius: var(--media-radius-inner) var(--media-radius)
|
||||||
|
var(--media-radius-inner) var(--media-radius-inner);
|
||||||
}
|
}
|
||||||
.status .media-container.media-eq3 .media:last-of-type {
|
.status .media-container.media-eq3 .media:last-of-type {
|
||||||
border-radius: 0 0 var(--media-radius) 0;
|
border-radius: var(--media-radius-inner) var(--media-radius-inner)
|
||||||
|
var(--media-radius) var(--media-radius-inner);
|
||||||
}
|
}
|
||||||
.status .media-container.media-eq4 .media:first-of-type {
|
.status .media-container.media-eq4 .media:first-of-type {
|
||||||
border-radius: var(--media-radius) 0 0 0;
|
border-radius: var(--media-radius) var(--media-radius-inner)
|
||||||
|
var(--media-radius-inner) var(--media-radius-inner);
|
||||||
}
|
}
|
||||||
.status .media-container.media-eq4 .media:nth-of-type(2) {
|
.status .media-container.media-eq4 .media:nth-of-type(2) {
|
||||||
border-radius: 0 var(--media-radius) 0 0;
|
border-radius: var(--media-radius-inner) var(--media-radius)
|
||||||
|
var(--media-radius-inner) var(--media-radius-inner);
|
||||||
}
|
}
|
||||||
.status .media-container.media-eq4 .media:nth-of-type(3) {
|
.status .media-container.media-eq4 .media:nth-of-type(3) {
|
||||||
border-radius: 0 0 0 var(--media-radius);
|
border-radius: var(--media-radius-inner) var(--media-radius-inner)
|
||||||
|
var(--media-radius-inner) var(--media-radius);
|
||||||
}
|
}
|
||||||
.status .media-container.media-eq4 .media:last-of-type {
|
.status .media-container.media-eq4 .media:last-of-type {
|
||||||
border-radius: 0 0 var(--media-radius) 0;
|
border-radius: var(--media-radius-inner) var(--media-radius-inner)
|
||||||
|
var(--media-radius) var(--media-radius-inner);
|
||||||
}
|
}
|
||||||
.status .media:only-child {
|
.status .media:only-child {
|
||||||
grid-area: span 2 / span 2;
|
grid-area: span 2 / span 2;
|
||||||
|
@ -613,7 +667,7 @@
|
||||||
.status:not(.large) .media:only-child {
|
.status:not(.large) .media:only-child {
|
||||||
max-width: 480px;
|
max-width: 480px;
|
||||||
}
|
}
|
||||||
.status.large .media:only-child {
|
.status.large .media-container:not(.media-eq1) .media:only-child {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
min-width: 160px;
|
min-width: 160px;
|
||||||
min-height: 160px;
|
min-height: 160px;
|
||||||
|
@ -646,6 +700,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
.status .media {
|
.status .media {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -653,6 +708,7 @@
|
||||||
.status .media img:is(:hover, :focus),
|
.status .media img:is(:hover, :focus),
|
||||||
a:focus-visible .status .media img {
|
a:focus-visible .status .media img {
|
||||||
animation: position-object 5s ease-in-out 1s 5;
|
animation: position-object 5s ease-in-out 1s 5;
|
||||||
|
animation-duration: var(--anim-duration, 5s);
|
||||||
}
|
}
|
||||||
body:has(#modal-container .carousel) .status .media img:hover {
|
body:has(#modal-container .carousel) .status .media img:hover {
|
||||||
animation: none;
|
animation: none;
|
||||||
|
@ -887,6 +943,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
|
||||||
.card:is(:hover, :focus) img,
|
.card:is(:hover, :focus) img,
|
||||||
a:focus-visible .card img {
|
a:focus-visible .card img {
|
||||||
animation: position-object 5s ease-in-out 1s 5;
|
animation: position-object 5s ease-in-out 1s 5;
|
||||||
|
animation-duration: var(--anim-duration, 5s);
|
||||||
}
|
}
|
||||||
.card p {
|
.card p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -975,6 +1032,7 @@ a.card:is(:hover, :focus) {
|
||||||
);
|
);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: inset 0 0 0 1px var(--bg-color);
|
box-shadow: inset 0 0 0 1px var(--bg-color);
|
||||||
|
min-width: 50%;
|
||||||
}
|
}
|
||||||
.poll.loading {
|
.poll.loading {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
|
|
|
@ -94,6 +94,7 @@ function Status({
|
||||||
allowFilters,
|
allowFilters,
|
||||||
onMediaClick,
|
onMediaClick,
|
||||||
quoted,
|
quoted,
|
||||||
|
onStatusLinkClick = () => {},
|
||||||
}) {
|
}) {
|
||||||
if (skeleton) {
|
if (skeleton) {
|
||||||
return (
|
return (
|
||||||
|
@ -172,7 +173,9 @@ function Status({
|
||||||
|
|
||||||
const debugHover = (e) => {
|
const debugHover = (e) => {
|
||||||
if (e.shiftKey) {
|
if (e.shiftKey) {
|
||||||
console.log(status);
|
console.log({
|
||||||
|
...status,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -524,7 +527,10 @@ function Status({
|
||||||
<br />
|
<br />
|
||||||
{createdDateText}
|
{createdDateText}
|
||||||
</MenuHeader>
|
</MenuHeader>
|
||||||
<MenuLink to={instance ? `/${instance}/s/${id}` : `/s/${id}`}>
|
<MenuLink
|
||||||
|
to={instance ? `/${instance}/s/${id}` : `/s/${id}`}
|
||||||
|
onClick={onStatusLinkClick}
|
||||||
|
>
|
||||||
<Icon icon="arrow-right" />
|
<Icon icon="arrow-right" />
|
||||||
<span>View post by @{username || acct}</span>
|
<span>View post by @{username || acct}</span>
|
||||||
</MenuLink>
|
</MenuLink>
|
||||||
|
@ -942,6 +948,7 @@ function Status({
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
onStatusLinkClick?.();
|
||||||
}}
|
}}
|
||||||
class={`time ${open ? 'is-open' : ''}`}
|
class={`time ${open ? 'is-open' : ''}`}
|
||||||
>
|
>
|
||||||
|
@ -1127,7 +1134,9 @@ function Status({
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{(((enableTranslate || inlineTranslate) && !!content.trim() && differentLanguage) ||
|
{(((enableTranslate || inlineTranslate) &&
|
||||||
|
!!content.trim() &&
|
||||||
|
differentLanguage) ||
|
||||||
forceTranslate) && (
|
forceTranslate) && (
|
||||||
<TranslationBlock
|
<TranslationBlock
|
||||||
forceTranslate={forceTranslate || inlineTranslate}
|
forceTranslate={forceTranslate || inlineTranslate}
|
||||||
|
|
|
@ -365,7 +365,10 @@ function Timeline({
|
||||||
return 0;
|
return 0;
|
||||||
});
|
});
|
||||||
return (
|
return (
|
||||||
<li key={`timeline-${statusID}`}>
|
<li
|
||||||
|
key={`timeline-${statusID}`}
|
||||||
|
class="timeline-item-carousel"
|
||||||
|
>
|
||||||
<StatusCarousel
|
<StatusCarousel
|
||||||
title={title}
|
title={title}
|
||||||
class={`${type}-carousel`}
|
class={`${type}-carousel`}
|
||||||
|
|
|
@ -111,18 +111,22 @@ function TranslationBlock({
|
||||||
detectedLang !== targetLangText
|
detectedLang !== targetLangText
|
||||||
) {
|
) {
|
||||||
return (
|
return (
|
||||||
<div class="status-translation-block-mini">
|
<div class="shazam-container">
|
||||||
<Icon
|
<div class="shazam-container-inner">
|
||||||
icon="translate"
|
<div class="status-translation-block-mini">
|
||||||
alt={`Auto-translated from ${sourceLangText}`}
|
<Icon
|
||||||
/>
|
icon="translate"
|
||||||
<output
|
alt={`Auto-translated from ${sourceLangText}`}
|
||||||
lang={targetLang}
|
/>
|
||||||
dir="auto"
|
<output
|
||||||
title={pronunciationContent || ''}
|
lang={targetLang}
|
||||||
>
|
dir="auto"
|
||||||
{translatedContent}
|
title={pronunciationContent || ''}
|
||||||
</output>
|
>
|
||||||
|
{translatedContent}
|
||||||
|
</output>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -843,6 +843,24 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
|
||||||
weight,
|
weight,
|
||||||
} = status;
|
} = status;
|
||||||
const isHero = statusID === id;
|
const isHero = statusID === id;
|
||||||
|
const StatusParent = useCallback(
|
||||||
|
(props) =>
|
||||||
|
isThread || thread ? (
|
||||||
|
<Link
|
||||||
|
class="status-link"
|
||||||
|
to={
|
||||||
|
instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`
|
||||||
|
}
|
||||||
|
onClick={() => {
|
||||||
|
resetScrollPosition(statusID);
|
||||||
|
}}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div class="status-focus" tabIndex={0} {...props} />
|
||||||
|
),
|
||||||
|
[isThread, thread],
|
||||||
|
);
|
||||||
return (
|
return (
|
||||||
<li
|
<li
|
||||||
key={statusID}
|
key={statusID}
|
||||||
|
@ -923,15 +941,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<Link
|
<StatusParent>
|
||||||
class="status-link"
|
|
||||||
to={
|
|
||||||
instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`
|
|
||||||
}
|
|
||||||
onClick={() => {
|
|
||||||
resetScrollPosition(statusID);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Status
|
<Status
|
||||||
statusID={statusID}
|
statusID={statusID}
|
||||||
instance={instance}
|
instance={instance}
|
||||||
|
@ -939,6 +949,9 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
|
||||||
size={thread || ancestor ? 'm' : 's'}
|
size={thread || ancestor ? 'm' : 's'}
|
||||||
enableTranslate
|
enableTranslate
|
||||||
onMediaClick={handleMediaClick}
|
onMediaClick={handleMediaClick}
|
||||||
|
onStatusLinkClick={() => {
|
||||||
|
resetScrollPosition(statusID);
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
{ancestor && isThread && repliesCount > 1 && (
|
{ancestor && isThread && repliesCount > 1 && (
|
||||||
<div class="replies-link">
|
<div class="replies-link">
|
||||||
|
@ -956,7 +969,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
)} */}
|
)} */}
|
||||||
</Link>
|
</StatusParent>
|
||||||
)}
|
)}
|
||||||
{descendant && replies?.length > 0 && (
|
{descendant && replies?.length > 0 && (
|
||||||
<SubComments
|
<SubComments
|
||||||
|
@ -1171,13 +1184,14 @@ function SubComments({
|
||||||
<ul>
|
<ul>
|
||||||
{replies.map((r) => (
|
{replies.map((r) => (
|
||||||
<li key={r.id}>
|
<li key={r.id}>
|
||||||
<Link
|
{/* <Link
|
||||||
class="status-link"
|
class="status-link"
|
||||||
to={instance ? `/${instance}/s/${r.id}` : `/s/${r.id}`}
|
to={instance ? `/${instance}/s/${r.id}` : `/s/${r.id}`}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
resetScrollPosition(r.id);
|
resetScrollPosition(r.id);
|
||||||
}}
|
}}
|
||||||
>
|
> */}
|
||||||
|
<div class="status-focus" tabIndex={0}>
|
||||||
<Status
|
<Status
|
||||||
statusID={r.id}
|
statusID={r.id}
|
||||||
instance={instance}
|
instance={instance}
|
||||||
|
@ -1194,7 +1208,8 @@ function SubComments({
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Link>
|
</div>
|
||||||
|
{/* </Link> */}
|
||||||
{r.replies?.length && (
|
{r.replies?.length && (
|
||||||
<SubComments
|
<SubComments
|
||||||
instance={instance}
|
instance={instance}
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
const { locale } = Intl.NumberFormat().resolvedOptions();
|
const { locale } = Intl.NumberFormat().resolvedOptions();
|
||||||
|
const shortenNumber = Intl.NumberFormat(locale, {
|
||||||
export default function shortenNumber(num) {
|
notation: 'compact',
|
||||||
return Intl.NumberFormat(locale, {
|
}).format;
|
||||||
notation: 'compact',
|
export default shortenNumber;
|
||||||
}).format(num);
|
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in a new issue