Skip to content

Commit

Permalink
update the home page & constituency lookup ui (#83)
Browse files Browse the repository at this point in the history 
* update the navbar, footer, home page & constituency page ui in line with Josh's designs

* Update the css to match 

* add back in form-check class which seems to be sometimes added by bootstrap-react and sometimes not?

* fix css for footer svgs

* update tactical voting advice to handle tbc, vote with heart

* remove flex from svg div container for safari 

* rename non voters to didn't vote

* bring updates back into the refactored front page form
  • Loading branch information
@jms301
jms301 authored Mar 23, 2024
1 parent de6ece3 commit 9df53f1
Show file tree
Hide file tree
Showing 17 changed files with 1,367 additions and 749 deletions.
161 changes: 141 additions & 20 deletions app/constituencies/[slug]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Col, Container, Row } from "react-bootstrap";
import { Col, Container, Row, ButtonGroup, Button } from "react-bootstrap";
import Link from "next/link";
import Header from "@/components/Header";
import ActionBox from "@/components/info_box/ActionBox";
import ImpliedChart from "@/components/info_box/ImpliedChart";
Expand All @@ -11,6 +12,13 @@ import {
getConstituencySlugs,
} from "@/utils/constituencyData";
import { notFound } from "next/navigation";
import {
FaShare,
FaPuzzlePiece,
FaCopy,
FaHandHoldingHeart,
} from "react-icons/fa6";
import PostcodeLookup from "@/components/constituency_lookup/ConstituencyLookup";

export const dynamicParams = false; // Don't allow params not in generateStaticParams

Expand Down Expand Up @@ -54,6 +62,30 @@ export default async function ConstituencyPage({
(a, b) => b.votePercent - a.votePercent,
);

let tacticalVoteHeader = "";
let tacticalVoteAdvice = "";
let tacticalVoteClass = "";

if (constituencyData.otherVoteData.conservativeWinUnlikely) {
tacticalVoteHeader = "Tories unlikely to win here";
tacticalVoteAdvice = "Vote with your heart";
tacticalVoteClass = "party-your-heart";
} else {
tacticalVoteHeader = "The Tactical Vote is";

if (constituencyData.recommendation.partySlug) {
tacticalVoteAdvice = partyNameFromSlug(
constituencyData.recommendation.partySlug,
);
tacticalVoteClass = partyCssClassFromSlug(
constituencyData.recommendation.partySlug,
);
} else {
tacticalVoteClass = "party-too-soon";
tacticalVoteAdvice = "Too Soon to call";
}
}

if (constituencyData.recommendation.partySlug === "None") {
return (
<>
Expand Down Expand Up @@ -92,50 +124,139 @@ export default async function ConstituencyPage({
<h1>{constituencyData.constituencyIdentifiers.name}</h1>
<p>
Bookmark this page and check back before the election for updated
info.
info. Not your constituency?{" "}
<a href="/" style={{ color: "white" }}>
Search here.
</a>
</p>
</Container>
</Header>

<main>
<section id="section-advice" className="section-light">
<section id="section-advice" className="section-darker">
<Container>
<Row>
<Col>
<h2 className="pb-3">The tactical vote is</h2>
<h2>{tacticalVoteHeader}</h2>
<h3 className={`party ${tacticalVoteClass}`}>
{tacticalVoteAdvice}
</h3>
<p>
<a href="#section-info">Why?</a>
</p>
</Col>
</Row>
</Container>
</section>
<section id="section-join" className="section-dark">
<Container>
<Row>
<Col>
<h3
className={`party ${partyCssClassFromSlug(
constituencyData.recommendation.partySlug,
)}`}
>
{partyNameFromSlug(constituencyData.recommendation.partySlug)}
</h3>
<Col xs={8} md={12} className="pb-3">
<h2>be counted, stick together!</h2>
</Col>
</Row>

<Row xs={1} lg={3}>
<Col md={7}>
<TacticalReasoningBox constituencyData={constituencyData} />
<Col md={7} className="pb-3">
<div className="form-search">
<h3>Grow this movement</h3>
<p>You&apos;re in! Now let&apos;s build our numbers</p>
<ButtonGroup size="lg" vertical className="w-100 mb-0">
{/* TODO share link and clipboard copy */}
<Button href="#" variant="light">
<FaShare /> Share with friends &amp; family
</Button>
<Button href="#" variant="light">
<FaCopy />
Copy link to this page
</Button>
<Button
href="https://themovementforward.com/volunteer/"
variant="light"
>
<FaPuzzlePiece /> Volunteer
</Button>

<Button href="/donate" variant="light">
<FaHandHoldingHeart /> Support our crowdfunder
</Button>
</ButtonGroup>
</div>
</Col>
<Col md={7}>
<ActionBox constituencyData={constituencyData} />
<Col md={7} className="pb-3">
<p style={{ fontSize: "26px" }}>
<strong>Reasons to be counted</strong>
</p>
<p style={{ fontSize: "22px" }}>
1. Show how many of us are voting tactically and not just for
the party we&apos;re lending our vote to, and that we want our
votes to count next time.
</p>
<p style={{ fontSize: "22px" }}>
2. Our large numbers show that the country is rejecting the
narrative the right wing media and think tanks spin.
</p>
<p style={{ fontSize: "22px" }}>
3. Together we can be a huge independent influence on the next
government, for Proportional Representation, and other
crucial, common sense, policies.
</p>
</Col>
<Col md={7}>
<Col md={7} className="pb-3">
<PlanToVoteBox />
</Col>
</Row>
</Container>
</section>
<section id="section-info" className="section-light">
<Container>
<Row>
<Col className="pb-3">
{constituencyData.otherVoteData.conservativeWinUnlikely ? (
<>
<h2>Why Tories Won&apos;t Win Here</h2>
<h3>({constituencyData.constituencyIdentifiers.name})</h3>
</>
) : constituencyData.recommendation.partySlug ? (
<>
<h2>
Why vote{" "}
<span
className={`party ${partyCssClassFromSlug(
constituencyData.recommendation.partySlug,
)}`}
>
{partyNameFromSlug(
constituencyData.recommendation.partySlug,
)}
</span>{" "}
here?
</h2>
<h3>({constituencyData.constituencyIdentifiers.name})</h3>
</>
) : (
<>
<h2>Why it&apos;s too soon to call here</h2>
<h3>({constituencyData.constituencyIdentifiers.name})</h3>
</>
)}
</Col>
</Row>

<Row xs={1} lg={3}>
<Col md={7}>
<Col md={7} className="pb-3">
<TacticalReasoningBox constituencyData={constituencyData} />
<Link href="/methodology" className="small">
<span style={{ color: "rgb(33, 37, 41)" }}>
Read more about our process
</span>
</Link>
</Col>
<Col md={7} className="pb-3">
<ImpliedChart constituencyData={constituencyData} />
</Col>
<Col md={7}>
<MRPChart constituencyData={constituencyData} />
</Col>
<Col md={7}></Col>
</Row>
</Container>
</section>
Expand Down
Loading

0 comments on commit 9df53f1

Please sign in to comment.