robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged PR 904: information banner from api with date range

Browse Source 
information banner from api with date range

Related work items: #7927
This commit is contained in:
Robert Bond
2022-09-22 10:12:52 +00:00
parent f9cdaafd7c 38e70b1ec1
commit bfcd0329c6
17 changed files with 548 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.local
+1 -1
View File
@@ -44,7 +44,7 @@ RELAYPATH = "dev-pedw-hc"
GOOGLE_TAG_MANAGER = GTM-T78CBC3
SHOWLOGIN = "true"
SHOWLOGIN = "false"
SHOWREPRESENTATIONS = false
SHOWFILEUPLOAD = "false"
SHOWMAPS = "true"
actions/index.js
+12
View File
@@ -1298,3 +1298,15 @@ export const sendEmail = async (
console.log("this serror", error);
});
};
export const getNotice = () => {
return axios
.get(BASE_URL + "/api/notices")
.then((res) => {
//console.log("//////////----", res.data);
return res.data;
})
.catch((error) => {
console.log("this serror", error);
});
};
components/breadcrumbs.js
+22 -13
View File
@@ -5,6 +5,7 @@ import { useState } from "react";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import LoadingOverlay from "react-loading-overlay";
import { getSession, useSession } from "next-auth/react";
const Breadcrumbs = (props) => {
const { courseContent, slug, currentView } = props;
@@ -45,6 +46,9 @@ const Breadcrumbs = (props) => {
// ? setShowSpinnerState(false)
// : setShowSpinnerState(true);
// };
const { data: session, status } = useSession();
return (
<>
<nav
@@ -494,19 +498,24 @@ const Breadcrumbs = (props) => {
)}
{router.pathname == "/myportal/representation" ? (
<>
<li className="govuk-breadcrumbs__list-item">
<Link
href={
router.locale != "en"
? router.locale + "/myportal"
: "/myportal"
}
>
<a className="govuk-breadcrumbs__link">
{t("common:breadcrumb-my-portal")}
</a>
</Link>
</li>
{session != null && (
<li className="govuk-breadcrumbs__list-item">
<Link
href={
router.locale != "en"
? router.locale +
"/myportal"
: "/myportal"
}
>
<a className="govuk-breadcrumbs__link">
{t(
"common:breadcrumb-my-portal"
)}
</a>
</Link>
</li>
)}
<li className="govuk-breadcrumbs__list-item">
Make representation for:{" "}
{
components/case/summary.js
+4 -5
View File
@@ -15,6 +15,7 @@ import {
} from "../../store/currentView/action";
import { getFormCollectionByID } from "../utils";
import { getSession, useSession } from "next-auth/react";
import Pinswg_advertsid from "./summaryTypes/pinswg_advertsid";
import Pinswg_callinss77id from "./summaryTypes/pinswg_callinss77id";
@@ -64,11 +65,7 @@ const CaseSummary = (props) => {
showMap,
} = props;
const noRepresentationLink = [
"/case",
"/dnsdetails",
"/dns/[developmentName]",
];
const noRepresentationLink = ["/dnsdetails", "/dns/[developmentName]"];
let setCaseQueryObj = props[currentType];
let setCaseDetailsObj = props[currentType + "Details"];
@@ -709,6 +706,8 @@ const CaseSummary = (props) => {
);
}
const { data: session, status } = useSession();
console.log("session status:", status, session);
return (
<>
{showDetailsBlock}
components/noticebanner.js
+65
View File
@@ -0,0 +1,65 @@
import Link from "next/link";
import Image from "next/image";
import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { useState } from "react";
import cookie from "cookie-cutter";
export default function NoticeBanner(props) {
let { t, lang } = useTranslation();
const router = useRouter();
const [bannerOpen, setBannerOpen] = useState(true);
const { noticeContent } = props;
const hideNotice = () => {
let now = new Date();
let expDate = new Date(now);
expDate.setDate(now.getDate() + 365);
cookie.set("pedwNotice", "true", {
expires: expDate,
path: "/",
});
setBannerOpen(false);
};
const bannerOpenCookie = typeof cookie.get("pedwNotice") == "undefined";
return (
<>
{bannerOpenCookie ? (
<div className="govuk-warning-text noticebanner">
<span
className="govuk-warning-text__icon"
aria-hidden="true"
>
!
</span>
<strong className="govuk-warning-text__text">
<span className="govuk-warning-text__assistive">
Warning
</span>
{router.locale != "en"
? noticeContent.value[0].notice_cy
: noticeContent.value[0].notice_en}
</strong>
<div className="hideNotice">
<span
className="govuk-link"
onClick={() => {
hideNotice();
}}
>
Hide
</span>
</div>
</div>
) : (
""
)}
</>
);
}
components/search/searchresults.js
+24
View File
@@ -44,6 +44,7 @@ import {
getPortalModuleDetailsProxy,
deleteWatchedCases,
} from "../../actions";
import { useSession, signIn, signOut } from "next-auth/react";
const SearchResults = (props) => {
const {
@@ -65,6 +66,7 @@ const SearchResults = (props) => {
const router = useRouter();
const { locale } = router;
const { data: session } = useSession();
var resultsArr = searchResultsObj.value || [];
@@ -531,6 +533,28 @@ const SearchResults = (props) => {
)}
</dd>
)}
{!session && (
<dd>
<span
className="govuk-summary-list__actionLink"
onClick={() => {
signIn("email");
// selectWatchedCase(
// cookies.pinsUser,
// item.incidentid,
// item.pinswg_appealcasetype
// );
alert(
"Trying to watch case " +
item.title
);
}}
title="Watch this case"
>
+
</span>
</dd>
)}
</div>
);
})
package.json
+1 -1
View File
@@ -16,6 +16,7 @@
"@magic-sdk/admin": "^1.4.0",
"@next-auth/prisma-adapter": "^1.0.4",
"@prisma/client": "^3.12.0",
"@redux-devtools/extension": "^3.2.3",
"@webdeb/next-styles": "^1.1.1",
"applicationinsights": "^2.2.0",
"axios": "^0.24.0",
@@ -67,7 +68,6 @@
"react-loading-overlay": "^1.0.1",
"react-redux": "^7.2.6",
"react-xml-parser": "^1.1.8",
"redux-devtools-extension": "^2.13.9",
"redux-form": "^8.3.8",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.4.1",
pages/api/auth/[...nextauth].js
+1
View File
@@ -51,6 +51,7 @@ export default NextAuth({
reference: reference,
// emailReplyToId: emailReplyToId,
})
.then((response) => console.log(response))
.catch((err) => consoleLogger(err));
},
}),
pages/api/endpoint/getwatchedcases_api.js
+1
View File
@@ -4,6 +4,7 @@ import {
getToken,
azureHeaders,
getBasicSearchDetails,
consoleLogger,
} from "../../../actions";
const WORDKEY = process.env.HASHKEY;
pages/api/notices/index.js
+17
View File
@@ -0,0 +1,17 @@
const ApiResponse = (req, res) => {
res.statusCode = 200;
res.json({
"value": [
{
"notice_en":
"An update has been made, if you experience problems,refresh your cache,lorem ipsum doooo orem ipsum doooo orem ipsum doooo orem ipsum doooo dah",
"notice_cy":
"Mae diweddariad wedi'i wneud, os ydych chi'n cael problemau, adnewyddwch eich storfa, lorem ipsum doooo orem ipsum doooo orem ipsum doooo orem ipsum doooo dah",
"dateFrom": "20/09/2022",
"dateTo": "20/09/2023",
},
],
});
};
export default ApiResponse;
pages/index.js
+29 -1
View File
@@ -4,7 +4,7 @@ import Head from "next/head";
import { useRouter } from "next/router";
import { setCookie } from "nookies";
import { connect } from "react-redux";
import { getToken, hashString } from "../actions";
import { getNotice, getToken, hashString } from "../actions";
import {
getGGToken,
getPortalLogin,
@@ -16,6 +16,7 @@ import Footer from "../components/footer";
import Header from "../components/header";
import Main from "../components/main";
import ServiceBanner from "../components/servicebanner";
import NoticeBanner from "../components/noticebanner";
import {
setAccountDetails,
setContainerID,
@@ -36,6 +37,7 @@ const Home = (props) => {
loggedInUserEmail,
ggLocale,
hasLoginCode,
noticeContent,
} = props;
let { t, lang } = useTranslation();
@@ -78,6 +80,26 @@ const Home = (props) => {
}))
: console.log("no value in user id");
var noticeDateFrom = new Date(
noticeContent.value[0].dateFrom.split("/")[2],
noticeContent.value[0].dateFrom.split("/")[1] - 1,
noticeContent.value[0].dateFrom.split("/")[0]
);
var noticeDateTo = new Date(
noticeContent.value[0].dateTo.split("/")[2],
noticeContent.value[0].dateTo.split("/")[1] - 1,
noticeContent.value[0].dateTo.split("/")[0]
);
var today = new Date();
var day = today.getDate();
var month = today.getMonth();
var year = today.getFullYear();
today = new Date(year, month, day);
const displayNotice = today >= noticeDateFrom && today <= noticeDateTo;
return (
<div>
<Head>
@@ -147,6 +169,9 @@ const Home = (props) => {
</>
) : (
<>
{displayNotice && (
<NoticeBanner noticeContent={noticeContent} />
)}
<ServiceBanner />
<Main
ggLocale={ggLocale}
@@ -192,6 +217,8 @@ export const getServerSideProps = wrapper.getServerSideProps(
// store.dispatch(getGovGatewayConfig(providerConfig));
const noticeContent = await getNotice();
let ggToken = {};
let ggUserInfo = {};
let portalUserObj = {};
@@ -241,6 +268,7 @@ export const getServerSideProps = wrapper.getServerSideProps(
loggedInUserId: portalUserObj,
loggedInUserEmail: loginEmailStr,
hasLoginCode: hasLoginCode,
noticeContent: noticeContent,
},
};
}
pages/myportal/advancedsearch.js
+31 -14
View File
@@ -3,7 +3,7 @@ import useTranslation from "next-translate/useTranslation";
import Head from "next/head";
import { useRouter } from "next/router";
import { connect } from "react-redux";
import { getAppealsTypes, getLPA } from "../../actions";
import { getAppealsTypes, getLPA, getPersonalAccount } from "../../actions";
import { getProviderConfig } from "../../actions/govgateway";
import Breadcrumbs from "../../components/breadcrumbs";
import CookieBanner from "../../components/cookieBanner";
@@ -16,6 +16,12 @@ import { setAppealType } from "../../store/appealType/action";
import { getGovGatewayConfig } from "../../store/govgateway/action";
import { setLPA } from "../../store/lpa/action";
import { wrapper } from "../../store/store";
import { getSession, useSession } from "next-auth/react";
import {
setAccountDetails,
setContainerID,
setLoggedInUserId,
} from "../../store/accountDetails/action";
const Home = (props) => {
const { footerLinks, pages } = props;
@@ -61,21 +67,32 @@ const Home = (props) => {
};
export const getServerSideProps = wrapper.getServerSideProps(
(store) =>
async ({ query, req, res }) => {
const [appealTypeData, lpaData] = await Promise.all([
await getAppealsTypes(),
await getLPA(),
]);
const providerConfig = await getProviderConfig();
store.dispatch(getGovGatewayConfig(providerConfig));
(store) => async (ctx) => {
const { query, req, res } = ctx;
console.log("query-", query);
// const lpaData = require("../../data/lpa.json");
// const appealTypeData = require("../../data/appealtypes.json");
const { cookies } = req;
store.dispatch(setAppealType(appealTypeData));
store.dispatch(setLPA(lpaData));
}
let loggedInUser = cookies.pinsUser;
let thisSession = await getSession(ctx);
const [accountDetails, appealTypeData, lpaData] = await Promise.all([
await getPersonalAccount(loggedInUser),
await getAppealsTypes(),
await getLPA(),
]);
const providerConfig = await getProviderConfig();
store.dispatch(getGovGatewayConfig(providerConfig));
// const lpaData = require("../../data/lpa.json");
// const appealTypeData = require("../../data/appealtypes.json");
store.dispatch(setAccountDetails(accountDetails));
store.dispatch(setAppealType(appealTypeData));
store.dispatch(setLPA(lpaData));
store.dispatch(setLoggedInUserId(loggedInUser));
}
);
const mapStateToProps = (state) => {
pages/myportal/representation.js
+33
View File
@@ -7,6 +7,14 @@ import CookieBanner from "../../components/cookieBanner";
import Footer from "../../components/footer";
import Header from "../../components/header";
import Case from "../../components/representation";
import { wrapper } from "../../store/store";
import { getSession, useSession } from "next-auth/react";
import { getPersonalAccount } from "../../actions";
import {
setAccountDetails,
setContainerID,
setLoggedInUserId,
} from "../../store/accountDetails/action";
const Home = (props) => {
const { footerLinks, pages } = props;
@@ -113,10 +121,35 @@ const Home = (props) => {
);
};
// export const getServerSideProps = wrapper.getServerSideProps(
// (store) => async (ctx) => {
// const { query, req, res } = ctx;
// console.log("The query", query);
// const { cookies } = req;
// let loggedInUser = cookies.pinsUser;
// let thisSession = await getSession(ctx);
// console.log(loggedInUser, thisSession);
// const accountDetails = await getPersonalAccount(loggedInUser);
// store.dispatch(setAccountDetails(accountDetails));
// return {
// props: {
// containerID: thisSession.user.id,
// },
// };
// }
// );
const mapStateToProps = (state) => {
//console.log(state);
return {
accountDetails: state.accountDetails,
currentView: state.currentView,
search: state.search,
searchResultsObj: state.searchResultsObj,
pages/myportal/searchresults.js
+17 -4
View File
@@ -3,6 +3,7 @@ import Head from "next/head";
import { useRouter } from "next/router";
import { connect } from "react-redux";
import {
getPersonalAccount,
getBasicSearch,
getPortalModuleDetails,
getWatchedCases,
@@ -29,6 +30,12 @@ import {
import TimeOut from "../../components/timeout";
import { getGovGatewayConfig } from "../../store/govgateway/action";
import { getProviderConfig } from "../../actions/govgateway";
import { getSession, useSession } from "next-auth/react";
import {
setAccountDetails,
setContainerID,
setLoggedInUserId,
} from "../../store/accountDetails/action";
const Home = (props) => {
const { footerLinks, pages, watchedCases } = props;
@@ -73,6 +80,8 @@ export const getServerSideProps = wrapper.getServerSideProps(
let loggedInUser = cookies.pinsUser;
let thisSession = await getSession(ctx);
let [searchResultsObj, watchedCases] = await Promise.all([
await getBasicSearch(query.q),
await getWatchedCases(loggedInUser),
@@ -89,17 +98,21 @@ export const getServerSideProps = wrapper.getServerSideProps(
//console.log("sssss", searchResultsObj);
const [searchDetailsObj, watchedCasesDetails] = await Promise.all([
await getSearchDetails(searchResultsObj),
await getDetails(watchedCases, "myWatchedCases"),
]);
const [accountDetails, searchDetailsObj, watchedCasesDetails] =
await Promise.all([
await getPersonalAccount(loggedInUser),
await getSearchDetails(searchResultsObj),
await getDetails(watchedCases, "myWatchedCases"),
]);
const providerConfig = await getProviderConfig();
store.dispatch(setAccountDetails(accountDetails));
store.dispatch(getGovGatewayConfig(providerConfig));
store.dispatch(setSearchResults(searchResultsObj));
store.dispatch(setSearchDetails(searchDetailsObj));
store.dispatch(setSearch(query.q));
store.dispatch(setWatchedCases(watchedCases));
store.dispatch(setWatchedCasesDetails(watchedCasesDetails));
store.dispatch(setLoggedInUserId(loggedInUser));
}
);
public/assets/images/information.svg
+20
View File
@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>global/icon/information</title>
<defs>
<path d="M12.5,0 C5.59625,0 0,5.59625 0,12.5 C0,19.4025 5.59625,25 12.5,25 C19.4025,25 25,19.4025 25,12.5 C25,5.59625 19.4025,0 12.5,0 M13.9423077,18.5769231 L11.5384615,18.5769231 L11.5384615,10.5769231 L13.9423077,10.5769231 L13.9423077,18.5769231 Z M13.9423077,8.17307692 L11.5384615,8.17307692 L11.5384615,5.76923077 L13.9423077,5.76923077" id="path-1"></path>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Page-1" fill="#0360A6" xlink:href="#path-1"></use>
<g mask="url(#mask-2)" fill="#0360A6" id="colour/blue/$blue-#0360a6">
<g>
<polygon id="#0360a6" points="-7.27163618e-14 1.43800316e-13 25 1.43800316e-13 25 25 -7.27163618e-14 25"></polygon>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

store/store.js
+1 -1
View File
@@ -86,7 +86,7 @@ const reducer = (state = {}, action) => {
// BINDING MIDDLEWARE
const bindMiddleware = (middleware) => {
if (process.env.NODE_ENV !== "production") {
const { composeWithDevTools } = require("redux-devtools-extension");
const { composeWithDevTools } = require("@redux-devtools/extension");
return composeWithDevTools(applyMiddleware(...middleware));
}
return applyMiddleware(...middleware);
styles/sass/welshgov/_application.scss
+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;
}
}
}