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

Better styles for card

Browse source 
Show large card for large status, but only when there's no poll and media
This commit is contained in:
Lim Chee Aun 2022-12-29 08:57:01 +08:00
parent afb1a75f69
commit a6196f923f
2 changed files with 21 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/status.css
View file

@ -410,9 +410,14 @@
overflow: hidden; overflow: hidden;
color: inherit; color: inherit;
align-items: stretch; align-items: stretch;
background: var(--bg-color); background-color: var(--bg-color);
max-height: 160px; max-height: 160px;
} }
.status.large .card.link.large {
border-radius: 16px;
flex-direction: column;
max-height: none;
}
.card .image { .card .image {
width: 35%; width: 35%;
height: auto; height: auto;
@ -421,6 +426,12 @@
object-fit: cover; object-fit: cover;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
} }
.status.large .card.link.large .image {
aspect-ratio: 1.91 / 1;
width: 100%;
max-height: 50vh;
border-inline-end: 0;
}
.card:hover .image { .card:hover .image {
animation: position-object 5s ease-in-out 1s 5; animation: position-object 5s ease-in-out 1s 5;
} }
@ -471,7 +482,8 @@ a.card {
transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;
} }
a.card:hover { a.card:hover {
border: 1px solid var(--outline-hover-color); border: 1px solid var(--link-color);
box-shadow: 0 0 0 2px var(--link-faded-color);
} }
.card.video { .card.video {
max-width: 320px; max-width: 320px;

10
src/components/status.jsx
View file

@ -436,7 +436,10 @@ function Status({
{!!card && {!!card &&
(size === 'l' || (size === 'l' ||
(size === 'm' && !poll && !mediaAttachments.length)) && ( (size === 'm' && !poll && !mediaAttachments.length)) && (
<Card card={card} /> <Card
card={card}
size={!poll && !mediaAttachments.length ? 'l' : 'm'}
/>
)} )}
</div> </div>
{size === 'l' && ( {size === 'l' && (
@ -834,7 +837,7 @@ function Media({ media, showOriginal, onClick = () => {} }) {
} }
} }
function Card({ card }) { function Card({ card, size }) {
const { const {
blurhash, blurhash,
title, title,
@ -858,6 +861,7 @@ function Card({ card }) {
*/ */
const hasText = title || providerName || authorName; const hasText = title || providerName || authorName;
size = size === 'l' ? 'large' : '';
if (hasText && image) { if (hasText && image) {
const domain = new URL(url).hostname.replace(/^www\./, ''); const domain = new URL(url).hostname.replace(/^www\./, '');
@ -866,7 +870,7 @@ function Card({ card }) {
href={url} href={url}
target="_blank" target="_blank"
rel="nofollow noopener noreferrer" rel="nofollow noopener noreferrer"
class="card link" class={`card link ${size}`}
> >
<img <img
class="image" class="image"