💄 polish article video header

okfde · Sep 30, 2024 · 12fccfd · 12fccfd
1 parent 7338a58
commit 12fccfd
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 18 deletions.
diff --git a/fragdenstaat_de/fds_blog/templates/fds_blog/content/_article_video_header.html b/fragdenstaat_de/fds_blog/templates/fds_blog/content/_article_video_header.html
@@ -2,7 +2,7 @@
 {% load i18n cms_tags %}
 {% load blog_tags %}
 {% block article_header %}
-    <header class="blog-header article-header-video">
+    <header class="blog-header article-header-video pb-5">
         {% render_placeholder article.header_placeholder %}
         <div class="blog-header-meta">
             <div class="container-lg py-5">

diff --git a/fragdenstaat_de/fds_blog/views.py b/fragdenstaat_de/fds_blog/views.py
@@ -149,13 +149,20 @@ def get_context_data(self, object=None):
     def get_breadcrumbs(self, context):
         breadcrumbs = get_base_breadcrumb()
 
+        if (
+            self.object.content_template
+            == "fds_blog/content/_article_video_header.html"
+        ):
+            breadcrumbs.overlay = True
+
         category = self.object.first_category
         if category:
             breadcrumbs.items += [(category.title, category.get_absolute_url())]
             if category.color:
                 breadcrumbs.color = category.color
 
         breadcrumbs.items += [(self.object.title, self.get_view_url())]
+
         return breadcrumbs
 
 

diff --git a/frontend/styles/blog.scss b/frontend/styles/blog.scss
@@ -167,27 +167,35 @@ aside.article-banner {
   transform: scale(1.03);
 }
 
-
 .article-header-video {
-    position: relative;
-    min-height: 60vh; 
-    width: 100vw;
-    overflow: hidden;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  position: relative;
+  height: calc(100vh - $header-height-mobile);
+
+  @include media-breakpoint-up(lg) {
+    height: 48rem;
+  }
+
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: -1; // put behind the breadcrumbs
+
   video {
     position: absolute;
-    width: auto;
-    height: auto;
-    min-width: 100%;
-    min-height: 100%;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%,-50%);
-    z-index : -1;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: -1;
   }
+
   .blog-header-meta {
-    background-color: transparent;
+    background-color: unset;
+    color: $white;
+
+    a {
+      color: $white;
+      text-decoration: underline;
+    }
   }
 }
diff --git a/frontend/styles/header.scss b/frontend/styles/header.scss
@@ -2,6 +2,9 @@
 
 $c: map.get($container-max-widths, 'xxl');
 
+// static height calculations
+$header-height-mobile: 4.5rem;
+
 #header {
   position: relative;
   z-index: 1031; // over .fixed-* and .sticky-*, but below modals etc.