Improve card display even more

Signed-off-by: Tomas Slusny <[email protected]>
deathbeam · Oct 28, 2023 · c9b182d · c9b182d
1 parent ff0da9b
commit c9b182d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/site/src/components/MapCards.css b/site/src/components/MapCards.css
@@ -5,9 +5,13 @@
   white-space: inherit;
 }
 
+.map-img-holder {
+  position: relative;
+}
+
 .map-stack-size {
   position: absolute;
-  top: 5px;
+  bottom: 5px;
   left: 5px;
 }
 

diff --git a/site/src/components/MapCards.js b/site/src/components/MapCards.js
@@ -122,10 +122,13 @@ const MapCard = ({ unique, card }) => {
   return (
     <span className="tooltip-tag tooltip-tag-left tooltip-tag-compact">
       <span className="tooltip-tag-text">
-        <img src={card.art} className="mb-1" alt="" loading="lazy" />
-        <span className="badge bg-light text-dark map-stack-size">
-          <b>{card.stack}</b>
-        </span>
+        <span className="badge bg-light text-dark w-100 map-reward mb-1">{card.name}</span>
+        <div className="map-img-holder mb-1">
+          <img src={card.art} alt="" loading="lazy" />
+          <span className="badge bg-light text-dark map-stack-size">
+            <b>{card.stack}</b>
+          </span>
+        </div>
         <span className="badge bg-dark text-light w-100 map-reward mb-1">{card.reward}</span>
         <b>Price</b>: {card.price} <img src="/img/chaos.png" alt="c" width="16" />
         <br />