From 0765400e0da304f05605dbde435a53e56aa9e01a Mon Sep 17 00:00:00 2001 From: Rick Jones Date: Fri, 22 Mar 2024 10:58:50 +0000 Subject: [PATCH] Add citation --- app/assets/stylesheets/_metadata.scss | 204 ++++++++++++++++++++++++ app/assets/stylesheets/application.scss | 1 + app/views/pages/default.html.slim | 11 ++ config/initializers/time_formats.rb | 1 + 4 files changed, 217 insertions(+) create mode 100644 app/assets/stylesheets/_metadata.scss diff --git a/app/assets/stylesheets/_metadata.scss b/app/assets/stylesheets/_metadata.scss new file mode 100644 index 00000000..896a6185 --- /dev/null +++ b/app/assets/stylesheets/_metadata.scss @@ -0,0 +1,204 @@ +.gem-c-metadata { + color: #0b0c0c; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-weight: 400; + font-size: 14px; + font-size: .875rem; + line-height: 1.1428571429; +} + +@media print { + .gem-c-metadata { + color: #000 + } +} + +@media print { + .gem-c-metadata { + font-family: sans-serif + } +} + +@media (min-width: 40.0625em) { + .gem-c-metadata { + font-size:16px; + font-size: 1rem; + line-height: 1.25 + } +} + +@media print { + .gem-c-metadata { + font-size: 14pt; + line-height: 1.2 + } +} + + + +.gem-c-metadata:after { + content: ""; + display: block; + clear: both +} + +.gem-c-metadata a { + font-family: "GDS Transport",arial,sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: underline; + text-decoration-thickness: max(1px, .0625rem); + text-underline-offset: .1578em; + font-weight: bold +} + +@media print { + .gem-c-metadata a { + font-family: sans-serif + } +} + +.gem-c-metadata a:hover { + text-decoration-thickness: max(3px, .1875rem, .12em); + -webkit-text-decoration-skip-ink: none; + text-decoration-skip-ink: none; + -webkit-text-decoration-skip: none; + text-decoration-skip: none +} + +.gem-c-metadata a:focus { + outline: 3px solid transparent; + color: #0b0c0c; + background-color: #fd0; + box-shadow: 0 -2px #fd0,0 4px #0b0c0c; + text-decoration: none; + -webkit-box-decoration-break: clone; + box-decoration-break: clone +} + +.gem-c-metadata a:link { + color: #1d70b8 +} + +.gem-c-metadata a:visited { + color: #4c2c92 +} + +.gem-c-metadata a:hover { + color: #003078 +} + +.gem-c-metadata a:active { + color: #0b0c0c +} + +.gem-c-metadata a:focus { + color: #0b0c0c +} + +.gem-c-metadata .gem-c-metadata__definition-link { + font-weight: normal +} + +.gem-c-metadata.direction-rtl { + direction: rtl; + text-align: start +} + +.gem-c-metadata--inverse { + color: #fff +} + +.gem-c-metadata--inverse a:link,.gem-c-metadata--inverse a:visited { + color: #fff +} + +.gem-c-metadata--inverse a:hover,.gem-c-metadata--inverse a:active { + color: rgba(255,255,255,0.99) +} + +.gem-c-metadata--inverse a:focus { + color: #0b0c0c +} + +.gem-c-metadata--inverse-padded { + padding: 10px +} + +.gem-c-metadata--inverse-padded .gem-c-metadata__list { + margin: 10px +} + +@media (min-width: 40.0625em) { + .gem-c-metadata--inverse-padded .gem-c-metadata__list { + margin:15px + } +} + +.gem-c-metadata__term,.gem-c-metadata__definition { + line-height: 1.4 +} + +.gem-c-metadata__term { + margin-top: .5em +} + +@media (min-width: 40.0625em) { + .gem-c-metadata__term { + box-sizing:border-box; + float: left; + clear: left; + padding-right: 5px; + margin-top: 0 + } +} + +.gem-c-metadata.direction-rtl .gem-c-metadata__term { + float: right; + clear: right +} + +@media (min-width: 40.0625em) { + .gem-c-metadata.direction-rtl .gem-c-metadata__term { + padding-left:5px; + padding-right: 0 + } +} + +.gem-c-metadata__definition { + margin: 0 +} + +@media (min-width: 40.0625em) { + .gem-c-metadata__definition:not(:last-of-type) { + margin-bottom:5px + } +} + +.gem-c-metadata.direction-rtl .gem-c-metadata__definition { + float: right +} + +.gem-c-metadata__toggle-wrap { + display: none +} + +.js-enabled .gem-c-metadata__toggle-wrap { + display: block +} + +.js-enabled .gem-c-metadata__toggle-items.js-hidden { + display: none +} + +dl.gem-c-metadata__list { + margin: 0; +} + +.hf-citation { + background: #eeeeee75; + padding: 15px 10px 15px 20px; + margin-top: 60px; + border-left: 5px solid #347ca9; +} \ No newline at end of file diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index be8dab8d..c7890cb2 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -29,6 +29,7 @@ $light-blue: tint($department-for-education-websafe, 90%); @import 'video'; @import 'page-contents'; +@import '_metadata'; @import 'dfe/print'; @import 'dfe/about'; diff --git a/app/views/pages/default.html.slim b/app/views/pages/default.html.slim index b466a896..fd54f21b 100644 --- a/app/views/pages/default.html.slim +++ b/app/views/pages/default.html.slim @@ -19,4 +19,15 @@ .govuk-grid-column-full = m(page.body) +.hf-citation + .gem-c-metadata data-module="gem-toggle metadata" data-gem-toggle-module-started="true" data-metadata-module-started="true" + dl.gem-c-metadata__list data-module="gem-track-click" data-gem-track-click-module-started="true" + dt.gem-c-metadata__term From: + dd.gem-c-metadata__definition + a.govuk-link href="https://www.gov.uk/government/organisations/department-for-education" Department for Education + dt.gem-c-metadata__term Published: + dd.gem-c-metadata__definition #{page.created_at.to_s(:long)} + dt.gem-c-metadata__term Updated: + dd.gem-c-metadata__definition data-module="ga4-link-tracker" data-ga4-track-links-only="" data-ga4-link="{"event_name":"navigation","type":"content history","section":"Top","action":"opened"}" data-ga4-link-tracker-module-started="true" #{page.updated_at.to_s(:long)} + = render 'shared/ctas' diff --git a/config/initializers/time_formats.rb b/config/initializers/time_formats.rb index a979a445..92b66cfd 100644 --- a/config/initializers/time_formats.rb +++ b/config/initializers/time_formats.rb @@ -1 +1,2 @@ Time::DATE_FORMATS[:day_month_year] = '%d-%m-%Y' # 04-11-2021 +Time::DATE_FORMATS[:long] = '%d %B %Y'