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%;
  }
  }