Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds basic header and footer for front end #24

Merged
merged 3 commits into from
Oct 24, 2023
Merged

Adds basic header and footer for front end #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8ce6778
adds basic header and footer
nickbristow Oct 24, 2023
6426111
add
nickbristow Oct 24, 2023
fc3321c
Merge branch 'main' into 881-basic-header
nickbristow Oct 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions front-end/app/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import Image from 'next/image'
export default function FooterComponent() {
return (
<footer className="usa-footer">
<div className="usa-footer__secondary-section max-w-full bg-primary-darker">
<div className="grid-container usa-nav-container">
<div className="grid-row grid-gap">
<div
className="
usa-footer__logo
grid-row
mobile-lg:grid-col-8 mobile-lg:grid-gap-1
"
>
<div className="mobile-lg:grid-col-auto">
<Image
src="/CDC_logo.png"
className="usa-footer__logo-img"
alt="CDC logo"
width={62}
height={36}
/>
</div>
<div className="mobile-lg:grid-col-auto">
<p className=" text-base-lightest usa-footer__logo-heading">Centers for Disease Control and Prevention</p>
</div>
</div>
<div
className="
usa-footer__logo
grid-row
mobile-lg:grid-col-4 mobile-lg:grid-gap-1
"
>
<div className="mobile-lg:grid-col-auto">
<p className="text-base-lightest usa_footer-trademark">© 2023 CDC. All rights reserved.</p>
</div>
</div>
</div>
</div>
</div>
</footer>


)
}
18 changes: 0 additions & 18 deletions front-end/app/global.css
View file
Open in desktop

This file was deleted.

62 changes: 62 additions & 0 deletions front-end/app/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

@import '@trussworks/react-uswds/lib/uswds.css';
@import '@trussworks/react-uswds/lib/index.css';

.usa-button {
background-color: #005ea2;
}

.usa-modal__close {
background-color: rgba(0,0,0,0);
}

.usa-button--unstyled {
background-color: rgba(0,0,0,0);
}


@media (min-width: 64em) {
.usa-header--basic .usa-navbar {
position: relative;
width: 50%;
}
}


.footer-primary {
div{
background: #162E51;
color: white !important;
min-height: 84px;
a {
color: white !important;
}
}
.usa_footer-trademark {
font-family: Public Sans,sans-serif!important;
font-size: 14px;
font-weight: 300;
line-height: 23px;
letter-spacing: 0em;
text-align: right;
}

}


.hover\:text-base-lightest:hover, .text-base-lightest {
color: #f0f0f0 !important;
}

.usa-nav-container {
max-width: 88rem!important;
}

.main-body{
min-height: 40rem;
margin-top: 1rem;
margin-bottom: 1rem;
}
15 changes: 15 additions & 0 deletions front-end/app/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
export default function HeaderComponent() {
return (
<header className="usa-header usa-header--basic bg-primary-darker">
<div className="usa-nav-container max-w-full">
<div className="usa-navbar w-full">
<div className="usa-logo">
<em className="usa-logo__text text-base-lightest">
<a className="text-base-lightest" href="/" title="DIBBs Pipeline Demo Site">DIBBs Pipeline Demo Site</a>
</em>
</div>
</div>
</div>
</header>
)
}
17 changes: 12 additions & 5 deletions front-end/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import "./global.scss"
import Header from "./header"
import Footer from "./footer"
import { DataProvider } from "@/utils/DataContext"
import "./global.css"


export const metadata = {
title: 'Next.js',
Expand All @@ -14,10 +17,14 @@ export default function RootLayout({
return (
<html lang="en">
<body>
<DataProvider>
{children}
</DataProvider>
</body>
<Header />
<div className="grid-container maxw-desktop-lg main-body">
<DataProvider>
{children}
</DataProvider>
</div>
<Footer />
</body>
</html>
)
}
38 changes: 30 additions & 8 deletions front-end/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion front-end/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"test": "jest"
},
"dependencies": {
"@trussworks/react-uswds": "^5.3.0",
"@trussworks/react-uswds": "^5.5.0",
"@types/node": "20.5.0",
"@types/react": "18.2.19",
"@types/react-dom": "18.2.7",
Expand All @@ -22,6 +22,7 @@
"postcss": "8.4.31",
"react": "18.2.0",
"react-dom": "18.2.0",
"sass": "^1.69.4",
"tailwindcss": "3.3.3",
"typescript": "5.1.6"
},
Expand Down
Binary file added front-end/public/CDC_logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading