Stopped layout shift with gallery block and other improvements to gal…

…lery block
ubyssey · Sep 24, 2024 · a0a4f82 · a0a4f82
1 parent 1093339
commit a0a4f82
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 21 deletions.
diff --git a/article/templates/article/stream_blocks/gallery_block.html b/article/templates/article/stream_blocks/gallery_block.html
@@ -2,10 +2,11 @@
 {% load wagtailimages_tags %}
 {% load static %}
 
-  <div id="{{self.id}}" class="carousel carousel-dark slide {{self.images.0.style}} {{self.images.0.width}}" data-bs-ride="true" style="position: relative;">
-    <div class="carousel-indicators" style="position: absolute;">
+{% image self.images.0.image width-100 as first %}
+  <div id="{{self.id|slugify}}" class="carousel carousel-dark slide {{self.images.0.style}} {{self.images.0.width}}" data-bs-ride="true" style="--aspect-ratio: {{first.height}};">
+    <div class="carousel-indicators">
       {% for image in self.images %}
-        <button type="button" data-bs-target="#{{self.id}}" data-bs-slide-to="{{ forloop.counter0 }}" class="{% if forloop.first %}active{% endif %}" aria-current="true" aria-label="Slide {{ forloop.counter }}"></button>
+        <button type="button" data-bs-target="#{{self.id|slugify}}" data-bs-slide-to="{{ forloop.counter0 }}" class="{% if forloop.first %}active{% endif %}" aria-current="true" aria-label="Slide {{ forloop.counter }}"></button>
       {% endfor %}
     </div>
     <div class="carousel-inner">
@@ -18,11 +19,11 @@
         </div>
       {% endfor %}
     </div>
-    <button class="carousel-control-prev" type="button" data-bs-target="#{{self.id}}" data-bs-slide="prev" style="position: absolute;">
+    <button class="carousel-control-prev" type="button" data-bs-target="#{{self.id|slugify}}" data-bs-slide="prev" style="position: absolute;">
       <ion-icon name="chevron-back-outline" aria-hidden="true"></ion-icon>
       <span class="visually-hidden">Previous</span>
     </button>
-    <button class="carousel-control-next" type="button" data-bs-target="#{{self.id}}" data-bs-slide="next" style="position: absolute;">
+    <button class="carousel-control-next" type="button" data-bs-target="#{{self.id|slugify}}" data-bs-slide="next" style="position: absolute;">
       <ion-icon name="chevron-forward-outline" aria-hidden="true"></ion-icon>
       <span class="visually-hidden">Next</span>
     </button>

diff --git a/ubyssey/static_src/src/styles/modules/article/_base.scss b/ubyssey/static_src/src/styles/modules/article/_base.scss
@@ -244,6 +244,11 @@ div.article-content {
   }
 
   .carousel {
+    position: relative;
+    width: 100%;
+    padding-bottom: 3em;
+    aspect-ratio: calc(80 / var(--aspect-ratio));
+    box-sizing: initial;
 
     @media($bp-larger-than-phablet){
       &.right, &.left {
@@ -264,30 +269,21 @@ div.article-content {
 
       &.small {
         width:100px;
-        .carousel-indicators {top: 80px;}
-        button {bottom: 45px;}
       }
 
       &.medium {
         width:200px;
-        .carousel-indicators {top: 150px;}
-        button {bottom: 25px;}
       }
 
       &.large {
         width:300px;
-        .carousel-indicators {top: 215px;}
-        button {bottom: 25px;}
-      }
-
-      &.full {
-        .carousel-indicators {top: 410px;}
-        button {bottom: 100px;}
       }
     }
 
     .carousel-indicators {
-      z-index: 0;
+      position: absolute;
+      bottom: 0;
+      z-index: 100;
       button {
         opacity: 1;
         background-color: #A9A9A9;
@@ -299,15 +295,40 @@ div.article-content {
       }
     }
 
+    .carousel-item {
+      height: 100%;
+      margin-block: auto;
+
+      .attachment {
+        margin-inline: auto;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        img {
+          margin-inline: auto;
+          width: auto;
+          max-height: 75%;
+        }
+      }
+    }
+
+    .carousel-inner {
+      height: 100%;
+      display: flex;
+    }
+
     .carousel-control-next, .carousel-control-prev {
       margin: 0;
       opacity: 1;
+      font-size: 1em;
 
-      i {
-        background: black;
-        aspect-ratio: 1;
-        width: 20px;
+      ion-icon {
         padding: 4px;
+        width: 20px;
+        height: auto;
+        aspect-ratio: 1;
+        background: $color-ubyssey-blue;
         border-radius: 100%;
       }
     }