Merge branch 'New_visual' into 'master'

New visual See merge request sahkoinsinoorikilta/vtmk/web2.0-frontend!186
2025-09-11 20:10:29 +03:00
parent 453d20d345 c12d4c1e73
commit 813479a602
8 changed files with 57 additions and 32 deletions
@@ -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;
@@ -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 = () => (
  <Content>
    <div>
@@ -90,6 +113,13 @@ const FooterContent: React.FC = () => (
            <Link to="https://sik.kuvat.fi">Kuvagalleria</Link>
            <Link to="https://static.sahkoinsinoorikilta.fi/logot-ja-grafiikka/">Logot ja grafiikka</Link>
          </div>
+          <div>
+            <SomeContainer>
+              <Icon name={IconType.Facebook} link="https://www.facebook.com/AaltoYliopistonSIK/" />
+              <Icon name={IconType.Instagram} link="https://www.instagram.com/sahkoinsinoorikilta/" />
+              <Icon name={IconType.LinkedIn} link="https://www.linkedin.com/groups/8103057/" />
+            </SomeContainer>
+          </div>
        </Columns>
      </MarginSpace>
    </div>
@@ -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%);
@@ -11,7 +11,6 @@ export const renderNavigationItems = (mobile = false): JSX.Element => (
    <NavbarDropdownLink to="/kilta" text="Kilta ›" exploded={mobile}>
      <NavbarChildLink to="/kilta/toiminta">Toiminta</NavbarChildLink>
      <NavbarChildLink to="/kilta/jasenyys">Jäsenyys</NavbarChildLink>
-      <NavbarChildLink to="/kilta/fuksi">Fukseille</NavbarChildLink>
      <NavbarChildLink to="/kilta/hallitus">Hallitus</NavbarChildLink>
      <NavbarChildLink to="/kilta/toimihenkilot">Toimihenkilöt</NavbarChildLink>
      <NavbarChildLink to="/kilta/vuokraa">Vuokraa kalustoa</NavbarChildLink>
@@ -20,8 +19,11 @@ export const renderNavigationItems = (mobile = false): JSX.Element => (
      <NavbarChildLink to="https://sik.kuvat.fi">Kuvagalleria</NavbarChildLink>
      <NavbarChildLink to="/kilta/kilta-avustus">Kilta-avustus</NavbarChildLink>
    </NavbarDropdownLink>
-    <NavbarDropdownLink to="/fukseille_en" text="For Freshmen" exploded={mobile} />
-    <NavbarDropdownLink to="/forExchangers" text="For Exchange/MSc students" exploded={mobile} />
+    <NavbarDropdownLink to="/newStudent" text="New students ›" exploded={mobile}>
+      <NavbarChildLink to="/newStudent/fuksi">Fukseille</NavbarChildLink>
+      <NavbarChildLink to="/newStudent/fukseille_en">For Freshmen</NavbarChildLink>
+      <NavbarChildLink to="/newStudent/forExchangers">For Exchange/MSc students</NavbarChildLink>
+    </NavbarDropdownLink>
    <NavbarDropdownLink to="/opinnot_ja_ura" text="Opinnot ja ura" exploded={mobile} />
    <NavbarDropdownLink to="/yritysyhteistyo" text="Yritysyhteistyö" exploded={mobile} />
    <NavbarDropdownLink to="/yhteystiedot" text="Yhteystiedot" exploded={mobile}>
@@ -31,7 +33,6 @@ export const renderNavigationItems = (mobile = false): JSX.Element => (
    <NavbarDropdownLink to="/in_english" text="In English" exploded={mobile} />
  </>
 );
-
 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<NavigationProps> = ({ onMobileMenuOpen }) => {
      <DesktopContainer>
        {desktopItems}
      </DesktopContainer>
-      <SomeContainer>
-        <Icon name={IconType.Facebook} link="https://www.facebook.com/AaltoYliopistonSIK/" />
-        <Icon name={IconType.Instagram} link="https://www.instagram.com/sahkoinsinoorikilta/" />
-        <Icon name={IconType.LinkedIn} link="https://www.linkedin.com/groups/8103057/" />
-      </SomeContainer>
-      <MobileMenu>
-        <Icon name={IconType.HamburgerMenu} onClick={onMobileMenuOpen} />
+      <MobileMenu onClick={onMobileMenuOpen}>
+        <Icon name={IconType.HamburgerMenu} />
      </MobileMenu>
    </Nav>
  );
@@ -7,7 +7,7 @@ import PageWrapper from "@views/common/PageWrapper";
 const ForInternationalPage: NextPage = () => (
  <>
    <Head>
-      <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/ForFreshmen`} />
+      <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/newStudent/ForIntl`} />
    </Head>
    <PageWrapper>
      <ForInternationalPageView />
@@ -7,7 +7,7 @@ import PageWrapper from "@views/common/PageWrapper";
 const ContactsPage: NextPage = () => (
  <>
    <Head>
-      <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/ForFreshmen`} />
+      <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/newStudent/ForFreshmen`} />
    </Head>
    <PageWrapper>
      <ContactsPageView />
@@ -7,7 +7,7 @@ import PageWrapper from "@views/common/PageWrapper";
 const FreshmenPage: NextPage = () => (
  <>
    <Head>
-      <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/kilta/fuksi`} />
+      <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/newStudent/fuksi`} />
    </Head>
    <PageWrapper>
      <FreshmenPageView />
@@ -28,7 +28,7 @@ const FopasImage = styled.img`
  margin-bottom: 1em;
 `;

-const ForFreshmenPageView: React.FC = () => (
+const ForIntlPageView: React.FC = () => (
  <>
    <ForIntlPageHero />
    <TextSection>
@@ -188,4 +188,4 @@ const ForFreshmenPageView: React.FC = () => (
  </>
 );

-export default ForFreshmenPageView;
+export default ForIntlPageView;