Skip to content

Footer align content #437

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

Open
madhurabhujbal wants to merge 15 commits into
base: main
Choose a base branch
from
Open

Footer align content #437

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
a7a10ea
Remove container and fix content position
madhurabhujbal Dec 2, 2025
f811a1b
Adjust the styling and positioning of content
madhurabhujbal Dec 2, 2025
bf81ab7
Remove underline from all the footer bottom links
madhurabhujbal Dec 2, 2025
daa82a9
Make footer responsive on smaller screens
madhurabhujbal Dec 2, 2025
6241d17
split the footer info in separate paragraphs
madhurabhujbal Dec 2, 2025
597d4ea
Add styling for medium sized screen
madhurabhujbal Dec 2, 2025
d7a6531
Adjust logo positions on the medium screen sizes
madhurabhujbal Dec 2, 2025
d421d1f
Adjust the spacing between logos
madhurabhujbal Dec 3, 2025
852b43a
Fix the logos clipping issue
madhurabhujbal Dec 3, 2025
f6a6600
Adjust position of logos and content from left
madhurabhujbal Dec 3, 2025
a1cdafa
Arrange the logos position to the end of flex
madhurabhujbal Dec 3, 2025
9cf9f65
Fix styling
madhurabhujbal Dec 3, 2025
42c696f
Restore the logo sizes
madhurabhujbal Dec 4, 2025
71a08ea
Fix positioning
madhurabhujbal Dec 8, 2025
b624e9a
Fix small screen logo positions
madhurabhujbal Dec 8, 2025
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
32 changes: 20 additions & 12 deletions src/app/components/elements/list-groups/ListGroupFooterBottom.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,26 +35,30 @@ const footerLinks = {
};

export const ListGroupFooterBottom = () => (
<div className="footer-links footer-bottom">
<ListGroup className="d-flex flex-wrap flex-row link-group">
<ListGroupItem className="footer-bottom-links d-md-flex flex-md-row bg-transparent link-group w-100">
<h2 className="h5 mb-3 mb-md-0 mr-md-4">Links</h2>
<div className="d-flex flex-xl-row flex-column mb-3 ml-3 justify-content-between align-items-xl-end">
{/* <ListGroup className="footer-bottom-list d-flex flex-column flex-md-row justify-content-between link-group"> */}
<div className="footer-bottom-left mb-4 mb-md-0 justify-content-around d-flex flex-column">
<ListGroupItem className="footer-bottom-links d-md-flex flex-md-row bg-transparent link-group w-100 border-0 px-0 py-3">
<h2>Links</h2>
<ListGroup className="d-md-flex flex-md-row">{footerLinks.right}</ListGroup>
</ListGroupItem>

<ListGroupItem className="footer-bottom-info border-0 px-0 py-0 bg-transparent">
<p className="pl-3 pt-2 mb-lg-0 pb-2 pb-sm-0">
All teaching materials on this site are available under the{" "}
<p className="pt-2 mb-lg-0">
All teaching materials on this site are available under the <br />
<ExternalLink
href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
className="d-inline fw-bold print-font"
className="d-inline fw-bold print-font text-decoration-none"
>
Open Government Licence v3.0
Open Government Licence v3.0, {""}
</ExternalLink>
, except where otherwise stated.
except where otherwise stated.
</p>
</ListGroupItem>
</div>

<ListGroupItem className="footer-bottom-logos border-0 px-0 py-0 bg-transparent d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center d-print-none">
<ListGroupItem className="footer-bottom-logos border-0 px-0 py-0 bg-transparent d-flex flex-row align-items-end justify-content-end d-print-none">
<div className="footer-bottom-logos-first-two d-flex flex-column flex-md-row">
<ExternalLink href="https://computingeducation.org.uk/" className="mb-3 mb-md-0">
<img
src="/assets/logos/ncce.svg"
Expand All @@ -65,7 +69,11 @@ export const ListGroupFooterBottom = () => (
<ExternalLink href="https://www.gov.uk/government/organisations/department-for-education">
<img src="/assets/logos/dfe.svg" alt="UK Department for Education" className="img-fluid" />
</ExternalLink>
</ListGroupItem>
</ListGroup>
</div>
<ExternalLink href="https://www.stem.org.uk/">
<img src="/assets/logos/stem_footer.svg" alt="STEM Learning" className="logo-mr img-fluid" />
</ExternalLink>
</ListGroupItem>
{/* </ListGroup> */}
</div>
);
15 changes: 3 additions & 12 deletions src/app/components/navigation/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import { ListGroupSocial } from "../elements/list-groups/ListGroupSocial";
import { ListGroupFooterBottom } from "../elements/list-groups/ListGroupFooterBottom";
import { Link } from "react-router-dom";
import { ExternalLink } from "../elements/ExternalLink";
// import { ExternalLink } from "../elements/ExternalLink";

Check warning on line 7 in src/app/components/navigation/Footer.tsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Remove this commented out code. 


See more on https://sonarcloud.io/project/issues?id=isaaccomputerscience_isaac-react-app&issues=AZrkKWa_LbCMLMQH2bg8&open=AZrkKWa_LbCMLMQH2bg8&pullRequest=437

export const Footer = () => (
<footer>
Expand Down Expand Up @@ -35,17 +35,8 @@
</Row>
</Container>
</div>
<div className="footerBottom">
<Container>
<Row className="pt-3 px-sm-0">
<ListGroupFooterBottom />
</Row>
</Container>
<div className="w-100 d-flex justify-content-end">
<ExternalLink href="https://www.stem.org.uk/">
<img src="/assets/logos/stem_footer.svg" alt="STEM Learning" className="logo-mr" height="100px" />
</ExternalLink>
</div>
<div>
<ListGroupFooterBottom />
</div>
</footer>
);
Loading
Loading