Merge pull request #1138 from City-of-Helsinki/UHF-8689

UHF-8689: Captions for illustrations on special pages
City-of-Helsinki · Dec 17, 2024 · b14bd48 · b14bd48
2 parents 7e1f6c8 + 13f242e
commit b14bd48
Show file tree

Hide file tree

Showing 11 changed files with 104 additions and 69 deletions.
diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css
diff --git a/src/scss/05_objects/__index.scss b/src/scss/05_objects/__index.scss
@@ -7,3 +7,4 @@
 @import 'unpublished-content-flag';
 @import 'user-edited-content';
 @import 'main-image';
+@import 'special-page-illustration';
diff --git a/src/scss/05_objects/_special-page-illustration.scss b/src/scss/05_objects/_special-page-illustration.scss
@@ -0,0 +1,32 @@
+.special-page__illustration-container {
+  --illustration-large-width: 379px;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+
+  @include breakpoint($breakpoint-m) {
+    max-width: 100%;
+    padding-left: $spacing-sextuple;
+    width: 50%;
+  }
+}
+
+.special-page__illustration {
+  display: block;
+  height: auto;
+  margin-bottom: $spacing;
+  margin-top: $spacing-triple;
+  max-width: var(--illustration-large-width);
+  width: 100%;
+
+  @include breakpoint($breakpoint-m) {
+    margin-left: 0;
+    margin-top: 0;
+  }
+}
+
+.special-page__illustration__caption {
+  max-width: var(--illustration-large-width);
+  width: 100%;
+}
diff --git a/src/scss/06_components/layout/_error-pages.scss b/src/scss/06_components/layout/_error-pages.scss
@@ -88,29 +88,10 @@ body:has(.error-page__title) {
   // }
 }
 
-.error-page__illustration-container {
+.special-page__illustration-container--error-page {
   @include breakpoint($breakpoint-m) {
-    align-items: flex-start;
-    display: flex;
-    justify-content: center;
     padding-left: $spacing-triple;
     padding-right: $spacing-triple;
     padding-top: $spacing-sextuple;
-    width: 50%;
-  }
-}
-
-.error-page__illustration {
-  display: block;
-  height: auto;
-  margin-left: $spacing-double;
-  margin-top: $spacing-triple;
-  width: 264px;
-
-  @include breakpoint($breakpoint-m) {
-    margin-left: 0;
-    margin-top: 0;
-    max-width: 100%;
-    width: 379px;
   }
 }
diff --git a/src/scss/06_components/layout/_login-page.scss b/src/scss/06_components/layout/_login-page.scss
@@ -1,5 +1,3 @@
-$illustration-max-width-mobile: 450px;
-
 .user-login-page {
   // Background on the error pages needs to be gray because the illustrations disappear to the background if its white.
   background-color: $color-silver-medium-light;
@@ -31,28 +29,19 @@ $illustration-max-width-mobile: 450px;
   }
 }
 
-.user-login-page__illustration-container {
-  align-items: center;
-  display: flex;
+.special-page__illustration-container--user-login {
+  --illustration-large-width: 450px;
   justify-content: center;
+  max-width: 600px; // Match the illustration container with the login form.
 
   @include breakpoint($breakpoint-m) {
-    padding-left: $spacing-sextuple;
-    width: 50%;
+    max-width: unset;
   }
-}
 
-.user-login-page__illustration {
-  display: block;
-  height: auto;
-  margin-top: $spacing-triple;
-  max-width: $illustration-max-width-mobile;
-  width: 100%;
-
-  @include breakpoint($breakpoint-m) {
-    margin-left: 0;
-    margin-top: 0;
-    max-width: unset;
+  .special-page__illustration {
+    @include breakpoint($breakpoint-m) {
+      max-width: unset;
+    }
   }
 }
 

diff --git a/src/scss/06_components/layout/_maintenance-page.scss b/src/scss/06_components/layout/_maintenance-page.scss
@@ -61,25 +61,16 @@
   }
 }
 
