From b4c5c8f8088aafe29f4558f78a392db8743e2126 Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Sat, 10 Oct 2020 20:07:24 +0300 Subject: [PATCH] CardSections --- src/components/PageLink/PageLink.tsx | 6 ++++- src/components/Sections/CardSection.tsx | 25 +++++++++--------- src/components/Sections/FullWidthSection.tsx | 3 +-- src/components/Sections/PageSection.tsx | 16 ------------ src/components/index.tsx | 2 +- src/views/ActualPage/EventCalendar.tsx | 27 +++++++++++--------- src/views/ActualPage/News.tsx | 26 ++++++++++--------- src/views/FrontPage/FrontPageView.tsx | 8 +++--- 8 files changed, 52 insertions(+), 61 deletions(-) delete mode 100644 src/components/Sections/PageSection.tsx diff --git a/src/components/PageLink/PageLink.tsx b/src/components/PageLink/PageLink.tsx index ca69416..3a445fb 100644 --- a/src/components/PageLink/PageLink.tsx +++ b/src/components/PageLink/PageLink.tsx @@ -29,10 +29,14 @@ const StyledPageLink = styled.div` a { display: block; - color: ${colors.darkBlue}; margin-left: 1rem; text-decoration: none; font-weight: normal; + + color: ${colors.blue1}; + &:hover { + color: ${colors.darkBlue}; + } } `; diff --git a/src/components/Sections/CardSection.tsx b/src/components/Sections/CardSection.tsx index ee50e4c..ac32fc7 100644 --- a/src/components/Sections/CardSection.tsx +++ b/src/components/Sections/CardSection.tsx @@ -1,23 +1,22 @@ import styled from "styled-components"; -import PageSection from "./PageSection"; import { colors } from "@theme/colors"; -const CardSection = styled(PageSection)` +const CardSection = styled.section` + + h6 { + color: ${colors.orange1}; + } + + display: flex; + flex-flow: row wrap; + padding: 2rem 1rem; + @media screen and (max-width: 800px) { flex-flow: column nowrap; } - color: ${colors.black}; - background-color: ${colors.white}; - a { - color: ${colors.blue1}; - &:hover { - color: ${colors.darkBlue}; - } - } - - h6 { - color: ${colors.orange1}; + & > aside { + margin-left: auto; } & > * { diff --git a/src/components/Sections/FullWidthSection.tsx b/src/components/Sections/FullWidthSection.tsx index 52fa4eb..effd10a 100644 --- a/src/components/Sections/FullWidthSection.tsx +++ b/src/components/Sections/FullWidthSection.tsx @@ -1,8 +1,7 @@ import React from "react"; import styled from "styled-components"; -import { PageSection } from "@components/index"; -const StyledSection = styled(PageSection)` +const StyledSection = styled.section` display: grid; padding: 24px; diff --git a/src/components/Sections/PageSection.tsx b/src/components/Sections/PageSection.tsx deleted file mode 100644 index 0b6093d..0000000 --- a/src/components/Sections/PageSection.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from "react"; -import styled from "styled-components"; - -const Section = styled.section` - display: flex; - flex-flow: row wrap; - justify-content: space-between; - position: relative; - padding: ${(p) => p.fullSize ? "0" : "2rem 1rem 2rem"}; -`; - -const PageSection: React.FC = (props) => ( -
-); - -export default PageSection; diff --git a/src/components/index.tsx b/src/components/index.tsx index 190dc7f..2bf19f6 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -2,10 +2,10 @@ export { default as Card } from "./Card"; export { default as PageLink } from "./PageLink"; export { default as Button } from "./Button"; export { default as TextAnchor } from "./TextAnchor"; -export { default as PageSection } from "./Sections/PageSection"; export { default as Divider } from "./Divider"; export { default as CardSection } from "./Sections/CardSection"; export { default as CTASection } from "./Sections/CTASection"; export { default as TextSection } from "./Sections/TextSection"; +export { default as FullWidthSection } from "./Sections/FullWidthSection"; export { default as InfoBox } from "./InfoBox"; export { default as Accordion } from "./Accordion"; diff --git a/src/views/ActualPage/EventCalendar.tsx b/src/views/ActualPage/EventCalendar.tsx index 74bc230..b6da06c 100644 --- a/src/views/ActualPage/EventCalendar.tsx +++ b/src/views/ActualPage/EventCalendar.tsx @@ -3,7 +3,7 @@ import { Event } from "@models/Event"; import Button from "@components/Button"; import FilterContainer from "./FilterContainer"; -import { CardSection, Card } from "@components/index"; +import { CardSection, Card, FullWidthSection } from "@components/index"; interface EventCalendarProps { events: Event[]; @@ -14,19 +14,22 @@ const EventCalendar: React.FC = ({events}) => { const [numberShown, setNumberShown] = useState(8); const filteredEvents = events.slice(0, numberShown); return ( - <> - {/* - - + - + - */} -

Tapahtumat

+ + + + {filteredEvents.map(e => ( = ({events}) => { )} - + ) } diff --git a/src/views/ActualPage/News.tsx b/src/views/ActualPage/News.tsx index e7d1e8b..2f73e44 100644 --- a/src/views/ActualPage/News.tsx +++ b/src/views/ActualPage/News.tsx @@ -3,7 +3,7 @@ import { Post } from "@models/Feed"; import Button from "@components/Button"; import FilterContainer from "./FilterContainer"; -import { CardSection, Card } from "@components/index"; +import { CardSection, Card, FullWidthSection } from "@components/index"; interface NewsProps { feed: Post[]; @@ -14,19 +14,21 @@ const News: React.FC = ({feed}) => { const [numberShown, setNumberShown] = useState(8); const filteredFeed = feed.slice(0, numberShown); return ( - <> - {/* - - + - + - */} -

Uutiset

+ + + {filteredFeed.map(post => ( = ({feed}) => { )} - + ) } diff --git a/src/views/FrontPage/FrontPageView.tsx b/src/views/FrontPage/FrontPageView.tsx index 281ceb2..f0cab20 100644 --- a/src/views/FrontPage/FrontPageView.tsx +++ b/src/views/FrontPage/FrontPageView.tsx @@ -54,11 +54,11 @@ const FrontPageView: React.FC = ({ events, feed }) => ( buttonOnClick={() => {}} /> ))} -
+
+ @@ -81,14 +81,14 @@ const FrontPageView: React.FC = ({ events, feed }) => ( buttonOnClick={() => {}} /> ))} -
+
+