From c12d4c1e73ff036f4577bed498dd9f4b27cdda2f Mon Sep 17 00:00:00 2001 From: Simeon Pursiainen Date: Thu, 11 Sep 2025 20:10:29 +0300 Subject: [PATCH] New visual --- src/components/DropDownBox.tsx | 2 +- src/components/Footer/FooterContent.tsx | 30 ++++++++++++++ src/components/Header.tsx | 7 ++++ src/components/Navigation.tsx | 40 +++++++------------ src/pages/{ => newStudent}/forExchangers.tsx | 2 +- src/pages/{ => newStudent}/fukseille_en.tsx | 2 +- src/pages/{kilta => newStudent}/fuksi.tsx | 2 +- .../ForInternationalPage/ForIntlPageView.tsx | 4 +- 8 files changed, 57 insertions(+), 32 deletions(-) rename src/pages/{ => newStudent}/forExchangers.tsx (94%) rename src/pages/{ => newStudent}/fukseille_en.tsx (92%) rename src/pages/{kilta => newStudent}/fuksi.tsx (93%) diff --git a/src/components/DropDownBox.tsx b/src/components/DropDownBox.tsx index 51a2cf6..41cf408 100644 --- a/src/components/DropDownBox.tsx +++ b/src/components/DropDownBox.tsx @@ -12,8 +12,8 @@ interface DropDownBoxProps { const Box = styled.div` background-color: ${colors.white}; border: 1px solid ${colors.black}; - margin-top: 0.8rem; position: absolute; + /* margin-top: 0.8rem; hides cool onhover effect but fixes a gap problem */ left: 0; top: 2.5rem; z-index: 20; diff --git a/src/components/Footer/FooterContent.tsx b/src/components/Footer/FooterContent.tsx index 0d2c050..d63ab60 100644 --- a/src/components/Footer/FooterContent.tsx +++ b/src/components/Footer/FooterContent.tsx @@ -1,6 +1,7 @@ import React from "react"; import styled from "styled-components"; import { Link } from "@components/index"; +import Icon, { IconType } from "@components/Icon"; import colors from "@theme/colors"; import breakpoints from "@theme/breakpoints"; @@ -28,6 +29,7 @@ const Content = styled.div` h4 { color: ${colors.lightBlue}; padding: 1.5rem 0; + text-align: center; } a { @@ -67,6 +69,27 @@ const Map = styled.div` } `; +const SomeContainer = styled.div` + display: flex; + flex-flow: column nowrap; + justify-content: space-between; + a { + display: flex; + flex-flow: row nowrap; + justify-content: center; + margin-right: 0.5rem; + + color: inherit; + text-decoration: none; + + } + svg{ + width: 24px; + height: 24px; + fill: ${colors.white}; +} +`; + const FooterContent: React.FC = () => (
@@ -90,6 +113,13 @@ const FooterContent: React.FC = () => ( Kuvagalleria Logot ja grafiikka
+
+ + + + + +
diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 477985b..634d11f 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -26,6 +26,13 @@ const Sticky = styled.div<{ $isHidden?: boolean; $mobileMenuOpen?: boolean }>` transition: all 200ms ease-out; height: ${(p) => (p.$mobileMenuOpen ? "100vh" : "unset")}; + /* tape to allow mobile dropdown menu scrolling */ + @media screen and (max-width: ${breakpoints.mobile}) { + overflow-y: ${(p) => (p.$mobileMenuOpen ? "auto" : "visible")}; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; /* apparently some ios optimization for smoother scrolin' */ + } + ${(p) => (p.$isHidden ? (` transition: all 200ms ease-in; transform: translateY(-100%); diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index 3105d18..f7561f6 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -11,7 +11,6 @@ export const renderNavigationItems = (mobile = false): JSX.Element => ( Toiminta Jäsenyys - Fukseille Hallitus Toimihenkilöt Vuokraa kalustoa @@ -20,8 +19,11 @@ export const renderNavigationItems = (mobile = false): JSX.Element => ( Kuvagalleria Kilta-avustus - - + + Fukseille + For Freshmen + For Exchange/MSc students + @@ -31,7 +33,6 @@ export const renderNavigationItems = (mobile = false): JSX.Element => ( ); - const Nav = styled.div` flex: 1 0 auto; display: flex; @@ -55,6 +56,11 @@ const Nav = styled.div` @media screen and (max-width: ${breakpoints.mobile}) { justify-content: center; margin-left: 0; + /* line 59 */ + border-top: 2px solid ${colors.lightBlue}; /* Add line above */ + padding-top: 0.5rem; /* Add some spacing */ + padding-bottom: 0.5rem; /* Add some spacing */ + cursor: pointer; /* Make entire nav clickable */ } svg { @@ -76,22 +82,12 @@ const DesktopContainer = styled.div` } `; -const SomeContainer = styled.div` - display: flex; - flex-flow: row nowrap; - - a { - display: flex; - flex-flow: row nowrap; - justify-content: center; - margin: 1rem; - } -`; - const MobileMenu = styled.div` display: flex; margin: 0 1rem; + align-items: center; cursor: pointer; + padding: 0 50%; /* Large clickable area horizontally cheeze */ span { display: flex; @@ -101,9 +97,6 @@ const MobileMenu = styled.div` display: none; } - @media screen and (max-width: ${breakpoints.mobile}) { - margin-left: 3rem; - } `; interface NavigationProps { @@ -117,13 +110,8 @@ const Navigation: React.FC = ({ onMobileMenuOpen }) => { {desktopItems} - - - - - - - + + ); diff --git a/src/pages/forExchangers.tsx b/src/pages/newStudent/forExchangers.tsx similarity index 94% rename from src/pages/forExchangers.tsx rename to src/pages/newStudent/forExchangers.tsx index 3a3e0e9..8beeca8 100644 --- a/src/pages/forExchangers.tsx +++ b/src/pages/newStudent/forExchangers.tsx @@ -7,7 +7,7 @@ import PageWrapper from "@views/common/PageWrapper"; const ForInternationalPage: NextPage = () => ( <> - + diff --git a/src/pages/fukseille_en.tsx b/src/pages/newStudent/fukseille_en.tsx similarity index 92% rename from src/pages/fukseille_en.tsx rename to src/pages/newStudent/fukseille_en.tsx index 9dafb74..41637ae 100644 --- a/src/pages/fukseille_en.tsx +++ b/src/pages/newStudent/fukseille_en.tsx @@ -7,7 +7,7 @@ import PageWrapper from "@views/common/PageWrapper"; const ContactsPage: NextPage = () => ( <> - + diff --git a/src/pages/kilta/fuksi.tsx b/src/pages/newStudent/fuksi.tsx similarity index 93% rename from src/pages/kilta/fuksi.tsx rename to src/pages/newStudent/fuksi.tsx index f1b6b7a..88b3461 100644 --- a/src/pages/kilta/fuksi.tsx +++ b/src/pages/newStudent/fuksi.tsx @@ -7,7 +7,7 @@ import PageWrapper from "@views/common/PageWrapper"; const FreshmenPage: NextPage = () => ( <> - + diff --git a/src/views/ForInternationalPage/ForIntlPageView.tsx b/src/views/ForInternationalPage/ForIntlPageView.tsx index 7109f25..272f87c 100644 --- a/src/views/ForInternationalPage/ForIntlPageView.tsx +++ b/src/views/ForInternationalPage/ForIntlPageView.tsx @@ -28,7 +28,7 @@ const FopasImage = styled.img` margin-bottom: 1em; `; -const ForFreshmenPageView: React.FC = () => ( +const ForIntlPageView: React.FC = () => ( <> @@ -188,4 +188,4 @@ const ForFreshmenPageView: React.FC = () => ( ); -export default ForFreshmenPageView; +export default ForIntlPageView;