Fix galleries in line with TNA Frontend v0.4.0

nationalarchives · Dec 11, 2024 · 2c5a386 · 2c5a386
1 parent 0f26d06
commit 2c5a386
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 32 deletions.
diff --git a/app/templates/macros/wagtail_blocks/gallery.html b/app/templates/macros/wagtail_blocks/gallery.html
@@ -20,6 +20,7 @@
     'body': block_value.description | tna_html,
     'headingLevel': headingLevel,
     'items': items,
-    'id': id
+    'id': id,
+    'bounded': True
   }) }}
 {% endmacro %}
diff --git a/app/templates/whats-on/exhibition.html b/app/templates/whats-on/exhibition.html
@@ -267,10 +267,10 @@ <h2 class="tna-visually-hidden">About {{ page_data.title }}</h2>
   </div>
 </div>
 {% for exhibition_highlights in page_data.exhibition_highlights %}
-<section class="tna-section tna-background-contrast--simple tna-!--margin-top-l tna-!--padding-top-m">
+<section class="tna-section tna-background-contrast tna-!--margin-top-l tna-!--padding-top-m">
   <div class="tna-container">
     <div class="tna-column tna-column--full">
-      <h2 id="in-this-exhibition" class="tna-background-contrast tna-heading-l tna-!--padding-top-s">In this exhibition</h2>
+      <h2 id="in-this-exhibition" class="tna-heading-l tna-!--padding-top-s">In this exhibition</h2>
       {% set gallery_images = [] %}
       {% for image in exhibition_highlights.value.images %}
         {% set gallery_images = gallery_images.append({

diff --git a/poetry.lock b/poetry.lock
diff --git a/pyproject.toml b/pyproject.toml
@@ -11,7 +11,7 @@ python = "^3.12"
 flask = "^2.3.2"
 requests = "^2.31.0"
 flask-caching = "^2.1.0"
-tna-frontend-jinja = "0.3.0"
+tna-frontend-jinja = "0.4.0"
 flask-talisman = "^1.1.0"
 sentry-sdk = {extras = ["flask"], version = "^2.8.0"}
 pydash = "^8.0.3"

diff --git a/src/styles/exhibition.scss b/src/styles/exhibition.scss
@@ -29,7 +29,7 @@
       padding-top: 0;
     }
   }
-  
+
   @include media.on-larger-than-mobile {
     &__items {
       padding-left: 0 !important;
@@ -140,31 +140,18 @@
   }
 }
 
-.tna-background-contrast {
-  &--simple {
-    background-color: var(--contrast-background);
-
-    .tna-gallery {
-      background: transparent;
-
-      @include colour.contrast;
-
-      &__header {
-        padding: 0;
-      }
-
-      &__item-figure-inner {
-        background-color: #010101;
-      }
+.tna-gallery {
+  &__item-figure-inner {
+    background-color: #010101;
+  }
 
-      &__item-description {
-      }
+  &__navigation {
+    margin-right: spacing.space(-1);
+    margin-left: spacing.space(-1);
+  }
 
-      &__navigation {
-        margin-right: spacing.space(-1);
-        margin-left: spacing.space(-1);
-      }
-    }
+  &:fullscreen {
+    @include colour.contrast;
   }
 }