YALB-1319 - Bug: Image Gallery - caption cut off | YALB-1473 - Bug: Image Gallery issues with pagination on different browsers and devices

components/00-tokens/effects/_effects.scss

@@ -24,14 +24,17 @@
     // Start visible at 0% to avoid an occasional "flash" when closing.
     0% {
       visibility: visible;
+      z-index: 0;
     }
 
     99% {
       visibility: visible;
+      z-index: 0;
     }
 
     100% {
       visibility: hidden;
+      z-index: -1;
     }
   }
 }

components/00-tokens/typography/_typography.scss

@@ -150,3 +150,13 @@ code {
 @mixin body-xs {
   font: var(--font-style-body-xs);
 }
+
+@mixin truncate-text($lines: 1) {
+  max-width: 100%;
+  text-overflow: ellipsis;
+  width: fit-content;
+  white-space: nowrap;
+  line-clamp: $lines;
+  -webkit-line-clamp: $lines;
+  overflow: hidden;
+}

components/02-molecules/text/yds-text-field.twig

@@ -8,7 +8,7 @@
 {% set text_field__attributes = {
   'data-component-width': text_field__width|default('site'),
   'data-component-alignment': text_field__alignment|default('center'),
-  class: bem(text_field__base_class, text_field__modifiers),
+  class: bem(text_field__base_class, text_field__modifiers, text_field__blockname, text_field__extra_classes),
 } %}
 
 <div {{ add_attributes(text_field__attributes) }}>

components/03-organisms/galleries/media-grid/_yds-media-grid-modal-item--content.twig

@@ -8,24 +8,36 @@
 {% set modal_item__content = modal_item__content|default(item.media_grid__modal__text) %}
 {% set media_grid__modal__base_class = 'media-grid-modal' %}
 
-  {% if modal_item__heading is not empty or modal_item__content is not empty %}
-    {% set media_grid__item__content %}
-      {# Content Heading #}
-      {% if modal_item__heading is not empty %}
-        {% include "@atoms/typography/headings/yds-heading.twig" with {
+{% set modal_item__content__attributes = [{}] %}
+
+
+{% if modal_item__heading is not empty or modal_item__content is not empty %}
+	{% set media_grid__item__content %}
+	{# Content Heading #}
+	{% if modal_item__heading is not empty %}
+		{% include "@atoms/typography/headings/yds-heading.twig" with {
           heading__level: '2',
           heading: modal_item__heading,
           heading__blockname: media_grid__modal__base_class,
         } %}
-      {% endif %}
-      {# Content Text #}
-      {% if modal_item__content %}
-        <div {{ bem('text', [], media_grid__modal__base_class) }}>
-          {{ modal_item__content }}
-        </div>
-      {% endif %}
-    {% endset %}
-    {% include "@molecules/text/yds-text-field.twig" with {
+	{% endif %}
+	{# Content Text #}
+	{% if modal_item__content %}
+		<div {{ bem('text', [], media_grid__modal__base_class) }}>
+			{{ modal_item__content }}
+		</div>
+    <button {{ bem('toggle-caption', ['expand-content'], media_grid__modal__base_class) }}>
+      {% include "@atoms/images/icons/_yds-icon.twig" with {
+        icon__name: 'arrow-up',
+        icon__decorative: true,
+        icon__blockname: media_grid__modal__base_class,
+        icon__modifiers: ['arrow-up'],
+      } %}
+    </button>
+	{% endif %}
+	{% endset %}
+	{% include "@molecules/text/yds-text-field.twig" with {
       text_field__content: media_grid__item__content,
+      text_field__extra_classes: ['no-page-spacing'],
     } %}
-  {% endif %}
+{% endif %}

components/03-organisms/galleries/media-grid/_yds-media-grid-modal.scss

@@ -1,28 +1,40 @@
 @use '../../../00-tokens/tokens';
 @use '../../../01-atoms/atoms';
+@use '../../../00-tokens/typography/typography';
 
 $modal-speed: var(--animation-speed-slow);
 
 @mixin media-grid-modal-transition {
   @include tokens.animate(opacity, $modal-speed);
 }
 
+.media-grid__inner {
+  position: relative;
+  z-index: 1;
+
+  [data-media-grid-modal-state='active'] & {
+    z-index: 0;
+  }
+}
+
 .media-grid__modal {
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
-
-  // This z-index is crazy high to ensure it shows above admin toolbars.
-  z-index: 600;
   background: transparent;
 
   [data-media-grid-modal-state='inactive'] & {
     @include tokens.animate-hidden($modal-speed);
     @include media-grid-modal-transition;
 
     opacity: 0;
+
+    // when inactive, set the z-index below the `media-grid__inner`
+    // to make sure it doesn't render as an invisible elements over the grid
+    // preventing interaction.
+    z-index: -1;
   }
 
   // Show the modal and backdrop when active.
@@ -33,6 +45,9 @@ $modal-speed: var(--animation-speed-slow);
     display: flex;
     align-items: center;
     justify-content: center;
+
+    // This z-index is crazy high to ensure it shows above admin toolbars.
+    z-index: 600;
   }
 
   &::before {
@@ -67,6 +82,7 @@ $modal-speed: var(--animation-speed-slow);
 
 .media-grid-modal__inner {
   display: grid;
+  position: relative;
 
   // Stylelint is mis-interpreting the `/` below as a division operator, rather
   // than as a part of the grid-template sizing stuff. So, we need to disable
@@ -76,10 +92,12 @@ $modal-speed: var(--animation-speed-slow);
     '. . control-close' var(--size-click-target-minimum)
     'media media media' minmax(auto, 50vh)
     'control-previous pager control-next' var(--size-click-target-minimum)
-    'content content content' minmax(var(--size-click-target-minimum), 1fr)
-    / var(--size-click-target-minimum) minmax(0, 1fr) var(--size-click-target-minimum);
+    'content content content' minmax(auto, 1fr) / var(
+      --size-click-target-minimum
+    )
+    minmax(0, 1fr) var(--size-click-target-minimum);
   /* stylelint-enable scss/operator-no-newline-before */
-  gap: var(--spacing-component-gutter-secondary);
+  gap: var(--size-spacing-5);
   max-height: 100%;
 
   @media (min-width: tokens.$break-s) {
@@ -92,13 +110,26 @@ $modal-speed: var(--animation-speed-slow);
       )
       minmax(0, 1fr)
       var(--size-click-target-minimum);
+    gap: var(--spacing-component-gutter-secondary);
+  }
+
+  @media (orientation: landscape) and (max-height: 400px) {
+    grid-template:
+      '. media control-close' var(--size-click-target-minimum)
+      'control-previous media control-next' minmax(auto, 4fr)
+      '. content .' minmax(var(--size-click-target-minimum), 2fr) / var(
+        --size-click-target-minimum
+      )
+      minmax(0, 1fr)
+      var(--size-click-target-minimum);
+    gap: var(--size-spacing-2);
   }
 }
 
 .media-grid-modal__media {
   grid-area: media;
-  height: 100%;
   width: 100%;
+  max-height: 100%;
 
   img {
     height: 100%;
@@ -112,7 +143,11 @@ $modal-speed: var(--animation-speed-slow);
   display: flex;
   gap: var(--size-spacing-1);
   justify-content: center;
-  overflow: auto;
+
+  // hide pager for very small screens
+  @media (orientation: landscape) and (max-height: 400px) {
+    display: none;
+  }
 }
 
 .media-grid-modal__pager-item {
@@ -135,10 +170,11 @@ $modal-speed: var(--animation-speed-slow);
   }
 
   @media (max-width: tokens.$break-s - 0.05) {
-    &:not(.media-grid-modal__pager-item--total):not([data-media-grid-modal-item-active='true']) {
+    &:not(.media-grid-modal__pager-item--total):not([data-media-grid-modal-item-active='true']):not([aria-current='true']) {
       display: none;
     }
 
+    &[aria-current='true'],
     &[data-media-grid-modal-item-active='true'] {
       position: relative;
 
@@ -166,14 +202,34 @@ $modal-speed: var(--animation-speed-slow);
 }
 
 .media-grid-modal__content {
+  overflow: hidden;
   grid-area: content;
-  overflow: auto;
-  max-height: 100%;
+  position: relative;
+  width: 100%;
+  padding-block-start: var(--size-spacing-5);
+  padding-block-end: var(--size-spacing-5);
 
   .text {
     display: flex;
     flex-direction: column;
     gap: var(--size-spacing-3);
+    padding-inline-end: var(--size-spacing-9);
+  }
+
+  &[aria-expanded='true'] {
+    @include tokens.animate(all, var(--animation-speed-slow));
+
+    background-color: rgb(0 0 0 / 90%);
+    overflow: auto;
+    position: absolute;
+    bottom: 0;
+    z-index: 1;
+  }
+
+  &[aria-expanded='false'] {
+    @include tokens.animate(all, var(--animation-speed-slow));
+
+    max-height: var(--modal-content-item-height);
   }
 
   a {
@@ -187,10 +243,44 @@ $modal-speed: var(--animation-speed-slow);
 
 .media-grid-modal__heading {
   @include tokens.body-l;
+
+  // if the toggle is present, truncate the heading to 1 line
+  [aria-expanded='false'] & {
+    @include typography.truncate-text;
+  }
+
+  @media (max-width: tokens.$break-s - 0.05) {
+    @include tokens.body-default;
+  }
+
+  @media (orientation: landscape) and (max-height: 400px) {
+    @include tokens.body-default;
+  }
 }
 
 .media-grid-modal__text {
   @include tokens.body-default-condensed;
+
+  > * {
+    margin-top: 0;
+  }
+
+  [aria-expanded='false'] & {
+    @include typography.truncate-text;
+  }
+
+  @media (max-width: tokens.$break-s - 0.05) {
+    @include tokens.body-s;
+
+    max-height: 60vh;
+  }
+
+  // small height and landscape
+  @media (orientation: landscape) and (max-height: 400px) {
+    @include tokens.body-s;
+
+    max-height: 20vh;
+  }
 }
 
 .media-grid-modal__control {
@@ -244,3 +334,29 @@ $modal-speed: var(--animation-speed-slow);
 
   opacity: 1;
 }
+
+.media-grid-modal__toggle-caption {
+  position: absolute;
+  top: var(--size-spacing-4);
+  right: var(--size-spacing-4);
+  padding: 0;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  height: var(--size-click-target-minimum);
+  width: var(--size-click-target-minimum);
+  display: none;
+
+  svg {
+    @include tokens.animate($property: 'transform', $duration: 400ms);
+
+    transform: rotate3d(0, 0, 0);
+    fill: var(--color-basic-white);
+  }
+
+  [aria-expanded='true'] & {
+    svg {
+      transform: rotate3d(0, 0, 1, -180deg);
+    }
+  }
+}