-.maintenance-page__illustration-container {
+.special-page__illustration-container--maintenance-page {
+  --illustration-large-width: 350px;
+  margin-bottom: $spacing-triple;
+
   @include breakpoint($breakpoint-m) {
-    align-items: flex-start;
-    display: flex;
-    justify-content: center;
-    padding: $spacing-sextuple $spacing-triple;
-    width: 50%;
+    --illustration-large-width: 460px;
+    padding-inline: $spacing-triple;
   }
-}
-
-.maintenance-page__illustration {
-  display: block;
-  height: auto;
-  margin: $spacing-sextuple auto;
-  width: 350px;
 
-  @include breakpoint($breakpoint-m) {
-    margin: 0;
-    max-width: 100%;
-    width: 460px;
+  .special-page__illustration {
+    margin-top: $spacing-sextuple;
   }
 }
diff --git a/templates/layout/maintenance-page.html.twig b/templates/layout/maintenance-page.html.twig
@@ -53,8 +53,13 @@
 
       </main>
     </div>
-    <div class="maintenance-page__illustration-container">
-      <img src="https://hel.fi/etusivu-assets/themes/contrib/hdbt/src/images/illustration_maintenance_mode_page.svg" alt="" class="maintenance-page__illustration" width="379" height="566" />
-    </div>
+    {% embed '@hdbt/misc/special-page-illustration.twig' with {
+      illustration_modifier_class: 'special-page__illustration-container--maintenance-page',
+      illustration_url: 'https://hel.fi/etusivu-assets/themes/contrib/hdbt/src/images/illustration_maintenance_mode_page.svg',
+      illustration_width: '394',
+      illustration_height: '559',
+      illustration_caption: 'Photo: @photographer'|t({'@photographer': 'Lille Santanen'}, {'context': 'Image photographer'}),
+    } %}
+    {% endembed %}
   {% endblock container_content %}
 {% endembed %}
diff --git a/templates/layout/page--401.html.twig b/templates/layout/page--401.html.twig
@@ -32,9 +32,14 @@
             {{ drupal_block('user_login_block') }}
           </div>
         </div>
-        <div class="error-page__illustration-container">
-          <img src="{{ theme_path }}/src/images/illustration_error_page_403_401.svg" alt="" class="error-page__illustration" width="379" height="566" />
-        </div>
+        {% embed '@hdbt/misc/special-page-illustration.twig' with {
+          illustration_modifier_class: 'special-page__illustration-container--error-page',
+          illustration_url: theme_path ~ '/src/images/illustration_error_page_403_401.svg',
+          illustration_width: '379',
+          illustration_height: '566',
+          illustration_caption: 'Photo: @photographer'|t({'@photographer': 'Lille Santanen'}, {'context': 'Image photographer'}),
+        } %}
+        {% endembed %}
       {% endblock container_content %}
     {% endembed %}
   {% endblock page_content %}

diff --git a/templates/layout/page--404.html.twig b/templates/layout/page--404.html.twig
@@ -23,9 +23,14 @@
           {% endset %}
           {{ link(feedback_link_title, error_page_feedback_link, link_attributes) }}
         </div>
-        <div class="error-page__illustration-container">
-          <img src="{{ theme_path }}/src/images/illustration_error_page_404.svg" alt="" class="error-page__illustration" width="379" height="566" />
-        </div>
+        {% embed '@hdbt/misc/special-page-illustration.twig' with {
+          illustration_modifier_class: 'special-page__illustration-container--error-page',
+          illustration_url: theme_path ~ '/src/images/illustration_error_page_404.svg',
+          illustration_width: '379',
+          illustration_height: '566',
+          illustration_caption: 'Photo: @photographer'|t({'@photographer': 'Lille Santanen'}, {'context': 'Image photographer'}),
+        } %}
+        {% endembed %}
       {% endblock container_content %}
     {% endembed %}
   {% endblock page_content %}

diff --git a/templates/layout/page--user--login.html.twig b/templates/layout/page--user--login.html.twig
@@ -8,9 +8,12 @@
           </div>
           {{ page.content|without(page_title_block) }}
         </div>
-        <div class="user-login-page__illustration-container">
-          <img src="{{ theme_path }}/src/images/illustration_user_login_page.svg" alt="" class="user-login-page__illustration"/>
-        </div>
+        {% embed '@hdbt/misc/special-page-illustration.twig' with {
+          illustration_modifier_class: 'special-page__illustration-container--user-login',
+          illustration_url: theme_path ~ '/src/images/illustration_user_login_page.svg',
+          illustration_caption: 'Photo: @photographer'|t({'@photographer': 'Lille Santanen'}, {'context': 'Image photographer'}),
+        } %}
+        {% endembed %}
       {% endblock container_content %}
     {% endembed %}
   {% endblock page_content %}

diff --git a/templates/misc/special-page-illustration.twig b/templates/misc/special-page-illustration.twig
@@ -0,0 +1,23 @@
+{#
+{% embed '@hdbt/misc/special-page-illustration.twig' with {
+    illustration_modifier_class: 'special-page__illustration-container--modifier-class',
+    illustration_url: '/url/to/illustration.svg',
+    illustration_width: '200',
+    illustration_height: '500',
+    illustration_caption: 'Photo: @photographer'|t({'@photographer': 'Petra Photographer'}, {'context': 'Image photographer'}),
+  } %}
+{% endembed %}
+#}
+
+<figure class="special-page__illustration-container {{ illustration_modifier_class }}">
+  <img
+    src="{{ illustration_url }}"
+    class="special-page__illustration"
+    alt
+    {% if illustration_width %}width="{{ illustration_width }}"{% endif %}
+    {% if illustration_height %}height="{{ illustration_height }}"{% endif %}
+  />
+  <figcaption class="special-page__illustration__caption">
+    {{ illustration_caption }}
+  </figcaption>
+</figure>