From 7515a198b862fd30b0445782e090e172933c110a Mon Sep 17 00:00:00 2001
From: Dorian Koch <doriank@fsmpi.rwth-aachen.de>
Date: Sun, 30 Jun 2024 16:18:14 +0200
Subject: [PATCH] hide some footer links on small screens
---
lang/de.slf | 2 ++
lang/en.slf | 2 ++
src/components/DefaultLayout.tsx | 56 ++++++++++++++++++++++++++++----
3 files changed, 54 insertions(+), 6 deletions(-)
diff --git a/lang/de.slf b/lang/de.slf
index 824154b..de4c479 100644
--- a/lang/de.slf
+++ b/lang/de.slf
@@ -204,6 +204,8 @@ ui.footer.imprint = "Impressum"
ui.footer.twitter = "X (urspr. Twitter)"
ui.footer.advertisement = "Diese Website wird betrieben von ehrenamtlichen Studierenden der [Fachschaft I/1](https://www.fsmpi.rwth-aachen.de/)."
ui.footer.advertisement_short = "[Fachschaft I/1](https://www.fsmpi.rwth-aachen.de/)"
+ui.footer.source_code = "Quellcode"
+ui.footer.more = "Mehr"
ui.login.unavailable_message = "Seite ist nicht verfügbar"
diff --git a/lang/en.slf b/lang/en.slf
index 37685fc..bf932c4 100644
--- a/lang/en.slf
+++ b/lang/en.slf
@@ -207,6 +207,8 @@ ui.footer.imprint = "Imprint"
ui.footer.twitter = "X (formerly Twitter)"
ui.footer.advertisement = "This website is operated by volunteer students of the [student council I/1](https://www.fsmpi.rwth-aachen.de/)."
ui.footer.advertisement_short = "[Student council I/1](https://www.fsmpi.rwth-aachen.de/)"
+ui.footer.source_code = "Source code"
+ui.footer.more = "More"
ui.login.unavailable_message = "Site is unavailable"
diff --git a/src/components/DefaultLayout.tsx b/src/components/DefaultLayout.tsx
index 0d69326..7796caa 100644
--- a/src/components/DefaultLayout.tsx
+++ b/src/components/DefaultLayout.tsx
@@ -22,6 +22,7 @@ import Dropdown from "react-bootstrap/Dropdown";
import { StylizedText } from "./StylizedText";
import type { GetStatusResponse } from "@/api/api_v1_types";
+import { DropdownButton } from "react-bootstrap";
function NavBarIcon({
children,
@@ -543,24 +544,67 @@ function Footer({ status }: { status?: GetStatusResponse }) {
<Link href="/imprint">{language.get("ui.footer.imprint")}</Link>
</li>
<li className="list-inline-item">
- <a href="http://www.vampir.rwth-aachen.de/">Vampir e.V.</a>
+ <Link href="/licenses">Licenses</Link>
</li>
- <li className="list-inline-item">
+ <li className="list-inline-item d-none d-lg-inline">
<a href="https://www.youtube.com/channel/UCxh5snRN7yZyBsytNbGNuEQ">
YouTube
</a>
</li>
- <li className="list-inline-item">
+ <li className="list-inline-item d-none d-lg-inline">
+ <a href="http://www.vampir.rwth-aachen.de/">Vampir e.V.</a>
+ </li>
+ <li className="list-inline-item d-none d-xl-inline">
<a href="https://www.facebook.com/videoag">Facebook</a>
</li>
- <li className="list-inline-item">
+ <li className="list-inline-item d-none d-xl-inline">
<a href="https://twitter.com/rwthvideo">
{language.get("ui.footer.twitter")}
</a>
</li>
- <li className="list-inline-item">
- <Link href="/licenses">Licenses</Link>
+ <li className="list-inline-item d-none d-xl-inline">
+ <a href="https://git.fsmpi.rwth-aachen.de/videoag/frontend">
+ {language.get("ui.footer.source_code")}
+ </a>
</li>
+ <DropdownButton
+ className="d-xl-none d-inline-block"
+ variant="secondary"
+ title={language.get("ui.footer.more")}
+ drop={"end"}
+ >
+ <Dropdown.Item
+ className="d-lg-none"
+ href="https://www.youtube.com/channel/UCxh5snRN7yZyBsytNbGNuEQ"
+ >
+ YouTube
+ </Dropdown.Item>
+
+ <Dropdown.Item
+ className="d-lg-none"
+ href="http://www.vampir.rwth-aachen.de/"
+ >
+ Vampir e.V.
+ </Dropdown.Item>
+
+ <Dropdown.Item
+ className="d-xl-none"
+ href="https://www.facebook.com/videoag"
+ >
+ Facebook
+ </Dropdown.Item>
+
+ <Dropdown.Item className="d-xl-none" href="https://twitter.com/rwthvideo">
+ {language.get("ui.footer.twitter")}
+ </Dropdown.Item>
+
+ <Dropdown.Item
+ className="d-xl-none"
+ href="https://git.fsmpi.rwth-aachen.de/videoag/frontend"
+ >
+ {language.get("ui.footer.source_code")}
+ </Dropdown.Item>
+ </DropdownButton>
</ul>
<div className="flex-fill" />
{hasUserInfo ? (
--
GitLab