Skip to content

Commit

Permalink
Gallery improvements (#152)
Browse files Browse the repository at this point in the history 
* Improve gallery layout and allow no default image when loading

* More efficient grouping of media queries in areas
  • Loading branch information
@ahosgood
ahosgood authored Jul 24, 2024
1 parent db9b6a2 commit 4a3f362
Show file tree
Hide file tree
Showing 10 changed files with 86 additions and 65 deletions.
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.2.1...HEAD)

### Added

- Allowed galleries to not show the first image by default using `showGrid`

### Changed

- Allowed the arrows to appear on card heading links
- The header component no longer requires the `tna-template--js-enabled` class on the `<html>` element to show and hide on smaller devices

### Deprecated
### Removed
Expand All @@ -19,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Arrow colour for visited heading links with the class `tna-link--no-visited-state`
- Incorrect padding on the bottom of horizontal cards
- Removed space between heading and exclamation mark on warning components
- Fixed gallery component layout when CSS loads but JS fails

### Security

Expand Down
2 changes: 1 addition & 1 deletion src/nationalarchives/components/gallery/fixtures.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
],
"id": "test-gallery"
},
"html": "<section class=\"tna-gallery\" data-module=\"tna-gallery\"><div class=\"tna-gallery__header\"><div class=\"tna-gallery__header-inner\"><h3 class=\"tna-heading-m\">My gallery</h3><p>Lorem ipsum</p></div><div class=\"tna-gallery__options tna-button-group tna-button-group--small\" hidden><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"show-index\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M128 136c0-22.1-17.9-40-40-40L40 96C17.9 96 0 113.9 0 136l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40l0-48zm0 192c0-22.1-17.9-40-40-40H40c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM288 328c0-22.1-17.9-40-40-40H200c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM448 328c0-22.1-17.9-40-40-40H360c-22.1 0-40 17.9-40 40v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328z\"/></svg>See all images</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"enter-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z\"/></svg>Full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"exit-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z\"/></svg>Exit full screen</button></div></div><div class=\"tna-gallery__items\"><div class=\"tna-gallery__item\" id=\"test-gallery-item-1\" aria-labelledby=\"test-gallery-item-1-tab\" role=\"tabpanel\"><p class=\"tna-gallery__item-header\">Image 1 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/50/600/400\" class=\"tna-gallery__item-image\" alt=\"Photo 1\" width=\"600\" height=\"400\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 1</figcaption></figure></div><div class=\"tna-gallery__item\" id=\"test-gallery-item-2\" aria-labelledby=\"test-gallery-item-2-tab\" role=\"tabpanel\"><p class=\"tna-gallery__item-header\">Image 2 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/51/600/600\" class=\"tna-gallery__item-image\" alt=\"Photo 2\" width=\"400\" height=\"400\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 2</figcaption></figure></div><div class=\"tna-gallery__item\" id=\"test-gallery-item-3\" aria-labelledby=\"test-gallery-item-3-tab\" role=\"tabpanel\"><p class=\"tna-gallery__item-header\">Image 3 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/52/400/600\" class=\"tna-gallery__item-image\" alt=\"Photo 3\" width=\"400\" height=\"600\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 3</figcaption></figure></div></div><div class=\"tna-gallery__navigation-buttons\" hidden><button type=\"button\" class=\"tna-gallery__navigation-button tna-gallery__navigation-prev\" aria-label=\"Previous image\"><span class=\"tna-gallery__navigation-button-label\">Previous image</span></button><button type=\"button\" class=\"tna-gallery__navigation-button tna-gallery__navigation-next\" aria-label=\"Next image\"><span class=\"tna-gallery__navigation-button-label\">Next image</span></button></div><div class=\"tna-gallery__navigation\" role=\"tablist\" hidden><button type=\"button\" class=\"tna-gallery__navigation-item\" role=\"tab\" id=\"test-gallery-item-1-tab\" aria-label=\"Photo 1 of 3\" aria-controls=\"test-gallery-item-1\"><img src=\"https://picsum.photos/id/50/600/400\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"600\" height=\"400\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">1</span><span class=\"tna-visually-hidden\"> of 3</span></button><button type=\"button\" class=\"tna-gallery__navigation-item\" role=\"tab\" id=\"test-gallery-item-2-tab\" aria-label=\"Photo 2 of 3\" aria-controls=\"test-gallery-item-2\"><img src=\"https://picsum.photos/id/51/600/600\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"400\" height=\"400\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">2</span><span class=\"tna-visually-hidden\"> of 3</span></button><button type=\"button\" class=\"tna-gallery__navigation-item\" role=\"tab\" id=\"test-gallery-item-3-tab\" aria-label=\"Photo 3 of 3\" aria-controls=\"test-gallery-item-3\"><img src=\"https://picsum.photos/id/52/400/600\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"400\" height=\"600\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">3</span><span class=\"tna-visually-hidden\"> of 3</span></button></div></section>"
"html": "<section class=\"tna-gallery\" data-module=\"tna-gallery\"><div class=\"tna-gallery__header\"><div class=\"tna-gallery__header-inner\"><h3 class=\"tna-heading-m\">My gallery</h3><p>Lorem ipsum</p></div><div class=\"tna-gallery__options tna-button-group tna-button-group--small\" hidden><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" title=\"Full screen\" hidden value=\"enter-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z\"/></svg>Full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" title=\"Exit full screen\" hidden value=\"exit-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z\"/></svg>Exit full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" title=\"See all images\" hidden value=\"show-index\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M128 136c0-22.1-17.9-40-40-40L40 96C17.9 96 0 113.9 0 136l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40l0-48zm0 192c0-22.1-17.9-40-40-40H40c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM288 328c0-22.1-17.9-40-40-40H200c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM448 328c0-22.1-17.9-40-40-40H360c-22.1 0-40 17.9-40 40v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328z\"/></svg>See all images</button></div></div><div class=\"tna-gallery__items\"><div class=\"tna-gallery__item\" id=\"test-gallery-item-1\" aria-labelledby=\"test-gallery-item-1-tab\" role=\"tabpanel\"><p class=\"tna-gallery__item-header\">Image 1 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/50/600/400\" class=\"tna-gallery__item-image\" alt=\"Photo 1\" width=\"600\" height=\"400\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 1</figcaption></figure></div><div class=\"tna-gallery__item\" id=\"test-gallery-item-2\" aria-labelledby=\"test-gallery-item-2-tab\" role=\"tabpanel\"><p class=\"tna-gallery__item-header\">Image 2 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/51/600/600\" class=\"tna-gallery__item-image\" alt=\"Photo 2\" width=\"400\" height=\"400\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 2</figcaption></figure></div><div class=\"tna-gallery__item\" id=\"test-gallery-item-3\" aria-labelledby=\"test-gallery-item-3-tab\" role=\"tabpanel\"><p class=\"tna-gallery__item-header\">Image 3 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/52/400/600\" class=\"tna-gallery__item-image\" alt=\"Photo 3\" width=\"400\" height=\"600\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 3</figcaption></figure></div></div><div class=\"tna-gallery__navigation-buttons\" hidden><button type=\"button\" class=\"tna-gallery__navigation-button tna-gallery__navigation-prev\" aria-label=\"Previous image\"><span class=\"tna-gallery__navigation-button-label\">Previous image</span></button><button type=\"button\" class=\"tna-gallery__navigation-button tna-gallery__navigation-next\" aria-label=\"Next image\"><span class=\"tna-gallery__navigation-button-label\">Next image</span></button></div><div class=\"tna-gallery__navigation\" role=\"tablist\" hidden><button type=\"button\" class=\"tna-gallery__navigation-item\" role=\"tab\" id=\"test-gallery-item-1-tab\" aria-label=\"Photo 1 of 3\" aria-controls=\"test-gallery-item-1\"><img src=\"https://picsum.photos/id/50/600/400\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"600\" height=\"400\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">1</span><span class=\"tna-visually-hidden\"> of 3</span></button><button type=\"button\" class=\"tna-gallery__navigation-item\" role=\"tab\" id=\"test-gallery-item-2-tab\" aria-label=\"Photo 2 of 3\" aria-controls=\"test-gallery-item-2\"><img src=\"https://picsum.photos/id/51/600/600\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"400\" height=\"400\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">2</span><span class=\"tna-visually-hidden\"> of 3</span></button><button type=\"button\" class=\"tna-gallery__navigation-item\" role=\"tab\" id=\"test-gallery-item-3-tab\" aria-label=\"Photo 3 of 3\" aria-controls=\"test-gallery-item-3\"><img src=\"https://picsum.photos/id/52/400/600\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"400\" height=\"600\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">3</span><span class=\"tna-visually-hidden\"> of 3</span></button></div></section>"
}
]
}
8 changes: 4 additions & 4 deletions src/nationalarchives/components/gallery/gallery.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export class Gallery {
return;
}

