From 77b1df38e9f3935812286d192b9d650ad3aa9700 Mon Sep 17 00:00:00 2001 From: Krishan Veerappa Date: Wed, 5 Jul 2023 14:57:56 +0100 Subject: [PATCH 01/30] Added transcript content and button --- sass/includes/_image-block.scss | 54 ++++++++++++++++ scripts/src/article.js | 10 +++ scripts/src/modules/transcript_tabs.js | 39 ++++++++++++ templates/blocks/image-block-default.html | 78 +++++++++++++++++++++++ 4 files changed, 181 insertions(+) create mode 100644 scripts/src/modules/transcript_tabs.js diff --git a/sass/includes/_image-block.scss b/sass/includes/_image-block.scss index a30b2b5e0..853b713ee 100644 --- a/sass/includes/_image-block.scss +++ b/sass/includes/_image-block.scss @@ -1,6 +1,7 @@ .image-block { $root: &; background-color: $color__grey-200; + position: relative; // Removes parent margin to ensure it's flush with viewport edge margin-left: -30px; @@ -55,4 +56,57 @@ } } } + + &__transcript { + position: absolute; + bottom: 1rem; + right: 1rem; + display: flex; + justify-content: center; + align-items: center; + background-color: rgba($color__black, 0.8); + color: $color__white; + border: 0; + padding: 0.25rem 0.75rem 0.25rem 0.5rem; + cursor: pointer; + font-size: 0.875rem; + } + + &__transcription { + background-color: $color__dark; + padding: 2rem 2.5rem; + color: $color__white; + + .transcription__text.hidden { + display: none; + } + + .transcription__tablist { + + .transcription__tab { + font-size: 1rem; + font-weight: 700; + + &[aria-selected="false"] { + color: $color__grey-500; + } + } + + &.hidden { + display: none; + } + } + + .transcription__tabpanel { + margin-top: 1.5rem; + + &.hidden { + display: none; + } + } + + p:last-child { + margin-bottom: 0; + } + } } \ No newline at end of file diff --git a/scripts/src/article.js b/scripts/src/article.js index df2796147..d7c663009 100644 --- a/scripts/src/article.js +++ b/scripts/src/article.js @@ -20,6 +20,7 @@ import remove_event from "./modules/articles/remove_event"; import set_active from "./modules/articles/navigation/set_active"; import set_heading_positions from "./modules/articles/accordion_functionality/set_heading_positions"; import throttle from "./modules/throttle"; +import transcript_tabs from "./modules/transcript_tabs"; document.addEventListener('DOMContentLoaded', () => { add_analytics_data_card_position('.record-embed-no-image'); @@ -51,6 +52,15 @@ window.addEventListener('load', () => { // Ids are added to sections for ARIA purposes. add_section_ids($sectionHeadings, $sectionContents); + // Transcription tabs + const transcriptTabs = document.querySelectorAll('[ data-js-transcript-tablist]'); + + if(transcriptTabs) { + transcriptTabs.forEach(item => { + new transcript_tabs(item); + }); + } + if($(window).width() / baseFontSize <= remScreenSize && !mobileEnhancementsApplied) { $sectionContents.hide(); apply_aria_roles($sectionHeadings, $sectionContents); diff --git a/scripts/src/modules/transcript_tabs.js b/scripts/src/modules/transcript_tabs.js new file mode 100644 index 000000000..007733431 --- /dev/null +++ b/scripts/src/modules/transcript_tabs.js @@ -0,0 +1,39 @@ +import TabManager from './tab_manager'; + +class TranscriptTabs { + constructor(transcriptNode) { + this.node = transcriptNode; + this.nonJsNodes = this.node.querySelectorAll('.transcription__text'); + this.transcriptionContentNode = this.node.querySelectorAll("[id^='item-']"); + this.tabList = this.node.querySelectorAll('[role="tablist"]'); + this.setUp(); + } + + setUp() { + // Hide non-js nodes + for (let i= 0; i < this.nonJsNodes.length; i++) { + this.hide(this.nonJsNodes[i]); + } + // Show JS nodes + for (let i= 0; i < this.transcriptionContentNode.length; i++) { + this.hide(this.transcriptionContentNode[i]); + } + + // tabs + for (var i = 0; i < this.tabList.length; i++) { + new TabManager(this.tabList[i]); + this.show(this.tabList[i]); + } + } + + show(node) { + node.classList.remove('hidden'); + } + + hide(node){ + node.classList.add('hidden'); + } + +} + +export default TranscriptTabs; \ No newline at end of file diff --git a/templates/blocks/image-block-default.html b/templates/blocks/image-block-default.html index fc9d04aa7..fa73db6d9 100644 --- a/templates/blocks/image-block-default.html +++ b/templates/blocks/image-block-default.html @@ -14,6 +14,10 @@ {% image value.image max-390x265 as mobile_img %} {{ mobile_img.alt_text }} +
{{ value.caption|richtext }} @@ -30,6 +34,80 @@ {% image value.image max-390x265 as mobile_img %} {% if value.decorative %}{{ value.alt_text }}{% endif %} + {% endif %} +
+ {# non-JS version #} + {% if value.image.transcription or value.image.translation %} +
+ {% if value.image.transcription %} +

{{ value.image.get_transcription_heading_display }}

+ {{ value.image.transcription|richtext }} + {% endif %} + {% if value.image.translation %} +

{{ value.image.get_translation_heading_display }}

+ {{ value.image.translation|richtext }} + {% endif %} +
+ {% endif %} + {# JS version #} + {% if value.image.transcription or value.image.translation %} +
+ + {% if value.image.transcription %} + + {% endif %} + {% if value.image.translation %} + + {% endif %} +
+ {% endif %} +
{% endif %} + \ No newline at end of file From b0f3447f7fa6bdc5868d21f2aca6dd3d800d2e5b Mon Sep 17 00:00:00 2001 From: Krishan Veerappa Date: Thu, 6 Jul 2023 09:37:23 +0100 Subject: [PATCH 02/30] Added accordion feature --- sass/includes/_image-block.scss | 10 +++++++ scripts/src/article.js | 15 +++++++++- scripts/src/modules/transcript_tabs.js | 3 ++ templates/blocks/image-block-default.html | 36 ++++++++++++----------- 4 files changed, 46 insertions(+), 18 deletions(-) diff --git a/sass/includes/_image-block.scss b/sass/includes/_image-block.scss index 853b713ee..3021d2837 100644 --- a/sass/includes/_image-block.scss +++ b/sass/includes/_image-block.scss @@ -70,6 +70,12 @@ padding: 0.25rem 0.75rem 0.25rem 0.5rem; cursor: pointer; font-size: 0.875rem; + + &[aria-expanded="true"] { + svg { + transform: rotate(180deg); + } + } } &__transcription { @@ -77,6 +83,10 @@ padding: 2rem 2.5rem; color: $color__white; + &.hidden { + display: none; + } + .transcription__text.hidden { display: none; } diff --git a/scripts/src/article.js b/scripts/src/article.js index d7c663009..dc1eb2d55 100644 --- a/scripts/src/article.js +++ b/scripts/src/article.js @@ -53,9 +53,22 @@ window.addEventListener('load', () => { add_section_ids($sectionHeadings, $sectionContents); // Transcription tabs + const transcriptButton = document.querySelectorAll('[ data-js-transcript]'); const transcriptTabs = document.querySelectorAll('[ data-js-transcript-tablist]'); - if(transcriptTabs) { + if(transcriptButton && transcriptTabs) { + + const $transcriptButton = $('.image-block__transcript'); + const $transcriptContent = $('.image-block__transcription'); + + add_section_ids($transcriptButton, $transcriptContent); + + transcriptButton.forEach(item => { + add_event(item, 'click', () => { + accordion_functionality(item, $transcriptButton, $transcriptContent, 0); + }); + }); + transcriptTabs.forEach(item => { new transcript_tabs(item); }); diff --git a/scripts/src/modules/transcript_tabs.js b/scripts/src/modules/transcript_tabs.js index 007733431..eabe67505 100644 --- a/scripts/src/modules/transcript_tabs.js +++ b/scripts/src/modules/transcript_tabs.js @@ -19,6 +19,9 @@ class TranscriptTabs { this.hide(this.transcriptionContentNode[i]); } + //Hide transcription with JS enabled + this.hide(this.node); + // tabs for (var i = 0; i < this.tabList.length; i++) { new TabManager(this.tabList[i]); diff --git a/templates/blocks/image-block-default.html b/templates/blocks/image-block-default.html index 76ff40078..b2f1e5b8e 100644 --- a/templates/blocks/image-block-default.html +++ b/templates/blocks/image-block-default.html @@ -21,10 +21,12 @@ {% endif %} {% if value.decorative %}{{ value.alt_text }}{% endif %} - + {% if value.image.transcription or value.image.translation %} + + {% endif %}
{{ value.caption|richtext }} @@ -48,13 +50,14 @@ {% endif %} {% if value.decorative %}{{ value.alt_text }}{% endif %} - {% endif %} -
+ {% if value.image.transcription or value.image.translation %} +
{# non-JS version #} {% if value.image.transcription or value.image.translation %}
@@ -69,16 +72,15 @@

{{ value.image.get_translation_heading_display }}

{% endif %} {# JS version #} - {% if value.image.transcription or value.image.translation %}
{% if value.image.transcription %} - {% endif %} {% if value.image.translation %} - {% endif %}
- {% endif %} -
+
+ {% endif %} {% endif %} \ No newline at end of file From 7af0c950cd0344d924ececc8bcd24789126168c0 Mon Sep 17 00:00:00 2001 From: Krishan Veerappa Date: Thu, 6 Jul 2023 10:09:23 +0100 Subject: [PATCH 03/30] Refactored image block reduce and remove duplication of code --- sass/includes/_image-block.scss | 6 +- templates/blocks/image-block-default.html | 181 ++++++++++------------ 2 files changed, 87 insertions(+), 100 deletions(-) diff --git a/sass/includes/_image-block.scss b/sass/includes/_image-block.scss index 3021d2837..a441432b0 100644 --- a/sass/includes/_image-block.scss +++ b/sass/includes/_image-block.scss @@ -1,7 +1,11 @@ .image-block { $root: &; background-color: $color__grey-200; - position: relative; + + picture { + position: relative; + display: block; + } // Removes parent margin to ensure it's flush with viewport edge margin-left: -30px; diff --git a/templates/blocks/image-block-default.html b/templates/blocks/image-block-default.html index b2f1e5b8e..c67dc097c 100644 --- a/templates/blocks/image-block-default.html +++ b/templates/blocks/image-block-default.html @@ -2,38 +2,8 @@ {% image value.image width-600 as block_image %} {% if value.image %} - {% if value.caption %} -
- - {% image value.image max-832x591 format-webp as desktop_img %} - - {% image value.image max-832x591 as desktop_image %} - - {% if value.is_portrait %} - {% image value.image max-265x390 format-webp as mobile_img %} - - {% image value.image max-265x390 as mobile_img %} - - {% else %} - {% image value.image max-390x265 format-webp as mobile_img %} - - {% image value.image max-390x265 as mobile_img %} - - {% endif %} - {% if value.decorative %}{{ value.alt_text }}{% endif %} - {% if value.image.transcription or value.image.translation %} - - {% endif %} - -
- {{ value.caption|richtext }} -
-
- {% else %} - +
+ {% image value.image max-832x591 format-webp as desktop_img %} {% image value.image max-832x591 as desktop_image %} @@ -49,81 +19,94 @@ {% image value.image max-390x265 as mobile_img %} {% endif %} - {% if value.decorative %}{{ value.alt_text }}{% endif %} - + {% if value.caption %} + {% if value.decorative %}{{ value.alt_text }}{% endif %} + {% else %} + {% if value.decorative %}{{ value.alt_text }}{% endif %} + {% endif %} + {% if value.image.transcription or value.image.translation %} + + {% endif %} - {% endif %} - {% if value.image.transcription or value.image.translation %} -
- {# non-JS version #} + {% if value.image.transcription or value.image.translation %} -
- {% if value.image.transcription %} -

{{ value.image.get_transcription_heading_display }}

- {{ value.image.transcription|richtext }} - {% endif %} - {% if value.image.translation %} -

{{ value.image.get_translation_heading_display }}

- {{ value.image.translation|richtext }} - {% endif %} -
- {% endif %} - {# JS version #} -
-
{% endif %} \ No newline at end of file From 049efe65bd59f14097d1f26b7d785c33d22ecc56 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Tue, 11 Jul 2023 13:14:32 +0100 Subject: [PATCH 04/30] Reinstate frontend styles, fix issues, update footer classes (#1168) --- package-lock.json | 10 ++++ package.json | 3 +- sass/etna.scss | 29 +++++++++++- sass/includes/_buttons.scss | 1 + sass/includes/_footer.scss | 10 ++-- sass/includes/_record-matters.scss | 1 + templates/includes/footer.html | 62 ++++++++++++------------- templates/includes/highlight-intro.html | 9 +--- 8 files changed, 81 insertions(+), 44 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7e8675ff1..aec6b3de7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "7.1.0", "license": "ISC", "dependencies": { + "@nationalarchives/frontend": "^0.1.8-prerelease", "jest": "~29.5", "jquery": "~3.7", "openseadragon": "~4.1" @@ -2386,6 +2387,15 @@ "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz", "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==" }, + "node_modules/@nationalarchives/frontend": { + "version": "0.1.8-prerelease", + "resolved": "https://registry.npmjs.org/@nationalarchives/frontend/-/frontend-0.1.8-prerelease.tgz", + "integrity": "sha512-/7LqmZdGVKvhwVl9hjAqbRq6d6oGICp2cQQwPjxQttRjEpq3UIr4oV7K44kPBCkRDaLZXLwbB4kQXOK8tZp1Lw==", + "engines": { + "node": "18.x", + "npm": "9.x" + } + }, "node_modules/@sinclair/typebox": { "version": "0.25.24", "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.25.24.tgz", diff --git a/package.json b/package.json index ed8465077..781f407ad 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "## Local development", "private": true, "scripts": { - "compile:css": "sass --watch sass/etna.scss:templates/static/css/dist/etna.css", + "compile:css": "sass --watch --quiet-deps --load-path=node_modules sass/etna.scss:templates/static/css/dist/etna.css", "start": "npx webpack --config webpack.config.js --mode=development --watch", "test": "jest --coverage" }, @@ -29,6 +29,7 @@ "webpack-cli": "~5.1" }, "dependencies": { + "@nationalarchives/frontend": "^0.1.8-prerelease", "jest": "~29.5", "jquery": "~3.7", "openseadragon": "~4.1" diff --git a/sass/etna.scss b/sass/etna.scss index b19e913a2..249adedbb 100644 --- a/sass/etna.scss +++ b/sass/etna.scss @@ -1,3 +1,5 @@ +@use '../node_modules/@nationalarchives/frontend/nationalarchives/tools/media'; + /* ============== @@ -105,7 +107,7 @@ These are Etna specific components, created using BEM and following our guidelin @import 'includes/new_cards'; @import 'includes/highlight-gallery'; @import 'includes/highlight-cards'; -@import "includes/highlight-intro"; +// @import "includes/highlight-intro"; @import 'includes/utilities'; @import "includes/archive-description"; @import "includes/archive-collections"; @@ -126,9 +128,33 @@ New styles Modified to match the existing site (for now) +*/ $largest-small-device: 992px; +@import '@nationalarchives/frontend/nationalarchives/all'; + +*:focus { + outline: none !important; +} + +a, +button, +select, +input[type="checkbox"], +input[type="radio"], +input[type="button"], +input[type="submit"] { + &:focus { + outline: 0.3125rem solid #004c7e !important; + outline-offset: 0.125rem !important; + } + + [class*="--dark"] & { + outline-color: #00b0ff !important; + } +} + .tna-hero { margin-bottom: 2rem; } @@ -165,4 +191,3 @@ $largest-small-device: 992px; margin-bottom: 0; } } -*/ \ No newline at end of file diff --git a/sass/includes/_buttons.scss b/sass/includes/_buttons.scss index 613681373..6f7bb967f 100644 --- a/sass/includes/_buttons.scss +++ b/sass/includes/_buttons.scss @@ -86,4 +86,5 @@ height: 25px; //margin-left:1em; margin-right: 0.5em; + display: inline-block; } diff --git a/sass/includes/_footer.scss b/sass/includes/_footer.scss index 587df9f5d..b7e5f3ddb 100644 --- a/sass/includes/_footer.scss +++ b/sass/includes/_footer.scss @@ -1,9 +1,9 @@ -.tna-footer { +.etna-footer { background:white !important; color:black !important; /*AJ to address as part of workflow streamlining piece */ &__body { - .tna-footer__list-item { + .etna-footer__list-item { margin-bottom: .25rem; } &-heading { @@ -15,7 +15,7 @@ font-size: 0.85rem; - .tna-footer__social-media-icon { + .etna-footer__social-media-icon { height: 2.187rem; padding: .5rem; box-sizing: content-box; @@ -30,5 +30,9 @@ font-size: 1.6rem; } } + + img { + display: inline-block; + } } diff --git a/sass/includes/_record-matters.scss b/sass/includes/_record-matters.scss index fc69593fe..2ff4489e9 100644 --- a/sass/includes/_record-matters.scss +++ b/sass/includes/_record-matters.scss @@ -39,6 +39,7 @@ width: 1.5rem; height: 1.5rem; margin-left: 0.5rem; + display: inline-block; } &__content { diff --git a/templates/includes/footer.html b/templates/includes/footer.html index 357533e09..85d261216 100644 --- a/templates/includes/footer.html +++ b/templates/includes/footer.html @@ -1,105 +1,105 @@ {% load static feedback_tags %} -