diff --git a/article/templates/article/stream_blocks/gallery_block.html b/article/templates/article/stream_blocks/gallery_block.html index a85685648..c142d2a8c 100644 --- 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 index 0a3a15956..5ed416fa0 100644 --- 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%; } }