diff --git a/src/components/Accordion.tsx b/src/components/Accordion.tsx new file mode 100644 index 0000000..c1091ef --- /dev/null +++ b/src/components/Accordion.tsx @@ -0,0 +1,99 @@ +import React from "react"; +import styled from "styled-components"; +import AccordionIcon from "./AccordionIcon"; +import { colors } from "@theme/colors"; + +const Container = styled.div` + margin: 0.2em; + padding: 0.2em; + display: flex; + flex-flow: column nowrap; + border-style: solid; + border-color: ${colors.lightTurquoise}; + border-width: 1px; + + button { + display: flex; + flex-flow: row nowrap; + background-color: ${colors.white}; + width: 100%; + margin: 0; + padding: 0; + border: 0; + outline: none; + } + + h5 { + display: flex; + flex: 1; + text-align: center; + padding-left: 1em; + color: ${colors.blue1}; + font-size: 1.125rem; + margin: auto; + } + + & > div { + overflow: hidden; + } +`; + +const Panel = styled.div<{visible?: boolean}>` + margin-top: ${(p) => p.visible ? "0" : "-100%"}; + + display: flex; + max-height: 15rem; + transition: margin-top 400ms ease-in-out; + + div { + min-width: 40px; + max-width: 40px; + margin: 0.6em; + } + + p { + padding-left: 1em; + margin: auto; + } +`; + +export interface AccordionProps { + title: string; +} +export interface AccordionState { + isOpen: boolean; +} + +class Accordion extends React.Component { + constructor(props: AccordionProps) { + super(props); + this.state = { + isOpen: false, + }; + } + + handleClick() { + this.setState((prevState) => ({ + isOpen: !prevState.isOpen, + })); + } + + render() { + const { isOpen } = this.state; + return ( + + +
+ + {this.props.children} + +
+ + ); + } +} + +export default Accordion; diff --git a/src/components/Accordion/Accordion.scss b/src/components/Accordion/Accordion.scss deleted file mode 100644 index f2e9e51..0000000 --- a/src/components/Accordion/Accordion.scss +++ /dev/null @@ -1,59 +0,0 @@ -@import "../../assets/scss/globals"; - - -.accordion { - margin: 0.2em; - padding: 0.2em; - display: flex; - flex-flow: column nowrap; - border-style: solid; - border-color: color(light-turquoise); - border-width: 1px; - - &__desc { - display: flex; - margin-top: -100%; - max-height: 15rem; - -webkit-transition: margin-top 400ms ease-in-out; - -webkit-transform: margin-top 400ms ease-in-out; - -moz-transform: margin-top 400ms ease-in-out; - -o-transform: margin-top 400ms ease-in-out; - transition: margin-top 400ms ease-in-out; - - &.open { - margin-top: 0; - } - - div { - min-width: 40px; - max-width: 40px; - margin: 0.6em; - } - - p { - padding-left: 1em; - margin: auto; - } - } - - button { - display: flex; - flex-flow: row nowrap; - background-color: color(white1); - width: 100%; - margin: 0; - padding: 0; - border: 0; - outline: none; - } - - h5 { - display: flex; - flex: 1; - text-align: center; - padding-left: 1em; - color: color(blue1); - font-size: 1.125rem; - margin: auto; - } -} diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx deleted file mode 100644 index 49dcbda..0000000 --- a/src/components/Accordion/Accordion.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React from "react"; -import "./Accordion.scss"; -import AccordionIcon from "../AccordionIcon"; - -export interface AccordionProps { - title: string; -} -export interface AccordionState { - isOpen: boolean; -} - -interface DescriptionProps { - visible: boolean; -} - -const Description: React.SFC = (props) => ( -
{props.children}
-); - -class Accordion extends React.Component { - constructor(props: AccordionProps) { - super(props); - this.state = { - isOpen: false, - }; - } - - handleClick() { - this.setState((prevState) => ({ - isOpen: !prevState.isOpen, - })); - } - - render() { - const { isOpen } = this.state; - return ( -
- -
- {this.props.children} -
-
- ); - } -} - -export default Accordion; diff --git a/src/components/Accordion/index.ts b/src/components/Accordion/index.ts index f653ec7..6f6532e 100644 --- a/src/components/Accordion/index.ts +++ b/src/components/Accordion/index.ts @@ -1,2 +1,2 @@ -import Accordion from "./Accordion"; +import Accordion from "../Accordion"; export default Accordion; diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss deleted file mode 100644 index ef6d16e..0000000 --- a/src/components/Card/Card.scss +++ /dev/null @@ -1,93 +0,0 @@ -@import "../../assets/scss/globals"; - - -.card { - background-color: color(white1); - color: color(dark-blue); - white-space: wrap; - margin: 1rem 1rem; - display: flex; - flex-flow: column nowrap; - justify-content: flex-start; - width: calc(25% - 2rem); - - @media screen and (min-width: 1000px) and (max-width: 1200px - 1px) { - width: calc(50% - 2rem); - margin-bottom: 2rem; - } - - @media screen and (max-width: 1000px - 1px) { - width: 100%; - margin-bottom: 3rem; - margin-left: 0; - margin-right: 0; - } - - &__title { - padding: 0.5rem; - margin-bottom: 0.5rem; - display: flex; - justify-content: center; - font-size: 1.5rem; - text-align: center; - font-weight: 300; - color: color(black1); - } - - &__image { - width: 100%; - height: 300px; - background-repeat: no-repeat; - background-size: cover; - background-position: center center; - margin-bottom: 1rem; - - @media screen and (min-width: 1200px) { - height: 15vw; - } - - @media screen and (max-width: 1200px - 1px) { - height: 35vh; - } - } - - &__button { - display: flex; - justify-content: center; - - button { - height: 100%; - } - } - - &__text { - display: flex; - justify-content: center; - text-align: center; - text-overflow: ellipsis; - font-size: 16px; - margin: 0 0 0.5rem; - font-weight: 200; - line-height: 22px; - color: color(black1); - - @media screen and (max-width: 1200px - 1px) { - margin: 0.5rem 0; - font-size: 16px; - } - } - - &__datetime { - color: color(orange1); - display: flex; - justify-content: center; - text-align: center; - font-size: 0.9rem; - font-weight: 600; - - @media screen and (max-width: 1200px - 1px) { - margin: 0.5rem 0; - font-size: 16px; - } - } -} diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx deleted file mode 100644 index 9958adf..0000000 --- a/src/components/Card/Card.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from "react"; -import "./Card.scss"; -import Anchor from "../Anchor"; -import { Button } from "@components/index"; - -interface CardProps { - title: string; - start_time: string; - text: string; - link?: string; - image?: string; - buttonText?: string; - buttonOnClick?: () => void; -} - -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}
-
- -
- - ); - } - return ( -
- {imageElem} -
{datetime}
-
{title}
-
{text}
- -
- ); -} - -export default Card; diff --git a/src/components/DropDownBox.tsx b/src/components/DropDownBox.tsx new file mode 100644 index 0000000..f27eb1b --- /dev/null +++ b/src/components/DropDownBox.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import styled from "styled-components"; +import { colors } from "@theme/colors"; + +interface DropDownBoxProps { + onMouseEnter: () => void; + onMouseLeave: () => void; + visible: boolean; +} + +const Box = styled.div` + background-color: ${colors.white}; + margin-top: 0.8rem; + position: absolute; + left: 0; + top: 30px; + z-index: 20; + + a { + text-decoration: underline; + color: ${colors.darkBlue} !important; + text-transform: uppercase; + } +`; + +const DropDownBox: React.FC = ({ children, onMouseEnter, onMouseLeave, visible }) => ( + +); + +export default DropDownBox; diff --git a/src/components/DropDownBox/DropDownBox.scss b/src/components/DropDownBox/DropDownBox.scss deleted file mode 100644 index fa14622..0000000 --- a/src/components/DropDownBox/DropDownBox.scss +++ /dev/null @@ -1,17 +0,0 @@ -@import "../../assets/scss/globals"; - - -.drop-down-box { - background-color: color(white1); - margin-top: 0.8rem; - position: absolute; - left: 0; - top: 30px; - z-index: 20; - - &, - & a { - color: color(dark-blue) !important; - text-transform: uppercase; - } -} diff --git a/src/components/DropDownBox/DropDownBox.tsx b/src/components/DropDownBox/DropDownBox.tsx deleted file mode 100644 index 572b1f3..0000000 --- a/src/components/DropDownBox/DropDownBox.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from "react"; -import "./DropDownBox.scss"; - -export interface DropDownBoxProps { - onMouseEnter: () => void; - onMouseLeave: () => void; - visible: boolean; -} -export interface DropDownBoxState {} - -class DropDownBox extends React.Component { - render() { - const { children, onMouseEnter, onMouseLeave, visible } = this.props; - return ( - - ); - } -} - -export default DropDownBox; diff --git a/src/components/DropDownBox/index.ts b/src/components/DropDownBox/index.ts deleted file mode 100644 index 64e87ea..0000000 --- a/src/components/DropDownBox/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import DropDownBox from "./DropDownBox"; -export default DropDownBox; diff --git a/src/components/InfoBox.tsx b/src/components/InfoBox.tsx new file mode 100644 index 0000000..2126318 --- /dev/null +++ b/src/components/InfoBox.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import styled from "styled-components"; + +const Box = styled.div` + justify-content: flex-end; + text-align: center; +`; + +const InfoBox: React.FC = ({ children }) => ( + + {children} + +) + +export default InfoBox; diff --git a/src/components/InfoBox/InfoBox.scss b/src/components/InfoBox/InfoBox.scss deleted file mode 100644 index 63d25b6..0000000 --- a/src/components/InfoBox/InfoBox.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import "../../assets/scss/globals"; - -.info-box { - justify-content: flex-end; - text-align: center; -} diff --git a/src/components/InfoBox/InfoBox.tsx b/src/components/InfoBox/InfoBox.tsx deleted file mode 100644 index 7f9f844..0000000 --- a/src/components/InfoBox/InfoBox.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from "react"; -import "./InfoBox.scss"; - -export interface InfoBoxProps {} -export interface InfoBoxState {} - -class InfoBox extends React.Component { - constructor(props: InfoBoxProps) { - super(props); - } - - render() { - const { children } = this.props; - return ( -
- {children} -
- ); - } -} - -export default InfoBox; diff --git a/src/components/InfoBox/index.ts b/src/components/InfoBox/index.ts deleted file mode 100644 index df5a48f..0000000 --- a/src/components/InfoBox/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import InfoBox from "./InfoBox"; -export default InfoBox; diff --git a/src/components/NavbarDropdownLink/NavbarDropdownLink.tsx b/src/components/NavbarDropdownLink/NavbarDropdownLink.tsx index c29df71..c374185 100644 --- a/src/components/NavbarDropdownLink/NavbarDropdownLink.tsx +++ b/src/components/NavbarDropdownLink/NavbarDropdownLink.tsx @@ -1,6 +1,6 @@ import React from "react"; import "./NavbarDropdownLink.scss"; -import DropDownBox from "../DropDownBox/DropDownBox"; +import DropDownBox from "../DropDownBox"; import Anchor from "../Anchor"; export interface NavbarDropdownLinkProps { diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss index f9b7cc9..134e6da 100644 --- a/src/components/Navigation/Navigation.scss +++ b/src/components/Navigation/Navigation.scss @@ -7,6 +7,7 @@ $border-width: 2px; .navigation-mobile-menu { a, a:-webkit-any-link { + text-decoration: none; fill: color(light-blue); color: color(light-blue); } diff --git a/src/components/index.tsx b/src/components/index.tsx index 882f3b7..67c7a1f 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -7,3 +7,5 @@ export { default as Divider } from "./Divider"; export { default as CardSection } from "./Sections/CardSection"; export { default as SossoSection } from "./Sections/SossoSection"; export { default as TextSection } from "./Sections/TextSection"; +export { default as InfoBox } from "./InfoBox"; +export { default as Accordion } from "./Accordion"; diff --git a/src/views/FreshmenPage/FreshmenPageView.tsx b/src/views/FreshmenPage/FreshmenPageView.tsx index 08cc97a..cd40a3a 100644 --- a/src/views/FreshmenPage/FreshmenPageView.tsx +++ b/src/views/FreshmenPage/FreshmenPageView.tsx @@ -2,9 +2,8 @@ import React from "react"; import styled from "styled-components"; import FreshmenPageHero from "./FreshmenPageHero"; import PageLink from "@components/PageLink"; -import InfoBox from "@components/InfoBox"; import Anchor from "@components/Anchor"; -import { SossoSection, TextSection } from "@components/index"; +import { SossoSection, TextSection, InfoBox } from "@components/index"; const KippariImage = styled.img` max-width:100%; diff --git a/src/views/GuildPage/GuildPageView.tsx b/src/views/GuildPage/GuildPageView.tsx index 6afecbf..47c0f02 100644 --- a/src/views/GuildPage/GuildPageView.tsx +++ b/src/views/GuildPage/GuildPageView.tsx @@ -1,11 +1,9 @@ import React from "react"; import styled from "styled-components"; import PageLink from "@components/PageLink"; -import InfoBox from "@components/InfoBox"; -import Accordion from "@components/Accordion"; import TextAnchor from "@components/TextAnchor"; import Anchor from "@components/Anchor"; -import { SossoSection, TextSection } from "@components/index"; +import { SossoSection, TextSection, InfoBox, Accordion } from "@components/index"; import GuildPageHero from "./GuildPageHero"; import FullWidthSection from "@components/Sections/FullWidthSection";