Skip to content

Commit d85f7d0

Browse files
wittejmwittejm
authored
Merge pull request #1802 from codeforpdx/bug-fix-main-content-layout
[Bug Fix] - Fix Main Layout Spacing and Navigation
2 parents 89302db + 2d71269 commit d85f7d0

File tree

4 files changed

+130
-93
lines changed

4 files changed

+130
-93
lines changed

‎src/frontend/src/components/App/index.tsx‎

Lines changed: 56 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import React from "react";
1+
import React, { useRef, useEffect, useState } from "react";
2+
import ReactDOM from "react-dom";
23
import { Routes, Route, Navigate } from "react-router-dom";
34
import Footer from "../Footer";
45
import Header from "../Header";
@@ -18,47 +19,62 @@ import About from "../About";
1819
import Community from "../Community";
1920

2021
export default function App() {
22+
const headerRef = useRef(null);
23+
const [headerHeight, setHeaderHeight] = useState(0);
24+
25+
useEffect(() => {
26+
if (headerRef?.current) {
27+
const element = ReactDOM.findDOMNode(headerRef?.current);
28+
if (element instanceof Element) {
29+
const height = element?.getBoundingClientRect().height;
30+
setHeaderHeight(height);
31+
}
32+
}
33+
}, []);
34+
2135
return (
2236
<>
23-
<Header />
24-
<Routes>
25-
<Route path="/" element={<Landing />} />
26-
<Route
27-
path="/oeci"
28-
element={
29-
<OeciLogin
30-
userId=""
31-
password=""
32-
missingUserId={false}
33-
missingPassword={false}
34-
expectedFailure={false}
35-
expectedFailureMessage=""
36-
invalidResponse={false}
37-
missingInputs={false}
38-
isLoggedIn={false}
39-
/>
40-
}
41-
/>
42-
<Route path="/record-search" element={<RecordSearch />} />
43-
<Route path="/demo-record-search" element={<Demo />} />
44-
<Route path="/manual" element={<Manual />} />
45-
<Route path="/rules" element={<Rules />} />
46-
<Route path="/faq" element={<Faq />} />
47-
<Route path="/appendix" element={<Appendix />} />
48-
<Route path="/privacy-policy" element={<PrivacyPolicy />} />
49-
<Route path="/fill-expungement-forms" element={<FillForms />} />
50-
<Route
51-
path="/partner-interest"
52-
element={<PartnerInterest email="" invalidEmail={true} />}
53-
/>
54-
<Route
55-
path="/accessibility-statement"
56-
element={<AccessibilityStatement />}
57-
/>
58-
<Route path="/about" element={<About />} />
59-
<Route path="/community" element={<Community />} />
60-
<Route path="*" element={<Navigate to="/" />} />
61-
</Routes>
37+
<Header ref={headerRef} />
38+
<div style={{ marginTop: `${headerHeight}px` }}>
39+
<Routes>
40+
<Route path="/" element={<Landing />} />
41+
<Route
42+
path="/oeci"
43+
element={
44+
<OeciLogin
45+
userId=""
46+
password=""
47+
missingUserId={false}
48+
missingPassword={false}
49+
expectedFailure={false}
50+
expectedFailureMessage=""
51+
invalidResponse={false}
52+
missingInputs={false}
53+
isLoggedIn={false}
54+
/>
55+
}
56+
/>
57+
<Route path="/record-search" element={<RecordSearch />} />
58+
<Route path="/demo-record-search" element={<Demo />} />
59+
<Route path="/manual" element={<Manual />} />
60+
<Route path="/rules" element={<Rules />} />
61+
<Route path="/faq" element={<Faq />} />
62+
<Route path="/appendix" element={<Appendix />} />
63+
<Route path="/privacy-policy" element={<PrivacyPolicy />} />
64+
<Route path="/fill-expungement-forms" element={<FillForms />} />
65+
<Route
66+
path="/partner-interest"
67+
element={<PartnerInterest email="" invalidEmail={true} />}
68+
/>
69+
<Route
70+
path="/accessibility-statement"
71+
element={<AccessibilityStatement />}
72+
/>
73+
<Route path="/about" element={<About />} />
74+
<Route path="/community" element={<Community />} />
75+
<Route path="*" element={<Navigate to="/" />} />
76+
</Routes>
77+
</div>
6278
<Footer />
6379
</>
6480
);

‎src/frontend/src/components/Header/index.tsx‎

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default class Header extends React.Component<{}, HeaderState> {
1010
constructor(props: {}) {
1111
super(props);
1212
this.state = {
13-
isOpen: false
13+
isOpen: false,
1414
};
1515
}
1616

@@ -23,7 +23,7 @@ export default class Header extends React.Component<{}, HeaderState> {
2323

2424
return (
2525
<header className="fixed top-0 w-100 z-max bg-white shadow-4">
26-
<nav
26+
<nav
2727
className="relative flex flex-column flex-row-l justify-between-l items-center pa3 center mw9"
2828
aria-label="Primary"
2929
>
@@ -34,36 +34,55 @@ export default class Header extends React.Component<{}, HeaderState> {
3434
</Link>
3535
</div>
3636

37-
<button
37+
<button
3838
className="db dn-l pointer bg-transparent bn pa2 z-max"
3939
onClick={this.toggleMenu}
4040
aria-label="Toggle navigation"
4141
>
4242
<div className="w2 h1 relative pointer">
43-
<div className={`bg-navy h-25 w-100 mb1 transition-all ${isOpen ? "rotate-45 absolute top-0" : ""}`} />
44-
<div className={`bg-navy h-25 w-100 mb1 transition-all ${isOpen ? "dn" : ""}`} />
45-
<div className={`bg-navy h-25 w-100 transition-all ${isOpen ? "rotate-135 absolute top-0" : ""}`} />
43+
<div
44+
className={`bg-navy h-25 w-100 mb1 transition-all ${
45+
isOpen ? "rotate-45 absolute top-0" : ""
46+
}`}
47+
/>
48+
<div
49+
className={`bg-navy h-25 w-100 mb1 transition-all ${
50+
isOpen ? "dn" : ""
51+
}`}
52+
/>
53+
<div
54+
className={`bg-navy h-25 w-100 transition-all ${
55+
isOpen ? "rotate-135 absolute top-0" : ""
56+
}`}
57+
/>
4658
</div>
4759
</button>
4860
</div>
4961

50-
<div className={`${isOpen ? "flex" : "dn"} flex-l flex-column flex-row-l items-center static-l pa0-l shadow-none-l w-auto-l z-999 mt3 mt0-l`}>
51-
<Link
52-
className="link navy hover-blue f5 fw6 pv3 pv2-l ph3-l mr4-l nowrap"
53-
to="/community"
62+
<div
63+
className={`${
64+
isOpen ? "flex" : "dn"
65+
} flex-l flex-column flex-row-l items-center static-l pa0-l shadow-none-l w-auto-l z-999 mt3 mt0-l`}
66+
>
67+
<Link
68+
className="link navy hover-blue f5 fw6 pv3 pv2-l ph3-l mr4-l nowrap"
69+
to="/community"
70+
onClick={this.toggleMenu}
5471
>
5572
Community Board
5673
</Link>
57-
<Link
58-
className="link navy hover-blue f5 fw6 pv3 pv2-l ph3-l mr4-l nowrap"
59-
to="/manual"
74+
<Link
75+
className="link navy hover-blue f5 fw6 pv3 pv2-l ph3-l mr4-l nowrap"
76+
to="/manual"
77+
onClick={this.toggleMenu}
6078
>
6179
Manual
6280
</Link>
63-
81+
6482
<Link
6583
to="/record-search"
6684
className="link f5 fw6 pv2 ph3 blue br2 ba b--blue hover-bg-dark-blue hover-white tc mt3 mt0-l ml4-l"
85+
onClick={this.toggleMenu}
6786
>
6887
Search
6988
</Link>
@@ -72,4 +91,4 @@ export default class Header extends React.Component<{}, HeaderState> {
7291
</header>
7392
);
7493
}
75-
}
94+
}

‎src/frontend/src/components/Landing/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ class Landing extends React.Component {
1111
render() {
1212
return (
1313
<>
14-
<main className="f5 f4-ns navy bg-white mt5">
14+
<main className="f5 f4-ns navy bg-white">
1515
<div className="overflow-x-hidden relative">
1616
<div className="flex justify-center mb5">
1717
<div className="flex justify-center items-center w-100 shadow bg-blue white pv3 ph4">

‎src/frontend/src/components/Manual/index.tsx‎

Lines changed: 39 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -14,43 +14,45 @@ class Manual extends React.Component {
1414
<div className="mw8 center ph4 visually-hidden">
1515
<h1 className="f3 fw6 mv4">Manual</h1>
1616
</div>
17-
<nav
18-
className="shrink-none order-2 self-start sticky-l w5 bg-white shadow pa4 mt4 ml5-l"
19-
aria-label="Manual"
20-
>
21-
<ul className="list">
22-
<li className="mb3">
23-
<a href="#intro" className="link hover-blue">
24-
Introduction
25-
</a>
26-
</li>
27-
<li className="mb3 pb1">
28-
<a href="#generalinfo" className="link hover-blue">
29-
General Info
30-
</a>
31-
</li>
32-
<li className="bt b--light-gray pt3 mb3 ">
33-
<a href="#overview" className="link hover-blue">
34-
Use RecordSponge
35-
</a>
36-
</li>
37-
<li className="mb3 ml3">
38-
<a href="#assumption" className="link hover-blue">
39-
Assumption
40-
</a>
41-
</li>
42-
<li className="mb3 ml3">
43-
<a href="#search" className="link hover-blue">
44-
Search
45-
</a>
46-
</li>
47-
<li className="ml3">
48-
<a href="#file" className="link hover-blue">
49-
File for Expungement
50-
</a>
51-
</li>
52-
</ul>
53-
</nav>
17+
<aside className="pa1 order-2">
18+
<nav
19+
className="shrink-none self-start sticky-l w5 bg-white shadow pa4 mt4 ml5-l"
20+
aria-label="Manual"
21+
>
22+
<ul className="list">
23+
<li className="mb3">
24+
<a href="#intro" className="link hover-blue">
25+
Introduction
26+
</a>
27+
</li>
28+
<li className="mb3 pb1">
29+
<a href="#generalinfo" className="link hover-blue">
30+
General Info
31+
</a>
32+
</li>
33+
<li className="bt b--light-gray pt3 mb3 ">
34+
<a href="#overview" className="link hover-blue">
35+
Use RecordSponge
36+
</a>
37+
</li>
38+
<li className="mb3 ml3">
39+
<a href="#assumption" className="link hover-blue">
40+
Assumption
41+
</a>
42+
</li>
43+
<li className="mb3 ml3">
44+
<a href="#search" className="link hover-blue">
45+
Search
46+
</a>
47+
</li>
48+
<li className="ml3">
49+
<a href="#file" className="link hover-blue">
50+
File for Expungement
51+
</a>
52+
</li>
53+
</ul>
54+
</nav>
55+
</aside>
5456
<article className="order-1 lh-copy">
5557
<section className="mb5">
5658
<h2 className="f2 fw9 mb3 mt4" id="intro">

0 commit comments

Comments
 (0)