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

breacrumb change & form styling

Browse Source
This commit is contained in:
robbond
2024-08-12 17:20:06 +01:00
parent c93e9e0056
commit 80f499c072
7 changed files with 422 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/breadcrumbs.js
+82 -16
View File
@@ -8,8 +8,10 @@ import { connect } from "react-redux";
import { useSession } from "next-auth/react"; import { useSession } from "next-auth/react";
import { setCurrentView } from "../store/currentView/action"; import { setCurrentView } from "../store/currentView/action";
import { setCurrentSection } from "../store/appealType/action";
const Breadcrumbs = (props) => { const Breadcrumbs = (props) => {
const { currentView, setCurrentView } = props; const { currentView, setCurrentView, setCurrentSection } = props;
const router = useRouter(); const router = useRouter();
let { t } = useTranslation(); let { t } = useTranslation();
@@ -24,14 +26,18 @@ const Breadcrumbs = (props) => {
> >
<div className="govuk-breadcrumbs "> <div className="govuk-breadcrumbs ">
<ol className="govuk-breadcrumbs__list"> <ol className="govuk-breadcrumbs__list">
<li className="govuk-breadcrumbs__list-item"> {router.pathname != "/myportal/[appealtypes]" &&
<Link router.pathname != "/newappeal/[appealtypes]" && (
href={"/"} <li className="govuk-breadcrumbs__list-item">
className="govuk-breadcrumbs__link" <Link
> href={"/"}
{t("common:service-name-breadcrumb")} className="govuk-breadcrumbs__link"
</Link> >
</li> {t("common:service-name-breadcrumb")}
</Link>
</li>
)}
{router.pathname == "/myportal" && ( {router.pathname == "/myportal" && (
<li className="govuk-breadcrumbs__list-item"> <li className="govuk-breadcrumbs__list-item">
{t("myportal:page-title")} {t("myportal:page-title")}
@@ -244,7 +250,7 @@ const Breadcrumbs = (props) => {
)} )}
{router.pathname == "/newappeal" && ( {router.pathname == "/newappeal" && (
<> <>
<li className="govuk-breadcrumbs__list-item"> {/* <li className="govuk-breadcrumbs__list-item">
<Link <Link
href={ href={
router.locale != "en" router.locale != "en"
@@ -260,12 +266,12 @@ const Breadcrumbs = (props) => {
</li> </li>
<li className="govuk-breadcrumbs__list-item"> <li className="govuk-breadcrumbs__list-item">
{t("newappeal:page-title")} {t("newappeal:page-title")}
</li> </li> */}
</> </>
)} )}
{router.pathname == "/newappeal/[appealtypes]" && ( {router.pathname == "/newappeal/[appealtypes]" && (
<> <>
<li className="govuk-breadcrumbs__list-item"> {/* <li className="govuk-breadcrumbs__list-item">
<Link <Link
href={ href={
router.locale != "en" router.locale != "en"
@@ -281,12 +287,41 @@ const Breadcrumbs = (props) => {
</li> </li>
<li className="govuk-breadcrumbs__list-item"> <li className="govuk-breadcrumbs__list-item">
{t("newappeal:page-title")} {t("newappeal:page-title")}
</li> </li> */}
{props.appealType.currentSection > 1 &&
(props.appealType.currentSection == 9999 ? (
<li className="govuk-breadcrumbs__list-item">
<Link
href={"/"}
className="govuk-breadcrumbs__link"
>
{t(
"common:service-name-breadcrumb"
)}
</Link>
</li>
) : (
<li className="govuk-breadcrumbs__link-item">
<a
className="govuk-breadcrumbs__link"
href="#"
onClick={() =>
setCurrentSection(
props.appealType
.currentSection - 1
)
}
>
{t("common:back-link")}
</a>
</li>
))}
</> </>
)} )}
{router.pathname == "/myportal/[appealtypes]" && ( {router.pathname == "/myportal/[appealtypes]" && (
<> <>
<li className="govuk-breadcrumbs__list-item"> {/* <li className="govuk-breadcrumbs__list-item">
<Link <Link
href={ href={
router.locale != "en" router.locale != "en"
@@ -304,8 +339,36 @@ const Breadcrumbs = (props) => {
{t("newappeal:page-title")} {t("newappeal:page-title")}
</li> </li>
<li className="govuk-breadcrumbs__list-item"> <li className="govuk-breadcrumbs__list-item">
{props.formTitle} {t("common:back-link")} {props.formTitle}
</li> </li> */}
{props.appealType.currentSection > 1 &&
(props.appealType.currentSection == 9999 ? (
<li className="govuk-breadcrumbs__list-item">
<Link
href={"/"}
className="govuk-breadcrumbs__link"
>
{t(
"common:service-name-breadcrumb"
)}
</Link>
</li>
) : (
<li className="govuk-breadcrumbs__list-item">
<a
className="govuk-breadcrumbs__link"
href="#"
onClick={() =>
setCurrentSection(
props.appealType
.currentSection - 1
)
}
>
{t("common:back-link")}
</a>
</li>
))}
</> </>
)} )}
{router.pathname == "/newappeal/selectappeal" && ( {router.pathname == "/newappeal/selectappeal" && (
@@ -942,6 +1005,9 @@ const mapDispatchToProps = (dispatch) => {
setCurrentView: (currentView) => { setCurrentView: (currentView) => {
dispatch(setCurrentView(currentView)); dispatch(setCurrentView(currentView));
}, },
setCurrentSection: (currentSection) => {
dispatch(setCurrentSection(currentSection));
},
}; };
}; };
components/header.js
+6
View File
@@ -47,7 +47,13 @@ const Header = (props) => {
"/newappeal", "/newappeal",
"/myportal/dnsapplications", "/myportal/dnsapplications",
"/myportal/dnsdetails", "/myportal/dnsdetails",
"/myportal/addresssearch",
"/myportal/addresssearchresults",
"/myportal/advancedsearch",
"/myportal/advancedsearchresults",
"/myportal/case/[ticketnumber]",
]; ];
const hasContactLink = [ const hasContactLink = [
"/dns/application-process", "/dns/application-process",
"/dns/help", "/dns/help",
components/myportal/servicebanner.js
+31 -31
View File
@@ -15,41 +15,41 @@ const ServiceBanner = (props) => {
)}&error=EmailSignin` )}&error=EmailSignin`
); );
}; };
return (
// <div className="servicebanner">
// <h1>
// <img
// className="govuk-!-margin-top-4"
// src={
// router.locale == "cy"
// ? "/assets/images/planning-casework-cy.svg"
// : "/assets/images/planning-casework-en.svg"
// }
// alt="Planning casework"
// />
// </h1>
// <div className="serviceBanner_userDetails">
// <button
// onClick={() => signInButton()}
// className="govuk-header__link "
// >
// {t("common:signin-label")}
// </button>
// </div>
// </div>
const portalLogoLink = [
"/myportal/[appealtypes]",
"/newappeal",
"/newappeal/[appealtypes]",
];
return (
<div className="servicebanner myportal govuk-!-margin-bottom-4"> <div className="servicebanner myportal govuk-!-margin-bottom-4">
<h1> <h1>
<img {portalLogoLink.includes(router.pathname) ? (
src={ <Link href={"/myportal"}>
router.locale == "cy" <img
? "/assets/images/planning-casework-cy.svg" src={
: "/assets/images/planning-casework-en.svg" router.locale == "cy"
} ? "/assets/images/planning-casework-cy.svg"
alt={router.locale == "cy" ? "Fy mhorth" : "My Portal"} : "/assets/images/planning-casework-en.svg"
/> }
alt={
router.locale == "cy"
? "Fy mhorth"
: "My Portal"
}
/>
</Link>
) : (
<img
src={
router.locale == "cy"
? "/assets/images/planning-casework-cy.svg"
: "/assets/images/planning-casework-en.svg"
}
alt={router.locale == "cy" ? "Fy mhorth" : "My Portal"}
/>
)}
</h1> </h1>
<div className="serviceBanner_userDetails"> <div className="serviceBanner_userDetails">
<img <img
className="user_logo" className="user_logo"
components/newappeal/buildsection.js
+133 -34
View File
@@ -388,8 +388,8 @@ let BuildSection = (props) => {
return ( return (
<div className="govuk-grid-row"> <div className="govuk-grid-row">
<div className="govuk-grid-column-two-thirds"> <div className="govuk-grid-column-two-thirds wgForm ">
<h1 className="govuk-heading-m govuk-!-margin-top-5"> <h1 className="govuk-heading-m ">
{FieldsTranslations(titles[0].value)} {FieldsTranslations(titles[0].value)}
</h1> </h1>
<form onSubmit={handleSubmit(onHandleSubmit)}> <form onSubmit={handleSubmit(onHandleSubmit)}>
@@ -413,45 +413,142 @@ let BuildSection = (props) => {
<div className="govuk-button-group"> <div className="govuk-button-group">
{props.sectionCount != currentSection ? ( {props.sectionCount != currentSection ? (
<button <>
type="submit" <button
className="govuk-button" type="submit"
data-module="govuk-button" className="govuk-button"
onClick={() => { data-module="govuk-button"
getErrors(); onClick={() => {
let valuesObj = _.has( getErrors();
props.props.form[props.form], let valuesObj = _.has(
"values" props.props.form[props.form],
) "values"
? props.props.form[props.form].values )
: {}; ? props.props.form[props.form]
.values
: {};
//console.log("valuesobj:", valuesObj); //console.log("valuesobj:", valuesObj);
delete valuesObj["_pinswg_appellant_value"]; delete valuesObj[
"_pinswg_appellant_value"
];
//console.log("on save:", valuesObj); //console.log("on save:", valuesObj);
updateCaseProgress(valuesObj, false, false); updateCaseProgress(
}} valuesObj,
> false,
{t("common:continue-button")} false
</button> );
}}
>
{t("common:continue-button")}
</button>
{savingStatus ? (
<span className=" progress-save-active">
{router.locale == "cy"
? "Nôl data"
: "Saving data"}
<img
className="data-loading-icon"
src="/assets/images/loading.gif"
alt={
router.locale == "cy"
? "Nôl data"
: "Saving data"
}
/>
</span>
) : (
<button
className="govuk-button progress-save "
onClick={() => {
let valuesObj =
props.props.form[props.form]
.values || {};
console.log(
"valuesobj:",
valuesObj
);
delete valuesObj[
"_pinswg_appellant_value"
];
console.log("on save:", valuesObj);
updateCaseProgress(
valuesObj,
true,
true
);
}}
>
{t("common:save-exit-button")}
</button>
)}
</>
) : ( ) : (
"" ""
)} )}
{props.sectionCount == currentSection ? ( {props.sectionCount == currentSection ? (
<button <>
disabled={!isProgressComplete(progObj)} <button
type="submit" disabled={!isProgressComplete(progObj)}
className="govuk-button" type="submit"
data-module="govuk-button" className="govuk-button"
> data-module="govuk-button"
{t("common:submit-button")} >
</button> {t("common:submit-button")}
</button>
{savingStatus ? (
<span className=" progress-save-active">
{router.locale == "cy"
? "Nôl data"
: "Saving data"}
<img
className="data-loading-icon"
src="/assets/images/loading.gif"
alt={
router.locale == "cy"
? "Nôl data"
: "Saving data"
}
/>
</span>
) : (
<button
className="govuk-button progress-save "
onClick={() => {
let valuesObj =
props.props.form[props.form]
.values || {};
console.log(
"valuesobj:",
valuesObj
);
delete valuesObj[
"_pinswg_appellant_value"
];
console.log("on save:", valuesObj);
updateCaseProgress(
valuesObj,
true,
true
);
}}
>
{t("common:save-exit-button")}
</button>
)}
</>
) : ( ) : (
"" ""
)} )}
{currentSection > 1 ? ( {/* {currentSection > 1 ? (
<a <a
className="govuk-link" className="govuk-link"
href="#" href="#"
@@ -463,7 +560,7 @@ let BuildSection = (props) => {
</a> </a>
) : ( ) : (
"" ""
)} )} */}
</div> </div>
</form> </form>
</div> </div>
@@ -486,6 +583,8 @@ let BuildSection = (props) => {
<hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" /> <hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
{/*
Mpved save and exit button from progess section
{savingStatus ? ( {savingStatus ? (
<span className=" progress-save-active"> <span className=" progress-save-active">
{router.locale == "cy" ? "Nôl data" : "Saving data"} {router.locale == "cy" ? "Nôl data" : "Saving data"}
@@ -501,7 +600,7 @@ let BuildSection = (props) => {
</span> </span>
) : ( ) : (
<button <button
className="govuk-button govuk-button--secondary progress-save " className="govuk-button progress-save "
onClick={() => { onClick={() => {
let valuesObj = let valuesObj =
props.props.form[props.form].values || {}; props.props.form[props.form].values || {};
@@ -516,7 +615,7 @@ let BuildSection = (props) => {
> >
{t("common:save-exit-button")} {t("common:save-exit-button")}
</button> </button>
)} )} */}
</div> </div>
</div> </div>
</div> </div>
pages/newappeal/[appealtypes].js
+7
View File
@@ -12,6 +12,7 @@ import {
getMandatoryFields, getMandatoryFields,
getPickLists, getPickLists,
getProgressFromBlob, getProgressFromBlob,
getPersonalAccount,
} from "../../actions"; } from "../../actions";
import Breadcrumbs from "../../components/breadcrumbs"; import Breadcrumbs from "../../components/breadcrumbs";
import CookieBanner from "../../components/cookieBanner"; import CookieBanner from "../../components/cookieBanner";
@@ -27,6 +28,7 @@ import {
setContainerID, setContainerID,
setLoggedInUserEmail, setLoggedInUserEmail,
setLoggedInUserId, setLoggedInUserId,
setAccountDetails,
} from "../../store/accountDetails/action"; } from "../../store/accountDetails/action";
import { import {
setAppealLPA, setAppealLPA,
@@ -37,6 +39,7 @@ import {
} from "../../store/appealType/action"; } from "../../store/appealType/action";
import { setForm } from "../../store/formData/action"; import { setForm } from "../../store/formData/action";
import { wrapper } from "../../store/store"; import { wrapper } from "../../store/store";
import ServiceBanner from "../../components/myportal/servicebanner";
let Home = (props) => { let Home = (props) => {
const { footerLinks, pages, formData } = props; const { footerLinks, pages, formData } = props;
@@ -161,6 +164,7 @@ let Home = (props) => {
<div className="govuk-width-container"> <div className="govuk-width-container">
<Breadcrumbs slug={appealtypes} formTitle={formTitle} /> <Breadcrumbs slug={appealtypes} formTitle={formTitle} />
<ServiceBanner props={props} />
<main <main
className="govuk-main-wrapper--auto-spacing" className="govuk-main-wrapper--auto-spacing"
id="main-content" id="main-content"
@@ -253,6 +257,8 @@ export const getServerSideProps = wrapper.getServerSideProps(
query.id query.id
); );
const accountDetails = await getPersonalAccount(loggedInUser);
console.log("anything here", loggedInUser, query.id, blobProgress); console.log("anything here", loggedInUser, query.id, blobProgress);
let caseReference = {}; let caseReference = {};
@@ -281,6 +287,7 @@ export const getServerSideProps = wrapper.getServerSideProps(
store.dispatch(setForm(xmlStr, mandatoryFieldsData, pickListData)); store.dispatch(setForm(xmlStr, mandatoryFieldsData, pickListData));
store.dispatch(setAppealType(appealTypeData)); store.dispatch(setAppealType(appealTypeData));
store.dispatch(setContainerID(thisSession.user.id)); store.dispatch(setContainerID(thisSession.user.id));
store.dispatch(setAccountDetails(accountDetails));
//store.dispatch(setFilesForAppeal(blobList)); //store.dispatch(setFilesForAppeal(blobList));
pages/newappeal/index.js
+1 -1
View File
@@ -112,7 +112,7 @@ const Home = (props) => {
<Breadcrumbs slug={appealtypes} /> <Breadcrumbs slug={appealtypes} />
<ServiceBanner props={props} /> <ServiceBanner props={props} />
<main <main
className="govuk-main-wrapper--auto-spacing" className="govuk-main-wrapper--auto-spacing newAppealForm"
id="main-content" id="main-content"
role="main" role="main"
> >
styles/sass/welshgov/_application.scss
+162 -7
View File
@@ -350,6 +350,140 @@ a.longLinkBreak {
} }
} }
.wgForm {
background: $lightgrey_offwhite;
padding: 20px;
margin: 0 0 40px 0;
@media screen and (min-width: 1024px) {
padding: 40px;
width: 65%;
margin-left: 15px;
}
@media screen and (max-width: 900px) {}
@media (min-width: 40.0625em) {
// width: 100%;
// padding: 0 40px;
}
// #cookies-js form {
// background-color: $lightgrey_light;
// padding: 40px;
.govuk-radios__label:before {
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 {
box-shadow: 0 0 0 5px $lightgrey;
}
.govuk-radios__item {
background-color: $lightgrey_semi;
flex-wrap: nowrap;
.govuk-radios__input:focus+.govuk-radios__label::before {
border-width: 1px;
box-shadow: 0 0 0 2px #ffdd00
}
&: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;
}
}
}
}
.newAppealForm {
background: $lightgrey_offwhite;
padding: 20px;
margin: 0 0 40px 0;
.govuk-radios__label:before {
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 {
box-shadow: 0 0 0 5px $lightgrey;
}
.govuk-radios__item {
background-color: $lightgrey_semi;
flex-wrap: nowrap;
.govuk-radios__input:focus+.govuk-radios__label::before {
border-width: 1px;
box-shadow: 0 0 0 2px #ffdd00
}
&: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;
}
}
}
}
.govuk-grid-row { .govuk-grid-row {
@media screen and (max-width: 900px) { @media screen and (max-width: 900px) {
// margin-right: 0px; // margin-right: 0px;
@@ -368,6 +502,7 @@ textarea,
.govuk-radios__label:before { .govuk-radios__label:before {
border: 1px solid $darkgrey; border: 1px solid $darkgrey;
background-color: $white;
} }
.govuk-checkboxes__conditional--hidden { .govuk-checkboxes__conditional--hidden {
@@ -1106,15 +1241,30 @@ textarea,
.progress-save { .progress-save {
padding: 10px 15px !important; // padding: 10px 15px !important;
font-size: 16px; // font-size: 16px;
float: right; // float: right;
border-color: $midgrey !important; // border-color: $midgrey !important;
color: $midgrey !important; // color: $midgrey !important;
background: $midgrey;
color: $white;
font-size: 20px;
font-weight: bold;
padding: 15px 45px 15px 20px;
margin-bottom: 15px;
&:hover { &:hover {
background-color: $midgrey !important; // background-color: $midgrey !important;
color: $white !important; // color: $white !important;
background: $charcoal;
color: $white;
font-size: 20px;
font-weight: bold;
padding: 15px 45px 15px 20px;
margin-bottom: 15px;
} }
} }
@@ -2531,4 +2681,9 @@ fade {
to { to {
width: 40px; width: 40px;
} }
}
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
background-color: $white;
} }