Add video icon on normal article list

oslokommune · Nov 11, 2024 · d560949 · d560949
1 parent a3c635f
commit d560949
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 0 deletions.
diff --git a/src/main/frontend/styles/partials/_card.scss b/src/main/frontend/styles/partials/_card.scss
@@ -3,6 +3,7 @@
 
   &__imagecontainer {
     overflow: hidden;
+    position: relative;
   }
 
   &:hover img {
@@ -28,6 +29,22 @@
     font-size: 1.1em;
   }
 
+  &__video-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: top;
+    justify-content: right;
+    padding-top: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  &__video-icon {
+    width: 3rem; /* 64px */
+    height: 3rem; /* 64px */
+    color: #222; /* Fargen på play-symbolet */
+  }
+
   &__category {
     position: relative;
     margin-bottom: 1.5rem;
@@ -43,6 +60,11 @@
     }
   }
 
+  &--featured {
+    display: block;
+    padding-bottom: 2rem;
+  }
+
   &--featured > &__body {
     margin-top: -3em;
     margin-left: 1.5em;
@@ -52,4 +74,9 @@
       margin-top: -7em;
     }
   }
+
+  &--featured &__video-icon {
+    width: 5rem; /* 80px */
+    height: 5rem; /* 80px */
+  }
 }
diff --git a/src/main/resources/lib/labs/content-prep.js b/src/main/resources/lib/labs/content-prep.js
@@ -33,6 +33,7 @@ var prepareFeaturedArticle = function (content, scaleLandscape, scalePortrait) {
   article.created = content.createdTime
   article.modifiedTime = content.modifiedTime ? content.modifiedTime : null
   article.heading = content.displayName
+  article.type = content.type.split(':')[1].trim()
 
   if (!content.data) return article
 

diff --git a/src/main/resources/site/parts/article-list/article-list.xml b/src/main/resources/site/parts/article-list/article-list.xml
@@ -12,6 +12,7 @@
       <occurrences minimum="0" maximum="3" />
       <config>
         <allowContentType>article</allowContentType>
+        <allowContentType>video</allowContentType>
       </config>
     </input>
     <input name="categories" type="ContentSelector">

diff --git a/src/main/resources/site/snippets/article-card.html b/src/main/resources/site/snippets/article-card.html
@@ -26,6 +26,13 @@
             '(max-width:768px) 95vw, (max-width:1087px) 30vw, (max-width:1279px) 301px, (max-width:1471px) 364px, 543px'"
       />
     </picture>
+    <!-- Video overlay - vises kun når item.type er 'video' -->
+    <div data-th-if="${item.type == 'video'}" class="card__video-overlay">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="card__video-icon">
+        <circle cx="50" cy="50" r="48" fill="white" opacity="0.8" stroke="currentColor" stroke-width="2" />
+        <path d="M40 30L70 50L40 70Z" fill="currentColor" />
+      </svg>
+    </div>
   </div>
   <div class="card__body">
     <div data-th-if="*{item.categories}" class="card__category">