nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Fix text alignment in small card

Browse source 
It's confusing when status can be small/large and card can small/large too
This commit is contained in:
Lim Chee Aun 2023-01-07 11:52:23 +08:00
parent ba1674b846
commit aab9a475e8
2 changed files with 5 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/status.css
View file

@ -461,7 +461,7 @@
background-color: var(--bg-color); background-color: var(--bg-color);
max-height: 160px; max-height: 160px;
} }
.status.large .card.link.large { .status.large .card.link {
border-radius: 16px; border-radius: 16px;
flex-direction: column; flex-direction: column;
max-height: none; max-height: none;
@ -493,7 +493,7 @@
flex-grow: 1; flex-grow: 1;
align-self: center; align-self: center;
} }
.card.large .meta-container { .status.large .card.link.large .meta-container {
align-self: flex-start; align-self: flex-start;
} }
.card .title { .card .title {

11
src/components/status.jsx
View file

@ -436,12 +436,7 @@ function Status({
!sensitive && !sensitive &&
!spoilerText && !spoilerText &&
!poll && !poll &&
!mediaAttachments.length && ( !mediaAttachments.length && <Card card={card} />}
<Card
card={card}
size={!poll && !mediaAttachments.length ? 'l' : 'm'}
/>
)}
</div> </div>
{size === 'l' && ( {size === 'l' && (
<> <>
@ -851,7 +846,7 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
} }
} }
function Card({ card, size }) { function Card({ card }) {
const { const {
blurhash, blurhash,
title, title,
@ -876,7 +871,7 @@ function Card({ card, size }) {
const hasText = title || providerName || authorName; const hasText = title || providerName || authorName;
const isLandscape = width / height >= 1.2; const isLandscape = width / height >= 1.2;
size = size === 'l' && isLandscape ? 'large' : ''; const size = isLandscape ? 'large' : '';
if (hasText && image) { if (hasText && image) {
const domain = new URL(url).hostname.replace(/^www\./, ''); const domain = new URL(url).hostname.replace(/^www\./, '');