fix: place datebadge outside image div.

helsingborg-stad · Oct 2, 2024 · 55fbd5d · 55fbd5d
1 parent 87ae6e6
commit 55fbd5d
Showing 1 changed file with 8 additions and 7 deletions.
diff --git a/source/js/Module/Event/Components/EventItem.js b/source/js/Module/Event/Components/EventItem.js
@@ -28,19 +28,20 @@ const EventItem = ({ event, displayFields, cardStyle, imageRatio }) => (
   <a className={"c-card c-card--action c-card--event " + cardStyle + " c-card--ratio-" + imageRatio} href={event.permalink} style={{ textAlign: 'center', height: '100%' }}>
     {displayFields.includes('image') && event.image_url && (
       <div className="c-card__image-container">
-        {displayFields.includes('dateBadge') ? (
-        <div class="c-datebadge c-datebadge--md u-position--absolute u-margin--2 u-level-2">
-            <div class="c-datebadge__daymonth">
-                <span class="c-typography c-datebadge__date c-typography__variant--h1">{getDateBadge(event, "getDay")}</span>
-                <span class="c-typography c-datebadge__month c-typography__variant--h4">{getDateBadge(event, "getMonth")}</span>
-            </div>
-        </div>) : ""}
         <figure className="c-image c-card__image c-image--cover">
             <img loading="lazy" className="c-image__image" src={event.image_url} alt={event.post_title}/>
         </figure>
       </div>
     )}
 
+    {displayFields.includes('dateBadge') ? (
+    <div class="c-datebadge c-datebadge--md u-position--absolute u-margin--2 u-level-2">
+        <div class="c-datebadge__daymonth">
+            <span class="c-typography c-datebadge__date c-typography__variant--h1">{getDateBadge(event, "getDay")}</span>
+            <span class="c-typography c-datebadge__month c-typography__variant--h4">{getDateBadge(event, "getMonth")}</span>
+        </div>
+    </div>) : ""}
+
     <div className="c-card__body">
       {event.post_title && <h3 className="c-card__title">{event.post_title}</h3>}