Parcourir la source

style(sponsor): stack the banner's sponsor tag above Visit

MHSanaei il y a 3 heures
Parent
commit
7d232a76c9

+ 11 - 1
frontend/src/components/sponsor/SponsorCard.css

@@ -95,6 +95,14 @@
   white-space: nowrap;
 }
 
+.sponsor-aside {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 6px;
+}
+
 .sponsor-close {
   flex: 0 0 auto;
   align-self: flex-start;
@@ -197,8 +205,10 @@
     padding: 10px 12px;
   }
 
-  .sponsor-card-banner .sponsor-visit {
+  .sponsor-card-banner .sponsor-aside {
     flex-basis: 100%;
+    flex-direction: row;
+    align-items: center;
     padding-inline-start: 52px;
   }
 }

+ 10 - 2
frontend/src/components/sponsor/SponsorCard.tsx

@@ -74,12 +74,20 @@ export default function SponsorCard({
         <SponsorLogo sponsor={sponsor} />
         <span className="sponsor-body" dir="auto">
           <span className="sponsor-head">
-            <span className="sponsor-tag">{tag}</span>
+            {variant !== 'banner' && <span className="sponsor-tag">{tag}</span>}
             <span className="sponsor-title">{title}</span>
           </span>
           {text && <span className="sponsor-text">{text}</span>}
         </span>
-        {variant !== 'compact' && (
+        {variant === 'banner' && (
+          <span className="sponsor-aside">
+            <span className="sponsor-tag">{tag}</span>
+            <span className="sponsor-visit">
+              {t('pages.sponsors.visit')} <ExportOutlined />
+            </span>
+          </span>
+        )}
+        {variant === 'card' && (
           <span className="sponsor-visit">
             {t('pages.sponsors.visit')} <ExportOutlined />
           </span>