From 32bff36611355c24732ec55ae2d0055ff69002ad Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Mon, 28 Dec 2020 20:23:51 +0200 Subject: [PATCH] Remove max-widths, use theme breakpoints module for consistency --- src/components/AdminSidebar.tsx | 7 ++++--- src/components/Card.tsx | 3 ++- src/components/Footer/Footer.tsx | 5 +++-- src/components/Footer/FooterContent.tsx | 5 +++-- src/components/Header.tsx | 5 +++-- src/components/HeaderLogo.tsx | 4 +++- src/components/Hero/Hero.tsx | 13 +++++++++---- src/components/Hero/HeroAside.tsx | 2 -- src/components/Hero/HeroPrimarySection.tsx | 2 -- src/components/NavbarChildLink.tsx | 7 ++++--- src/components/NavbarDropdownLink.tsx | 5 +++-- src/components/Navigation.tsx | 15 ++++++++------- src/components/Sections/CardSection.tsx | 9 +++++---- src/components/Sections/TextSection.tsx | 13 ++++++------- src/pages/admin/AdminCommonPage.tsx | 5 +++-- src/theme/breakpoints.ts | 19 +++++++++++-------- src/theme/colors.ts | 2 ++ src/views/EventPage/EventPageView.tsx | 1 - src/views/FrontPage/FrontPageView.tsx | 1 - src/views/StudiesPage/StudiesPageView.tsx | 1 + src/views/admin/AdminCreateCommon.tsx | 4 ---- tsconfig.json | 2 +- 22 files changed, 71 insertions(+), 59 deletions(-) diff --git a/src/components/AdminSidebar.tsx b/src/components/AdminSidebar.tsx index 6581f91..1ca2290 100644 --- a/src/components/AdminSidebar.tsx +++ b/src/components/AdminSidebar.tsx @@ -1,7 +1,8 @@ import React from "react"; import styled from "styled-components"; import Anchor from "@components/Anchor"; -import { colors } from "@theme/colors"; +import colors from "@theme/colors"; +import breakpoints from "@theme/breakpoints"; interface AdminSidebarProps { path: string; @@ -13,7 +14,7 @@ const SideBar = styled.nav` margin-right: 1rem; background-color: ${colors.blue1}; - @media screen and (max-width: 800px) { + @media screen and (max-width: ${breakpoints.mobile}) { margin-right: 0; margin-bottom: 1rem; } @@ -37,7 +38,7 @@ const StyledLink = styled(Anchor)<{path: string}>` border-left: 4px solid ${colors.white}; } - @media screen and (max-width: 800px) { + @media screen and (max-width: ${breakpoints.mobile}) { margin-bottom: 1px; } `; diff --git a/src/components/Card.tsx b/src/components/Card.tsx index 7199742..597f727 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -2,6 +2,7 @@ import React from "react"; import styled from "styled-components"; import { colors } from "@theme/colors"; import Anchor from "@components/Anchor"; +import breakpoints from "@theme/breakpoints"; interface WrappedCardProps { title: string; @@ -45,7 +46,7 @@ const StyledCard = styled.article` font-size: 0.9rem !important; font-weight: 600 !important; - @media screen and (max-width: 1200px) { + @media screen and (max-width: ${breakpoints.medium}) { margin: 0.5rem 0; font-size: 16px; } diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 04cfabf..94914f9 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -1,6 +1,7 @@ import React from "react"; import styled from "styled-components"; -import { colors } from "@theme/colors"; +import colors from "@theme/colors"; +import breakpoints from "@theme/breakpoints"; import FooterContent from "./FooterContent"; const StyledFooter = styled.footer` @@ -36,7 +37,7 @@ const CopyRight = styled.div` } } - @media screen and (max-width: 600px) { + @media screen and (max-width: ${breakpoints.mobile}) { flex-flow: column nowrap; } `; diff --git a/src/components/Footer/FooterContent.tsx b/src/components/Footer/FooterContent.tsx index fdf11dc..1706904 100644 --- a/src/components/Footer/FooterContent.tsx +++ b/src/components/Footer/FooterContent.tsx @@ -1,7 +1,8 @@ import React from "react"; import styled from "styled-components"; import Anchor from "../Anchor"; -import { colors } from "@theme/colors"; +import colors from "@theme/colors"; +import breakpoints from "@theme/breakpoints"; const Content = styled.div` display: flex; @@ -55,7 +56,7 @@ const Columns = styled.div` const Map = styled.div` flex: 1; - @media screen and (max-width: 800px) { + @media screen and (max-width: ${breakpoints.mobile}) { display: none; } iframe { diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 8a28282..ae63387 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -2,14 +2,15 @@ import React, { useState, useEffect, useRef } from "react"; import Navigation from "./Navigation"; import throttle from "lodash/throttle"; import styled from "styled-components"; -import { colors } from "@theme/colors"; +import colors from "@theme/colors"; +import breakpoints from "@theme/breakpoints"; import NavigationMobile from "./NavigationMobile"; import HeaderLogo from "./HeaderLogo"; const StyledHeader = styled.header<{isHidden?: boolean}>` display: flex; flex-flow: row nowrap; - @media screen and (max-width: 600px) { + @media screen and (max-width: ${breakpoints.mobile}) { flex-flow: column nowrap; } `; diff --git a/src/components/HeaderLogo.tsx b/src/components/HeaderLogo.tsx index c502809..b833e61 100644 --- a/src/components/HeaderLogo.tsx +++ b/src/components/HeaderLogo.tsx @@ -2,12 +2,14 @@ import React from "react"; import styled from "styled-components"; import { Link } from "react-router-dom"; import TitleImage from "@assets/img/SIK_RGB_W_side.png"; +import breakpoints from "@theme/breakpoints"; +// TODO: Responsive size const Logo = styled.img` max-width: 300px; margin: 1rem 1rem; - @media screen and (max-width: 600px) { + @media screen and (max-width: ${breakpoints.mobile}) { max-width: 100% !important; margin: 1rem 0 !important; } diff --git a/src/components/Hero/Hero.tsx b/src/components/Hero/Hero.tsx index e6fff87..6bcc8bb 100644 --- a/src/components/Hero/Hero.tsx +++ b/src/components/Hero/Hero.tsx @@ -1,6 +1,7 @@ import React from "react"; import styled from "styled-components"; -import { colors } from "@theme/colors"; +import colors from "@theme/colors"; +import breakpoints from "@theme/breakpoints"; const Container = styled.div` display: flex; @@ -12,17 +13,21 @@ const Container = styled.div` min-height: 75vh; section { + max-width: 50%; padding: 2rem 6rem; - @media screen and (max-width: 800px) { + @media screen and (max-width: ${breakpoints.mobile}) { + max-width: unset; padding: 1rem; } } aside { + max-width: 50%; padding: 3rem 6rem; align-items: center; - @media screen and (max-width: 800px) { + @media screen and (max-width: ${breakpoints.mobile}) { + max-width: unset; padding: 2rem 1rem; } } @@ -31,7 +36,7 @@ const Container = styled.div` flex: 8; } - @media screen and (max-width: 800px) { + @media screen and (max-width: ${breakpoints.mobile}) { flex-direction: column; } diff --git a/src/components/Hero/HeroAside.tsx b/src/components/Hero/HeroAside.tsx index 79484c6..c2afe04 100644 --- a/src/components/Hero/HeroAside.tsx +++ b/src/components/Hero/HeroAside.tsx @@ -43,8 +43,6 @@ const Aside = styled.aside<{ colors: string }>` justify-content: center; & > div { - max-width: 350px; - h2 { word-break: break-word; hyphens: auto; diff --git a/src/components/Hero/HeroPrimarySection.tsx b/src/components/Hero/HeroPrimarySection.tsx index 59a2fe6..8683993 100644 --- a/src/components/Hero/HeroPrimarySection.tsx +++ b/src/components/Hero/HeroPrimarySection.tsx @@ -9,7 +9,6 @@ interface HeroPrimarySectionProps { const Section = styled.section` margin: 10vh auto 0; - max-width: 800px; text-align: center; line-height: 1.5rem; @@ -18,7 +17,6 @@ const Section = styled.section` } p { - max-width: 400px; margin: 1em auto; font-weight: 200; } diff --git a/src/components/NavbarChildLink.tsx b/src/components/NavbarChildLink.tsx index 785b04e..bc745bf 100644 --- a/src/components/NavbarChildLink.tsx +++ b/src/components/NavbarChildLink.tsx @@ -1,7 +1,8 @@ import React from "react"; import styled from "styled-components"; +import colors from "@theme/colors"; +import breakpoints from "@theme/breakpoints"; import Anchor from "./Anchor"; -import { colors } from "@theme/colors"; interface NavbarChildLinkProps { to: string; @@ -14,14 +15,14 @@ const StyledLink = styled(Anchor)` padding-right: 4rem; font-weight: 400; - @media screen and (max-width: 1200px) { + @media screen and (max-width: ${breakpoints.medium}) { border-bottom: 1px dotted ${colors.lightBlue}; margin-left: 2rem; padding-left: 0; } &:hover { - @media screen and (min-width: 1200px) { + @media screen and (min-width: ${breakpoints.medium}) { background-color: ${colors.lightBlue}; } } diff --git a/src/components/NavbarDropdownLink.tsx b/src/components/NavbarDropdownLink.tsx index 651bd24..219f26f 100644 --- a/src/components/NavbarDropdownLink.tsx +++ b/src/components/NavbarDropdownLink.tsx @@ -2,7 +2,8 @@ import React, { useState } from "react"; import styled from "styled-components"; import DropDownBox from "./DropDownBox"; import Anchor from "./Anchor"; -import { colors } from "@theme/colors"; +import colors from "@theme/colors"; +import breakpoints from "@theme/breakpoints"; const Container = styled.div` position: relative; @@ -28,7 +29,7 @@ const StyledLink = styled(Anchor)` letter-spacing: 2px; padding: 20px 0; - @media screen and (max-width: 1200px) { + @media screen and (max-width: ${breakpoints.medium}) { border-bottom: 1px solid ${colors.lightBlue}; } `; diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index 3cbac60..f944e3d 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -1,6 +1,7 @@ import React from "react"; import styled from "styled-components"; -import { colors } from "@theme/colors"; +import colors from "@theme/colors"; +import breakpoints from "@theme/breakpoints"; import Icon, { IconType } from "./Icon"; import NavbarDropdownLink from "./NavbarDropdownLink"; import NavbarChildLink from "./NavbarChildLink"; @@ -11,7 +12,7 @@ const renderNavigationDesktopItems = () => { Toiminta Fuksi - Kunnianosoitukset + Kunnianosoitukset Arkisto @@ -42,11 +43,11 @@ const Nav = styled.div` text-decoration: none; } - @media screen and (min-width: 600px) and (max-width: 1200px) { + @media screen and (min-width: ${breakpoints.mobile}) and (max-width: ${breakpoints.medium}) { justify-content: flex-end; } - @media screen and (max-width: 600px) { + @media screen and (max-width: ${breakpoints.mobile}) { justify-content: center; margin-left: 0; } @@ -58,7 +59,7 @@ const DesktopContainer = styled.div` flex-flow: row nowrap; justify-content: space-between; - @media screen and (max-width: 1200px) { + @media screen and (max-width: ${breakpoints.medium}) { display: none; } `; @@ -82,11 +83,11 @@ const MobileMenu = styled.div` display: flex; } - @media screen and (min-width: 1200px) { + @media screen and (min-width: ${breakpoints.medium}) { display: none; } - @media screen and (max-width: 600px) { + @media screen and (max-width: ${breakpoints.mobile}) { margin-left: 3rem; } diff --git a/src/components/Sections/CardSection.tsx b/src/components/Sections/CardSection.tsx index ac32fc7..e89b202 100644 --- a/src/components/Sections/CardSection.tsx +++ b/src/components/Sections/CardSection.tsx @@ -1,5 +1,6 @@ import styled from "styled-components"; -import { colors } from "@theme/colors"; +import colors from "@theme/colors"; +import breakpoints from "@theme/breakpoints"; const CardSection = styled.section` @@ -11,7 +12,7 @@ const CardSection = styled.section` flex-flow: row wrap; padding: 2rem 1rem; - @media screen and (max-width: 800px) { + @media screen and (max-width: ${breakpoints.mobile}) { flex-flow: column nowrap; } @@ -22,12 +23,12 @@ const CardSection = styled.section` & > * { width: calc(25% - 2rem); - @media screen and (min-width: 800px) and (max-width: 1200px) { + @media screen and (min-width: ${breakpoints.mobile}) and (max-width: ${breakpoints.medium}) { width: calc(50% - 2rem); margin-bottom: 2rem; } - @media screen and (max-width: 800px) { + @media screen and (max-width: ${breakpoints.mobile}) { width: 100%; margin: 0 0 3rem 0; } diff --git a/src/components/Sections/TextSection.tsx b/src/components/Sections/TextSection.tsx index c2146d2..c0b9ec6 100644 --- a/src/components/Sections/TextSection.tsx +++ b/src/components/Sections/TextSection.tsx @@ -1,6 +1,7 @@ import React from "react"; import styled from "styled-components"; -import { colors } from "@theme/colors"; +import colors from "@theme/colors"; +import breakpoints from "@theme/breakpoints"; const StyledSection = styled.section` display: grid; @@ -15,7 +16,7 @@ const StyledSection = styled.section` "title title title" "leftaside content rightaside"; - @media screen and (max-width: 800px) { + @media screen and (max-width: ${breakpoints.mobile}) { grid-template-columns: 1fr; grid-template-rows: 1fr auto auto auto; grid-template-areas: @@ -42,8 +43,6 @@ const StyledSection = styled.section` & > div, p { grid-area: content; - max-width: 1000px; - } & > aside { @@ -51,7 +50,7 @@ const StyledSection = styled.section` flex-direction: column; justify-content: space-between; - @media screen and (max-width: 800px) { + @media screen and (max-width: ${breakpoints.mobile}) { align-items: center; max-width: unset; margin-left: unset; @@ -66,14 +65,14 @@ const StyledSection = styled.section` & > aside:first-of-type { grid-area: rightaside; padding-left: 24px; - @media screen and (max-width: 800px) { + @media screen and (max-width: ${breakpoints.mobile}) { padding-left: 0; } } & > aside:nth-of-type(2) { grid-area: leftaside; padding-right: 24px; - @media screen and (max-width: 800px) { + @media screen and (max-width: ${breakpoints.mobile}) { padding-left: 0; } } diff --git a/src/pages/admin/AdminCommonPage.tsx b/src/pages/admin/AdminCommonPage.tsx index f9f98f5..b1e396c 100644 --- a/src/pages/admin/AdminCommonPage.tsx +++ b/src/pages/admin/AdminCommonPage.tsx @@ -1,7 +1,8 @@ import React from "react"; import styled from "styled-components"; import { Redirect } from "react-router-dom"; -import { colors }from "@theme/colors"; +import colors from "@theme/colors"; +import breakpoints from "@theme/breakpoints"; import AdminHeader from "@components/AdminHeader"; import AdminSidebar from "@components/AdminSidebar"; import { isAuthenticated } from "@utils/auth"; @@ -15,7 +16,7 @@ const Main = styled.main` align-items: flex-start; flex: 1; - @media screen and (max-width: 800px) { + @media screen and (max-width: ${breakpoints.mobile}) { flex-flow: column nowrap; & > nav { diff --git a/src/theme/breakpoints.ts b/src/theme/breakpoints.ts index f9ceadc..f129351 100644 --- a/src/theme/breakpoints.ts +++ b/src/theme/breakpoints.ts @@ -1,11 +1,14 @@ -const breakpointsNumber = { - mobile: 800 +type Keys = "mobile" | "medium" | "large" | "xlarge"; + +const breakpointsNumber: Record = { + mobile: 800, + medium: 1200, + large: 1920, + xlarge: 2560 } -const breakpoints = {}; +const breakpoints = Object.fromEntries( + Object.entries(breakpointsNumber).map(([k, v]) => [k, `${v}px`]) +); -Object.keys(breakpointsNumber).forEach((key) => { - breakpoints[key] = `${breakpointsNumber[key] }px` -}); - -export default breakpoints; \ No newline at end of file +export default breakpoints as Record; \ No newline at end of file diff --git a/src/theme/colors.ts b/src/theme/colors.ts index f34cf25..70ba0a4 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -54,3 +54,5 @@ export const colorToClass = (color: Colors): string => color ? `color-div__${col export const bgColorToClass = (color: Colors): string => color ? `color-div__background_${color}` : undefined; export const hoverColorToClass = (color: Colors): string => color ? `color-div__${color}Hoverable` : undefined; export const bgHoverColorToClass = (color: Colors): string => color ? `color-div__background_${color}Hoverable` : undefined; + +export default colors; \ No newline at end of file diff --git a/src/views/EventPage/EventPageView.tsx b/src/views/EventPage/EventPageView.tsx index 73e6c56..3795c0c 100644 --- a/src/views/EventPage/EventPageView.tsx +++ b/src/views/EventPage/EventPageView.tsx @@ -13,7 +13,6 @@ interface EventPageViewProps { const StyledSection = styled.section` margin: auto; - max-width: 1000px; align-items: center; & > h1 { diff --git a/src/views/FrontPage/FrontPageView.tsx b/src/views/FrontPage/FrontPageView.tsx index ca9f6d4..7a44d5d 100644 --- a/src/views/FrontPage/FrontPageView.tsx +++ b/src/views/FrontPage/FrontPageView.tsx @@ -43,7 +43,6 @@ const SponsorReel = styled.div` } img{ width: 200px; - heigth: 200px; object-fit: cover; } a { diff --git a/src/views/StudiesPage/StudiesPageView.tsx b/src/views/StudiesPage/StudiesPageView.tsx index bd9f33b..c9c8c35 100644 --- a/src/views/StudiesPage/StudiesPageView.tsx +++ b/src/views/StudiesPage/StudiesPageView.tsx @@ -3,6 +3,7 @@ import styled from "styled-components"; import { CTASection, TextSection, PageLink, Accordion } from "@components/index"; import StudiesPageHero from "./StudiesPageHero"; +// TODO: Responsive const TestimonialImage = styled.img` max-width: 500px; max-height: 500px; diff --git a/src/views/admin/AdminCreateCommon.tsx b/src/views/admin/AdminCreateCommon.tsx index 03dd22f..9d593d7 100644 --- a/src/views/admin/AdminCreateCommon.tsx +++ b/src/views/admin/AdminCreateCommon.tsx @@ -10,10 +10,6 @@ import { JobAd } from "@models/JobAd"; const Common = styled.div` width: 100%; - .rjsf { - max-width: 600px; - } - fieldset { border: none; padding: 0; diff --git a/tsconfig.json b/tsconfig.json index e4c1b47..f70ad2a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -11,7 +11,7 @@ "module": "commonjs", "target": "es5", "jsx": "react", - "lib": ["es5", "es6", "es7", "dom"], + "lib": ["dom", "DOM.Iterable", "ESNext"], "typeRoots": [ "./types", ],