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

applied variables and buttons styles

Browse Source
This commit is contained in:
robbond
2021-07-02 12:19:54 +01:00
parent 2a9fb1a364
commit a350c45100
12 changed files with 335 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/footer.js
+12
View File
@@ -20,6 +20,18 @@ export default function Footer(props) {
return (
<footer className="govuk-footer " role="contentinfo">
<div class="sharebar" id="sharebar">
<div class="sharebar__components container-fluid">
<div class="main__sharebar">
<div
id="sharebar__backtotop"
class="btn--outlined btn--arrow-up"
>
<a href="#page_wrapper">Back to top</a>
</div>
</div>
</div>
</div>
<div className="govuk-width-container ">
<div className="govuk-footer__meta">
<div className="govuk-footer__meta-item govuk-footer__meta-item--grow">
components/header.js
+2 -2
View File
@@ -15,7 +15,7 @@ export default function Header({ courseName }) {
data-module="govuk-header"
>
<div className="govuk-header__container govuk-width-container">
<div className="govuk-header__logo">
<div className="govuk-header__logo govuk-!-width-one-quarter">
<a
href="/"
className="govuk-header__link govuk-header__link--homepage"
@@ -61,7 +61,7 @@ export default function Header({ courseName }) {
</a>
</div>
<div className="govuk-header__content govuk-!-width-one-half govuk-!-margin-top-3">
<div className="govuk-header__content govuk-!-width-two-thirds govuk-!-margin-top-3">
<a
href="/"
onClick={() => {
pages/advancedsearch.js
+1 -1
View File
@@ -28,7 +28,7 @@ const Home = (props) => {
{t("search:page-title")} - {t("common:service-name")}
</title>
</Head>
<div className="">
<div id="page_wrapper">
<CookieBanner />
<Header courseName={t("common:service-name")} />
<div className="govuk-width-container">
pages/case.js
+1 -1
View File
@@ -29,7 +29,7 @@ const Home = (props) => {
{t("case:page-title")} - {t("common:service-name")}
</title>
</Head>
<div className="">
<div id="page_wrapper">
<CookieBanner />
<Header courseName={t("common:service-name")} />
<div className="govuk-width-container">
pages/index.js
+3 -4
View File
@@ -1,4 +1,3 @@
import _ from "lodash";
import Head from "next/head";
import Header from "../components/header";
@@ -17,7 +16,7 @@ import useTranslation from "next-translate/useTranslation";
const Home = (props) => {
const { footerLinks, pages } = props;
let { t,lang } = useTranslation();
let { t, lang } = useTranslation();
const router = useRouter();
const { locale } = router;
@@ -27,7 +26,7 @@ const Home = (props) => {
<Head>
<title>{t("common:service-name")}</title>
</Head>
<div className="">
<div id="page_wrapper">
<CookieBanner />
<Header courseName="Appeals Casework Portal" />
<div className="govuk-width-container">
@@ -74,4 +73,4 @@ const Home = (props) => {
// };
// };
export default Home//connect(mapStateToProps)(Home);
export default Home; //connect(mapStateToProps)(Home);
pages/myportal.js
+7 -6
View File
@@ -16,7 +16,7 @@ import useTranslation from "next-translate/useTranslation";
const Home = (props) => {
const { footerLinks, pages } = props;
let { t,lang } = useTranslation();
let { t, lang } = useTranslation();
const router = useRouter();
const { locale } = router;
@@ -24,14 +24,16 @@ const Home = (props) => {
return (
<div>
<Head>
<title>{t("myportal:page-title")} - {t("common:service-name")}</title>
<title>
{t("myportal:page-title")} - {t("common:service-name")}
</title>
</Head>
<div className="">
<div id="page_wrapper">
<CookieBanner />
<Header courseName={t("common:service-name")} />
<div className="govuk-width-container">
<Banner />
<MyPortal/>
<MyPortal />
</div>
<Footer footerLinks={footerLinks} />
</div>
@@ -73,5 +75,4 @@ const Home = (props) => {
// };
// };
export default Home//connect(mapStateToProps)(Home);
export default Home; //connect(mapStateToProps)(Home);
pages/searchresults.js
+1 -1
View File
@@ -28,7 +28,7 @@ const Home = (props) => {
{t("search:page-title")} - {t("common:service-name")}
</title>
</Head>
<div className="">
<div id="page_wrapper">
<CookieBanner />
<Header courseName={t("common:service-name")} />
<div className="govuk-width-container">
styles/sass/patterns/_card.scss
+1 -1
View File
@@ -35,7 +35,7 @@
@media screen and (min-width: 900px) {
.card {
flex-basis: 46%;
flex-basis: 48.2%;
&:nth-child(2n-2) {
margin-left: 3%;
styles/sass/styles.scss
+4 -4
View File
@@ -1,6 +1,9 @@
@import "node_modules/govuk-frontend/govuk/all";
//@import "prevent-training/_application";
// 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";
// global styles for <a> and <p> tags
$govuk-global-styles: true;
@@ -23,6 +26,3 @@ $govuk-assets-path: "/govuk/assets/";
// Components that aren't in Frontend
@import "components/cookie-banner";
// Add extra styles here, or re-organise the Sass files in whichever way makes most sense to you
@import "prevent-training/application";
styles/sass/welshgov/_application.scss
+98 -1
View File
@@ -1,11 +1,89 @@
html {
scroll-behavior: smooth;
}
*,
.govuk-body-s {
.govuk-body,
.govuk-body-s,
.govuk-body-m,
.govuk-heading-xl,
.govuk-heading-l,
.govuk-heading-m,
.govuk-header-l,
.govuk-header-m,
.govuk-header__link,
.govuk-button,
.govuk-label,
.govuk-select,
p,
h1,
h2,
h3,
h4,
h5,
a {
font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
.govuk-header {
background-color: #323232;
}
.govuk-button {
background-color: $red;
&.govuk-button--secondary {
background-color: $white;
color: $red;
border: 1px solid red;
&:hover {
background-color: $red;
color: $white;
}
}
}
.govuk-button:hover {
background-color: $lightred;
}
.sharebar {
background: #e5e5e5;
margin: 0;
padding: 15px;
clear: both;
}
.sharebar__components.container-fluid {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding-left: 60px;
padding-right: 20px;
}
.btn--arrow-up a {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id=%22Layer_1%22 data-name=%22Layer 1%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%22159.5%22 height=%22102.4%22 viewBox=%220 0 159.5 102.4%22%3E%3Ctitle%3Eblack-arrow-up%3C/title%3E%3Cpath d=%22M159.5,79.8,79.8,0,0,79.8l22.6,22.6L79.7,45.3l57.1,57.1Z%22/%3E%3C/svg%3E");
background-size: 18px 13px;
background-position: 10px center;
background-repeat: no-repeat;
padding-left: 36px;
margin-top: 1px;
}
.btn--outlined a {
text-decoration: none;
color: #323232;
background: none;
padding: 12px;
font-size: 1em;
font-weight: bold;
display: inline-block;
border: 1px solid #999999;
line-height: 17px;
line-height: 1.0625rem;
}
.languageSwitch {
margin-top: 15px;
text-align: right;
@@ -16,7 +94,18 @@
top: 10px;
right: -10px;
}
a.govuk-header__link {
background-color: black;
padding: 10px;
}
a.govuk-header__link:focus {
background-color: black;
padding: 10px;
color: #fff;
box-shadow: none;
}
}
.header__logo {
float: left;
margin: 0;
@@ -31,11 +120,19 @@
border: none;
}
.govuk-header__logo {
width: 22% !important;
}
nav {
margin-top: 60px;
margin-bottom: 40px;
}
.govuk-footer {
padding-top: 0px;
}
#footer_logo {
margin-top: 60px;
margin-bottom: 40px;
styles/sass/prevent-training/_application.scss → styles/sass/welshgov/_application_old.scss
View File
styles/sass/welshgov/_variables.scss
+11
View File
@@ -0,0 +1,11 @@
//gov.wales pallete variables
$white: #ffffff;
$red: #aa1111;
$lightred: #d81f1f;
$lightgrey_dark: #cccccc;
$lightgrey_mid: #dddddd;
$lightgrey_semi: #e5e5e5;
$lightgrey_light: #eeeeee;
$lightgrey_offwhite: #f1f1f1;