this.$module.classList.add("tna-gallery--js");
this.$module.classList.add("tna-gallery--interactive");

this.$showIndex = this.$options.querySelector('button[value="show-index"]');
this.$enterFullscreen = this.$options.querySelector(
Expand All @@ -49,8 +49,8 @@ export class Gallery {
);

this.setup();
this.allowIndex = false;
if (this.allowIndex) {
this.allowGridIndex = this.$module.dataset["showgrid"] || false;
if (this.allowGridIndex) {
this.showIndex();
} else {
this.currentId = this.$items[0].id;
Expand Down Expand Up @@ -145,7 +145,7 @@ export class Gallery {
$item.setAttribute("tabindex", index === 0 ? "0" : "-1");
}
});
if (this.allowIndex) {
if (this.allowGridIndex) {
this.$showIndex?.removeAttribute("hidden");
}
this.currentId = id;
Expand Down
63 changes: 33 additions & 30 deletions src/nationalarchives/components/gallery/gallery.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,6 @@
@use "../../tools/typography";

.tna-gallery {
// min-height: 100dvh;
max-height: 175dvh;

display: grid;
grid-template: min-content min-content 1fr / 2fr 1fr;
gap: 0 spacing.space(1);
Expand Down Expand Up @@ -37,11 +34,9 @@
&__options {
margin-top: 0;

align-items: flex-start;

justify-content: flex-end;

flex: 1;
flex-direction: column;
align-items: flex-end;
justify-content: flex-start;

.tna-button {
white-space: nowrap;
Expand Down Expand Up @@ -196,6 +191,11 @@
transform: rotate(45deg);
}

&__items[tabindex="-1"],
&__items[tabindex="-1"] + &__navigation-buttons {
display: none;
}

&__navigation {
padding: spacing.space(1);

Expand Down Expand Up @@ -278,11 +278,15 @@
@include colour.colour-background("background");
}

&--js &__item-figure-inner {
&--interactive {
max-height: 175dvh;
}

&--interactive &__item-figure-inner {
aspect-ratio: 3 / 2;
}

&--js &__item-image {
&--interactive &__item-image {
width: 100%;
height: 100%;

Expand All @@ -299,30 +303,43 @@
}

@include media.on-mobile {
&__options {
flex-direction: row-reverse;
align-items: flex-start;
}

&__navigation {
grid-template-columns: repeat(3, 1fr);
}
}

@include media.on-tiny {
&__options {
align-items: flex-end;
justify-content: flex-start;
// align-items: flex-end;
// justify-content: flex-start;
}

&__navigation-item-label {
@include typography.font-size(18);
}
}

&--fullscreen {
// max-height: 100dvh;
}

&--fullscreen &__header-inner {
display: none;
}

&--fullscreen &__options {
flex: 1;

flex-direction: row;
align-items: flex-start;
justify-content: flex-end;

.tna-button[value="show-index"] {
display: none;
}
}

&--fullscreen &__item-description {
max-height: 4.5rem;

Expand All @@ -333,13 +350,6 @@
@media (aspect-ratio >= 1/1) {
&--fullscreen &__header {
grid-column: 2 / 3;
// padding-bottom: spacing.space(0.5);
}

&--fullscreen &__options {
.tna-button[value="show-index"] {
display: none;
}
}

&--fullscreen &__items,
Expand All @@ -352,11 +362,6 @@
height: 100%;
}

&--fullscreen &__item-header {
// padding-top: spacing.space(0.5);
// padding-bottom: spacing.space(0.5);
}

&--fullscreen &__item-figure {
flex: 1;
}
Expand All @@ -370,14 +375,12 @@
}

&--fullscreen &__navigation {
// padding-top: spacing.space(0.5);
padding-top: 0;
padding-left: 0;

grid-column: 2 / 3;
grid-row: 2 / 4;

// grid-template-columns: repeat(3, minmax(8rem, 1fr));
grid-template-columns: repeat(3, 1fr);
gap: spacing.space(0.5);
}
Expand Down
11 changes: 11 additions & 0 deletions src/nationalarchives/components/gallery/gallery.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const argTypes = {
text: { control: "text" },
items: { control: "object" },
id: { control: "text" },
showGrid: { control: "boolean" },
classes: { control: "text" },
attributes: { control: "object" },
};
Expand All @@ -32,6 +33,7 @@ const Template = ({
text,
items,
id,
showGrid,
classes,
attributes,
}) =>
Expand All @@ -44,6 +46,7 @@ const Template = ({
text,
items,
id,
showGrid,
classes,
attributes,
},
Expand Down Expand Up @@ -85,3 +88,11 @@ Standard.args = {
id: "test",
classes: "tna-gallery--demo",
};

export const Grid = Template.bind({});
Grid.args = {
...Standard.args,
...{
showGrid: true,
},
};
6 changes: 6 additions & 0 deletions src/nationalarchives/components/gallery/macro-options.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,12 @@
"required": true,
"description": "A unique ID for the gallery."
},
{
"name": "showGrid",
"type": "boolean",
"required": false,
"description": "If true, don't select the first image when the gallery loads and instead show a grid of images."
},
{
"name": "classes",
"type": "string",
Expand Down
Loading

0 comments on commit 4a3f362

Please sign in to comment.