From a6196f923f4168c584afc73d8c4bb5f895f40c5d Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 29 Dec 2022 08:57:01 +0800
Subject: [PATCH] Better styles for card

Show large card for large status, but only when there's no poll and media
---
 src/components/status.css | 16 ++++++++++++++--
 src/components/status.jsx | 10 +++++++---
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/status.css b/src/components/status.css
index 0989ddcb..03f62c18 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -410,9 +410,14 @@
   overflow: hidden;
   color: inherit;
   align-items: stretch;
-  background: var(--bg-color);
+  background-color: var(--bg-color);
   max-height: 160px;
 }
+.status.large .card.link.large {
+  border-radius: 16px;
+  flex-direction: column;
+  max-height: none;
+}
 .card .image {
   width: 35%;
   height: auto;
@@ -421,6 +426,12 @@
   object-fit: cover;
   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 {
   animation: position-object 5s ease-in-out 1s 5;
 }
@@ -471,7 +482,8 @@ a.card {
   transition: opacity 0.2s ease-in-out;
 }
 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 {
   max-width: 320px;
diff --git a/src/components/status.jsx b/src/components/status.jsx
index d9a4043f..037a51b3 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -436,7 +436,10 @@ function Status({
           {!!card &&
             (size === 'l' ||
               (size === 'm' && !poll && !mediaAttachments.length)) && (
-              <Card card={card} />
+              <Card
+                card={card}
+                size={!poll && !mediaAttachments.length ? 'l' : 'm'}
+              />
             )}
         </div>
         {size === 'l' && (
@@ -834,7 +837,7 @@ function Media({ media, showOriginal, onClick = () => {} }) {
   }
 }
 
-function Card({ card }) {
+function Card({ card, size }) {
   const {
     blurhash,
     title,
@@ -858,6 +861,7 @@ function Card({ card }) {
   */
 
   const hasText = title || providerName || authorName;
+  size = size === 'l' ? 'large' : '';
 
   if (hasText && image) {
     const domain = new URL(url).hostname.replace(/^www\./, '');
@@ -866,7 +870,7 @@ function Card({ card }) {
         href={url}
         target="_blank"
         rel="nofollow noopener noreferrer"
-        class="card link"
+        class={`card link ${size}`}
       >
         <img
           class="image"