Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-24 16:58:47 +01:00
Code Issues Projects Releases Packages Wiki Activity

Show large card for content with text-weight=1

Browse source 
Also finally replace the hacky CSS with something more legit
This commit is contained in:
Lim Chee Aun 2023-02-21 23:59:34 +08:00
parent c2e9dc0efe
commit c13cab51a9
3 changed files with 13 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/app.css
View file

@ -618,10 +618,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
font-size: calc(100% + 25% * max(2 - var(--content-text-weight), 0)); font-size: calc(100% + 25% * max(2 - var(--content-text-weight), 0));
} }
.status-carousel .status-carousel
.content-container:is( .content-container[data-content-text-weight='1']
[style*='content-text-weight:1'],
[style*='content-text-weight: 1']
)
.media-container.media-eq1 { .media-container.media-eq1 {
/* LOL, this is madness, reading a value from the style attribute */ /* LOL, this is madness, reading a value from the style attribute */
height: auto; height: auto;

9
src/components/status.css
View file

@ -590,7 +590,8 @@ body:has(#modal-container .carousel) .status .media img:hover {
max-width: 480px; max-width: 480px;
/* max-height: 160px; */ /* max-height: 160px; */
} }
.status.large .card.large { .status.large .card.large,
.status-carousel .content-container[data-content-text-weight='1'] .card.large {
border-radius: 16px; border-radius: 16px;
flex-direction: column; flex-direction: column;
max-height: none; max-height: none;
@ -618,7 +619,11 @@ body:has(#modal-container .carousel) .status .media img:hover {
.status.large .card .card-image { .status.large .card .card-image {
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
} }
.status.large .card.large .card-image { .status.large .card.large .card-image,
.status-carousel
.content-container[data-content-text-weight='1']
.card.large
.card-image {
flex-grow: 1; flex-grow: 1;
aspect-ratio: 1.91 / 1; aspect-ratio: 1.91 / 1;
width: 100%; width: 100%;

9
src/components/status.jsx
View file

@ -208,6 +208,9 @@ function Status({
const unauthInteractionErrorMessage = `Sorry, your current logged-in instance can't interact with this status from another instance.`; const unauthInteractionErrorMessage = `Sorry, your current logged-in instance can't interact with this status from another instance.`;
const textWeight = () =>
Math.round((spoilerText.length + htmlContentLength(content)) / 140) || 1;
return ( return (
<article <article
ref={statusRef} ref={statusRef}
@ -326,12 +329,10 @@ function Status({
class={`content-container ${ class={`content-container ${
spoilerText || sensitive ? 'has-spoiler' : '' spoilerText || sensitive ? 'has-spoiler' : ''
} ${showSpoiler ? 'show-spoiler' : ''}`} } ${showSpoiler ? 'show-spoiler' : ''}`}
data-content-text-weight={contentTextWeight ? textWeight() : null}
style={ style={
(size === 'l' || contentTextWeight) && { (size === 'l' || contentTextWeight) && {
'--content-text-weight': '--content-text-weight': textWeight(),
Math.round(
(spoilerText.length + htmlContentLength(content)) / 140,
) || 1,
} }
} }
> >