information banner from api with date range

This commit is contained in:
2022-09-22 11:12:04 +01:00
parent f9cdaafd7c
commit 38e70b1ec1
17 changed files with 548 additions and 119 deletions
+269 -79
View File
@@ -41,16 +41,18 @@ h3,
h4,
h5,
.app-step-nav__circle-background,
a {
.govuk-warning-text__icon a {
font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
.govuk-label-s {
font-size: 1rem;
}
.govuk-label-xs {
font-size: 0.875rem;
}
.govuk-select-s {
font-size: 1rem;
padding: 2px;
@@ -61,6 +63,7 @@ body {
margin: 0;
background-color: #ffffff;
}
.app-cookie-banner {
.consentBanner {
.govuk-button {
@@ -68,6 +71,7 @@ body {
width: 28%;
margin-right: 45px;
}
&.hidden {
display: none;
}
@@ -88,12 +92,15 @@ body {
font-weight: bold;
width: 100%;
text-align: center;
&:hover {
background-color: #0360a6;
color: #eeeeee;
}
}
@media screen and (min-width: 768px) {
.cookies-banner__link,
.cookies-banner__button {
display: inline-block;
@@ -102,11 +109,13 @@ body {
margin-top: 0;
}
}
.cookies-banner__description {
color: $black;
font-size: 16px;
font-size: 1rem;
}
@media screen and (min-width: 768px) {
.cookies-banner__description {
font-size: 18px;
@@ -157,17 +166,20 @@ a.longLinkBreak {
@media screen and (max-width: 900px) {
border-bottom: none;
}
.govuk-header__container {
border-bottom: none;
margin-bottom: initial;
padding-top: 20px;
}
&.phase_banner {
background-color: $yellow;
.govuk-header__container {
padding-top: 0;
}
.govuk-phase-banner {
padding-top: 12px;
padding-bottom: 12px;
@@ -183,6 +195,7 @@ a.longLinkBreak {
text-decoration: none;
font-size: 16px;
}
.govuk-breadcrumbs__link:focus {
color: $lightblue;
outline: solid 2px #ffd530;
@@ -198,6 +211,7 @@ a.longLinkBreak {
font-weight: bold;
color: $darkgrey;
}
.govuk-breadcrumbs__list-item:before {
top: 0;
bottom: 0;
@@ -223,14 +237,17 @@ a.longLinkBreak {
@media screen and (max-width: 360px) {
flex-direction: column-reverse;
align-items: flex-start;
.pedw_logo {
margin-bottom: 20px;
}
}
}
&.myportal {
display: flex;
justify-content: space-between;
@media screen and (max-width: 414px) {
flex-direction: column;
}
@@ -255,10 +272,12 @@ a.longLinkBreak {
color: $blue;
font-size: 16px;
font-weight: bold;
@media screen and (max-width: 414px) {
max-width: 41%;
}
}
.govuk-header__link {
color: $blue;
font-weight: bold;
@@ -267,6 +286,7 @@ a.longLinkBreak {
font-size: 16px;
font-weight: bold;
padding: 10px 20px;
&:hover {
background: $blue;
border: 1px solid $blue;
@@ -275,6 +295,7 @@ a.longLinkBreak {
padding: 10px 20px;
text-decoration: none;
}
&:focus {
box-shadow: none;
}
@@ -360,6 +381,7 @@ textarea,
&:active {
top: 0px;
}
&:focus {
background-color: #ffd530 !important;
border-color: transparent !important;
@@ -409,6 +431,7 @@ textarea,
@media screen and (max-width: 1024px) {
padding-left: 20px;
}
@media screen and (max-width: 376px) {
padding-left: 0px;
padding-right: 0px;
@@ -457,6 +480,7 @@ textarea,
top: 20px;
right: -10px;
}
a.govuk-header__link {
background-color: $black;
padding: 10px 20px;
@@ -468,6 +492,7 @@ textarea,
text-decoration: none;
}
}
a.govuk-header__link:focus {
background-color: $black;
padding: 10px;
@@ -491,6 +516,7 @@ textarea,
float: left;
position: relative;
}
.mobileMenu label {
background-color: black;
padding: 10px 30px;
@@ -499,6 +525,7 @@ textarea,
display: block;
position: relative;
}
.mobileMenu label i {
font-style: normal;
font-size: 10px;
@@ -507,6 +534,7 @@ textarea,
right: 18px;
top: 13px;
}
.mobileMenu [type="radio"] {
position: absolute;
top: 0;
@@ -528,11 +556,13 @@ textarea,
width: 140px;
right: 0px;
}
.content ul {
margin: 0;
padding: 0;
list-style: none;
}
.content a {
color: white;
display: block;
@@ -546,10 +576,12 @@ textarea,
background-color: inherit;
}
}
[type="radio"]:checked ~ label {
[type="radio"]:checked~label {
z-index: 2;
}
[type="radio"]:checked ~ label ~ .content {
[type="radio"]:checked~label~.content {
z-index: 1;
opacity: 1;
}
@@ -562,15 +594,18 @@ textarea,
width: 100%;
height: 100%;
}
.close-mobileMenu label {
background: #333;
color: white;
}
[type="radio"]:checked ~ label ~ .close-mobileMenu {
[type="radio"]:checked~label~.close-mobileMenu {
z-index: 3;
}
}
}
.fullNav {
display: block;
//add back in when signout link is used
@@ -603,6 +638,7 @@ textarea,
border: none;
margin-bottom: 0px;
}
&:focus {
background-color: $yellow;
color: $black;
@@ -620,11 +656,13 @@ textarea,
padding-top: 0px;
padding: 70px 0 0 0;
border: none;
.govuk-footer__inline-list {
a {
font-size: 1rem;
color: $black;
text-decoration: none;
&:hover {
text-decoration: underline;
}
@@ -697,13 +735,15 @@ textarea,
.at-nav {
border-top: 5px solid #1d70b8;
padding-top: 25px;
.progress-heading{
display:flex;
.progress-heading {
display: flex;
}
.progress-case-reference{
margin-left:10px;
.progress-case-reference {
margin-left: 10px;
}
}
@@ -743,7 +783,7 @@ textarea,
margin-left: 20px;
}
.at-nav__page .govuk-list > li {
.at-nav__page .govuk-list>li {
font-size: 16px;
font-weight: 300;
font-stretch: normal;
@@ -752,7 +792,7 @@ textarea,
letter-spacing: normal;
}
.at-nav__page .govuk-list > li b:before {
.at-nav__page .govuk-list>li b:before {
border-left: 4px solid #1d70b8;
position: relative;
right: 10px;
@@ -774,19 +814,21 @@ textarea,
.at-nav {
.sectionCompleteTick {
display:inline-block;
display: inline-block;
width: 16px;
height:16px;
height: 16px;
background: $darkgrey;
border-radius:50%;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
border-radius: 50%;
-ms-transform: rotate(45deg);
/* IE 9 */
-webkit-transform: rotate(45deg);
/* Chrome, Safari, Opera */
transform: rotate(45deg);
margin-left: -20px;
margin-right: 5px;
}
.sectionCompleteTick:before{
.sectionCompleteTick:before {
content: "";
position: absolute;
width: 3px;
@@ -795,8 +837,8 @@ textarea,
left: 8px;
top: 3px;
}
.sectionCompleteTick:after{
.sectionCompleteTick:after {
content: "";
position: absolute;
width: 3px;
@@ -808,40 +850,81 @@ textarea,
.app-step-nav__step {
position: relative;
padding-left: 45px;
list-style: none;
}
*, .govuk-body, .govuk-body-xs, .govuk-body-s, .govuk-body-m, .govuk-footer, .govuk-heading-xl, .govuk-heading-l, .govuk-heading-m, .govuk-heading-s, .govuk-header-l, .govuk-header-m, .govuk-header__link, .govuk-footer__link, .govuk-link, .govuk-button, .govuk-label, .govuk-select, .govuk-radios__item, .govuk-breadcrumbs__link, .govuk-fieldset__legend--s, .govuk-input, .govuk-textarea, .govuk-panel, .govuk-panel__title, .govuk-warning-text__text, .govuk-hint, .app-cookie-banner, .govuk-error-message.govuk-form-group--error, h1, h2, h3, h4, h5, a {
font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
user agent stylesheet
li {
display: list-item;
text-align: -webkit-match-parent;
}
user agent stylesheet
ol {
list-style-type: decimal;
}
.app-step-nav__step--active:last-child:before, .app-step-nav__step--active .app-step-nav__circle--number, .app-step-nav__step--active:after, .app-step-nav__step--active .app-step-nav__help:after
{
border-color: $lightgrey !important;
}
.app-step-nav__circle--number{
border-color: $lightgrey !important;
.app-step-nav__step {
position: relative;
padding-left: 45px;
list-style: none;
}
.app-step-nav__circle-background{
color:$lightgrey;
*,
.govuk-body,
.govuk-body-xs,
.govuk-body-s,
.govuk-body-m,
.govuk-footer,
.govuk-heading-xl,
.govuk-heading-l,
.govuk-heading-m,
.govuk-heading-s,
.govuk-header-l,
.govuk-header-m,
.govuk-header__link,
.govuk-footer__link,
.govuk-link,
.govuk-button,
.govuk-label,
.govuk-select,
.govuk-radios__item,
.govuk-breadcrumbs__link,
.govuk-fieldset__legend--s,
.govuk-input,
.govuk-textarea,
.govuk-panel,
.govuk-panel__title,
.govuk-warning-text__text,
.govuk-hint,
.app-cookie-banner,
.govuk-error-message.govuk-form-group--error,
h1,
h2,
h3,
h4,
h5,
a {
font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
.sectionComplete{
user agent stylesheet li {
display: list-item;
text-align: -webkit-match-parent;
}
user agent stylesheet ol {
list-style-type: decimal;
}
.app-step-nav__step--active:last-child:before,
.app-step-nav__step--active .app-step-nav__circle--number,
.app-step-nav__step--active:after,
.app-step-nav__step--active .app-step-nav__help:after {
border-color: $lightgrey !important;
}
.app-step-nav__circle--number {
border-color: $lightgrey !important;
}
.app-step-nav__circle-background {
color: $lightgrey;
}
.sectionComplete {
.app-step-nav__circle {
background-color: $lightgrey;
}
.app-step-nav__circle-background{
color:$white;
.app-step-nav__circle-background {
color: $white;
text-shadow: none;
}
}
@@ -850,10 +933,12 @@ ol {
.form-inline-label {
.inlineFieldset {
display: flex;
@media screen and (max-width: 900px) {
display: block;
}
}
legend {
align-self: flex-end;
margin-right: 20px;
@@ -877,6 +962,7 @@ ol {
.annex {
.govuk-summary-list__value {
width: 33.333333%;
@media screen and (max-width: 900px) {
width: 100%;
}
@@ -887,21 +973,25 @@ ol {
.govuk-summary-list__value,
.govuk-summary-list__actions {
padding: 15px 10px 15px 0;
a,
a:active,
a:visited {
color: $blue;
font-weight: bold;
text-decoration: none;
&:hover {
color: $lightblue;
text-decoration: none;
}
}
a:focus {
border: $yellow solid 3px;
outline: 3px solid transparent;
}
@media screen and (min-width: 768px) {
border-bottom: 1px solid $lightgrey_semi;
}
@@ -912,6 +1002,7 @@ ol {
.govuk-summary-list__key:first-of-type {
width: 40%;
}
.govuk-summary-list__key:last-of-type {
width: 20%;
}
@@ -919,6 +1010,7 @@ ol {
.govuk-summary-list__value {
position: relative;
}
.coverLoadingLink {
&.downloading {
background-color: transparent;
@@ -933,6 +1025,7 @@ ol {
content: " ";
display: block;
}
.data-loading-icon {
left: calc(100% - 40px);
height: 20px;
@@ -942,16 +1035,16 @@ ol {
}
.progress-save{
.progress-save {
padding: 10px 15px !important;
font-size: 16px;
float: right;
border-color: $midgrey !important;
color: $midgrey !important;
border-color: $midgrey !important;
color: $midgrey !important;
&:hover {
background-color: $midgrey !important;
color: $white !important;
background-color: $midgrey !important;
color: $white !important;
}
}
@@ -960,9 +1053,11 @@ ol {
padding: 20px 10px;
}
}
.results .govuk-summary-list__key {
&:last-of-type {
width: 30%;
&.govuk-summary-list__action {
width: 10%;
@@ -971,6 +1066,7 @@ ol {
}
}
}
button {
border: none;
background: none;
@@ -989,6 +1085,7 @@ ol {
position: relative;
left: 10px;
}
&.sortAsc:after {
width: 0;
height: 0;
@@ -1014,6 +1111,7 @@ ol {
.results-visually-hidden {
display: none;
@media screen and (max-width: 900px) {
display: block;
font-weight: bold;
@@ -1033,6 +1131,7 @@ ol {
.appealModule {
width: 94%;
min-height: 20vh;
.appealCTA {
text-align: center;
}
@@ -1054,7 +1153,7 @@ ol {
height: 2.5rem;
margin-top: 0;
padding: 10px 15px;
border: 1px solid $darkgrey !important;
border: 1px solid $darkgrey !important;
border-radius: 0;
-webkit-appearance: none;
appearance: none;
@@ -1064,14 +1163,10 @@ ol {
line-height: 1.3157894737;
}
.react-datepicker-popper[data-placement^="top"]
.react-datepicker__triangle::before,
.react-datepicker-popper[data-placement^="bottom"]
.react-datepicker__triangle::before,
.react-datepicker-popper[data-placement^="top"]
.react-datepicker__triangle::after,
.react-datepicker-popper[data-placement^="bottom"]
.react-datepicker__triangle::after {
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before,
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::after,
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::after {
left: -20px !important;
}
@@ -1135,13 +1230,7 @@ ul#sharePageLinks.active {
}
.vo_hidden,
.page-node-type-global-keyword-search
.main__body-content
#block-govwales-content
.components__form
form
.form-item
label,
.page-node-type-global-keyword-search .main__body-content #block-govwales-content .components__form form .form-item label,
.header__components .components__form form .form-item label {
border: 0;
clip: rect(0, 0, 0, 0);
@@ -1161,13 +1250,15 @@ ul#sharePageLinks.active {
}
@media screen and (min-width: 480px) {
.main__sharebar > div {
.main__sharebar>div {
margin-bottom: 0;
}
}
.block-share.active {
border: 1px solid #999999;
background-color: #cccccc;
@media screen and (max-width: 376px) {
margin-right: 0px;
margin-bottom: 20px;
@@ -1221,6 +1312,7 @@ ul#sharePageLinks.active {
background-position: 0 2px;
}
}
.block-share ul li a,
.block-share-top ul li a,
.page-header__block-share__list ul li a,
@@ -1229,6 +1321,7 @@ ul#sharePageLinks.active {
background-position: 0 6px;
height: 22px;
display: block;
@media (max-width: 376px) {
background-position: 0 2px;
}
@@ -1240,12 +1333,14 @@ ul#sharePageLinks.active {
.page-header__block-share ul li a:hover {
background-size: 20px 20px;
background-position: 0 6px;
@media (max-width: 376px) {
background-position: 0 2px;
}
}
@media all and (min-width: 480px) {
.block-share ul li a,
.block-share-top ul li a,
.page-header__block-share__list ul li a,
@@ -1373,6 +1468,7 @@ ul#sharePageLinks.active {
.govuk-panel__title {
font-size: 36px;
}
p {
color: #fff;
}
@@ -1388,6 +1484,7 @@ ul#sharePageLinks.active {
.govuk-panel__title {
font-size: 24px;
}
.govuk-heading-m {
color: #fff;
}
@@ -1411,9 +1508,11 @@ ul#sharePageLinks.active {
padding: 15px;
text-align: left;
margin-bottom: 0px;
.govuk-panel__title {
font-size: 24px;
}
.govuk-heading-m {
color: #fff;
}
@@ -1486,6 +1585,7 @@ ul#sharePageLinks.active {
min-width: 25px;
line-height: 21px;
}
.dateRight {
text-align: right;
}
@@ -1498,7 +1598,7 @@ ul#sharePageLinks.active {
font-size: 16px;
}
.accordion__item + .accordion__item {
.accordion__item+.accordion__item {
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
@@ -1565,6 +1665,7 @@ ul#sharePageLinks.active {
.documents__list__item {
border-bottom: 1px solid $lightgrey_semi;
padding: 20px 10px;
&:hover {
background-color: #e3e3e3;
}
@@ -1593,6 +1694,7 @@ ul#sharePageLinks.active {
}
}
}
.react-autosuggest__container {
position: relative;
width: 100%;
@@ -1696,37 +1798,41 @@ ul#sharePageLinks.active {
border: 1px solid #666666;
background-color: $white;
}
.govuk-radios--small .govuk-radios__item {
margin-bottom: 20px;
padding-left: 0px !important;
}
.govuk-radios--small
.govuk-radios__item:hover
.govuk-radios__input:not(:disabled)
+ .govuk-radios__label:before {
.govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:not(:disabled)+.govuk-radios__label:before {
box-shadow: 0 0 0 5px $lightgrey;
}
.govuk-radios__item {
background-color: $lightgrey_semi;
&:hover {
background-color: $lightgrey;
}
label {
margin-top: 0px;
background-color: $lightgrey_semi;
padding: 20px 20px 20px 50px;
&:before {
top: 18px;
width: 24px;
height: 24px;
left: 18px;
}
&:after {
top: 22px;
left: 22px;
border-width: 8px;
}
&:hover {
background-color: $lightgrey;
}
@@ -1765,11 +1871,13 @@ ul#sharePageLinks.active {
@media screen and (max-width: 768px) {
&.activePaginationItem {
color: $white;
&:before {
content: "";
background-image: url(/assets/images/arrow-left--white.svg);
}
}
background-color: $black;
color: #ffffff;
font-size: 20px;
@@ -1779,6 +1887,7 @@ ul#sharePageLinks.active {
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
width: max-content;
&:link {
color: $white;
}
@@ -1789,9 +1898,11 @@ ul#sharePageLinks.active {
.paginationContainer {
text-align: center;
font-size: 20px;
.activePaginationItem {
color: #b80d0d;
}
@media screen and (max-width: 768px) {
display: none;
}
@@ -1814,19 +1925,23 @@ ul#sharePageLinks.active {
&.activePaginationItem {
color: #b80d0d;
&:after {
content: "";
background-image: url(/assets/images/arrow-right--active.svg);
}
}
@media screen and (max-width: 768px) {
&.activePaginationItem {
color: #ffffff;
&:after {
content: "";
background-image: url(/assets/images/arrow-right--white.svg);
}
}
background-color: $black;
color: #ffffff;
font-size: 20px;
@@ -1837,6 +1952,7 @@ ul#sharePageLinks.active {
transition: all 0.2s ease-in;
margin-left: 20px;
width: max-content;
&:link {
color: $white;
}
@@ -1844,9 +1960,11 @@ ul#sharePageLinks.active {
}
}
}
.mobilePageCount {
margin-top: 40px;
margin-bottom: 20px;
@media screen and (min-width: 768px) {
display: none;
}
@@ -1892,7 +2010,7 @@ ul#sharePageLinks.active {
}
&.watched_link {
color: $black !important;
color: $black !important;
background-color: $white;
}
}
@@ -1910,6 +2028,7 @@ ul#sharePageLinks.active {
overflow: hidden;
outline: 0;
top: 30%;
@media screen and (min-width: 768px) {
top: 35%;
}
@@ -1948,6 +2067,7 @@ fade {
margin: auto 1rem;
pointer-events: none;
z-index: 1050;
@media screen and (min-width: 768px) {
width: auto;
}
@@ -1963,9 +2083,11 @@ fade {
.modal.fade.show {
display: block;
}
.modal.show .modal-dialog {
transform: none;
}
.modal.fade .modal-dialog {
transition: transform 0.3s ease-out;
}
@@ -2022,20 +2144,21 @@ fade {
// record selection
.documentFilters{
.documentFilters {
@media screen and (min-width: 768px) {
display:flex;
display: flex;
justify-content: space-between;
}
}
#recordDocumentTypeSelect{
#recordDocumentTypeSelect {
text-align: left;
@media screen and (min-width: 768px) {
text-align: right;
}
select {
margin-right: 10px;
margin-left: 10px;
@@ -2049,6 +2172,7 @@ fade {
@media screen and (min-width: 768px) {
text-align: right;
}
select {
margin-right: 10px;
margin-left: 10px;
@@ -2064,3 +2188,69 @@ fade {
flex-direction: row;
align-items: center;
}
//notice banner
.noticebanner {
background: $lightgrey_semi;
border-left: 10px solid $blue;
color: $black;
display: flex;
justify-content: space-between;
font-size: 18px;
padding: 25px 30px;
margin-top: 20px;
.govuk-warning-text__icon {
@media screen and (min-width: 768px) {
margin-top: 0px;
}
border-color: $blue;
background-color: $blue;
min-width: 25px;
min-height: 25px;
font-size: 20px;
line-height: 20px;
left: 20px;
}
.govuk-warning-text__text {
padding-left: 35px;
padding-right: 10px;
color: $black;
font-weight: normal;
font-size: 18px;
}
.hideNotice span {
font-size: 14px;
color: $black;
font-weight: bold;
cursor: pointer;
a {
text-decoration: underline;
color: $black;
padding-right: 10px;
}
&:hover {
color: $charcoal
}
&:after {
content: "\00d7";
font-size: 20px;
position: relative;
top: 3px;
}
}
}