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

Merged PR 396: Static Record view for dns

Browse Source 
added dns record view with tabs

Related work items: #5249
This commit is contained in:
Robert Bond
2021-08-10 16:18:42 +00:00
parent 259d1e0d88 b96aa3acbe
commit f293a53755
23 changed files with 1497 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/breadcrumbs.js
+25
View File
@@ -284,6 +284,31 @@ const Breadcrumbs = (props) => {
) : (
""
)}
{router.pathname == "/dns/applications" ? (
<>
<li className="govuk-breadcrumbs__list-item">
Applications
</li>
</>
) : (
""
)}
{router.pathname == "/dns/application-view" ? (
<>
<li className="govuk-breadcrumbs__list-item">
<Link href="/dns/applications">
<a className="govuk-breadcrumbs__link">
Applications{" "}
</a>
</Link>
</li>
<li className="govuk-breadcrumbs__list-item">
TWA - Morlais Demonstration Zone
</li>
</>
) : (
""
)}
{!_.isEmpty(slug) ? (
<>
<li className="govuk-breadcrumbs__list-item">
components/dns/applications/applicationSideBar.js
+106
View File
@@ -0,0 +1,106 @@
import Link from "next/link";
import { useRouter } from "next/router";
import { useContext } from "react";
import useTranslation from "next-translate/useTranslation";
const ApplicationSideBar = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<h3 className="govuk-heading-s">About this application</h3>
<p className="govuk-body-s">
The Project will provide a consented area for the
installation and commercial demonstration of multiple
arrays of tidal energy devices, to a maximum installed
capacity of 240 Megawatts (MW).
</p>
</div>
</div>
<hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<h3 className="govuk-heading-s">Application location</h3>
<div className="map-responsive ">
<iframe
width="600"
height="500"
id="gmap_canvas"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d906124.6839968044!2d-4.849068013831224!3d52.39943863518503!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x486434b66c1c0fed%3A0x1ebb71bc8aa5e8a2!2sWales!5e0!3m2!1sen!2suk!4v1628587620670!5m2!1sen!2suk"
frameBorder="0"
scrolling="no"
marginHeight="0"
marginWidth="0"
></iframe>
</div>
<p className="govuk-body-s govuk-!-margin-top-3">
The location shown on the map is approximate at this
stage
</p>
</div>
</div>
<hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<h3 className="govuk-heading-s">Contact Information</h3>
<p className="govuk-body-s">
Planning Inspectorate case team:
<br />
<a
className="longLinkBreak"
href="mailto:TWA.morlaistidalarray@planninginspectorate.gov.uk"
>
TWA.morlaistidalarray@planninginspectorate.gov.uk
</a>
</p>
<p className="govuk-body-s">
Tel: <a href="tel:03034445940">0303 444 5940</a>
</p>
<p className="govuk-body-s">
Developer: <br />
Graham Morley
<br />
Tel: +44 (0) 1248 725 713
</p>
</div>
</div>
<hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<h3 className="govuk-heading-s">Email updates</h3>
<p className="govuk-body-s govuk-!-margin-bottom-0">
Sign up using email address to receive updates about
this application
</p>
<form>
<div className="govuk-form-group govuk-!-margin-bottom-2">
<br />
<input
className="govuk-input govuk-input--width-10 "
id="event-name"
name="event-name"
type="text"
placeholder="Email address"
/>
</div>
<div className="govuk-form-group govuk-!-margin-top-0 govuk-!-margin-bottom-0">
<button
className="govuk-button "
data-module="govuk-button"
>
Sign up
</button>
</div>
</form>
</div>
</div>
</>
);
};
export default ApplicationSideBar;
components/dns/applications/applicationSummary.js
+63
View File
@@ -0,0 +1,63 @@
import Link from "next/link";
import { useRouter } from "next/router";
import { useContext } from "react";
import useTranslation from "next-translate/useTranslation";
const ApplicationSummary = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<h1>TWA - Morlais Demonstration Zone</h1>
</div>
</div>
<div className="govuk-grid-row">
<div className="govuk-grid-column-two-thirds">
<p className="govuk-body-s">
by Menter Mon <br />
Type: Generating Stations
</p>
<div className="govuk-warning-text">
<span
className="govuk-warning-text__icon"
aria-hidden="true"
>
!
</span>
<strong className="govuk-warning-text__text">
<span className="govuk-warning-text__assistive">
Information
</span>
The Inspector’s report into the above has now been
formally submitted to the Welsh Government for
consideration.
<br />
<span className="govuk-body-s">
05 October 2020
</span>
</strong>
</div>
</div>
<div className="govuk-grid-column-one-third">
<p className="govuk-body-s">
Stage: <br />
Next Stage: Decision
<br />
Reference: TWA/3234121
<br />
Developer: Menter Mon
<br />
Procedure: Inquiry
</p>
</div>
</div>
</>
);
};
export default ApplicationSummary;
components/dns/applications/applicationTabs.js
+151
View File
@@ -0,0 +1,151 @@
import Link from "next/link";
import { useRouter } from "next/router";
import { useContext } from "react";
import { useState } from "react";
import useTranslation from "next-translate/useTranslation";
import ApplicationTabsTimeLine from "./applicationTabsTimeline";
import ApplicationSideBar from "./applicationSideBar";
import ApplicationTabsDocuments from "./applicationTabsDocuments";
import ApplicationTabsComments from "./applicationTabsComments";
import ApplicationTabsRegistrationForm from "./applicationTabsRegistrationForm";
const ApplicationTabs = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
const [showTab, setShowTab] = useState(1);
let selectTab = (tabID) => {
setShowTab(tabID);
console.log(showTab);
};
return (
<>
<div className="govuk-tabs" data-module="govuk-tabs">
<h2 className="govuk-tabs__title">Contents</h2>
<ul className="govuk-tabs__list">
<li
className={
showTab == 1
? "govuk-tabs__list-item govuk-tabs__list-item--selected"
: "govuk-tabs__list-item"
}
>
<a
onClick={() => {
selectTab(1);
}}
className="govuk-tabs__tab"
href="#past-day"
>
Overview
</a>
</li>
<li
className={
showTab == 2
? "govuk-tabs__list-item govuk-tabs__list-item--selected"
: "govuk-tabs__list-item"
}
>
<a
onClick={() => {
selectTab(2);
}}
className="govuk-tabs__tab"
href="#past-week"
>
Documents{" "}
</a>
</li>
<li
className={
showTab == 3
? "govuk-tabs__list-item govuk-tabs__list-item--selected"
: "govuk-tabs__list-item"
}
>
<a
onClick={() => {
selectTab(3);
}}
className="govuk-tabs__tab"
href="#past-week"
>
Registration form
</a>
</li>
<li
className={
showTab == 4
? "govuk-tabs__list-item govuk-tabs__list-item--selected"
: "govuk-tabs__list-item"
}
>
<a
onClick={() => {
selectTab(4);
}}
className="govuk-tabs__tab"
href="#past-week"
>
Comments Received
</a>
</li>
</ul>
<div
className={
showTab == 1
? "govuk-tabs__panel "
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
id="past-day"
>
<div className="govuk-grid-row">
<div className="govuk-grid-column-two-thirds">
<ApplicationTabsTimeLine />
</div>
<div className="govuk-grid-column-one-third">
<ApplicationSideBar />
</div>
</div>
</div>
<div
className={
showTab == 2
? "govuk-tabs__panel "
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
id="past-week"
>
<ApplicationTabsDocuments />
</div>
<div
className={
showTab == 3
? "govuk-tabs__panel "
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
id="past-week"
>
<ApplicationTabsRegistrationForm />
</div>
<div
className={
showTab == 4
? "govuk-tabs__panel "
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
id="past-week"
>
<ApplicationTabsComments />
</div>
</div>
</>
);
};
export default ApplicationTabs;
components/dns/applications/applicationTabsComments.js
+30
View File
@@ -0,0 +1,30 @@
import Link from "next/link";
import { useRouter } from "next/router";
import { useContext } from "react";
import useTranslation from "next-translate/useTranslation";
const ApplicationTabsComments = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<h3>
Representations received regarding XXXXXXXX XXXXXXXX
XXXXXXX Order
</h3>
<p className="govuk-body-s">
No comments have been received as yet. Any we receive
will be published on this page.
</p>
</div>
</div>
</>
);
};
export default ApplicationTabsComments;
components/dns/applications/applicationTabsDocuments.js
+385
View File
@@ -0,0 +1,385 @@
import Link from "next/link";
import { useRouter } from "next/router";
import { useContext } from "react";
import useTranslation from "next-translate/useTranslation";
import {
Accordion,
AccordionItem,
AccordionItemHeading,
AccordionItemButton,
AccordionItemPanel,
} from "react-accessible-accordion";
// import "react-accessible-accordion/dist/fancy-example.css";
const ApplicationTabsDocuments = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<>
<div className="govuk-grid-row">
<div className="govuk-grid-column-one-third">
<h3 className="govuk-heading-s">
Filter documents by Application stage
</h3>
<Accordion
allowZeroExpanded
className="accordion govuk-body-s"
>
<AccordionItem>
<AccordionItemHeading>
<AccordionItemButton>
Pre Application (0)
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel>
<Link href="#">All documents</Link>
<br />
</AccordionItemPanel>
</AccordionItem>
<AccordionItem>
<AccordionItemHeading>
<AccordionItemButton>
Developer&apos;s Application (174)
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel>
<Link href="#">All documents</Link>
<Accordion allowZeroExpanded>
<AccordionItem>
<AccordionItemHeading>
<AccordionItemButton>
Pre Application{" "}
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel>
<Link href="#">All documents</Link>
<br />
</AccordionItemPanel>
</AccordionItem>
<AccordionItem>
<AccordionItemHeading>
<AccordionItemButton>
Developer&apos;s Application
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel>
<Link href="#">All documents</Link>
</AccordionItemPanel>
</AccordionItem>
<AccordionItem>
<AccordionItemHeading>
<AccordionItemButton>
Pre Application{" "}
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel>
<Link href="#">All documents</Link>
</AccordionItemPanel>
</AccordionItem>
</Accordion>
</AccordionItemPanel>
</AccordionItem>
<AccordionItem>
<AccordionItemHeading>
<AccordionItemButton>
Acceptance (0)
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel>
<Link href="#">All documents</Link>
</AccordionItemPanel>
</AccordionItem>
<AccordionItem>
<AccordionItemHeading>
<AccordionItemButton>
Examination (0)
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel>
<Link href="#">All documents</Link>
</AccordionItemPanel>
</AccordionItem>
<AccordionItem>
<AccordionItemHeading>
<AccordionItemButton>
Decision (0)
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel>
<Link href="#">All documents</Link>
</AccordionItemPanel>
</AccordionItem>
<AccordionItem>
<AccordionItemHeading>
<AccordionItemButton>
Decided (0)
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel>
<Link href="#">All documents</Link>
</AccordionItemPanel>
</AccordionItem>
</Accordion>
</div>
<div className="govuk-grid-column-two-thirds">
<div className="govuk-grid-row flex-container govuk-!-margin-top-9">
<div className="govuk-grid-column-two-thirds">
<p className="govuk-body-xs govuk-!-margin-top-1">
Showing 1 to 10 of 54 entries
</p>
</div>
<div className=" govuk-grid-column-two-thirds govuk-form-group">
<label className="govuk-label-xs " htmlFor="sort">
Show{" "}
<select
className="govuk-select govuk-select-s"
id="showNo"
name="showNo"
>
<option value="1">10</option>
<option value="1">25</option>
<option value="1">50</option>
<option value="1">100</option>
</select>{" "}
Entries
</label>
</div>
</div>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<div className="documents__list">
<div className="documents__list__item">
<div className="document__list__item__title">
<a
href="#"
className="document__list__item__link govuk-link govuk-link--no-underline"
>
Core Documents List v14
</a>
<span>(Document Size: 715 KB)</span>
</div>
<div className="document__list__meta">
<div className="document__list__stage">
Examination &gt; Inquiry Documents
&gt; Administration
</div>
<div className="document__list__publish_date">
Published: 17/05/2021
</div>
</div>
</div>
<div className="documents__list__item">
<div className="document__list__item__title">
<a
href="#"
className="document__list__item__link govuk-link govuk-link--no-underline"
>
Core Documents List v14
</a>
<span>(Document Size: 715 KB)</span>
</div>
<div className="document__list__meta">
<div className="document__list__stage">
Examination &gt; Inquiry Documents
&gt; Administration
</div>
<div className="document__list__publish_date">
Published: 17/05/2021
</div>
</div>
</div>
<div className="documents__list__item">
<div className="document__list__item__title">
<a
href="#"
className="document__list__item__link govuk-link govuk-link--no-underline"
>
Core Documents List v14
</a>
<span>(Document Size: 715 KB)</span>
</div>
<div className="document__list__meta">
<div className="document__list__stage">
Examination &gt; Inquiry Documents
&gt; Administration
</div>
<div className="document__list__publish_date">
Published: 17/05/2021
</div>
</div>
</div>
<div className="documents__list__item">
<div className="document__list__item__title">
<a
href="#"
className="document__list__item__link govuk-link govuk-link--no-underline"
>
Core Documents List v14
</a>
<span>(Document Size: 715 KB)</span>
</div>
<div className="document__list__meta">
<div className="document__list__stage">
Examination &gt; Inquiry Documents
&gt; Administration
</div>
<div className="document__list__publish_date">
Published: 17/05/2021
</div>
</div>
</div>
<div className="documents__list__item">
<div className="document__list__item__title">
<a
href="#"
className="document__list__item__link govuk-link govuk-link--no-underline"
>
Core Documents List v14
</a>
<span>(Document Size: 715 KB)</span>
</div>
<div className="document__list__meta">
<div className="document__list__stage">
Examination &gt; Inquiry Documents
&gt; Administration
</div>
<div className="document__list__publish_date">
Published: 17/05/2021
</div>
</div>
</div>
<div className="documents__list__item">
<div className="document__list__item__title">
<a
href="#"
className="document__list__item__link govuk-link govuk-link--no-underline"
>
Core Documents List v14
</a>
<span>(Document Size: 715 KB)</span>
</div>
<div className="document__list__meta">
<div className="document__list__stage">
Examination &gt; Inquiry Documents
&gt; Administration
</div>
<div className="document__list__publish_date">
Published: 17/05/2021
</div>
</div>
</div>
<div className="documents__list__item">
<div className="document__list__item__title">
<a
href="#"
className="document__list__item__link govuk-link govuk-link--no-underline"
>
Core Documents List v14
</a>
<span>(Document Size: 715 KB)</span>
</div>
<div className="document__list__meta">
<div className="document__list__stage">
Examination &gt; Inquiry Documents
&gt; Administration
</div>
<div className="document__list__publish_date">
Published: 17/05/2021
</div>
</div>
</div>
<div className="documents__list__item">
<div className="document__list__item__title">
<a
href="#"
className="document__list__item__link govuk-link govuk-link--no-underline"
>
Core Documents List v14
</a>
<span>(Document Size: 715 KB)</span>
</div>
<div className="document__list__meta">
<div className="document__list__stage">
Examination &gt; Inquiry Documents
&gt; Administration
</div>
<div className="document__list__publish_date">
Published: 17/05/2021
</div>
</div>
</div>
<div className="documents__list__item">
<div className="document__list__item__title">
<a
href="#"
className="document__list__item__link govuk-link govuk-link--no-underline"
>
Core Documents List v14
</a>
<span>(Document Size: 715 KB)</span>
</div>
<div className="document__list__meta">
<div className="document__list__stage">
Examination &gt; Inquiry Documents
&gt; Administration
</div>
<div className="document__list__publish_date">
Published: 17/05/2021
</div>
</div>
</div>
<div className="documents__list__item">
<div className="document__list__item__title">
<a
href="#"
className="document__list__item__link govuk-link govuk-link--no-underline"
>
Core Documents List v14
</a>
<span>(Document Size: 715 KB)</span>
</div>
<div className="document__list__meta">
<div className="document__list__stage">
Examination &gt; Inquiry Documents
&gt; Administration
</div>
<div className="document__list__publish_date">
Published: 17/05/2021
</div>
</div>
</div>
</div>
</div>
</div>
<div className="govuk-grid-row ">
<div className="govuk-grid-column-full">
<p className="govuk-body-xs">
Previous <span>1</span>{" "}
<span>
<Link href="#">2</Link>
</span>{" "}
<span>
<Link href="#">3</Link>
</span>{" "}
<span>
<Link href="#">4</Link>
</span>{" "}
<span>
<Link href="#">5</Link>
</span>{" "}
<Link href="#">Next</Link>
</p>
</div>
</div>
</div>
</div>
</>
);
};
export default ApplicationTabsDocuments;
components/dns/applications/applicationTabsRegistrationForm.js
+23
View File
@@ -0,0 +1,23 @@
import Link from "next/link";
import { useRouter } from "next/router";
import { useContext } from "react";
import useTranslation from "next-translate/useTranslation";
const ApplicationTabsRegistrationForm = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<h3>Registration form</h3>
</div>
</div>
</>
);
};
export default ApplicationTabsRegistrationForm;
components/dns/applications/applicationTabsTimeline.js
+145
View File
@@ -0,0 +1,145 @@
import Link from "next/link";
import { useRouter } from "next/router";
import { useContext } from "react";
import useTranslation from "next-translate/useTranslation";
const ApplicationTabsTimeLine = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<h3>Transport & Works Act</h3>
<p className="govuk-body-s">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer in malesuada ligula, sit amet placerat enim.
Suspendisse porta velit auctor enim pretium, et interdum
lectus mollis. Fusce et consectetur nisl. Donec viverra
lectus massa, nec tincidunt orci euismod vel.
</p>
</div>
</div>
<div className="govuk-grid-row ">
<div className="govuk-grid-column-full ">
<div className="results">
<h3>Timeline</h3>
<div className="govuk-timeline-list__row">
<span
className="govuk-warning-text__icon"
aria-hidden="true"
>
i
</span>
<p className="govuk-body-s govuk-timeline-text__text">
The Inspector’s report into the above has now
been formally submitted to the Welsh Government
for consideration.
</p>
<p className="govuk-body-xs govuk-!-margin-bottom-0 dateRight">
05 October 2020
</p>
</div>
<div className="govuk-timeline-list__row">
<span
className="govuk-warning-text__icon"
aria-hidden="true"
>
i
</span>
<p className="govuk-body-s govuk-timeline-text__text">
The Procedure for this Transport and Works Act
Application was formally determined, on the
07/08/2020, as an Inquiry. <br />
<br />
Statements of Case from the Applicant, each
Statutory Objector and each other person or body
who have indicated that they wish to provide
oral evidence at the Inquiry are required by
18/09/2020.
</p>
<p className="govuk-body-xs govuk-!-margin-bottom-0 dateRight">
05 October 2020
</p>
</div>
<div className="govuk-timeline-list__row">
<span
className="govuk-warning-text__icon"
aria-hidden="true"
>
i
</span>
<p className="govuk-body-s govuk-timeline-text__text">
The Inspector’s report into the above has now
been formally submitted to the Welsh Government
for consideration.
</p>
<p className="govuk-body-xs govuk-!-margin-bottom-0 dateRight">
05 October 2020
</p>
</div>
<div className="govuk-timeline-list__row">
<span
className="govuk-warning-text__icon"
aria-hidden="true"
>
i
</span>
<p className="govuk-body-s govuk-timeline-text__text">
The Inspector’s report into the above has now
been formally submitted to the Welsh Government
for consideration.
</p>
<p className="govuk-body-xs govuk-!-margin-bottom-0 dateRight">
05 October 2020
</p>
</div>
<div className="govuk-timeline-list__row">
<span
className="govuk-warning-text__icon"
aria-hidden="true"
>
i
</span>
<p className="govuk-body-s govuk-timeline-text__text">
The Procedure for this Transport and Works Act
Application was formally determined, on the
07/08/2020, as an Inquiry. <br />
<br />
Statements of Case from the Applicant, each
Statutory Objector and each other person or body
who have indicated that they wish to provide
oral evidence at the Inquiry are required by
18/09/2020.
</p>
<p className="govuk-body-xs govuk-!-margin-bottom-0 dateRight">
05 October 2020
</p>
</div>
<div className="govuk-timeline-list__row">
<span
className="govuk-warning-text__icon"
aria-hidden="true"
>
i
</span>
<p className="govuk-body-s govuk-timeline-text__text">
The Inspector’s report into the above has now
been formally submitted to the Welsh Government
for consideration.
</p>
<p className="govuk-body-xs govuk-!-margin-bottom-0 dateRight">
05 October 2020
</p>
</div>
</div>
</div>
</div>
</>
);
};
export default ApplicationTabsTimeLine;
components/dns/applications/applicationsIntro.js
+12 -1
View File
@@ -35,7 +35,18 @@ const ApplicationIntro = (props) => {
</p>
</div>
<div className="govuk-grid-column-one-half">
<img src="https://via.placeholder.com/450" />
<div className="map-responsive halfWidth">
<iframe
width="600"
height="500"
id="gmap_canvas"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d906124.6839968044!2d-4.849068013831224!3d52.39943863518503!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x486434b66c1c0fed%3A0x1ebb71bc8aa5e8a2!2sWales!5e0!3m2!1sen!2suk!4v1628587620670!5m2!1sen!2suk"
frameBorder="0"
scrolling="no"
marginHeight="0"
marginWidth="0"
></iframe>
</div>
</div>
</div>
);
components/dns/applications/applicationsList.js
+114 -90
View File
@@ -12,31 +12,37 @@ const ApplicationList = (props) => {
return (
<>
<div className="govuk-grid-row govuk-!-margin-top-9">
<div className="govuk-form-group">
<label className="govuk-label-s " htmlFor="sort">
Show{" "}
<select
className="govuk-select"
id="showNo"
name="showNo"
>
<option value="1">10</option>
<option value="1">25</option>
<option value="1">50</option>
<option value="1">100</option>
</select>{" "}
Entries
</label>
<div className="govuk-grid-column-full">
<div className="govuk-form-group">
<label className="govuk-label-s " htmlFor="sort">
Show{" "}
<select
className="govuk-select"
id="showNo"
name="showNo"
>
<option value="1">10</option>
<option value="1">25</option>
<option value="1">50</option>
<option value="1">100</option>
</select>{" "}
Entries
</label>
</div>
</div>
</div>
<div className="govuk-grid-row">
<p className="govuk-body-s">Showing 1 to 10 of 54 entries</p>
<div className="govuk-grid-column-full">
<p className="govuk-body-s">
Showing 1 to 10 of 54 entries
</p>
</div>
</div>
<div className="govuk-grid-row ">
<div className="govuk-grid-column-full govuk-!-padding-left-0 govuk-!-padding-right-0">
<div className="govuk-grid-column-full">
<dl className="govuk-summary-list govuk-!-margin-bottom-0 results">
<div className="govuk-summary-list__row results-headings">
<dd className="govuk-summary-list__key govuk-!-font-size-14 results_wider govuk-!-padding-left-2">
<dd className="govuk-summary-list__key govuk-!-font-size-14 results_wider ">
Reference
</dd>
<dd className="govuk-summary-list__key govuk-!-font-size-14">
@@ -53,19 +59,21 @@ const ApplicationList = (props) => {
</dd>
</div>
<div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<dd className="govuk-summary-list__value govuk-!-font-size-14 ">
<span className="results-visually-hidden">
Reference:
</span>
CAS-00009-W8N6W4
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<a href="/application-view">
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
<Link href="/dns/application-view">
<a>
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
</Link>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
@@ -87,19 +95,21 @@ const ApplicationList = (props) => {
</dd>
</div>
<div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<dd className="govuk-summary-list__value govuk-!-font-size-14 ">
<span className="results-visually-hidden">
Reference:
</span>
CAS-00009-W8N6W4
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<a href="/application-view">
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
<Link href="/dns/application-view">
<a>
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
</Link>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
@@ -121,19 +131,21 @@ const ApplicationList = (props) => {
</dd>
</div>
<div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<dd className="govuk-summary-list__value govuk-!-font-size-14 ">
<span className="results-visually-hidden">
Reference:
</span>
CAS-00009-W8N6W4
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<a href="/application-view">
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
<Link href="/dns/application-view">
<a>
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
</Link>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
@@ -155,19 +167,21 @@ const ApplicationList = (props) => {
</dd>
</div>
<div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<dd className="govuk-summary-list__value govuk-!-font-size-14 ">
<span className="results-visually-hidden">
Reference:
</span>
CAS-00009-W8N6W4
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<a href="/application-view">
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
<Link href="/dns/application-view">
<a>
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
</Link>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
@@ -189,19 +203,21 @@ const ApplicationList = (props) => {
</dd>
</div>
<div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<dd className="govuk-summary-list__value govuk-!-font-size-14 ">
<span className="results-visually-hidden">
Reference:
</span>
CAS-00009-W8N6W4
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<a href="/application-view">
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
<Link href="/dns/application-view">
<a>
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
</Link>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
@@ -223,19 +239,21 @@ const ApplicationList = (props) => {
</dd>
</div>
<div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<dd className="govuk-summary-list__value govuk-!-font-size-14 ">
<span className="results-visually-hidden">
Reference:
</span>
CAS-00009-W8N6W4
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<a href="/application-view">
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
<Link href="/dns/application-view">
<a>
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
</Link>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
@@ -257,19 +275,21 @@ const ApplicationList = (props) => {
</dd>
</div>
<div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<dd className="govuk-summary-list__value govuk-!-font-size-14 ">
<span className="results-visually-hidden">
Reference:
</span>
CAS-00009-W8N6W4
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<a href="/application-view">
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
<Link href="/dns/application-view">
<a>
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
</Link>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
@@ -291,19 +311,21 @@ const ApplicationList = (props) => {
</dd>
</div>
<div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<dd className="govuk-summary-list__value govuk-!-font-size-14 ">
<span className="results-visually-hidden">
Reference:
</span>
CAS-00009-W8N6W4
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<a href="/application-view">
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
<Link href="/dns/application-view">
<a>
<span className="results-visually-hidden">
Application:{" "}
</span>
TWA - Morlais Demonstration Zone
</a>
</Link>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-14">
<span className="results-visually-hidden">
@@ -328,22 +350,24 @@ const ApplicationList = (props) => {
</div>
</div>
<div className="govuk-grid-row ">
<p>
Previous <span>1</span>{" "}
<span>
<Link href="#">2</Link>
</span>{" "}
<span>
<Link href="#">3</Link>
</span>{" "}
<span>
<Link href="#">4</Link>
</span>{" "}
<span>
<Link href="#">5</Link>
</span>{" "}
<Link href="#">Next</Link>
</p>
<div className="govuk-grid-column-full">
<p>
Previous <span>1</span>{" "}
<span>
<Link href="#">2</Link>
</span>{" "}
<span>
<Link href="#">3</Link>
</span>{" "}
<span>
<Link href="#">4</Link>
</span>{" "}
<span>
<Link href="#">5</Link>
</span>{" "}
<Link href="#">Next</Link>
</p>
</div>
</div>
</>
);
components/dns/homepage/applicationsForComment.js
+5 -3
View File
@@ -13,9 +13,11 @@ const ApplicationsForComment = (props) => {
<div className="govuk-panel__body">
<ul className="govuk-list">
<li>
<a className="govuk-body-s " href="">
Holyhead Harbour Revision Order
</a>
<Link href="/dns/application-view">
<a className="govuk-body-s ">
Holyhead Harbour Revision Order
</a>
</Link>
</li>
</ul>
</div>
components/dns/homepage/dnsLinks.js
+6 -6
View File
@@ -57,12 +57,12 @@ const DNSLinks = (props) => {
</li>
<li>
<h3 className="govuk-heading-l govuk-!-font-size-27">
<a
className="govuk-link govuk-link--no-underline"
href="#"
>
Contact us{" "}
</a>
<Link href="/dns/contact-us">
<a className="govuk-link govuk-link--no-underline">
Contact us{" "}
</a>
</Link>
<p className="govuk-body-s govuk-!-padding-top-2">
How to get in touch with The Planning
Inspectorate.
components/dns/homepage/latestApplications.js
+16 -4
View File
@@ -13,18 +13,30 @@ const LatestApplications = (props) => {
<div className="govuk-panel__body">
<ul className="govuk-list">
<li className="govuk-body-s ">
<a href="">Brynrhyd Solar Farm</a>
{" "}
<Link href="/dns/application-view">
<a href="">Brynrhyd Solar Farm</a>
</Link>
</li>
<li className="govuk-body-s ">
<a href="">Brynrhyd Solar Farm</a>
{" "}
<Link href="/dns/application-view">
<a href="">Brynrhyd Solar Farm</a>
</Link>
</li>
<li className="govuk-body-s ">
<a href="">Brynrhyd Solar Farm</a>
{" "}
<Link href="/dns/application-view">
<a href="">Brynrhyd Solar Farm</a>
</Link>
</li>
<li className="govuk-body-s ">
<a href="">Brynrhyd Solar Farm</a>
{" "}
<Link href="/dns/application-view">
<a href="">Brynrhyd Solar Farm</a>
</Link>
</li>
</ul>
</div>
components/header.js
+2
View File
@@ -17,6 +17,7 @@ const Header = (props) => {
"/dns/help",
"/dns/contact-us",
"/dns/applications",
"/dns/application-view",
];
const hasContactLink = [
"/dns",
@@ -24,6 +25,7 @@ const Header = (props) => {
"/dns/help",
"/dns/contact-us",
"/dns/applications",
"/dns/application-view",
];
return (
components/search/searchresults.js
+3 -3
View File
@@ -14,7 +14,7 @@ const SearchResults = (props) => {
var resultsArr = searchResultsObj.value || [{}];
const resultRow = Object.keys(resultsArr).map((key, index) => {
<div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<dd className="govuk-summary-list__value govuk-!-font-size-14 ">
<Link href="/case">
<a>
<span className="results-visually-hidden">
@@ -66,7 +66,7 @@ const SearchResults = (props) => {
</p>
<dl className="govuk-summary-list govuk-!-margin-bottom-9 results">
<div className="govuk-summary-list__row results-headings">
<dd className="govuk-summary-list__key govuk-!-font-size-14 results_wider govuk-!-padding-left-2">
<dd className="govuk-summary-list__key govuk-!-font-size-14 results_wider ">
{t("search:searchresults-case-reference-label")}
</dd>
<dd className="govuk-summary-list__key govuk-!-font-size-14">
@@ -89,7 +89,7 @@ const SearchResults = (props) => {
{resultsArr.map((item, key) => {
return (
<div className="govuk-summary-list__row" key={key}>
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<dd className="govuk-summary-list__value govuk-!-font-size-14 ">
<Link href="/case">
<a
onClick={() => {
package.json
+1
View File
@@ -29,6 +29,7 @@
"next-translate": "^1.0.7",
"pm2": "^5.1.0",
"react": "17.0.2",
"react-accessible-accordion": "^3.3.5",
"react-cookie-consent": "^6.2.4",
"react-datepicker": "^4.1.1",
"react-dom": "17.0.2",
pages/_document.js
+1 -1
View File
@@ -22,7 +22,7 @@ class MyDocument extends Document {
return (
<Html lang="en">
<Head />
<body>
<body className="js-enabled">
{!process.browser && (
<script>
window.apiRoot = `{process.env.API_ROOT}`
pages/dns/application-view.js
+81
View File
@@ -0,0 +1,81 @@
import _ from "lodash";
import Head from "next/head";
import Header from "../../components/header";
import Banner from "../../components/banner";
import CookieBanner from "../../components/cookieBanner";
import Breadcrumbs from "../../components/breadcrumbs";
import SearchResults from "../../components/searchresults";
import Footer from "../../components/footer";
import Errorpage from "../../components/errorpage";
import styles from "../../styles/Home.module.css";
import { useSelector, shallowEqual, connect } from "react-redux";
import { wrapper } from "../../store/store";
import Cookies from "cookies";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import ApplicationTabs from "../../components/dns/applications/applicationTabs";
import ApplicationSummary from "../../components/dns/applications/applicationSummary";
const ApplicationView = (props) => {
const { footerLinks, pages } = props;
let { t, lang } = useTranslation();
const router = useRouter();
const { locale } = router;
const { appealtypes } = router.query;
return (
<div>
<Head>
<title>
{" "}
Applications - Developments of National Significance
</title>
</Head>
<div id="page_wrapper">
<CookieBanner />
<Header serviceName="Developments of National Significance" />
<div className="govuk-width-container">
<Banner />
<Breadcrumbs slug={appealtypes} />
<main className="govuk-main-wrapper">
<ApplicationSummary />
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<ApplicationTabs />
</div>
</div>
</main>
</div>
<Footer footerLinks={footerLinks} />
</div>
</div>
);
};
export const getServerSideProps = wrapper.getServerSideProps(
(store) =>
async ({ query, req, res }) => {
console.log("query-", query);
// const searchResultsObj = (await getBasicSearch(query.q)) || null;
// store.dispatch(setSearchResults(searchResultsObj));
//store.dispatch(setSearch(query.q));
}
);
const mapStateToProps = (state) => {
return {
currentView: state.currentView,
search: state.search,
searchResultsObj: state.searchResultsObj,
formData: state.formData,
appealType: state.appealType,
form: state.form,
myCases: state.myCases,
watchedCases: state.watchedCases,
myRepresentations: state.myRepresentations,
awaitingSubmission: state.awaitingSubmission,
};
};
export default connect(mapStateToProps)(ApplicationView);
pages/dns/contact-us.js
+31 -5
View File
@@ -57,6 +57,20 @@ const Home = (props) => {
</p>
</div>
</div>
<div className="govuk-row">
<div className="map-responsive">
<iframe
width="600"
height="500"
id="gmap_canvas"
src="https://maps.google.com/maps?q=CF10%203NQ&t=&z=17&ie=UTF8&iwloc=&output=embed"
frameBorder="0"
scrolling="no"
marginHeight="0"
marginWidth="0"
></iframe>
</div>
</div>
<div className="govuk-row">
<p>
{" "}
@@ -65,11 +79,17 @@ const Home = (props) => {
following details:
</p>
<p>
Tel: 03034 445 940
Tel: <a href="tel:03034445940">03034 445 940</a>
<br />
E-mail: dns.wales@planninginspectorate.gov.uk
E-mail:{" "}
<a href="mailto:dns.wales@planninginspectorate.gov.uk">
dns.wales@planninginspectorate.gov.uk
</a>
<br />
Follow us on Twitter @PINSgov
Follow us on Twitter{" "}
<a href="https://twitter.com/pinsgov">
@PINSgov
</a>
</p>
<p>
Further information about contacting the
@@ -115,8 +135,14 @@ const Home = (props) => {
office directly:{" "}
</p>
<p>
Telephone: 0303 444 5004 or 0303 444 5005 <br />
Email: press.office@planninginspectorate.gov.uk
Telephone:{" "}
<a href="tel:03034445004">0303 444 5004</a> or{" "}
<a href="tel:03034445005">0303 444 5005</a>{" "}
<br />
Email:{" "}
<a href="mailto:press.office@planninginspectorate.gov.uk">
press.office@planninginspectorate.gov.uk
</a>
</p>
</div>
</main>
public/assets/images/dns/milestone.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 901 B

public/assets/images/dns/notice.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

styles/sass/styles.scss
+1 -1
View File
@@ -3,7 +3,7 @@
// Add extra styles here, or re-organise the Sass files in whichever way makes most sense to you
@import "welshgov/_variables";
@import "welshgov/_application";
@import "welshgov/application_old";
// @import "welshgov/application_old";
// global styles for <a> and <p> tags
$govuk-global-styles: true;
styles/sass/welshgov/_application.scss
+296 -1
View File
@@ -4,6 +4,7 @@ html {
*,
.govuk-body,
.govuk-body-xs,
.govuk-body-s,
.govuk-body-m,
.govuk-footer,
@@ -21,6 +22,7 @@ html {
.govuk-input,
.govuk-panel,
.govuk-panel__title,
.govuk-warning-text__text,
h1,
h2,
h3,
@@ -29,6 +31,68 @@ h5,
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;
height: 1.8rem;
}
body {
margin: 0;
background-color: #ffffff;
}
.app-cookie-banner {
.consentBanner {
.govuk-button {
display: inline;
width: 28%;
margin-right: 45px;
}
}
}
.skiplink {
position: absolute;
left: -9999em;
}
.skiplink:focus,
.skiplink:visited {
color: #0b0c0c;
}
.skiplink:focus {
left: 0;
z-index: 1;
}
#skiplink-container {
text-align: center;
background: #0b0c0c;
}
#skiplink-container div {
text-align: left;
margin: 0 auto;
max-width: 1020px;
}
#skiplink-container .skiplink {
display: -moz-inline-stack;
display: inline-block;
margin: 0.75em 0 0 30px;
}
a.longLinkBreak {
word-wrap: break-word;
}
.govuk-header {
background-color: #323232;
}
@@ -146,7 +210,7 @@ a {
display: block;
position: relative;
clear: both;
margin-top: 40px;
margin-top: -10px;
margin-right: -10px;
.mobileMenu {
@@ -320,6 +384,73 @@ a {
word-wrap: normal;
}
.at-nav {
border-top: 5px solid #1d70b8;
padding-top: 25px;
}
.at-nav ul.govuk-list.js-hidden {
display: none;
}
.at-nav__section-title {
width: 84%;
}
.at-nav h4 {
font-weight: 300;
font-size: 19px;
}
.at-nav h3 {
}
.at-nav__chapter {
}
.at-nav__section {
cursor: pointer;
}
.at-nav__controls {
position: relative;
text-align: right;
top: 20px;
}
.at-nav__page .govuk-list,
.accordion__panel .govuk-list {
margin-left: 20px;
}
.at-nav__page .govuk-list > li {
font-size: 16px;
font-weight: 300;
font-stretch: normal;
font-style: normal;
line-height: 1.25;
letter-spacing: normal;
}
.at-nav__page .govuk-list > li b:before {
border-left: 4px solid #1d70b8;
position: relative;
right: 10px;
content: " ";
margin-left: -6px;
}
.at-nav h4 {
border-bottom: 1px solid #b1b4b6;
padding-bottom: 20px;
}
.at-nav .currentSection h2 {
border: none;
padding-bottom: 10px;
margin-bottom: 0px;
}
.form-inline-label {
.inlineFieldset {
display: flex;
@@ -347,6 +478,12 @@ a {
background: #f3f2f1;
}
.results .govuk-summary-list__row {
@media screen and (max-width: 900px) {
padding: 20px 10px;
}
}
.results_wider {
width: 170px;
}
@@ -744,3 +881,161 @@ ul#sharePageLinks.active {
color: #fff;
}
}
.map-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
&.halfWidth {
padding-bottom: 100%;
}
}
.map-responsive iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}
//dns application view
.govuk-warning-text__icon {
margin-top: 5px;
}
.govuk-timeline-list__row {
position: relative;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 10px;
border: 1px solid #b1b4b6;
border-top: none;
&:first-of-type {
border-top: 1px solid #b1b4b6;
}
&:nth-child(odd) {
background: #f3f2f1;
}
.govuk-timeline-text__text {
position: relative;
font-weight: normal;
padding-left: 45px;
}
.govuk-warning-text__icon {
margin-left: 10px;
border-color: grey;
background-color: white;
color: grey;
font-weight: bold;
font-size: 16px;
min-height: 25px;
min-width: 25px;
line-height: 21px;
}
.dateRight {
text-align: right;
}
}
// dns docs filter accordion
.accordion {
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 2px;
font-size: 16px;
}
.accordion__item + .accordion__item {
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.accordion__button {
background-color: #f4f4f4;
color: #444;
cursor: pointer;
padding: 18px;
// width: 100%;
text-align: left;
border: none;
}
.accordion__button:hover {
background-color: #ddd;
}
.accordion__button:before {
display: inline-block;
content: "";
height: 10px;
width: 10px;
margin-right: 12px;
border-bottom: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(-45deg);
}
.accordion__button[aria-expanded="true"]::before,
.accordion__button[aria-selected="true"]::before {
transform: rotate(45deg);
}
[hidden] {
display: none;
}
.accordion__panel {
padding: 20px 10px;
animation: fadein 0.35s ease-in;
.accordion__button {
background-color: #f4f4f43d;
}
}
/* -------------------------------------------------- */
/* ---------------- Animation part ------------------ */
/* -------------------------------------------------- */
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
//dns document list
.documents__list {
.documents__list__item {
border-bottom: 1px solid #b1b4b6;
padding: 20px 10px;
&:hover {
background-color: #e3e3e3;
}
}
.document__list__item__link {
font-weight: bold;
margin-right: 10px;
padding-bottom: 20px;
display: inline-block;
}
.document__list__meta {
display: flex;
justify-content: space-between;
font-size: 0.875rem;
color: #333;
}
}