diff --git a/.babelrc b/.babelrc index a4502070..1093e8b3 100644 --- a/.babelrc +++ b/.babelrc @@ -1,31 +1,33 @@ -{ - "presets": [ - [ - "@babel/preset-env", - { - "targets": { - "node": "18" - } - } - ] - ], - "plugins": [ - [ - "module-resolver", - { - "root": [ - "./" - ], - "alias": { - "~": "." - } - } - ] - ], - "env": { - "development": { - "sourceMaps": "inline", - "retainLines": true - } - } -} +{ + "presets": [ + [ + "@babel/preset-env", + { + "useBuiltIns": "entry", + "corejs": 3, + "targets": { + "node": "18" + } + } + ] + ], + "plugins": [ + [ + "module-resolver", + { + "root": [ + "./" + ], + "alias": { + "~": "." + } + } + ] + ], + "env": { + "development": { + "sourceMaps": "inline", + "retainLines": true + } + } +} diff --git a/package-lock.json b/package-lock.json index eee3af61..4e9a890a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "hapi-pino": "12.1.0", "https-proxy-agent": "7.0.2", "lodash": "4.17.21", + "moment": "2.30.1", "node-fetch": "2.7.0", "nunjucks": "3.2.4", "pino": "8.18.0", @@ -11100,6 +11101,14 @@ "node": ">=16 || 14 >=14.17" } }, + "node_modules/moment": { + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", + "engines": { + "node": "*" + } + }, "node_modules/morgan": { "version": "1.10.0", "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz", diff --git a/package.json b/package.json index 495d27ff..36475bc0 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "hapi-pino": "12.1.0", "https-proxy-agent": "7.0.2", "lodash": "4.17.21", + "moment": "2.30.1", "node-fetch": "2.7.0", "nunjucks": "3.2.4", "pino": "8.18.0", diff --git a/src/client/assets/stylesheets/components/table/_index.scss b/src/client/assets/stylesheets/components/table/_index.scss new file mode 100644 index 00000000..fdeb6ed3 --- /dev/null +++ b/src/client/assets/stylesheets/components/table/_index.scss @@ -0,0 +1,65 @@ +@include govuk-exports("govuk/component/table") { + .govuk-table { + @include govuk-font($size: 19); + @include govuk-text-colour; + width: 100%; + @include govuk-responsive-margin(6, "bottom"); + + border-spacing: 0; + border-collapse: collapse; + } + + .govuk-table__header { + @include govuk-typography-weight-bold; + } + + .govuk-table__header, + .govuk-table__cell { + padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0; + border-bottom: 1px solid $govuk-border-colour; + text-align: left; + vertical-align: top; + } + + .govuk-table__cell--numeric { + @include govuk-font($size: false, $tabular: true); + } + + .govuk-table__header--numeric, + .govuk-table__cell--numeric { + text-align: right; + } + + .govuk-table__header:last-child, + .govuk-table__cell:last-child { + padding-right: 0; + } + + .govuk-table__caption { + @include govuk-typography-weight-bold; + + display: table-caption; + text-align: left; + } + + // Modifiers that make captions look more like their equivalent headings + .govuk-table__caption--xl, + .govuk-table__caption--l, + .govuk-table__caption--m { + margin-bottom: govuk-spacing(3); + } + + .govuk-table__caption--xl { + @include govuk-typography-responsive($size: 48); + } + + .govuk-table__caption--l { + @include govuk-typography-responsive($size: 36); + } + + .govuk-table__caption--m { + @include govuk-typography-responsive($size: 24); + } +} + +/*# sourceMappingURL=_index.scss.map */ diff --git a/src/client/assets/stylesheets/components/table/_table.scss b/src/client/assets/stylesheets/components/table/_table.scss new file mode 100644 index 00000000..daff7dd7 --- /dev/null +++ b/src/client/assets/stylesheets/components/table/_table.scss @@ -0,0 +1 @@ +@import "./index"; diff --git a/src/client/assets/stylesheets/daqi/_all.scss b/src/client/assets/stylesheets/daqi/_all.scss index 533a8198..4c60019b 100644 --- a/src/client/assets/stylesheets/daqi/_all.scss +++ b/src/client/assets/stylesheets/daqi/_all.scss @@ -1,4 +1,4 @@ -// +/* stylelint-disable */ // For guidance on how to add CSS and SCSS see: // https://prototype-kit.service.gov.uk/docs/adding-css-javascript-and-images // @@ -527,6 +527,80 @@ mark { } } +button { + &.tooltip { + strong { + line-height: 30px; + } + + & ~ span { + width: auto; + margin-top: auto; + margin-left: auto; + opacity: 0; + visibility: hidden; + z-index: 10; + position: absolute; + -webkit-transition-property: opacity, margin-top, visibility, margin-left; + -webkit-transition-duration: 0.4s, 0.3s, 0.4s, 0.3s; + -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, + ease-in-out; + -moz-transition-property: opacity, margin-top, visibility, margin-left; + -moz-transition-duration: 0.4s, 0.3s, 0.4s, 0.3s; + -moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, + ease-in-out; + -o-transition-property: opacity, margin-top, visibility, margin-left; + -o-transition-duration: 0.4s, 0.3s, 0.4s, 0.3s; + -o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, + ease-in-out; + transition-property: opacity, margin-top, visibility, margin-left; + transition-duration: 0.4s, 0.3s, 0.4s, 0.3s; + transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; + + &.defra-toggletip__info { + color: #ffffff; + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F0F0F0', endColorstr='#FFFFFF',GradientType=0 ); + margin-left: -87px; + pointer-events: none; + } + } + + &:hover { + & ~ span { + &.defra-toggletip__info { + opacity: 1; + text-decoration: none; + visibility: visible; + margin-left: -87px; + } + } + } + + span { + b { + width: 15px; + height: 15px; + margin-left: 20px; + margin-top: -19px; + display: block; + position: absolute; + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + transform: rotate(-45deg); + -webkit-box-shadow: inset -1px 1px 0 #ffffff; + -moz-box-shadow: inset 0 1px 0 #ffffff; + -o-box-shadow: inset 0 1px 0 #ffffff; + box-shadow: inset 0 1px 0 #ffffff; + display: none; + background: #f0f0f0; + border-top: 1px solid #cfb57c; + border-right: 1px solid #cfb57c; + } + } + } +} + // Utility classes .align-middle { @@ -537,4 +611,305 @@ mark { @extend %govuk-caption-m !optional; @include govuk-font($size: 16); } +// aqLevelsTable + +$color_1: #0b0c0c; +$color_2: #000000; +$font-family_1: 'GDS Transport', arial, sans-serif; +$font-family_2: sans-serif; + +.govuk-caption-xl { + font-family: $font-family_1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-weight: 400; + font-size: 18px; + font-size: 1.125rem; + line-height: 1.1111111111; + display: block; + margin-bottom: 5px; + color: $color_1; +} + +.govuk-caption-l { + font-family: $font-family_1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-weight: 400; + font-size: 18px; + font-size: 1.125rem; + line-height: 1.1111111111; + display: block; + margin-bottom: 5px; + color: $color_1; +} + +.govuk-caption-m { + font-family: $font-family_1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-weight: 400; + font-size: 16px; + font-size: 1rem; + line-height: 1.25; + display: block; + color: #505a5f; +} + +.govuk-caption-s { + font-family: $font-family_1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-weight: 400; + font-size: 1rem; + line-height: 1.25; + display: block; + color:#505a5f; +} + +@media print { + .govuk-caption-xl { + font-family: $font-family_2; + font-size: 18pt; + line-height: 1.15; + } + + .govuk-caption-l { + font-family: $font-family_2; + font-size: 18pt; + line-height: 1.15; + } + + .govuk-caption-m { + font-family: $font-family_2; + font-size: 14pt; + line-height: 1.15; + } + + .govuk-caption-s { + font-family: $font-family_2; + font-size: 1rem; + line-height: 1.25; + } +} + +@media (min-width: 40.0625em) { + .govuk-caption-xl { + font-size: 27px; + font-size: 1.6875rem; + line-height: 1.1111111111; + } + + .govuk-caption-l { + font-size: 24px; + font-size: 1.5rem; + line-height: 1.25; + margin-bottom: 0; + } + + .govuk-caption-m { + font-size: 19px; + font-size: 1.1875rem; + line-height: 1.3157894737; + } + + .govuk-caption-s { + font-size: 1rem; + line-height: 1.25; + } +} + + +.defra-aq-levels-table { + font-family: $font-family_1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-weight: 400; + font-size: 16px; + font-size: 1rem; + line-height: 1.25; + color: $color_1; + width: 100%; + margin-bottom: 20px; + border-spacing: 0; + border-collapse: collapse; + position: relative; + margin-top: -1px; + margin-bottom: 0px; +} + +.defra-aq-levels-table__cell { + padding: 10px 20px 10px 0; + border-bottom: 1px solid #b1b4b6; + text-align: left; + vertical-align: top; + border-bottom: 0px; + vertical-align: middle; + text-align: left; + padding-left: 0px; + padding-right: 0px; + + &:last-child { + padding-right: 0; + } + + a { + display: inline-block; + + &:not(:hover) { + text-decoration: none; + } + } +} +.defra-aq-levels-table__head { + + .defra-aq-levels-table__cell { + text-align: left; + padding-top: 20px; + padding-bottom: 20px; + } +} + +.defra-aq-levels-table__row { + border-top: 1px solid #b1b4b6; + border-bottom: 1px solid #b1b4b6; +} + +.defra-aq-levels-table__cell--pollutant { + font-family: $font-family_1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-weight: 700; + font-size: 16px; + font-size: 1rem; + line-height: 1.25; + width: 40%; + padding-right: 20px; +} + +.defra-aq-levels-table__cell--reading { + font-family: $font-family_1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-weight: 700; + font-size: 16px; + font-size: 1rem; + line-height: 1.25; + width: 20%; +} + +.defra-aq-levels-table__cell--trend { + width: 20%; +} + +.defra-aq-levels-table__cell--level { + width: 20%; +} + +@media print { + .defra-aq-levels-table { + font-family: $font-family_2; + font-size: 14pt; + line-height: 1.15; + color: $color_2; + } + + .defra-aq-levels-table__cell--pollutant { + font-family: $font-family_2; + font-size: 14pt; + line-height: 1.15; + } + + .defra-aq-levels-table__cell--reading { + font-family: $font-family_2; + font-size: 14pt; + line-height: 1.15; + } +} + +@media (min-width: 40.0625em) { + .defra-aq-levels-table { + font-size: 19px; + font-size: 1.1875rem; + line-height: 1.3157894737; + margin-bottom: 30px; + } + + .defra-aq-levels-table__cell--pollutant { + font-size: 19px; + font-size: 1.1875rem; + line-height: 1.3157894737; + } + + .defra-aq-levels-table__cell--reading { + font-size: 19px; + font-size: 1.1875rem; + line-height: 1.3157894737; + } +} + +@media (max-width: 40.0525em) { + .defra-aq-levels-table { + display: block; + } + + .defra-aq-levels-table__head { + display: block; + + tr { + display: flex; + flex-wrap: wrap; + } + + .defra-aq-levels-table__cell--pollutant { + position: absolute; + width: 1px; + height: 1px; + margin: 0; + padding: 0; + overflow: hidden; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + border: 0; + white-space: nowrap; + } + } + + .defra-aq-levels-table__body { + display: block; + } + + .defra-aq-levels-table__row { + position: relative; + display: flex; + flex-wrap: wrap; + margin-bottom: -1px; + } + + .defra-aq-levels-table__cell { + display: inline-block; + padding-top: 0; + padding-bottom: 10px; + } + + .defra-aq-levels-table__cell--pollutant { + padding-top: 10px; + padding-bottom: 5px; + padding-right: 0px; + width: 100%; + } + + .defra-aq-levels-table__cell--reading { + width: 35%; + } + + .defra-aq-levels-table__cell--trend { + width: 30%; + } + + .defra-aq-levels-table__cell--level { + width: 35%; + } +} diff --git a/src/client/assets/stylesheets/sass/all.scss b/src/client/assets/stylesheets/sass/all.scss new file mode 100644 index 00000000..c93b83cb --- /dev/null +++ b/src/client/assets/stylesheets/sass/all.scss @@ -0,0 +1,21 @@ + +// Tools +@import "tools/mixins"; + +// Elements +@import "elements/colour"; +@import "elements/layout"; +@import "elements/typography"; + +// Components +@import "components/daqitag"; +@import "components/daqitable"; +@import "components/toggletips"; +@import "components/aq-levels-table"; + + + + + + + diff --git a/src/client/assets/stylesheets/sass/components/_aq-levels-table.scss b/src/client/assets/stylesheets/sass/components/_aq-levels-table.scss new file mode 100644 index 00000000..a7280d82 --- /dev/null +++ b/src/client/assets/stylesheets/sass/components/_aq-levels-table.scss @@ -0,0 +1,115 @@ +.defra-aq-levels-table { + @extend %govuk-table !optional; + position: relative; + margin-top: -1px; + margin-bottom: 0; + + @include mq ($until: tablet) { + display: block; + } + + &__head { + @include mq ($until: tablet) { + display: block; + } + } + + &__head tr { + @include mq ($until: tablet) { + display: flex; + flex-wrap: wrap; + } + } + + &__head &__cell { + text-align: left; + padding-top: 20px; + padding-bottom: 20px; + + &--pollutant { + @include mq ($until: tablet) { + @include defra-visually-hidden; + } + } + } + + &__body { + @include mq ($until: tablet) { + display: block; + } + } + + &__row { + border-top: 1px solid govuk-tint($govuk-border-colour, 0); + border-bottom: 1px solid govuk-tint($govuk-border-colour, 0); + + @include mq ($until: tablet) { + position: relative; + display: flex; + flex-wrap: wrap; + margin-bottom: -1px; + } + } + + &__cell { + @extend %govuk-table__cell !optional; + border-bottom: 0; + vertical-align: middle; + text-align: left; + padding-left: 0; + padding-right: 0; + + @include mq ($until: tablet) { + display: inline-block; + padding-top:0; + padding-bottom: 10px; + } + + a { + display: inline-block; + } + + a:not(:hover) { + text-decoration: none; + } + } + + &__cell--pollutant { + @include govuk-font($size: 19, $weight: bold); + width: 40%; + padding-right:20px; + + @include mq ($until: tablet) { + padding-top:10px; + padding-bottom:5px; + padding-right: 0; + width: 100%; + } + } + + &__cell--reading { + @include govuk-font($size: 19, $weight: bold); + width: 20%; + + @include mq ($until: tablet) { + width: 35%; + } + } + + &__cell--trend { + width: 20%; + + @include mq ($until: tablet) { + width: 30%; + } + } + + &__cell--level { + width: 20%; + + @include mq ($until: tablet) { + width: 35%; + } + } + } + \ No newline at end of file diff --git a/src/client/assets/stylesheets/sass/components/_daqitable.scss b/src/client/assets/stylesheets/sass/components/_daqitable.scss new file mode 100644 index 00000000..95155848 --- /dev/null +++ b/src/client/assets/stylesheets/sass/components/_daqitable.scss @@ -0,0 +1,133 @@ +// Daqi table +.app-table--daqi { + border-collapse: separate; + border: 0; + } + + .daqi-table__header { + @include govuk-font($size: 16, $weight: regular); + border: 0; + padding: govuk-spacing(2); + vertical-align: bottom; + text-align: center; + width: 10%; + border-right: 3px solid #ffffff; /* Add a 3px white vertical border to header cells */ + } + + .daqi-table__header:last-child { + padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) 9px; + } + + .daqi-table__cell { + @include govuk-font($size: 16, $weight: regular); + padding-top: govuk-spacing(2); + padding-bottom: govuk-spacing(2); + padding-left: 0; + padding-right: 0; + text-align: center; + border: 0; + width: 10%; + background-color: govuk-colour("light-grey"); + border-right: 2px solid #ffffff; /* Add a 3px white vertical border to data cells */ + } + + // .daqi-table__cell:last-child { + // padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) 9px; + // } + + .daqi-table__caption { + font-weight: 700; + text-align: left; + + } + + .daqi-band { + @include govuk-font($size: 14, $weight: regular); + border: 0; + vertical-align: top; + text-align: left; + width: 10%; + border-right: 3px solid #ffffff; /* Add a 3px white vertical border to cells in .daqi-band */ + } + + .daqi-band:last-child { + text-align: right; + } + + + .daqi-selected { + font-weight: bold; + } + + .daqi-0 { + background-color: $daqi-colour-0; + color: govuk-colour("black"); + } + + .daqi-1 { + background-color: $daqi-colour-1; + color: govuk-colour("white"); + font-weight: bold; + } + + .daqi-2 { + background-color: $daqi-colour-2; + color: govuk-colour("white"); + font-weight: bold; + } + + .daqi-3 { + background-color: $daqi-colour-3; + color: govuk-colour("white"); + font-weight: bold; + } + + .daqi-4 { + background-color: $daqi-colour-4; + color: govuk-colour("black"); + font-weight: bold; + } + + .daqi-5 { + background-color: $daqi-colour-5; + color: govuk-colour("black"); + font-weight: bold; + } + + .daqi-6 { + background-color: $daqi-colour-6; + color: govuk-colour("black"); + font-weight: bold; + } + + .daqi-7 { + background-color: $daqi-colour-7; + color: govuk-colour("white"); + font-weight: bold; + } + + .daqi-8 { + background-color: $daqi-colour-8; + color: govuk-colour("white"); + font-weight: bold; + } + + .daqi-9 { + background-color: $daqi-colour-9; + color: govuk-colour("white"); + font-weight: bold; + } + + .daqi-10 { + background-color: $daqi-colour-10; + color: govuk-colour("white"); + font-weight: bold; + } + + + @for $i from 0 through 10 { + .daqi-#{$i} { + text-align: center; + } + } + \ No newline at end of file diff --git a/src/client/assets/stylesheets/sass/components/_daqitag.scss b/src/client/assets/stylesheets/sass/components/_daqitag.scss new file mode 100644 index 00000000..b9024cb3 --- /dev/null +++ b/src/client/assets/stylesheets/sass/components/_daqitag.scss @@ -0,0 +1,79 @@ + +// DAQI Tag + +.daqi-tag { + + display: inline-block; + + // When a user customises their colours often the background is removed, + // by adding a outline we ensure that the tag component still keeps it's meaning. + // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/ + outline: 2px solid transparent; + outline-offset: -2px; + + color: govuk-colour("white"); + background-color: govuk-colour("blue"); + letter-spacing: 1px; + + text-decoration: none; +} + +.daqi-tag--round { + border-radius: 50%; +} + +mark { + background-color: transparent; + font-weight: bold; + color: inherit; +} + +.daqi-tag--1 { + color: govuk-colour("white"); + background: $daqi-colour-1; +} + +.daqi-tag--2 { + color: govuk-colour("white"); + background: $daqi-colour-2; +} + +.daqi-tag--3 { + color: govuk-colour("white"); + background: $daqi-colour-3; +} + +.daqi-tag--4 { + color: govuk-colour("black"); + background: $daqi-colour-4; +} + +.daqi-tag--5 { + color: govuk-colour("black"); + background: $daqi-colour-5; +} + +.daqi-tag--6 { + color: govuk-colour("black"); + background: $daqi-colour-6; +} + +.daqi-tag--7 { + color: govuk-colour("white"); + background: $daqi-colour-7; +} + +.daqi-tag--8 { + color: govuk-colour("white"); + background: $daqi-colour-8; +} + +.daqi-tag--9 { + color: govuk-colour("white"); + background: $daqi-colour-9; +} + +.daqi-tag--10 { + color: govuk-colour("white"); + background: $daqi-colour-10; +} diff --git a/src/client/assets/stylesheets/sass/components/_toggletips.scss b/src/client/assets/stylesheets/sass/components/_toggletips.scss new file mode 100644 index 00000000..2d1cd5eb --- /dev/null +++ b/src/client/assets/stylesheets/sass/components/_toggletips.scss @@ -0,0 +1,72 @@ +// javascript disabled style +// Tooltip code for on screen help + +button { + &tooltip strong { + line-height: 30px; + } + + &tooltip ~ span { + width: auto; + margin-top: auto; + margin-left: auto; + opacity: 0; + visibility: hidden; + z-index: 10; + position: absolute; + + -webkit-transition-property: opacity, margin-top, visibility, margin-left; + -webkit-transition-duration: 0.4s, 0.3s, 0.4s, 0.3s; + -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, + ease-in-out; + + -moz-transition-property: opacity, margin-top, visibility, margin-left; + -moz-transition-duration: 0.4s, 0.3s, 0.4s, 0.3s; + -moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, + ease-in-out; + + -o-transition-property: opacity, margin-top, visibility, margin-left; + -o-transition-duration: 0.4s, 0.3s, 0.4s, 0.3s; + -o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, + ease-in-out; + + transition-property: opacity, margin-top, visibility, margin-left; + transition-duration: 0.4s, 0.3s, 0.4s, 0.3s; + transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; + + &defra-toggletip__info{ + color: #ffffff; + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F0F0F0', endColorstr='#FFFFFF',GradientType=0 ); + } + } + + &tooltip:hover ~ span{ + &defra-toggletip__info { + opacity: 1; + text-decoration: none; + visibility: visible; + } + } + + &tooltip span b { + width: 15px; + height: 15px; + margin-left: 20px; + margin-top: -19px; + position: absolute; + + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + transform: rotate(-45deg); + + -webkit-box-shadow: inset -1px 1px 0 #ffffff; + -moz-box-shadow: inset 0 1px 0 #ffffff; + -o-box-shadow: inset 0 1px 0 #ffffff; + box-shadow: inset 0 1px 0 #ffffff; + display: none; + background: #f0f0f0; + border-top: 1px solid #cfb57c; + border-right: 1px solid #cfb57c; + } +}; \ No newline at end of file diff --git a/src/client/assets/stylesheets/sass/elements/_colour.scss b/src/client/assets/stylesheets/sass/elements/_colour.scss new file mode 100644 index 00000000..4033d85f --- /dev/null +++ b/src/client/assets/stylesheets/sass/elements/_colour.scss @@ -0,0 +1,14 @@ + +// DAQI Colours + +$daqi-colour-0: govuk-colour("light-grey"); +$daqi-colour-1: govuk-colour("green"); +$daqi-colour-2: govuk-colour("green"); +$daqi-colour-3: govuk-colour("green"); +$daqi-colour-4: govuk-colour("yellow"); +$daqi-colour-5: govuk-colour("yellow"); +$daqi-colour-6: govuk-colour("yellow"); +$daqi-colour-7: govuk-colour("red"); +$daqi-colour-8: govuk-colour("red"); +$daqi-colour-9: govuk-colour("red"); +$daqi-colour-10: govuk-colour("purple"); \ No newline at end of file diff --git a/src/client/assets/stylesheets/sass/elements/_layout.scss b/src/client/assets/stylesheets/sass/elements/_layout.scss new file mode 100644 index 00000000..8e3bb18d --- /dev/null +++ b/src/client/assets/stylesheets/sass/elements/_layout.scss @@ -0,0 +1,6 @@ + +// Vertical align middle + +.align-middle { + vertical-align: middle; + } \ No newline at end of file diff --git a/src/client/assets/stylesheets/sass/elements/_typography.scss b/src/client/assets/stylesheets/sass/elements/_typography.scss new file mode 100644 index 00000000..fc710949 --- /dev/null +++ b/src/client/assets/stylesheets/sass/elements/_typography.scss @@ -0,0 +1,5 @@ +.govuk-caption-s { + @extend %govuk-caption-m !optional; + @include govuk-font($size: 16); + } + \ No newline at end of file diff --git a/src/client/assets/stylesheets/sass/tools/_mixins.scss b/src/client/assets/stylesheets/sass/tools/_mixins.scss new file mode 100644 index 00000000..c87f3a38 --- /dev/null +++ b/src/client/assets/stylesheets/sass/tools/_mixins.scss @@ -0,0 +1,14 @@ +@mixin defra-visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: 0; + padding: 0; + overflow: hidden; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + border: 0; + white-space: nowrap; + } + \ No newline at end of file diff --git a/src/config/nunjucks/filters/index.js b/src/config/nunjucks/filters/index.js index d86be06e..16962719 100644 --- a/src/config/nunjucks/filters/index.js +++ b/src/config/nunjucks/filters/index.js @@ -1,4 +1,5 @@ import { formatDate } from '~/src/config/nunjucks/filters/format-date' import { formatCurrency } from '~/src/config/nunjucks/filters/format-currency' +import { addMomentFilters } from '~/src/config/nunjucks/filters/moment-date-filters' -export { formatDate, formatCurrency } +export { formatDate, formatCurrency, addMomentFilters } diff --git a/src/config/nunjucks/filters/moment-date-filters.js b/src/config/nunjucks/filters/moment-date-filters.js new file mode 100644 index 00000000..c3fd3eb1 --- /dev/null +++ b/src/config/nunjucks/filters/moment-date-filters.js @@ -0,0 +1,31 @@ +import moment from 'moment' + +function addMomentFilters(env) { + try { + env.addFilter('govukDate', function (dateString) { + if (dateString === 'now') { + return moment() + } + return moment().format('DD MMMM YYYY') + }) + env.addFilter('date', function (dateString) { + if (dateString === 'now') { + return moment() + } + return moment(dateString) + }) + env.addFilter('minusOneHour', function (momentDate) { + momentDate.subtract(1.56, 'hours') + + // Format using the custom formatter for lowercase 'am/pm' + return formatCalendarWithLowercase(momentDate) + }) + function formatCalendarWithLowercase(momentDate) { + const calendarString = momentDate.calendar() + return calendarString.replace('AM', 'am').replace('PM', 'pm') + } + } catch (error) { + return error + } +} +export { addMomentFilters } diff --git a/src/config/nunjucks/index.js b/src/config/nunjucks/index.js index 41ceec99..b18926cd 100644 --- a/src/config/nunjucks/index.js +++ b/src/config/nunjucks/index.js @@ -6,6 +6,7 @@ import { config } from '~/src/config' import { context } from './context' import * as filters from './filters' import * as globals from './globals' +import { addMomentFilters } from './filters/index' const nunjucksEnvironment = nunjucks.configure( [ @@ -15,6 +16,17 @@ const nunjucksEnvironment = nunjucks.configure( ), path.normalize( path.resolve(__dirname, '..', '..', 'server', 'common', 'components') + ), + path.normalize( + path.resolve( + __dirname, + '..', + '..', + 'server', + 'common', + 'templates', + 'partials' + ) ) ], { @@ -56,4 +68,6 @@ Object.keys(filters).forEach((filter) => { nunjucksEnvironment.addFilter(filter, filters[filter]) }) +addMomentFilters(nunjucksEnvironment) + export { nunjucksConfig } diff --git a/src/server/common/components/aq-levels-table/_index.scss b/src/server/common/components/aq-levels-table/_index.scss new file mode 100644 index 00000000..c847ba23 --- /dev/null +++ b/src/server/common/components/aq-levels-table/_index.scss @@ -0,0 +1,65 @@ +@include govuk-exports("govuk/component/table") { + .govuk-table { + @include govuk-font($size: 19); + @include govuk-text-colour; + width: 100%; + @include govuk-responsive-margin(6, "bottom"); + + border-spacing: 0; + border-collapse: collapse; + } + + .govuk-table__header { + @include govuk-typography-weight-bold; + } + + .govuk-table__header, + .govuk-table__cell { + padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0; + border-bottom: 1px solid $govuk-border-colour; + text-align: left; + vertical-align: top; + } + + .govuk-table__cell--numeric { + @include govuk-font-tabular-numbers; + } + + .govuk-table__header--numeric, + .govuk-table__cell--numeric { + text-align: right; + } + + .govuk-table__header:last-child, + .govuk-table__cell:last-child { + padding-right: 0; + } + + .govuk-table__caption { + @include govuk-typography-weight-bold; + + display: table-caption; + text-align: left; + } + + // Modifiers that make captions look more like their equivalent headings + .govuk-table__caption--xl, + .govuk-table__caption--l, + .govuk-table__caption--m { + margin-bottom: govuk-spacing(3); + } + + .govuk-table__caption--xl { + @include govuk-font-size($size: 48); + } + + .govuk-table__caption--l { + @include govuk-font-size($size: 36); + } + + .govuk-table__caption--m { + @include govuk-font-size($size: 24); + } +} + +/*# sourceMappingURL=_index.scss.map */ diff --git a/src/server/common/templates/partials/monitoring-sites.njk b/src/server/common/templates/partials/monitoring-sites.njk index d848e650..9bcf960a 100644 --- a/src/server/common/templates/partials/monitoring-sites.njk +++ b/src/server/common/templates/partials/monitoring-sites.njk @@ -1,4 +1,3 @@ -{% from "components/toggletip/macro.njk" import toggletip %} {% for site in monitoringSites %} {% set time %} {{ "now" | date | minusOneHour }} @@ -40,7 +39,7 @@ site.site_name )}} {% endset %} -

{{ siteNameToggletip | safe }}

+

{{ siteNameToggletip | safe }}

{{ site.distance }} miles away

{% set rows = [] %} {% for pollutant in site.pollutants %} diff --git a/src/server/common/templates/partials/pollutants.njk b/src/server/common/templates/partials/pollutants.njk index 450c08d7..b98b64e1 100644 --- a/src/server/common/templates/partials/pollutants.njk +++ b/src/server/common/templates/partials/pollutants.njk @@ -6,7 +6,7 @@ Ozone
  • - Nitrogen dioxide + Nitrogen dioxide
  • Sulphur dioxide @@ -14,6 +14,7 @@

    Particulate matter (PM)

    Particulate matter are tiny pieces of solid or liquid particles suspended in the air. They come from sources like car tyres, brakes, exhausts, dust, wood burning and pollen.

    +