From 8e883d7eacf8ef9e680ab008acf2c1470de42d38 Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Thu, 8 Oct 2020 23:33:51 +0300 Subject: [PATCH 01/28] All sorts of BS --- src/components/Anchor.tsx | 25 +++++++ src/components/Anchor/Anchor.tsx | 29 -------- src/components/Anchor/index.ts | 2 - src/components/AsideSection/AsideSection.scss | 10 --- src/components/AsideSection/AsideSection.tsx | 46 +++++++------ src/components/Checkbox/Checkbox.tsx | 5 +- src/components/ColorDiv/ColorDiv.scss | 66 ------------------- src/components/ColorDiv/ColorDiv.tsx | 50 +++++++------- src/components/Hero/HeroAsideItem.tsx | 56 ++++++++++++++++ .../Hero/HeroAsideItem/HeroAsideItem.scss | 36 ---------- .../Hero/HeroAsideItem/HeroAsideItem.tsx | 21 ------ src/components/Hero/HeroAsideSection.tsx | 53 +++++++++++++++ .../HeroAsideSection/HeroAsideSection.scss | 43 ------------ .../HeroAsideSection/HeroAsideSection.tsx | 22 ------- .../{HeroMainSection => }/HeroMainSection.tsx | 0 .../HeroSecondarySection.tsx | 2 +- src/components/MainSection.tsx | 30 +++++++++ src/components/MainSection/MainSection.scss | 21 ------ src/components/MainSection/MainSection.tsx | 25 ------- src/components/MainSection/index.ts | 2 - src/components/PageSection/PageSection.scss | 40 ----------- src/components/PageSection/PageSection.tsx | 60 ++++++++++------- src/components/Ribbon/Ribbon.scss | 24 ------- src/components/Ribbon/Ribbon.tsx | 41 ++++++++---- src/components/TextAnchor.tsx | 30 +++++++++ src/components/TextAnchor/TextAnchor.scss | 18 ----- src/components/TextAnchor/TextAnchor.tsx | 49 -------------- src/components/TextAnchor/index.ts | 2 - src/theme/colors.ts | 32 +++++++-- src/views/ActualPage/ActualPageView.tsx | 20 +++--- src/views/ContactsPage/ContactsPageView.tsx | 2 +- src/views/CorporatePage/CorporatePageView.tsx | 18 ++--- src/views/EventPage/EventPageView.tsx | 32 +++++---- src/views/FreshmenPage/FreshmenPageView.tsx | 24 +++---- src/views/FrontPage/FrontPageView.tsx | 8 +-- src/views/GuildPage/GuildPageView.tsx | 8 +-- src/views/StudiesPage/StudiesPageView.tsx | 26 ++++---- 37 files changed, 414 insertions(+), 564 deletions(-) create mode 100644 src/components/Anchor.tsx delete mode 100644 src/components/Anchor/Anchor.tsx delete mode 100644 src/components/Anchor/index.ts delete mode 100644 src/components/AsideSection/AsideSection.scss delete mode 100644 src/components/ColorDiv/ColorDiv.scss create mode 100644 src/components/Hero/HeroAsideItem.tsx delete mode 100644 src/components/Hero/HeroAsideItem/HeroAsideItem.scss delete mode 100644 src/components/Hero/HeroAsideItem/HeroAsideItem.tsx create mode 100644 src/components/Hero/HeroAsideSection.tsx delete mode 100644 src/components/Hero/HeroAsideSection/HeroAsideSection.scss delete mode 100644 src/components/Hero/HeroAsideSection/HeroAsideSection.tsx rename src/components/Hero/{HeroMainSection => }/HeroMainSection.tsx (100%) rename src/components/Hero/{HeroSecondarySection => }/HeroSecondarySection.tsx (96%) create mode 100644 src/components/MainSection.tsx delete mode 100644 src/components/MainSection/MainSection.scss delete mode 100644 src/components/MainSection/MainSection.tsx delete mode 100644 src/components/MainSection/index.ts delete mode 100644 src/components/PageSection/PageSection.scss delete mode 100644 src/components/Ribbon/Ribbon.scss create mode 100644 src/components/TextAnchor.tsx delete mode 100644 src/components/TextAnchor/TextAnchor.scss delete mode 100644 src/components/TextAnchor/TextAnchor.tsx delete mode 100644 src/components/TextAnchor/index.ts diff --git a/src/components/Anchor.tsx b/src/components/Anchor.tsx new file mode 100644 index 0000000..e9ef6b4 --- /dev/null +++ b/src/components/Anchor.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import { HashLink } from "react-router-hash-link"; + +interface AnchorProps extends React.HTMLAttributes { + to: string; +} + +const Anchor: React.FC = ({ to, ...props }) => { + if (to.startsWith("/")) { + return ( + + ); + } else if (to.startsWith("#")) { + return ( + + ); + } + else { + return ( + + ); + } +} +export default Anchor; diff --git a/src/components/Anchor/Anchor.tsx b/src/components/Anchor/Anchor.tsx deleted file mode 100644 index 8e86b53..0000000 --- a/src/components/Anchor/Anchor.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from "react"; -import { Link } from "react-router-dom"; -import { HashLink } from "react-router-hash-link"; - -export interface AnchorProps extends React.HTMLAttributes { - to: string; -} - -class Anchor extends React.Component { - render() { - const { children, to, ...props } = this.props; - - if (to.startsWith("/")) { - return ( - {children} - ); - } else if (to.startsWith("#")) { - return ( - {children} - ); - } - else { - return ( - {children} - ); - } - } -} -export default Anchor; diff --git a/src/components/Anchor/index.ts b/src/components/Anchor/index.ts deleted file mode 100644 index dcc717e..0000000 --- a/src/components/Anchor/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import Anchor from "./Anchor"; -export default Anchor; diff --git a/src/components/AsideSection/AsideSection.scss b/src/components/AsideSection/AsideSection.scss deleted file mode 100644 index 80f731a..0000000 --- a/src/components/AsideSection/AsideSection.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import "../../assets/scss/globals"; - - -.aside-section { - display: flex; - flex: 1; - flex-flow: column; - justify-content: space-between; - padding: 3rem 4rem; -} diff --git a/src/components/AsideSection/AsideSection.tsx b/src/components/AsideSection/AsideSection.tsx index 9dce772..035a961 100644 --- a/src/components/AsideSection/AsideSection.tsx +++ b/src/components/AsideSection/AsideSection.tsx @@ -1,25 +1,33 @@ import React from "react"; -import "./AsideSection.scss"; -import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv"; +import styled from "styled-components"; +import { ColorDivProps } from "../ColorDiv/ColorDiv"; +import { ColorMapper } from "@theme/colors"; -export interface AsideSectionProps { - className?: string; -} -export interface AsideSectionState { } +type AsideSectionProps = ColorDivProps; -class AsideSection extends React.Component { - render() { - const { children, className, ...props } = this.props; - const classNames = [ - "aside-section", - ]; - if (className) classNames.push(className); - return ( - - {children} - - ); +const Section = styled.div` + display: flex; + flex: 1; + flex-flow: column; + justify-content: space-between; + padding: 3rem 4rem; + + color: ${(p) => p.textColor}; + background-color: ${(p) => p.backgroundColor}; + &:hover { + color: ${(p) => p.hoverColor}; + background-color: ${(p) => p.hoverBackgroundColor}; } -} +`; + +const AsideSection: React.FC = ({ textColor, backgroundColor, hoverColor, backgroundHoverColor, ...props }) => ( +
+); export default AsideSection; diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 451e962..d19589c 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -1,5 +1,6 @@ import React from "react"; import styled from "styled-components"; +import { colors } from "@theme/colors"; const Container = styled.label` display: block; @@ -31,7 +32,7 @@ const CustomCBoxElement = styled.span<{checked?: boolean}>` left: 0; height: 1em; width: 1em; - background-color: ${(props) => props.checked ? "#57b2df" : "#efece4"}; /* blue1 or grey2 */ + background-color: ${(props) => props.checked ? colors.blue1 : colors.grey2}; &:focus &:before { transition: box-shadow 150ms ease; @@ -43,7 +44,7 @@ const CustomCBoxElement = styled.span<{checked?: boolean}>` left: -4px; right: -4px; border-radius: 6px; - border: 2px solid color(blue); + border: 2px solid ${colors.blue1}; } `; diff --git a/src/components/ColorDiv/ColorDiv.scss b/src/components/ColorDiv/ColorDiv.scss deleted file mode 100644 index 4b4ee2d..0000000 --- a/src/components/ColorDiv/ColorDiv.scss +++ /dev/null @@ -1,66 +0,0 @@ -@import "../../assets/scss/globals"; - -.color-div { - @mixin hoverableColor($colorName) { - &__#{$colorName} { - color: color($colorName); - } - - &__#{$colorName}Hoverable { - &:hover, - &:active { - color: hover($colorName); - } - } - } - - @mixin backgroundColor($colorName) { - &__background_#{$colorName} { - background-color: color($colorName); - } - - &__background_#{$colorName}Hoverable { - &:hover, - &:active { - background-color: hover($colorName); - } - } - } - - @mixin backgroundAndHoverableColor($colorName) { - @include hoverableColor($colorName); - @include backgroundColor($colorName); - } - - @include backgroundAndHoverableColor(dark-blue); - @include backgroundAndHoverableColor(light-blue); - @include backgroundAndHoverableColor(white1); - @include backgroundAndHoverableColor(black1); - @include backgroundAndHoverableColor(grey1); - @include backgroundAndHoverableColor(grey2); - @include backgroundAndHoverableColor(orange1); - @include backgroundAndHoverableColor(orange2); - @include backgroundAndHoverableColor(blue1); - @include backgroundAndHoverableColor(light-turquoise); - @include backgroundAndHoverableColor(green1); - @include backgroundAndHoverableColor(sand); - - &__inherit { - color: inherit; - } - - &__transparent { - color: transparent; - } - - &__inheritHoverable { - &:hover, - &:active { - color: inherit; - } - } - - &__background_transparent { - background-color: transparent; - } -} \ No newline at end of file diff --git a/src/components/ColorDiv/ColorDiv.tsx b/src/components/ColorDiv/ColorDiv.tsx index 05a9b1c..754495b 100644 --- a/src/components/ColorDiv/ColorDiv.tsx +++ b/src/components/ColorDiv/ColorDiv.tsx @@ -1,34 +1,38 @@ import React from "react"; -import "./ColorDiv.scss"; -import { Colors, colorToClass, bgColorToClass, hoverColorToClass, bgHoverColorToClass } from "@theme/colors"; -import classNames from "classnames"; +import styled from "styled-components" +import { Colors, ColorMapper } from "@theme/colors"; -export interface ColorDivProps extends React.HTMLAttributes { +interface ColorsProps { + textColor?: string; + backgroundColor?: string; + hoverColor?: string; + hoverBackgroundColor?: string; +} + +export type ColorDivProps = React.HTMLAttributes & { textColor?: Colors; backgroundColor?: Colors; hoverColor?: Colors; backgroundHoverColor?: Colors; } -export interface ColorDivState { } - -class ColorDiv extends React.Component { - render() { - const { children, className, textColor, backgroundColor, hoverColor, backgroundHoverColor, ...props } = this.props; - const classes = classNames( - className, - colorToClass(textColor), - bgColorToClass(backgroundColor), - hoverColorToClass(hoverColor), - bgHoverColorToClass(backgroundHoverColor) - ); - - return ( -
- {children} -
- ); +const Div = styled.div` + color: ${(p) => p.textColor}; + background-color: ${(p) => p.backgroundColor}; + &:hover { + color: ${(p) => p.hoverColor}; + background-color: ${(p) => p.hoverBackgroundColor}; } -} +`; + +const ColorDiv: React.FC = ({ textColor, backgroundColor, hoverColor, backgroundHoverColor, ...props }) => ( +
+); export default ColorDiv; diff --git a/src/components/Hero/HeroAsideItem.tsx b/src/components/Hero/HeroAsideItem.tsx new file mode 100644 index 0000000..45189bb --- /dev/null +++ b/src/components/Hero/HeroAsideItem.tsx @@ -0,0 +1,56 @@ +import React from "react"; +import styled from "styled-components"; +import Anchor from "../Anchor"; +import { colors } from "@theme/colors"; + +interface HeroAsideItemProps { + title: string; + linkText: string; + linkHref: string; +} + +const Section = styled.div` + max-width: 300px; + line-height: 16px; + margin-bottom: 1rem; + + @media screen and (max-width: 600px - 1px) { + p, + a { + font-size: 16px !important; + line-height: 20px; + } + } + + h2 { + text-transform: uppercase; + letter-spacing: 3px; + line-height: 20px; + } + + p { + font-size: 14px; + line-height: 20px; + } + + h6 { + color: ${colors.blue1}; + font-weight: 600; + } + + h6:hover { + color: ${colors.white}; + } +`; + +const HeroAsideItem: React.FC = ({ title, linkText, linkHref, children }) => ( +
+

{title}

+

{children}

+ +
{linkText} ›
+ +
+) + +export default HeroAsideItem; diff --git a/src/components/Hero/HeroAsideItem/HeroAsideItem.scss b/src/components/Hero/HeroAsideItem/HeroAsideItem.scss deleted file mode 100644 index 4b4b047..0000000 --- a/src/components/Hero/HeroAsideItem/HeroAsideItem.scss +++ /dev/null @@ -1,36 +0,0 @@ -@import "../../../assets/scss/globals"; - - -.hero-aside-item { - max-width: 300px; - line-height: 16px; - margin-bottom: 1rem; - - @media screen and (max-width: 600px - 1px) { - p, - a { - font-size: 16px !important; - line-height: 20px; - } - } - - h2 { - text-transform: uppercase; - letter-spacing: 3px; - line-height: 20px; - } - - p { - font-size: 14px; - line-height: 20px; - } - - h6 { - color: color(blue1); - font-weight: 600; - } - - h6:hover { - color: color(white1); - } -} diff --git a/src/components/Hero/HeroAsideItem/HeroAsideItem.tsx b/src/components/Hero/HeroAsideItem/HeroAsideItem.tsx deleted file mode 100644 index a1143a9..0000000 --- a/src/components/Hero/HeroAsideItem/HeroAsideItem.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from "react"; -import "./HeroAsideItem.scss"; -import Anchor from "../../Anchor"; - -interface HeroAsideItemProps { - title: string; - linkText: string; - linkHref: string; -} - -const HeroAsideItem: React.FC = ({ title, linkText, linkHref, children }) => ( -
-

{title}

-

{children}

- -
{linkText} ›
- -
-) - -export default HeroAsideItem; diff --git a/src/components/Hero/HeroAsideSection.tsx b/src/components/Hero/HeroAsideSection.tsx new file mode 100644 index 0000000..1081bb6 --- /dev/null +++ b/src/components/Hero/HeroAsideSection.tsx @@ -0,0 +1,53 @@ +import React from "react"; +import styled from "styled-components"; +import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv"; +import { colors } from "@theme/colors"; + +const Section = styled(ColorDiv)` + display: flex; + flex-flow: column nowrap; + align-items: flex-start; + justify-content: center; + flex: 4; + + @media screen and (max-width: 800px - 1px) { + align-items: center; + } + + text-align: left; + padding: 3rem 1rem 2rem; + + &.dark-blue { + background-color: ${colors.darkBlue}; + + h2 { + color: ${colors.lightBlue}; + } + + p { + font-weight: 100; + color: ${colors.white}; + } + } + + &.light-turquoise { + background-color: ${colors.lightTurquoise}; + + h2, + p { + color: ${colors.darkBlue}; + } + } + + &.light-blue { + background-color: ${colors.lightBlue}; + } +`; + +const HeroAsideSection: React.FC = (props) => { + return ( +
+ ); +} + +export default HeroAsideSection; diff --git a/src/components/Hero/HeroAsideSection/HeroAsideSection.scss b/src/components/Hero/HeroAsideSection/HeroAsideSection.scss deleted file mode 100644 index c632179..0000000 --- a/src/components/Hero/HeroAsideSection/HeroAsideSection.scss +++ /dev/null @@ -1,43 +0,0 @@ -@import "../../../assets/scss/globals"; - - -.hero-aside-section { - display: flex; - flex-flow: column nowrap; - align-items: flex-start; - justify-content: center; - flex: 4; - - @media screen and (max-width: 800px - 1px) { - align-items: center; - } - - text-align: left; - padding: 3rem 1rem 2rem; - - &.dark-blue { - background-color: color(dark-blue); - - h2 { - color: color(light-blue); - } - - p { - font-weight: 100; - color: color(white1); - } - } - - &.light-turquoise { - background-color: color(light-turquoise); - - h2, - p { - color: color(dark-blue); - } - } - - &.light-blue { - background-color: color(light-blue); - } -} diff --git a/src/components/Hero/HeroAsideSection/HeroAsideSection.tsx b/src/components/Hero/HeroAsideSection/HeroAsideSection.tsx deleted file mode 100644 index 505a0db..0000000 --- a/src/components/Hero/HeroAsideSection/HeroAsideSection.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from "react"; -import "./HeroAsideSection.scss"; -import ColorDiv, { ColorDivProps } from "../../ColorDiv/ColorDiv"; - - -export interface HeroAsideSectionProps { } -export interface HeroAsideSectionState { } - -class HeroAsideSection extends React.Component { - render() { - const className = "hero-aside-section"; - return ( - -
- {this.props.children} -
- - ); - } -} - -export default HeroAsideSection; diff --git a/src/components/Hero/HeroMainSection/HeroMainSection.tsx b/src/components/Hero/HeroMainSection.tsx similarity index 100% rename from src/components/Hero/HeroMainSection/HeroMainSection.tsx rename to src/components/Hero/HeroMainSection.tsx diff --git a/src/components/Hero/HeroSecondarySection/HeroSecondarySection.tsx b/src/components/Hero/HeroSecondarySection.tsx similarity index 96% rename from src/components/Hero/HeroSecondarySection/HeroSecondarySection.tsx rename to src/components/Hero/HeroSecondarySection.tsx index a7234ee..ca170c4 100644 --- a/src/components/Hero/HeroSecondarySection/HeroSecondarySection.tsx +++ b/src/components/Hero/HeroSecondarySection.tsx @@ -1,6 +1,6 @@ import React from "react"; import styled from "styled-components"; -import ColorDiv from "../../ColorDiv/ColorDiv"; +import ColorDiv from "../ColorDiv/ColorDiv"; interface HeroSecondarySectionItemProps { note?: string; diff --git a/src/components/MainSection.tsx b/src/components/MainSection.tsx new file mode 100644 index 0000000..729717a --- /dev/null +++ b/src/components/MainSection.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import styled from "styled-components"; +import ColorDiv, { ColorDivProps } from "./ColorDiv/ColorDiv"; +import { colors } from "@theme/colors"; + +const Section = styled(ColorDiv)` + display: flex; + flex: 2; + flex-flow: column; + padding: 0 3rem; + + & > h3 { + margin: auto; + } + + & > h6 { + color: ${colors.orange1}; + } + + & > p { + margin-block-start: 0.5rem; + margin-block-end: 1rem; + } +`; + +const MainSection: React.FC = (props) => ( +
+); + +export default MainSection; diff --git a/src/components/MainSection/MainSection.scss b/src/components/MainSection/MainSection.scss deleted file mode 100644 index ed09469..0000000 --- a/src/components/MainSection/MainSection.scss +++ /dev/null @@ -1,21 +0,0 @@ -@import "../../assets/scss/globals"; - -.main-section { - display: flex; - flex: 2; - flex-flow: column; - padding: 0 3rem; - - & > h3 { - margin: auto; - } - - & > h6 { - color: color(orange1); - } - - & > p { - margin-block-start: 0.5rem; - margin-block-end: 1rem; - } -} diff --git a/src/components/MainSection/MainSection.tsx b/src/components/MainSection/MainSection.tsx deleted file mode 100644 index a96a12a..0000000 --- a/src/components/MainSection/MainSection.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from "react"; -import "./MainSection.scss"; -import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv"; -import classNames from "classnames"; - -export interface MainSectionProps { } -export interface MainSectionState { } - -class MainSection extends React.Component { - render() { - const { children, className, ...props } = this.props; - const classes = classNames( - "main-section", - className - ); - - return ( - - {children} - - ); - } -} - -export default MainSection; diff --git a/src/components/MainSection/index.ts b/src/components/MainSection/index.ts deleted file mode 100644 index 50928f2..0000000 --- a/src/components/MainSection/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import MainSection from "./MainSection"; -export default MainSection; diff --git a/src/components/PageSection/PageSection.scss b/src/components/PageSection/PageSection.scss deleted file mode 100644 index 99752d3..0000000 --- a/src/components/PageSection/PageSection.scss +++ /dev/null @@ -1,40 +0,0 @@ -@import "../../assets/scss/globals"; - - -.page-section { - display: flex; - flex-flow: row wrap; - justify-content: space-between; - position: relative; - - &.lander-hero { - @media screen and (min-width: 800px) { - min-height: 85vh; - } - } - - &.padded { - padding: 2rem 1rem 2rem; - } - - &:not(.card-section) { - @media screen and (max-width: 800px - 1px) { - flex-flow: column nowrap; - } - } - - &.center { - justify-content: center; - } - - &.bottom-border { - &::after { - content: ""; - position: absolute; - bottom: 0; - width: 98%; - left: 1%; - border-bottom: 1px solid rgba(color(blue1), 0.4); - } - } -} diff --git a/src/components/PageSection/PageSection.tsx b/src/components/PageSection/PageSection.tsx index e6e7c0b..baa9b6c 100644 --- a/src/components/PageSection/PageSection.tsx +++ b/src/components/PageSection/PageSection.tsx @@ -1,36 +1,50 @@ import React from "react"; -import "./PageSection.scss"; +import styled from "styled-components"; import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv"; +import { colors } from "@theme/colors"; -export interface PageSectionProps { +interface PageSectionProps { center?: boolean; bottomBorder?: boolean; cardSection?: boolean; // does section contain a grid of cards fullSize?: boolean; } -export interface PageSectionState { } -class PageSection extends React.Component { - render() { - const { children, className, center, bottomBorder, cardSection, fullSize, ...props } = this.props; - const centerClass = center ? "center" : ""; - const borderClass = bottomBorder ? "bottom-border" : ""; - const cardsClass = cardSection ? "card-section" : ""; - const nonPaddedClass = fullSize ? "" : "padded"; - const classNames = [ - "page-section", - centerClass, - borderClass, - cardsClass, - nonPaddedClass - ]; - if (className) classNames.push(className); - return ( - - {children} - - ); +const Section = styled(ColorDiv)` + display: flex; + flex-flow: row wrap; + justify-content: ${(p) => p.center ? "center" : "space-between"}; + position: relative; + padding: ${(p) => p.fullSize ? 0 : "2rem 1rem 2rem"}; + + .lander-hero { + @media screen and (min-width: 800px) { + min-height: 85vh; + } } + + ${(p) => p.cardSection ? "" : ` + @media screen and (max-width: 800px - 1px) { + flex-flow: column nowrap; + } + `} + + ${(p) => p.bottomBorder ? ` + &::after { + content: ""; + position: absolute; + bottom: 0; + width: 98%; + left: 1%; + border-bottom: 1px solid rgba(${colors.blue1}, 0.4); + } + ` : ""} +`; + +const PageSection: React.FC = (props) => { + return ( +
+ ); } export default PageSection; diff --git a/src/components/Ribbon/Ribbon.scss b/src/components/Ribbon/Ribbon.scss deleted file mode 100644 index f85144f..0000000 --- a/src/components/Ribbon/Ribbon.scss +++ /dev/null @@ -1,24 +0,0 @@ -@import "../../assets/scss/globals"; - - -.ribbon { - display: flex; - flex-flow: row nowrap; - align-items: flex-end; - text-align: center; - justify-content: center; - margin: auto; - - p { - font-size: 2rem; - font-weight: 100; - line-height: 30px; - margin-block-start: 0; - margin-block-end: 0; - } - - @media screen and (max-width: 600px - 1px) { - flex-flow: column nowrap; - align-items: center; - } -} diff --git a/src/components/Ribbon/Ribbon.tsx b/src/components/Ribbon/Ribbon.tsx index 240bb27..81f416b 100644 --- a/src/components/Ribbon/Ribbon.tsx +++ b/src/components/Ribbon/Ribbon.tsx @@ -1,17 +1,34 @@ -import React from "react"; -import "./Ribbon.scss"; +import styled from "styled-components"; -export interface RibbonProps {} -export interface RibbonState {} +const Ribbon = styled.div` + display: flex; + flex-flow: row nowrap; + align-items: flex-end; + text-align: center; + justify-content: center; + margin: auto; -class Ribbon extends React.Component { - render() { - return ( -
- {this.props.children} -
- ); + p { + font-size: 2rem; + font-weight: 100; + line-height: 30px; + margin-block-start: 0; + margin-block-end: 0; } -} + + a { + font-weight: 100; + text-decoration: none; + margin: 0 1rem; + font-size: 0.8rem; + text-transform: uppercase; + margin-top: 10px; + } + + @media screen and (max-width: 600px - 1px) { + flex-flow: column nowrap; + align-items: center; + } +`; export default Ribbon; diff --git a/src/components/TextAnchor.tsx b/src/components/TextAnchor.tsx new file mode 100644 index 0000000..99e608b --- /dev/null +++ b/src/components/TextAnchor.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import styled from "styled-components"; +import { Colors, colorToClass, hoverColorToClass } from "@theme/colors"; +import Anchor from "./Anchor"; +import classNames from "classnames"; + +const A = styled(Anchor)` + text-decoration: underline; + font-weight: 600; +`; + +interface TextAnchorProps { + to: string; + textColor?: Colors; + hoverColor?: Colors; +} + +const TextAnchor: React.FC = ({ children, to, textColor, hoverColor }) => { + const classes = classNames( + colorToClass(textColor), + hoverColorToClass(hoverColor), + ) + return ( + + {children} + + ); +} + +export default TextAnchor; diff --git a/src/components/TextAnchor/TextAnchor.scss b/src/components/TextAnchor/TextAnchor.scss deleted file mode 100644 index ad1d68d..0000000 --- a/src/components/TextAnchor/TextAnchor.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import "../../assets/scss/globals"; - -.text-anchor { - text-decoration: underline; - font-weight: 600; - - &__no-weight { - font-weight: 100; - } - - &__small { - text-decoration: none; - margin: 0 1rem; - font-size: 0.8rem; - text-transform: uppercase; - margin-top: 10px; - } -} diff --git a/src/components/TextAnchor/TextAnchor.tsx b/src/components/TextAnchor/TextAnchor.tsx deleted file mode 100644 index 193fab5..0000000 --- a/src/components/TextAnchor/TextAnchor.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from "react"; -import "./TextAnchor.scss"; -import { Colors, colorToClass, hoverColorToClass } from "@theme/colors"; -import Anchor from "../Anchor"; -import classNames from "classnames"; - - -export type TextSize = - "normal" | - "small" | - "large" | - "ribbon" | - "small-ribbon"; - - -const textSizeToClassName = new Map([ - ["normal", ""], - ["small", "text-anchor__small"], - ["large", "text-anchor__large"], - ["small-ribbon", "text-anchor__no-weight text-anchor__small"], - ["ribbon", "text-anchor__no-weight"], -]); - -export interface TextAnchorProps { - size?: TextSize; - to: string; - textColor?: Colors; - hoverColor?: Colors; -} -export interface TextAnchorState { } - -class TextAnchor extends React.Component { - render() { - const { children, size, to, textColor, hoverColor } = this.props; - const classes = classNames( - "text-anchor", - colorToClass(textColor), - hoverColorToClass(hoverColor), - textSizeToClassName.get(size) - ) - return ( - - {children} - - ); - } -} - -export default TextAnchor; diff --git a/src/components/TextAnchor/index.ts b/src/components/TextAnchor/index.ts deleted file mode 100644 index cf2f85a..0000000 --- a/src/components/TextAnchor/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import TextAnchor from "./TextAnchor"; -export default TextAnchor; diff --git a/src/theme/colors.ts b/src/theme/colors.ts index 5ccd7c8..e467134 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -14,11 +14,22 @@ export type Colors = "transparent" | "inherit"; - -export const colorToClass = (color: Colors): string => color ? `color-div__${color}` : undefined; -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 const ColorMapper = new Map([ + ["dark-blue", "#002d3a"], + ["light-blue", "#bfdbd9"], + ["white1", "#fff"], + ["black1", "#000"], + ["grey1", "#d4d0c7"], + ["grey2", "#efece4"], + ["orange1", "#d57a2d"], + ["orange2", "#dd934e"], + ["blue1", "#57b2df"], + ["light-turquoise", "#beddeb"], + ["green1", "#c0dcd9"], + ["sand", "#fdf9d7"], + ["transparent", "transparent"], + ["inherit", "inherit"] +]); export const colors = { darkBlue: "#002d3a", @@ -32,5 +43,12 @@ export const colors = { blue1: "#57b2df", lightTurquoise: "#beddeb", green1: "#c0dcd9", - sand: "#fdf9d7" -} \ No newline at end of file + sand: "#fdf9d7", + transparent: "transparent", + inherit: "inherit" +} + +export const colorToClass = (color: Colors): string => color ? `color-div__${color}` : undefined; +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; diff --git a/src/views/ActualPage/ActualPageView.tsx b/src/views/ActualPage/ActualPageView.tsx index a44f3b2..c4eef99 100644 --- a/src/views/ActualPage/ActualPageView.tsx +++ b/src/views/ActualPage/ActualPageView.tsx @@ -1,16 +1,16 @@ import React from "react"; import "./ActualPage.scss"; import PageSection from "@components/PageSection"; -import HeroMainSection from "@components/Hero/HeroMainSection/HeroMainSection"; -import HeroAsideSection from "@components/Hero/HeroAsideSection/HeroAsideSection"; -import HeroAsideItem from "@components/Hero/HeroAsideItem/HeroAsideItem"; +import HeroMainSection from "@components/Hero/HeroMainSection"; +import HeroAsideSection from "@components/Hero/HeroAsideSection"; +import HeroAsideItem from "@components/Hero/HeroAsideItem"; import AsideSection from "@components/AsideSection"; -import MainSection from "@components/MainSection/index"; -import Ribbon from "@components/Ribbon/index"; -import TextAnchor from "@components/TextAnchor/index"; -import Button from "@components/Button/index"; +import MainSection from "@components/MainSection"; +import Ribbon from "@components/Ribbon"; +import TextAnchor from "@components/TextAnchor"; +import Button from "@components/Button"; import Accordion from "@components/Accordion"; -import HeroSecondarySection, { HeroSecondarySectionItem } from "@components/Hero/HeroSecondarySection/HeroSecondarySection"; +import HeroSecondarySection, { HeroSecondarySectionItem } from "@components/Hero/HeroSecondarySection"; import { Event } from "@models/Event"; import { Post } from "@models/Feed"; import EventCalendar from "./EventCalendar"; @@ -93,7 +93,7 @@ const ActualPageView: React.FC = ({events, feed}) => {

Kuvia tapahtumista.

- +
Kuvagalleria ›
 @@ -106,7 +106,7 @@ const ActualPageView: React.FC = ({events, feed}) => {

Sinustako kilta-aktiivi?

- +
Tule mukaan kiltatoimintaan ›
 diff --git a/src/views/ContactsPage/ContactsPageView.tsx b/src/views/ContactsPage/ContactsPageView.tsx index daf1e3d..2c530cc 100644 --- a/src/views/ContactsPage/ContactsPageView.tsx +++ b/src/views/ContactsPage/ContactsPageView.tsx @@ -3,7 +3,7 @@ import "./ContactsPage.scss"; import PageSection from "@components/PageSection"; import { Occupation, Committee } from "@models/Contacts"; import CommitteeContainer from "@components/CommitteeContainer"; -import TextAnchor from "@components/TextAnchor/index"; +import TextAnchor from "@components/TextAnchor"; interface ContactsPageViewProps { contacts: Occupation[]; diff --git a/src/views/CorporatePage/CorporatePageView.tsx b/src/views/CorporatePage/CorporatePageView.tsx index cc55c92..1a88bdb 100644 --- a/src/views/CorporatePage/CorporatePageView.tsx +++ b/src/views/CorporatePage/CorporatePageView.tsx @@ -1,14 +1,14 @@ import React from "react"; import "./CorporatePage.scss"; import PageSection from "@components/PageSection"; -import HeroMainSection from "@components/Hero/HeroMainSection/HeroMainSection"; -import HeroAsideSection from "@components/Hero/HeroAsideSection/HeroAsideSection"; -import HeroAsideItem from "@components/Hero/HeroAsideItem/HeroAsideItem"; +import HeroMainSection from "@components/Hero/HeroMainSection"; +import HeroAsideSection from "@components/Hero/HeroAsideSection"; +import HeroAsideItem from "@components/Hero/HeroAsideItem"; import AsideSection from "@components/AsideSection"; -import MainSection from "@components/MainSection/index"; -import PageLink from "@components/PageLink/index"; -import Ribbon from "@components/Ribbon/index"; -import TextAnchor from "@components/TextAnchor/index"; +import MainSection from "@components/MainSection"; +import PageLink from "@components/PageLink"; +import Ribbon from "@components/Ribbon"; +import TextAnchor from "@components/TextAnchor"; const CorporatePageView: React.FC = () => ( @@ -39,7 +39,7 @@ const CorporatePageView: React.FC = () => (

Lyhyesti killasta ja sen toiminnasta

- +

Aalto-yliopiston Sähköinsinöörikillan jäsenistöstä valmistuvat maan parhaimmat matematiikkaa ja fysiikkaa soveltavat huippuosaajat. Killan tehtävänä on pitää jäsenistään huolta ja edistää aktiivisesti jäsenten ja toimijoiden jaksamista. Killassa opitaan myös tärkeitä työelämätaitoja ammattimaisen killan johtamisen kautta.

Yhteistyömahdollisuudet

@@ -83,7 +83,7 @@ const CorporatePageView: React.FC = () => (

Mainos Sössöön?

- +

Killan lehden mediakortin löydät täältä›

 diff --git a/src/views/EventPage/EventPageView.tsx b/src/views/EventPage/EventPageView.tsx index 0c7b439..cf6f558 100644 --- a/src/views/EventPage/EventPageView.tsx +++ b/src/views/EventPage/EventPageView.tsx @@ -17,27 +17,29 @@ const StyledSection = styled(MainSection)` max-width: 1000px; align-items: center; - h1 { + & > h1 { color: ${colors.darkBlue}; } - img { + & > div > img { + height: auto; width: 100%; - min-height: 100px; } - .event-desc { + & > p { color: ${colors.orange1}; } - - .event-signup-buttons { - display: flex; - flex-flow: row wrap; - justify-content: center; - } +`; + +const SignupButtons = styled.div` + display: flex; + flex-flow: row wrap; + justify-content: center; `; const Content = styled.div` + margin-top: 24px; + p { color: ${colors.black}; } @@ -79,15 +81,17 @@ const EventPageView: React.FC = ({ event }) => {

{event.title_fi}

-

+

{event.description_fi}

- {event.title_fi} +
+ {event.title_fi} +
{/* We may have multiple signup forms. Generate own Button for each one */} -
+ {event.signupForm.map(sf => (
+ ); diff --git a/src/views/FreshmenPage/FreshmenPageView.tsx b/src/views/FreshmenPage/FreshmenPageView.tsx index ea01504..1442ddd 100644 --- a/src/views/FreshmenPage/FreshmenPageView.tsx +++ b/src/views/FreshmenPage/FreshmenPageView.tsx @@ -1,15 +1,15 @@ import React from "react"; import "./FreshmenPage.scss"; -import PageSection from "@components/PageSection/index"; -import HeroMainSection from "@components/Hero/HeroMainSection/HeroMainSection"; -import HeroAsideSection from "@components/Hero/HeroAsideSection/HeroAsideSection"; -import HeroAsideItem from "@components/Hero/HeroAsideItem/HeroAsideItem"; -import AsideSection from "@components/AsideSection/index"; -import MainSection from "@components/MainSection/index"; -import PageLink from "@components/PageLink/index"; -import Ribbon from "@components/Ribbon/index"; -import TextAnchor from "@components/TextAnchor/index"; -import InfoBox from "@components/InfoBox/index"; +import PageSection from "@components/PageSection"; +import HeroMainSection from "@components/Hero/HeroMainSection"; +import HeroAsideSection from "@components/Hero/HeroAsideSection"; +import HeroAsideItem from "@components/Hero/HeroAsideItem"; +import AsideSection from "@components/AsideSection"; +import MainSection from "@components/MainSection"; +import PageLink from "@components/PageLink"; +import Ribbon from "@components/Ribbon"; +import TextAnchor from "@components/TextAnchor"; +import InfoBox from "@components/InfoBox"; import styled from "styled-components"; const KippariImage = styled.img` @@ -54,7 +54,7 @@ const FreshmenPageView: React.FC = () => (

Olet tehnyt upean valinnan ottamalla askeleen matkalla, jossa sinusta ensin kehkeytyy teekkari ja myöhemmin diplomi-insinööri. Sinusta on juuri tullut tekniikan ylioppilas ja fuksi. Hieno saavutus, jota tietysti on syytä juhlia, ja tähän juhlaan paras sijainti on ehdottomasti Otaniemi. Tervetuloa!

Ensi askeleina suosittelen, että liityt teille fukseille tehdyille Telegram-kanaville. Tästä pääset tiedotuskanavalle ja tästä tutustumaan fuksikavereihin ja ISOihisi.

- +
Matka nimeltä Teekkarius

Teekkarin matka on jokaiselle oman näköisensä. Kilta, ylioppilaskunta ja Otaniemen muut järjestöt tarjoavat varmasti jokaiselle omanlaista tekemistä ja harrastusta. Olet nyt osa Aalto-yliopiston Sähköinsinöörikiltaa ja me tulemme tukemaan sinua teekkariuden matkalla, jotta löydät juuri sinulle sopivat paikat, joissa vaikuttaa ja harrastaa. Jotta tämä onnistuisi, olemme esimerkiksi sijoittaneet sinut fuksiryhmään, johon tulet Orientaatioviikolla tutustumaan ja josta saat oman tukiryhmän uusiin seikkailuihin. Fuksiryhmääsi kuuluu myös muutama ISO. Heistä löydät lisää tietoa alempaa.

@@ -102,7 +102,7 @@ const FreshmenPageView: React.FC = () => (

Killassa tapahtuu kaikenlaista!

- +

Seuraa killan tapahtumia

 diff --git a/src/views/FrontPage/FrontPageView.tsx b/src/views/FrontPage/FrontPageView.tsx index 5ef7f0d..c0afdf6 100644 --- a/src/views/FrontPage/FrontPageView.tsx +++ b/src/views/FrontPage/FrontPageView.tsx @@ -7,12 +7,12 @@ import { Post } from "@models/Feed"; import PageSection from "@components/PageSection"; import PageLink from "@components/PageLink/PageLink"; -import HeroMainSection from "@components/Hero/HeroMainSection/HeroMainSection"; -import HeroAsideSection from "@components/Hero/HeroAsideSection/HeroAsideSection"; +import HeroMainSection from "@components/Hero/HeroMainSection"; +import HeroAsideSection from "@components/Hero/HeroAsideSection"; import Button from "@components/Button"; import Ribbon from "@components/Ribbon"; import SponsorReel from "@components/SponsorReel"; -import HeroAsideItem from "@components/Hero/HeroAsideItem/HeroAsideItem"; +import HeroAsideItem from "@components/Hero/HeroAsideItem"; import TextAnchor from "@components/TextAnchor"; interface FrontPageViewProps { @@ -89,7 +89,7 @@ const FrontPageView: React.FC = ({ events, feed }) => (

Sössöä vuodesta 1969.

- +

Lue opiskelijalehden viimeisin numero ›

 diff --git a/src/views/GuildPage/GuildPageView.tsx b/src/views/GuildPage/GuildPageView.tsx index bc64479..bba4dfb 100644 --- a/src/views/GuildPage/GuildPageView.tsx +++ b/src/views/GuildPage/GuildPageView.tsx @@ -4,9 +4,9 @@ import PageSection from "@components/PageSection"; import MainSection from "@components/MainSection"; import AsideSection from "@components/AsideSection"; import PageLink from "@components/PageLink"; -import HeroMainSection from "@components/Hero/HeroMainSection/HeroMainSection"; -import HeroAsideSection from "@components/Hero/HeroAsideSection/HeroAsideSection"; -import HeroAsideItem from "@components/Hero/HeroAsideItem/HeroAsideItem"; +import HeroMainSection from "@components/Hero/HeroMainSection"; +import HeroAsideSection from "@components/Hero/HeroAsideSection"; +import HeroAsideItem from "@components/Hero/HeroAsideItem"; import Ribbon from "@components/Ribbon"; import InfoBox from "@components/InfoBox"; import Accordion from "@components/Accordion"; @@ -132,7 +132,7 @@ const GuildPageView: React.FC = () => ( -

Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, toimikunnat ja jaokset.

+

Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, toimikunnat ja jaokset.
diff --git a/src/views/StudiesPage/StudiesPageView.tsx b/src/views/StudiesPage/StudiesPageView.tsx index 8f52937..6c319a1 100644 --- a/src/views/StudiesPage/StudiesPageView.tsx +++ b/src/views/StudiesPage/StudiesPageView.tsx @@ -1,14 +1,14 @@ import React from "react"; import "./StudiesPage.scss"; -import PageSection from "@components/PageSection/index"; -import HeroMainSection from "@components/Hero/HeroMainSection/HeroMainSection"; -import HeroAsideSection from "@components/Hero/HeroAsideSection/HeroAsideSection"; -import HeroAsideItem from "@components/Hero/HeroAsideItem/HeroAsideItem"; -import AsideSection from "@components/AsideSection/index"; -import MainSection from "@components/MainSection/index"; -import PageLink from "@components/PageLink/index"; -import Ribbon from "@components/Ribbon/index"; -import TextAnchor from "@components/TextAnchor/index"; +import PageSection from "@components/PageSection"; +import HeroMainSection from "@components/Hero/HeroMainSection"; +import HeroAsideSection from "@components/Hero/HeroAsideSection"; +import HeroAsideItem from "@components/Hero/HeroAsideItem"; +import AsideSection from "@components/AsideSection"; +import MainSection from "@components/MainSection"; +import PageLink from "@components/PageLink"; +import Ribbon from "@components/Ribbon"; +import TextAnchor from "@components/TextAnchor"; const StudiesPageView: React.FC = () => (
@@ -54,17 +54,17 @@ const StudiesPageView: React.FC = () => (
Emmaleena

Fuksivuoden loppupuolella aloin haaveilla oman alan hommista ja päätin laittaa kesätyöhakemuksia yrityksiin ihan laidasta laitaan. Lopulta taisin laittaa niitä jopa 50… Ei mennyt kauaa, kun Profit Softwarelta oltiin yhteydessä ja pääsin sinne haastatteluun. Ennen pitkää olikin jo kesä ja olin päässyt osaksi Profit Softwaren automaatiotraineeteamiä. Jatkoin kesän jälkeen osa-aikaisena traineenä ja seuraavana kesänä pääsinkin scrum master -roolissa ohjaamaan useita erilaisia traineeprojekteja. Ihastuin projektienhallintaan ja jatkan projekti taitojen harjoittamista töissä edelleen.

- +
ALUMNIEN TARINOITA

SIKin alumneja löytyy vaikka mistä! Tässä muutama esimerkki erilaisista työtehtävistä ja tarinoista.

- Kurssitarjonta + Kurssitarjonta - Liity jäseneksi + Liity jäseneksi
@@ -72,7 +72,7 @@ const StudiesPageView: React.FC = () => (

Hae opiskelemaan!

- +

Lue lisää Aallon sivuilta

 From ff9385cd47d165dda8c25462420b8288d6844fd7 Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Fri, 9 Oct 2020 00:13:45 +0300 Subject: [PATCH 02/28] FrontPage improvements and PageSection prop reducing --- src/components/Divider.tsx | 10 ++ src/components/PageSection/PageSection.tsx | 39 +++-- src/components/index.tsx | 8 + src/pages/FrontPage.tsx | 3 +- src/views/ContactsPage/ContactsPageView.tsx | 16 +- src/views/FrontPage/FrontPage.scss | 7 - src/views/FrontPage/FrontPageHero.tsx | 52 ++++++ src/views/FrontPage/FrontPageView.tsx | 180 +++++++------------- 8 files changed, 167 insertions(+), 148 deletions(-) create mode 100644 src/components/Divider.tsx create mode 100644 src/components/index.tsx delete mode 100644 src/views/FrontPage/FrontPage.scss create mode 100644 src/views/FrontPage/FrontPageHero.tsx diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx new file mode 100644 index 0000000..797e3fc --- /dev/null +++ b/src/components/Divider.tsx @@ -0,0 +1,10 @@ +import styled from "styled-components"; +import { colors } from "@theme/colors"; + +const Divider = styled.hr` + width: 98%; + border-color: ${colors.blue1}; + margin: 0 auto; +`; + +export default Divider; diff --git a/src/components/PageSection/PageSection.tsx b/src/components/PageSection/PageSection.tsx index baa9b6c..771c9c3 100644 --- a/src/components/PageSection/PageSection.tsx +++ b/src/components/PageSection/PageSection.tsx @@ -1,22 +1,28 @@ import React from "react"; import styled from "styled-components"; -import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv"; -import { colors } from "@theme/colors"; +import { ColorDivProps } from "../ColorDiv/ColorDiv"; +import { ColorMapper } from "@theme/colors"; interface PageSectionProps { center?: boolean; - bottomBorder?: boolean; cardSection?: boolean; // does section contain a grid of cards fullSize?: boolean; } -const Section = styled(ColorDiv)` +const Section = styled.section` display: flex; flex-flow: row wrap; justify-content: ${(p) => p.center ? "center" : "space-between"}; position: relative; padding: ${(p) => p.fullSize ? 0 : "2rem 1rem 2rem"}; + color: ${(p) => p.textColor}; + background-color: ${(p) => p.backgroundColor}; + &:hover { + color: ${(p) => p.hoverColor}; + background-color: ${(p) => p.hoverBackgroundColor}; + } + .lander-hero { @media screen and (min-width: 800px) { min-height: 85vh; @@ -28,23 +34,16 @@ const Section = styled(ColorDiv)` flex-flow: column nowrap; } `} - - ${(p) => p.bottomBorder ? ` - &::after { - content: ""; - position: absolute; - bottom: 0; - width: 98%; - left: 1%; - border-bottom: 1px solid rgba(${colors.blue1}, 0.4); - } - ` : ""} `; -const PageSection: React.FC = (props) => { - return ( -
- ); -} +const PageSection: React.FC = ({ textColor, backgroundColor, hoverColor, backgroundHoverColor, ...props }) => ( +
+); export default PageSection; diff --git a/src/components/index.tsx b/src/components/index.tsx new file mode 100644 index 0000000..84aac83 --- /dev/null +++ b/src/components/index.tsx @@ -0,0 +1,8 @@ +export { default as Card } from "./Card"; +export { default as PageLink } from "./PageLink"; +export { default as Button } from "./Button"; +export { default as Ribbon } from "./Ribbon"; +export { default as SponsorReel } from "./SponsorReel"; +export { default as TextAnchor } from "./TextAnchor"; +export { default as PageSection } from "./PageSection"; +export { default as Divider } from "./Divider"; \ No newline at end of file diff --git a/src/pages/FrontPage.tsx b/src/pages/FrontPage.tsx index 9f1917b..b32225d 100644 --- a/src/pages/FrontPage.tsx +++ b/src/pages/FrontPage.tsx @@ -78,8 +78,7 @@ class FrontPage extends React.Component { const { events, feed } = this.state; return ( <> - - + ) diff --git a/src/views/ContactsPage/ContactsPageView.tsx b/src/views/ContactsPage/ContactsPageView.tsx index 2c530cc..6743ebc 100644 --- a/src/views/ContactsPage/ContactsPageView.tsx +++ b/src/views/ContactsPage/ContactsPageView.tsx @@ -4,12 +4,15 @@ import PageSection from "@components/PageSection"; import { Occupation, Committee } from "@models/Contacts"; import CommitteeContainer from "@components/CommitteeContainer"; import TextAnchor from "@components/TextAnchor"; +import { Divider } from "@components/index"; interface ContactsPageViewProps { contacts: Occupation[]; committees: Committee[]; } + + class ContactsPageView extends React.Component { render() { const { contacts, committees } = this.props; @@ -22,7 +25,8 @@ class ContactsPageView extends React.Component { Tämä sivu yrittää valottaa sen oikean ihmisen puhelinnumeroa ja sähköpostiosoitetta.

- + +

@@ -36,12 +40,16 @@ class ContactsPageView extends React.Component {

+ {committees.map((committee, index) => { const order = committee.name_fi === "Toimikunnattomat" ? 1 : 0; return ( - - x.role.committee.name_fi === committee.name_fi)} /> - + <> + + x.role.committee.name_fi === committee.name_fi)} /> + + + ) })}
diff --git a/src/views/FrontPage/FrontPage.scss b/src/views/FrontPage/FrontPage.scss deleted file mode 100644 index bbedfd6..0000000 --- a/src/views/FrontPage/FrontPage.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import "../../assets/scss/globals"; - -.front-page { - display: flex; - flex-flow: column wrap; - justify-content: flex-start; -} diff --git a/src/views/FrontPage/FrontPageHero.tsx b/src/views/FrontPage/FrontPageHero.tsx new file mode 100644 index 0000000..2970031 --- /dev/null +++ b/src/views/FrontPage/FrontPageHero.tsx @@ -0,0 +1,52 @@ +import React from "react"; +import { PageSection, Button } from "@components/index"; +import HeroMainSection from "@components/Hero/HeroMainSection"; +import HeroAsideSection from "@components/Hero/HeroAsideSection"; +import HeroAsideItem from "@components/Hero/HeroAsideItem"; + +const FrontPageHero: React.FC = () => ( + + +

Aalto-yliopiston Sähköinsinöörikilta

+

+ on elektroniikan ja sähkötekniikan opiskelijoiden järjestö. Kilta + kasaa yhteen yli 600 alansa huippua, jotka ovat avainasemassa + vauhdilla sähköistyvän maailmamme kehityksessä. +

+
+ + +
+ + + + Fuksikasvatusta, ISO-toimintaa, lorem ipsum dolor sit ja amet. + + + Oletko abi, vaihtamassa uraa tai valmistumassa? + + + Avoimet työpaikat ja excursiot. Infoa yritysten edustajille ja + sponsseille. + + + +); + +export default FrontPageHero; \ No newline at end of file diff --git a/src/views/FrontPage/FrontPageView.tsx b/src/views/FrontPage/FrontPageView.tsx index c0afdf6..60f08c4 100644 --- a/src/views/FrontPage/FrontPageView.tsx +++ b/src/views/FrontPage/FrontPageView.tsx @@ -1,131 +1,81 @@ import React from "react"; -import "./FrontPage.scss"; -import Card from "@components/Card"; +import { PageSection, Card, PageLink, Button, Ribbon, SponsorReel, TextAnchor, Divider } from "@components/index"; +import FrontPageHero from "./FrontPageHero"; import { Event } from "@models/Event"; import { Post } from "@models/Feed"; -import PageSection from "@components/PageSection"; - -import PageLink from "@components/PageLink/PageLink"; -import HeroMainSection from "@components/Hero/HeroMainSection"; -import HeroAsideSection from "@components/Hero/HeroAsideSection"; -import Button from "@components/Button"; -import Ribbon from "@components/Ribbon"; -import SponsorReel from "@components/SponsorReel"; -import HeroAsideItem from "@components/Hero/HeroAsideItem"; -import TextAnchor from "@components/TextAnchor"; - interface FrontPageViewProps { events: Event[]; feed: Post[]; } const FrontPageView: React.FC = ({ events, feed }) => ( -
- - -

Aalto-yliopiston Sähköinsinöörikilta

-

- on elektroniikan ja sähkötekniikan opiskelijoiden järjestö. Kilta - kasaa yhteen yli 600 alansa huippua, jotka ovat avainasemassa - vauhdilla sähköistyvän maailmamme kehityksessä. -

-
- - -
- - - - Fuksikasvatusta, ISO-toimintaa, lorem ipsum dolor sit ja amet. - - - Oletko abi, vaihtamassa uraa tai valmistumassa? - - - Avoimet työpaikat ja excursiot. Infoa yritysten edustajille ja - sponsseille. - - - - - {events.map(event => ( - { }}> -
Lue lisää ›
- - } - /> - ))} -
- + <> + +
+ + {events.map(event => ( + { }}> +
Lue lisää ›
+ + } + /> + ))} +
+ Kaikki tapahtumat - -
- - - -

Sössöä vuodesta 1969.

- -

Lue opiskelijalehden viimeisin numero ›

- - - - - {feed.map(inst => ( - { }}> -
Lue lisää ›
- - } - /> - ))} -
- + +
+ + + +

Sössöä vuodesta 1969.

+ +

Lue opiskelijalehden viimeisin numero ›

+ + + + + {feed.map(inst => ( + { }}> +
Lue lisää ›
+ + } + /> + ))} +
+ Lue tuoreimmat uutiset - - + + Kuvia tapahtumista - -
- - - - -
+ +
+ + + + + + + ) export default FrontPageView; From 29b913b834671282bad9901ba7fe073974df37f8 Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Fri, 9 Oct 2020 21:06:41 +0300 Subject: [PATCH 03/28] WIP FrontPage rewrite --- src/components/Card/Card.tsx | 66 +++--- src/components/Divider.tsx | 3 +- src/components/Footer/Footer.scss | 90 --------- src/components/Footer/Footer.tsx | 145 +++++++++---- src/components/FooterMap/FooterMap.scss | 13 -- src/components/FooterMap/FooterMap.tsx | 30 +-- src/components/PageLink/PageLink.scss | 31 --- src/components/PageLink/PageLink.tsx | 49 +++-- .../{PageSection => }/PageSection.tsx | 2 +- src/components/PageSection/index.ts | 2 - src/components/PageSection2.tsx | 91 +++++++++ src/components/index.tsx | 2 +- src/index.scss | 2 + src/theme/colors.ts | 2 + src/views/ActualPage/EventCalendar.tsx | 7 +- src/views/ActualPage/News.tsx | 7 +- src/views/FrontPage/FrontPageHero.tsx | 190 ++++++++++++++---- src/views/FrontPage/FrontPageView.tsx | 84 +++++--- 18 files changed, 499 insertions(+), 317 deletions(-) delete mode 100644 src/components/Footer/Footer.scss delete mode 100644 src/components/FooterMap/FooterMap.scss delete mode 100644 src/components/PageLink/PageLink.scss rename src/components/{PageSection => }/PageSection.tsx (96%) delete mode 100644 src/components/PageSection/index.ts create mode 100644 src/components/PageSection2.tsx diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index 9f2e377..9958adf 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -1,53 +1,57 @@ import React from "react"; import "./Card.scss"; import Anchor from "../Anchor"; +import { Button } from "@components/index"; -export interface CardProps { +interface CardProps { title: string; start_time: string; text: string; link?: string; image?: string; - button?: JSX.Element; + buttonText?: string; + buttonOnClick?: () => void; } -export interface CardState { } -class Card extends React.Component { - render() { - const { title, text, link, image, button } = this.props; - const options = { - day: "numeric", - month: "numeric", - year: "numeric", - hour: "numeric", - minute: "2-digit" - }; - const datetime = new Date(this.props.start_time).toLocaleString("fi-FI", options); +const Card: React.FC = ({ title, text, link, image, buttonText, start_time, buttonOnClick }) => { + const options = { + day: "numeric", + month: "numeric", + year: "numeric", + hour: "numeric", + minute: "2-digit" + }; + const datetime = new Date(start_time).toLocaleString("fi-FI", options); - const imageElem = image ? ( -
- ) : null; - if (link) { - return ( - - {imageElem} -
{datetime}
-
{title}
-
{text}
-
{button}
- - ); - } + const imageElem = image ? ( +
+ ) : null; + if (link) { return ( -
+ {imageElem}
{datetime}
{title}
{text}
- {button} -
+
+ +
+ ); } + return ( +
+ {imageElem} +
{datetime}
+
{title}
+
{text}
+ +
+ ); } export default Card; diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx index 797e3fc..1093cdd 100644 --- a/src/components/Divider.tsx +++ b/src/components/Divider.tsx @@ -3,7 +3,8 @@ import { colors } from "@theme/colors"; const Divider = styled.hr` width: 98%; - border-color: ${colors.blue1}; + border: 0; + border-bottom: 2px solid ${colors.blue1}; margin: 0 auto; `; diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss deleted file mode 100644 index 2def50a..0000000 --- a/src/components/Footer/Footer.scss +++ /dev/null @@ -1,90 +0,0 @@ -@import "../../assets/scss/globals"; - - -.footer { - display: flex; - flex-direction: column; - - &__content { - display: flex; - padding: 16px; - } - - h4 { - color: color(light-blue); - padding: 1.5rem 0; - } - - & a { - color: color(white1); - text-decoration: underline; - padding: 0.4rem 0; - font-size: 14px; - } - - & p { - color: color(white1); - margin: 0; - padding: 0.4rem 0; - font-size: 14px; - } - - &__info { - display: flex; - flex-direction: column; - flex-basis: 100%; - align-items: center; - - &__block { - padding: 1rem 0; - } - } - - &__contacts { - display: flex; - justify-content: space-between; - flex-flow: row nowrap; - font-weight: 200; - - @media screen and (max-width: 600px - 1px) { - flex-flow: column nowrap; - } - } - - &__text { - display: flex; - flex-flow: column; - min-width: 180px; - - @media screen and (min-width: 600px) { - padding-right: 3rem; - } - } - - &__links { - display: flex; - flex-flow: column; - - @media screen and (max-width: 600px - 1px) { - margin-top: 2rem; - } - } - - &__copyright { - display: flex; - flex-flow: row nowrap; - background-color: color(black1); - text-align: center; - justify-content: center; - font-size: 12px; - padding: 1rem 0; - - p { - padding: 0.5rem 1rem; - } - - @media screen and (max-width: 600px - 1px) { - flex-flow: column nowrap; - } - } -} diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index c816204..059dad5 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -1,48 +1,115 @@ import React from "react"; -import FooterMap from "../FooterMap"; +import styled from "styled-components"; import Anchor from "../Anchor"; -import "./Footer.scss"; +import { colors } from "@theme/colors"; -export interface FooterProps { } -export interface FooterState { } +const StyledFooter = styled.footer` + display: flex; + flex-direction: column; + background-color: ${colors.darkBlue}; -class Footer extends React.Component { - render() { - return -
-
-
-
-

Aalto-yliopiston Sähköinsinöörikilta ry

-
-
-

TUAS-Talo

-

Maarintie 8

-

PL 15500, 00076 Aalto

-

-

-

Y-tunnus: 1627010-1

-

sik-hallitus@list.ayy.fi

- Yhteystiedot -
-
- Jäseneksi - Palaute - Arkisto - Materiaalipankki -
-
-
+ a { + color: ${colors.white}; + display: block; + text-decoration: underline; + padding: 0.4rem 0; + font-size: 14px; + + &:hover { + text-decoration: none; + } + } + + p { + color: ${colors.white}; + margin: 0; + padding: 0.4rem 0; + font-size: 14px; + } +`; + +const Content = styled.div` + display: flex; + & > div { + flex: 2; + padding: 48px 0; + + h4 { + color: ${colors.lightBlue}; + padding: 24px 0; + } + + & > div { + display: flex; + flex-direction: row; + justify-content: space-between; + } + } +`; + +const CopyRight = styled.div` + display: flex; + flex-flow: row nowrap; + background-color: ${colors.black}; + text-align: center; + justify-content: center; + font-size: 12px; + padding: 1rem 0; + + p { + padding: 0.5rem 1rem; + } + + @media screen and (max-width: 600px - 1px) { + flex-flow: column nowrap; + } +`; + +const Map = styled.iframe` + border: none; + flex: 1; + + @media screen and (max-width: 1200px - 1px) { + display: none; + } +`; + +const Footer: React.FC = () => ( + + +
+

Aalto-yliopiston Sähköinsinöörikilta ry

+
+
+

TUAS-Talo

+

Maarintie 8

+

PL 15500, 00076 Aalto

+

+

+

Y-tunnus: 1627010-1

+

sik-hallitus@list.ayy.fi

+ Yhteystiedot +
+ +
+ Jäseneksi + Palaute + Arkisto + Materiaalipankki
- -
-
-

© Aalto-yliopiston Sähköinsinöörikilta ry

-

webmaster: sik-vtmk@list.ayy.fi

- ; - } -} + + + +

© Aalto-yliopiston Sähköinsinöörikilta ry

+ webmaster: sik-vtmk@list.ayy.fi + + +) export default Footer; diff --git a/src/components/FooterMap/FooterMap.scss b/src/components/FooterMap/FooterMap.scss deleted file mode 100644 index 09a3654..0000000 --- a/src/components/FooterMap/FooterMap.scss +++ /dev/null @@ -1,13 +0,0 @@ -@import "../../assets/scss/globals"; - -.footer-map { - display: flex; - - @media screen and (max-width: 1200px - 1px) { - display: none; - } - - iframe { - border: none; - } -} diff --git a/src/components/FooterMap/FooterMap.tsx b/src/components/FooterMap/FooterMap.tsx index bddca1a..4ede894 100644 --- a/src/components/FooterMap/FooterMap.tsx +++ b/src/components/FooterMap/FooterMap.tsx @@ -1,26 +1,16 @@ import React from "react"; -import "./FooterMap.scss"; +import styled from "styled-components"; -const AnyReactComponent = ({ text }) =>
{text}
; +const IFrame = styled.iframe` -export interface FooterMapProps {} +`; -export interface FooterMapState {} - -class FooterMap extends React.Component { - render() { - return ( -
- -
- - ); - } -} +const FooterMap: React.FC = () => ( +