Skip to content

Commit

Permalink
refactor: Improve footer layout responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sampiiiii
Sampiiiii committed Oct 1, 2024
1 parent f75fbca commit 1046f68
Showing 1 changed file with 72 additions and 76 deletions.
148 changes: 72 additions & 76 deletions apps/forge/src/components/footer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,85 +55,81 @@ export default function Footer() {
});

return (
<footer>
<br />
<br />
<div className="bg-card border-t-2 p-10">
<div className="flex justify-between items-end mx-5">
<div className="flex flex-col gap-2 not-prose max-w-[30rem]">
<Link to="/">
<h3 className="sr-only">iForge Makerspace</h3>
<IForgeLogo className="w-[250px] hover:opacity-75 transition-all" />
</Link>

<p className="mt-3">
<Balancer>
iForge Makerspace at the University of Sheffield is the place to design and create, offering tools and
resources for students and staff to bring their ideas to life
</Balancer>
</p>
</div>
<div className="flex flex-col gap-2">
<h5 className="text-lg font-bold font-futura">Opening Hours</h5>
<Balancer ratio="0.5">Open weekdays, subject to exams and holidays</Balancer>
{locationStatuses && (
<table className="w-full border-collapse items-center flex">
<tbody>
{(Object.entries(locationStatuses) as Entries<typeof locationStatuses>).map(([name, location]) => (
<tr key={name} className="py-2">
<td>
<div className="flex items-center justify-center h-full">
<LocationIcon location={name} className="h-4" tooltip={false} />
</div>
</td>
<td className="pr-2">
<div className="flex items-center h-full">{toTitleCase(name)}</div>
</td>
<td>
<div className="flex items-center justify-between h-full">
<span>
{removeSuffix(location.opening_time, ":00")} to {removeSuffix(location.closing_time, ":00")}
</span>
<LocationStatusTooltip location={location} />
</div>
</td>
</tr>
))}
</tbody>
</table>
)}
</div>
<div className="flex flex-col gap-2">
<h5 className="text-lg font-bold font-futura">Website</h5>
<Link to="/locations" className="hover:underline underline-offset-4">
Locations
</Link>
<Link to="/projects" className="hover:underline underline-offset-4">
Projects
</Link>
<Link to="/about" className="hover:underline underline-offset-4">
About Us
</Link>
<Link to="/contact" className="hover:underline underline-offset-4">
Contact
</Link>
</div>
</div>
<footer>
<br />
<Separator />
<br />
<div className="not-prose flex flex-col md:flex-row md:gap-2 gap-6 justify-between md:items-center mx-5">
<div className="flex gap-2">
<GitHubIcon />
<DiscordIcon />
<InstagramIcon />
<LinkedInIcon />
<TwitterIcon />
<YouTubeIcon />
<div className="bg-card border-t-2 p-5 md:p-10">
<div className="flex flex-col md:flex-row justify-between items-start md:items-end mx-2 md:mx-5 gap-8 md:gap-4">
<div className="flex flex-col gap-2 not-prose max-w-full md:max-w-[30rem]">
<Link to="/">
<h3 className="sr-only">iForge Makerspace</h3>
<IForgeLogo className="w-[200px] md:w-[250px] hover:opacity-75 transition-all" />
</Link>

<p className="mt-3">
<Balancer>
iForge Makerspace at the University of Sheffield is the place to design and create, offering tools and
resources for students and staff to bring their ideas to life
</Balancer>
</p>
</div>
<div className="flex flex-col gap-2 w-full md:w-auto">
<h5 className="text-lg font-bold font-futura">Opening Hours</h5>
<Balancer ratio="0.5">Open weekdays, subject to exams and holidays</Balancer>
{locationStatuses && (
<table className="w-full border-collapse items-center flex">
<tbody className="w-full">
{(Object.entries(locationStatuses) as Entries<typeof locationStatuses>).map(([name, location]) => (
<tr key={name} className="py-2 flex flex-wrap justify-between w-full">
<td className="flex items-center">
<LocationIcon location={name} className="h-4 mr-2" tooltip={false} />
<span>{toTitleCase(name)}</span>
</td>
<td className="flex items-center justify-end">
<span className="text-sm md:text-base">
{removeSuffix(location.opening_time, ":00")} to {removeSuffix(location.closing_time, ":00")}
</span>
<LocationStatusTooltip location={location} />
</td>
</tr>
))}
</tbody>
</table>
)}
</div>
<div className="flex flex-col gap-2">
<h5 className="text-lg font-bold font-futura">Website</h5>
<Link to="/locations" className="hover:underline underline-offset-4">
Locations
</Link>
<Link to="/projects" className="hover:underline underline-offset-4">
Projects
</Link>
<Link to="/about" className="hover:underline underline-offset-4">
About Us
</Link>
<Link to="/contact" className="hover:underline underline-offset-4">
Contact
</Link>
</div>
</div>
<br />
<Separator />
<br />
<div className="not-prose flex flex-col md:flex-row md:gap-2 gap-6 justify-between md:items-center mx-2 md:mx-5">
<div className="flex gap-4 md:gap-2 justify-center md:justify-start">
<GitHubIcon />
<DiscordIcon />
<InstagramIcon />
<LinkedInIcon />
<TwitterIcon />
<YouTubeIcon />
</div>
<p className="text-muted-foreground text-center md:text-left text-sm md:text-base">
© iForge Makerspace. All rights reserved. 2017-present.
</p>
</div>
<p className="text-muted-foreground">© iForge Makerspace. All rights reserved. 2017-present.</p>
</div>
</div>
</footer>
</footer>
);
}

0 comments on commit 1046f68

Please sign in to comment.