Merge branch 'refactor/fix-bad-styling-workflows' into 'master'
Refactor/components, more styled-components See merge request sahkoinsinoorikilta/vtmk/web2.0-frontend!13
This commit is contained in:
Aarni Halinen
Generated
+35
-708
File diff suppressed because it is too large
Load Diff
+1
-2
@@ -89,7 +89,6 @@
|
||||
"module-to-cdn": "3.1.2",
|
||||
"morgan": "1.9.1",
|
||||
"npm-run-all": "4.1.5",
|
||||
"plop": "2.3.0",
|
||||
"postcss-loader": "2.1.6",
|
||||
"react": "16.8.6",
|
||||
"react-addons-test-utils": "15.6.2",
|
||||
@@ -124,7 +123,7 @@
|
||||
"classnames": "2.2.6",
|
||||
"date-fns": "2.0.0-alpha.27",
|
||||
"js-cookie": "2.2.0",
|
||||
"lodash": "4.17.15",
|
||||
"lodash": "4.17.20",
|
||||
"mobx": "5.9.4",
|
||||
"mobx-react": "5.4.4",
|
||||
"normalize.css": "8.0.1",
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
@import "../../assets/scss/globals";
|
||||
|
||||
.{{ dashCase name }} {
|
||||
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
import React from "react";
|
||||
{{#if observer}}
|
||||
import { observer } from "mobx-react";
|
||||
import {{ camelCase store_name }} from "../../stores/{{ properCase store_name }}";
|
||||
{{/if}}
|
||||
import "./{{ properCase name}}.scss";
|
||||
|
||||
export interface {{ properCase name }}Props {}
|
||||
export interface {{ properCase name }}State {}
|
||||
|
||||
{{#if observer}}@observer {{/if}}class {{ properCase name }} extends React.Component<{{ properCase name }}Props, {{ properCase name }}State> {
|
||||
render() {
|
||||
return (
|
||||
<div className="{{ dashCase name }}">
|
||||
{{ titleCase name }}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
{{#if observer}}
|
||||
export default (props) => <{{ properCase name }} {{ camelCase store_name }}={ {{ camelCase store_name }} } { ...props } />;
|
||||
{{else}}
|
||||
export default {{ properCase name }};
|
||||
{{/if}}
|
||||
@@ -1,2 +0,0 @@
|
||||
import {{ properCase name }} from "./{{ properCase name }}";
|
||||
export default {{ properCase name }};
|
||||
@@ -1,17 +0,0 @@
|
||||
import axios from "axios";
|
||||
|
||||
const url = `${process.env.API_URL}/{{ camelCase name }}s`;
|
||||
|
||||
export interface {{ properCase name }} {
|
||||
id: number;
|
||||
}
|
||||
|
||||
export async function get{{ properCase name }}s(): Promise<{{ properCase name }}[]> {
|
||||
try {
|
||||
const resp = await axios.get(url);
|
||||
return resp.data;
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
.{{ dashCase name }} {
|
||||
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
import React from "react";
|
||||
import { Helmet } from "react-helmet";
|
||||
import "./{{ properCase name}}.scss";
|
||||
|
||||
export interface {{ properCase name }}Props {}
|
||||
export interface {{ properCase name }}State {}
|
||||
|
||||
class {{ properCase name }} extends React.Component<{{ properCase name }}Props, {{ properCase name }}State> {
|
||||
render() {
|
||||
return (
|
||||
<div className="{{ dashCase name }}">
|
||||
<Helmet>
|
||||
<link rel="canonical" href="https://sik.ayy.fi/INSERT_PATH_HERE!" />
|
||||
</Helmet>
|
||||
{{ titleCase name }}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default {{ properCase name }};
|
||||
@@ -1,13 +0,0 @@
|
||||
import { observable, action } from "mobx";
|
||||
import { observer } from "mobx-react";
|
||||
|
||||
class {{ properCase name }} {
|
||||
@observable counter = 0;
|
||||
|
||||
@action.bound
|
||||
increment() {
|
||||
this.counter += 1;
|
||||
}
|
||||
}
|
||||
|
||||
export default new {{ properCase name }}();
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,61 @@
|
||||
import React from "react";
|
||||
import "./Accordion.scss";
|
||||
import AccordionIcon from "../AccordionIcon";
|
||||
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;
|
||||
@@ -9,14 +64,6 @@ export interface AccordionState {
|
||||
isOpen: boolean;
|
||||
}
|
||||
|
||||
interface DescriptionProps {
|
||||
visible: boolean;
|
||||
}
|
||||
|
||||
const Description: React.SFC<DescriptionProps> = (props) => (
|
||||
<div className={`accordion__desc ${props.visible ? "open" : ""}`}>{props.children}</div>
|
||||
);
|
||||
|
||||
class Accordion extends React.Component<AccordionProps, AccordionState> {
|
||||
constructor(props: AccordionProps) {
|
||||
super(props);
|
||||
@@ -34,15 +81,17 @@ class Accordion extends React.Component<AccordionProps, AccordionState> {
|
||||
render() {
|
||||
const { isOpen } = this.state;
|
||||
return (
|
||||
<div className="accordion">
|
||||
<Container>
|
||||
<button type="button" onClick={() => this.handleClick()}>
|
||||
<AccordionIcon open={isOpen} />
|
||||
<h5>{this.props.title}</h5>
|
||||
</button>
|
||||
<div style={{ overflow: "hidden", }}>
|
||||
<Description visible={isOpen}>{this.props.children}</Description>
|
||||
<div>
|
||||
<Panel visible={isOpen}>
|
||||
{this.props.children}
|
||||
</Panel>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { colors } from "../../theme/colors";
|
||||
|
||||
interface AccordionIconProps {
|
||||
open: boolean;
|
||||
}
|
||||
|
||||
const Icon = styled.div<AccordionIconProps>`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: ${(p) => p.open ? colors.orange1 : colors.blue1};
|
||||
color: ${colors.white};
|
||||
min-width: 40px;
|
||||
max-width: 40px;
|
||||
min-height: 40px;
|
||||
max-height: 40px;
|
||||
margin: 0.2em;
|
||||
font-size: 40px;
|
||||
|
||||
${(p) => p.open && (`
|
||||
span {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
`)}
|
||||
|
||||
`;
|
||||
|
||||
const AccordionIcon: React.FC<AccordionIconProps> = ({ open } ) => (
|
||||
<Icon open={open}>
|
||||
<span>+</span>
|
||||
</Icon>
|
||||
);
|
||||
|
||||
export default AccordionIcon;
|
||||
@@ -1,2 +0,0 @@
|
||||
import Accordion from "./Accordion";
|
||||
export default Accordion;
|
||||
@@ -1,29 +0,0 @@
|
||||
@import "../../assets/scss/globals";
|
||||
|
||||
|
||||
.accordion-icon {
|
||||
display: flex;
|
||||
background-color: color(blue1);
|
||||
color: color(white1);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
max-width: 40px;
|
||||
min-height: 40px;
|
||||
max-height: 40px;
|
||||
margin: 0.2em;
|
||||
font-size: 40px;
|
||||
|
||||
&.open {
|
||||
background-color: color(orange1);
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-text {
|
||||
&.open {
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import React from "react";
|
||||
import "./AccordionIcon.scss";
|
||||
|
||||
export interface AccordionIconProps {
|
||||
open: boolean;
|
||||
}
|
||||
export interface AccordionIconState {}
|
||||
|
||||
class AccordionIcon extends React.Component<AccordionIconProps, AccordionIconState> {
|
||||
render() {
|
||||
const { open } = this.props;
|
||||
return (
|
||||
<div className={`accordion-icon ${open ? "open" : ""}`}>
|
||||
<div className={`accordion-text ${open ? "open" : ""}`}>+</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default AccordionIcon;
|
||||
@@ -1,2 +0,0 @@
|
||||
import AccordionIcon from "./AccordionIcon";
|
||||
export default AccordionIcon;
|
||||
@@ -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<HTMLAnchorElement> {
|
||||
to: string;
|
||||
}
|
||||
|
||||
const Anchor: React.FC<AnchorProps> = ({ to, ...props }) => {
|
||||
if (to.startsWith("/")) {
|
||||
return (
|
||||
<Link to={to} {...props} />
|
||||
);
|
||||
} else if (to.startsWith("#")) {
|
||||
return (
|
||||
<HashLink to={to} {...props} />
|
||||
);
|
||||
}
|
||||
else {
|
||||
return (
|
||||
<a href={to} {...props} />
|
||||
);
|
||||
}
|
||||
}
|
||||
export default Anchor;
|
||||
@@ -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<HTMLAnchorElement> {
|
||||
to: string;
|
||||
}
|
||||
|
||||
class Anchor extends React.Component<AnchorProps> {
|
||||
render() {
|
||||
const { children, to, ...props } = this.props;
|
||||
|
||||
if (to.startsWith("/")) {
|
||||
return (
|
||||
<Link to={to} {...props}>{children}</Link>
|
||||
);
|
||||
} else if (to.startsWith("#")) {
|
||||
return (
|
||||
<HashLink to={to} {...props}>{children}</HashLink>
|
||||
);
|
||||
}
|
||||
else {
|
||||
return (
|
||||
<a href={to} {...props}>{children}</a>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
export default Anchor;
|
||||
@@ -1,2 +0,0 @@
|
||||
import Anchor from "./Anchor";
|
||||
export default Anchor;
|
||||
@@ -1,10 +0,0 @@
|
||||
@import "../../assets/scss/globals";
|
||||
|
||||
|
||||
.aside-section {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-flow: column;
|
||||
justify-content: space-between;
|
||||
padding: 3rem 4rem;
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
import React from "react";
|
||||
import "./AsideSection.scss";
|
||||
import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv";
|
||||
|
||||
export interface AsideSectionProps {
|
||||
className?: string;
|
||||
}
|
||||
export interface AsideSectionState { }
|
||||
|
||||
class AsideSection extends React.Component<AsideSectionProps & ColorDivProps, AsideSectionState> {
|
||||
render() {
|
||||
const { children, className, ...props } = this.props;
|
||||
const classNames = [
|
||||
"aside-section",
|
||||
];
|
||||
if (className) classNames.push(className);
|
||||
return (
|
||||
<ColorDiv className={classNames.join(" ")} {...props}>
|
||||
{children}
|
||||
</ColorDiv>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default AsideSection;
|
||||
@@ -1,2 +0,0 @@
|
||||
import AsideSection from "./AsideSection";
|
||||
export default AsideSection;
|
||||
@@ -0,0 +1,119 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { colors } from "@theme/colors";
|
||||
import Anchor from "@components/Anchor";
|
||||
|
||||
interface WrappedCardProps {
|
||||
title: string;
|
||||
start_time: string;
|
||||
text: string;
|
||||
link: string;
|
||||
image?: string;
|
||||
imageAlt?: string;
|
||||
buttonOnClick?: () => void;
|
||||
}
|
||||
|
||||
interface CardProps {
|
||||
title: string;
|
||||
start_time: string;
|
||||
text: string;
|
||||
img: JSX.Element;
|
||||
button: JSX.Element;
|
||||
}
|
||||
|
||||
const StyledCard = styled.article`
|
||||
color: ${colors.black};
|
||||
margin: 1rem;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-height: 300px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0 0 0.5rem;
|
||||
font-weight: 200;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
p:first-of-type {
|
||||
color: ${colors.orange1};
|
||||
font-size: 0.9rem !important;
|
||||
font-weight: 600 !important;
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
margin: 0.5rem 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
h3 {
|
||||
padding: 0.5rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
|
||||
padding: 0.8rem 2rem;
|
||||
margin: 0.5rem;
|
||||
font-size: 13px;
|
||||
background: none;
|
||||
text-transform: uppercase;
|
||||
background-color: ${colors.blue1};
|
||||
color: ${colors.white};
|
||||
font-weight: 800;
|
||||
letter-spacing: 1.5px;
|
||||
border: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const Card: React.FC<CardProps> = ({ title, start_time, text, img, button }) => (
|
||||
<StyledCard>
|
||||
{img}
|
||||
<p>{start_time}</p>
|
||||
<h3>{title}</h3>
|
||||
<p>{text}</p>
|
||||
{button}
|
||||
</StyledCard>
|
||||
);
|
||||
|
||||
const WrappedCard: React.FC<WrappedCardProps> = ({ title, text, link, image, imageAlt, 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 img = image ? (
|
||||
<img src={image} alt={imageAlt} />
|
||||
) : null;
|
||||
|
||||
const button = (
|
||||
<Anchor to={link}>
|
||||
<button onClick={buttonOnClick}>
|
||||
Lue lisää ›
|
||||
</button>
|
||||
</Anchor>
|
||||
);
|
||||
|
||||
return (
|
||||
<Card
|
||||
title={title}
|
||||
start_time={datetime}
|
||||
text={text}
|
||||
img={img}
|
||||
button={button}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default WrappedCard;
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
import React from "react";
|
||||
import "./Card.scss";
|
||||
import Anchor from "../Anchor";
|
||||
|
||||
export interface CardProps {
|
||||
title: string;
|
||||
start_time: string;
|
||||
text: string;
|
||||
link?: string;
|
||||
image?: string;
|
||||
button?: JSX.Element;
|
||||
}
|
||||
export interface CardState { }
|
||||
|
||||
class Card extends React.Component<CardProps, CardState> {
|
||||
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 imageElem = image ? (
|
||||
<div style={{ backgroundImage: `url(${image})`, }} className="card__image" />
|
||||
) : null;
|
||||
if (link) {
|
||||
return (
|
||||
<Anchor to={link} className="card">
|
||||
{imageElem}
|
||||
<div className="card__datetime">{datetime}</div>
|
||||
<div className="card__title">{title}</div>
|
||||
<div className="card__text">{text}</div>
|
||||
<div className="card__button">{button}</div>
|
||||
</Anchor>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="card">
|
||||
{imageElem}
|
||||
<div className="card__datetime">{datetime}</div>
|
||||
<div className="card__title">{title}</div>
|
||||
<div className="card__text">{text}</div>
|
||||
{button}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Card;
|
||||
@@ -1,2 +0,0 @@
|
||||
import Card from "./Card";
|
||||
export default Card;
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
import React from "react";
|
||||
import "./ColorDiv.scss";
|
||||
import { Colors, colorToClass, bgColorToClass, hoverColorToClass, bgHoverColorToClass } from "@theme/colors";
|
||||
import classNames from "classnames";
|
||||
|
||||
export interface ColorDivProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
textColor?: Colors;
|
||||
backgroundColor?: Colors;
|
||||
hoverColor?: Colors;
|
||||
backgroundHoverColor?: Colors;
|
||||
}
|
||||
export interface ColorDivState { }
|
||||
|
||||
|
||||
class ColorDiv extends React.Component<ColorDivProps, ColorDivState> {
|
||||
render() {
|
||||
const { children, className, textColor, backgroundColor, hoverColor, backgroundHoverColor, ...props } = this.props;
|
||||
const classes = classNames(
|
||||
className,
|
||||
colorToClass(textColor),
|
||||
bgColorToClass(backgroundColor),
|
||||
hoverColorToClass(hoverColor),
|
||||
bgHoverColorToClass(backgroundHoverColor)
|
||||
);
|
||||
|
||||
return (
|
||||
<div {...props} className={classes}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ColorDiv;
|
||||
@@ -1,2 +0,0 @@
|
||||
import DatetimeWidget from "./DatetimeWidget";
|
||||
export default DatetimeWidget;
|
||||
@@ -0,0 +1,11 @@
|
||||
import styled from "styled-components";
|
||||
import { colors } from "@theme/colors";
|
||||
|
||||
const Divider = styled.hr`
|
||||
width: 98%;
|
||||
border: 0;
|
||||
border-bottom: 2px solid ${colors.blue1};
|
||||
margin: 0 auto;
|
||||
`;
|
||||
|
||||
export default Divider;
|
||||
@@ -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<DropDownBoxProps> = ({ children, onMouseEnter, onMouseLeave, visible }) => (
|
||||
<Box
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
hidden={!visible}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
|
||||
export default DropDownBox;
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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<DropDownBoxProps, DropDownBoxState> {
|
||||
render() {
|
||||
const { children, onMouseEnter, onMouseLeave, visible } = this.props;
|
||||
return (
|
||||
<div
|
||||
className="drop-down-box"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
hidden={!visible}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default DropDownBox;
|
||||
@@ -1,2 +0,0 @@
|
||||
import DropDownBox from "./DropDownBox";
|
||||
export default DropDownBox;
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,48 +1,54 @@
|
||||
import React from "react";
|
||||
import FooterMap from "../FooterMap";
|
||||
import Anchor from "../Anchor";
|
||||
import "./Footer.scss";
|
||||
import styled from "styled-components";
|
||||
import { colors } from "@theme/colors";
|
||||
import FooterContent from "./FooterContent";
|
||||
|
||||
export interface FooterProps { }
|
||||
export interface FooterState { }
|
||||
const StyledFooter = styled.footer`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: ${colors.darkBlue};
|
||||
`;
|
||||
|
||||
class Footer extends React.Component<FooterProps, FooterState> {
|
||||
render() {
|
||||
return <React.Fragment>
|
||||
<div className="footer">
|
||||
<div className="footer__content">
|
||||
<div className="footer__info">
|
||||
<div className="footer__info__block">
|
||||
<h4>Aalto-yliopiston Sähköinsinöörikilta ry</h4>
|
||||
<div className="footer__contacts">
|
||||
<div className="footer__text">
|
||||
<p>TUAS-Talo</p>
|
||||
<p>Maarintie 8</p>
|
||||
<p>PL 15500, 00076 Aalto</p>
|
||||
<br></br>
|
||||
<br></br>
|
||||
<p>Y-tunnus: 1627010-1</p>
|
||||
<p>sik-hallitus@list.ayy.fi</p>
|
||||
<Anchor to="/yhteystiedot">Yhteystiedot</Anchor>
|
||||
</div>
|
||||
<div className="footer__links">
|
||||
<Anchor to="/jaseneksi">Jäseneksi</Anchor>
|
||||
<Anchor to="/palaute">Palaute</Anchor>
|
||||
<Anchor to="https://static.sika.sik.party">Arkisto</Anchor>
|
||||
<Anchor to="https://static.sika.sik.party">Materiaalipankki</Anchor>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FooterMap />
|
||||
</div>
|
||||
<div className="footer__copyright">
|
||||
<p>© Aalto-yliopiston Sähköinsinöörikilta ry</p>
|
||||
<p>webmaster: sik-vtmk@list.ayy.fi</p>
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>;
|
||||
const CopyRight = styled.div`
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
color: ${colors.white};
|
||||
background-color: ${colors.black};
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
padding: 1rem 0;
|
||||
|
||||
p {
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
text-decoration: underline;
|
||||
padding: 0.4rem 0;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
`;
|
||||
|
||||
const Footer: React.FC = () => (
|
||||
<StyledFooter>
|
||||
<FooterContent />
|
||||
<CopyRight>
|
||||
<p>© Aalto-yliopiston Sähköinsinöörikilta ry</p>
|
||||
<a href="mailto:sik-vtmk@list.ayy.fi">webmaster: sik-vtmk@list.ayy.fi</a>
|
||||
</CopyRight>
|
||||
</StyledFooter>
|
||||
)
|
||||
|
||||
export default Footer;
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import Anchor from "../Anchor";
|
||||
import { colors } from "@theme/colors";
|
||||
|
||||
const Content = styled.div`
|
||||
display: flex;
|
||||
|
||||
& > div:first-of-type {
|
||||
padding: 48px 0;
|
||||
flex: 2 1;
|
||||
|
||||
& > * {
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: ${colors.lightBlue};
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
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 MarginSpace = styled.div`
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
`;
|
||||
|
||||
const Columns = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
& > div > div {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const Map = styled.div`
|
||||
flex: 1;
|
||||
@media screen and (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
iframe {
|
||||
border: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const FooterContent: React.FC = () => (
|
||||
<Content>
|
||||
<div>
|
||||
<MarginSpace>
|
||||
<h4>Aalto-yliopiston Sähköinsinöörikilta ry</h4>
|
||||
<Columns>
|
||||
<div>
|
||||
<div>
|
||||
<p>TUAS-Talo</p>
|
||||
<p>Maarintie 8</p>
|
||||
<p>PL 15500, 00076 Aalto</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>Y-tunnus: 1627010-1</p>
|
||||
<p>sik-hallitus@list.ayy.fi</p>
|
||||
<Anchor to="/yhteystiedot">Yhteystiedot</Anchor>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Anchor to="/jaseneksi">Jäseneksi</Anchor>
|
||||
<Anchor to="/palaute">Palaute</Anchor>
|
||||
<Anchor to="https://static.sika.sik.party">Arkisto</Anchor>
|
||||
<Anchor to="https://static.sika.sik.party">Materiaalipankki</Anchor>
|
||||
</div>
|
||||
</Columns>
|
||||
</MarginSpace>
|
||||
</div>
|
||||
|
||||
<Map>
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1983.6122518000927!2d24.81667815176689!3d60.187150048900186!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x468df5eb3cb4ecf1%3A0x3480cbfeedcc07b6!2sMaarintie+8%2C+02150+Espoo!5e0!3m2!1sfi!2sfi!4v1542413548247"
|
||||
width="100%"
|
||||
height="100%"
|
||||
/>
|
||||
</Map>
|
||||
</Content>
|
||||
)
|
||||
|
||||
export default FooterContent;
|
||||
@@ -1,2 +0,0 @@
|
||||
import Footer from "./Footer";
|
||||
export default Footer;
|
||||
@@ -1,13 +0,0 @@
|
||||
@import "../../assets/scss/globals";
|
||||
|
||||
.footer-map {
|
||||
display: flex;
|
||||
|
||||
@media screen and (max-width: 1200px - 1px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
import React from "react";
|
||||
import "./FooterMap.scss";
|
||||
|
||||
const AnyReactComponent = ({ text }) => <div>{text}</div>;
|
||||
|
||||
export interface FooterMapProps {}
|
||||
|
||||
export interface FooterMapState {}
|
||||
|
||||
class FooterMap extends React.Component<FooterMapProps, FooterMapState> {
|
||||
render() {
|
||||
return (
|
||||
<div className="footer-map">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1983.6122518000927!2d24.81667815176689!3d60.187150048900186!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x468df5eb3cb4ecf1%3A0x3480cbfeedcc07b6!2sMaarintie+8%2C+02150+Espoo!5e0!3m2!1sfi!2sfi!4v1542413548247"
|
||||
width="600"
|
||||
height="350"
|
||||
>
|
||||
</iframe>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default FooterMap;
|
||||
@@ -1,2 +0,0 @@
|
||||
import FooterMap from "./FooterMap";
|
||||
export default FooterMap;
|
||||
@@ -0,0 +1,49 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { colors } from "@theme/colors";
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
|
||||
min-height: 75vh;
|
||||
|
||||
section {
|
||||
padding: 2rem 6rem;
|
||||
@media screen and (max-width: 800px) {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
aside {
|
||||
padding: 0 6rem;
|
||||
@media screen and (max-width: 800px) {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
flex: 8;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
color: ${colors.white};
|
||||
background-color: ${colors.darkBlue};
|
||||
a:hover {
|
||||
color: ${colors.white};
|
||||
}
|
||||
`;
|
||||
|
||||
const Hero: React.FC = ({ children }) => (
|
||||
<Container>
|
||||
{children}
|
||||
</Container>
|
||||
)
|
||||
|
||||
export default Hero;
|
||||
@@ -0,0 +1,94 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { colors } from "@theme/colors";
|
||||
import Anchor from "@components/Anchor";
|
||||
|
||||
interface HeroAsideItemProps {
|
||||
header: string;
|
||||
text?: string;
|
||||
link: string;
|
||||
linkText: string;
|
||||
}
|
||||
|
||||
const Article = styled.article`
|
||||
max-width: 350px;
|
||||
margin-bottom: 1rem;
|
||||
`;
|
||||
|
||||
export const HeroAsideItem: React.FC<HeroAsideItemProps> = ({ header, text, link, linkText }) => (
|
||||
<Article>
|
||||
<h2>{header}</h2>
|
||||
{text && (
|
||||
<p>{text}</p>
|
||||
)}
|
||||
<Anchor to={link}>
|
||||
<h6>
|
||||
{linkText}
|
||||
</h6>
|
||||
</Anchor>
|
||||
</Article>
|
||||
)
|
||||
|
||||
type Colors = "darkBlue" | "lightTurquoise";
|
||||
|
||||
interface HeroAsideProps {
|
||||
bgColor: Colors;
|
||||
}
|
||||
|
||||
// TODO: Color combos
|
||||
const Aside = styled.aside<{ colors: string }>`
|
||||
${(p) => p.colors}
|
||||
flex: 4;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
h2 {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
|
||||
& > p {
|
||||
font-weight: 600;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
a {
|
||||
line-height: 2rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const textColors = (bgColor: Colors) => {
|
||||
switch(bgColor) {
|
||||
case "darkBlue":
|
||||
return `
|
||||
background-color: ${colors[bgColor]};
|
||||
color: ${colors.lightBlue};
|
||||
`;
|
||||
case "lightTurquoise":
|
||||
return `
|
||||
background-color: ${colors[bgColor]};
|
||||
color: ${colors.darkBlue};
|
||||
`;
|
||||
default: return ""
|
||||
}
|
||||
}
|
||||
|
||||
const HeroAside: React.FC<HeroAsideProps> = ({ bgColor, children}) => (
|
||||
<Aside colors={textColors(bgColor)}>
|
||||
{children}
|
||||
</Aside>
|
||||
)
|
||||
|
||||
export default HeroAside;
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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<HeroAsideItemProps> = ({ title, linkText, linkHref, children }) => (
|
||||
<div className="hero-aside-item">
|
||||
<h2>{title}</h2>
|
||||
<p>{children}</p>
|
||||
<Anchor to={linkHref}>
|
||||
<h6>{linkText} ›</h6>
|
||||
</Anchor>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default HeroAsideItem;
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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<HeroAsideSectionProps & ColorDivProps, HeroAsideSectionState> {
|
||||
render() {
|
||||
const className = "hero-aside-section";
|
||||
return (
|
||||
<ColorDiv className={className} {...this.props}>
|
||||
<div className="hero-aside-section-block">
|
||||
{this.props.children}
|
||||
</div>
|
||||
</ColorDiv>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default HeroAsideSection;
|
||||
@@ -1,51 +0,0 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
margin-top: 15vh;
|
||||
flex: 6;
|
||||
text-align: center;
|
||||
font-weight: 100;
|
||||
line-height: 24px;
|
||||
|
||||
& > div {
|
||||
padding: 2rem 1rem 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 600px;
|
||||
line-height: 40px;
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 400px;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.hero-button-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 20%;
|
||||
|
||||
&-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const HeroMainSection: React.FC = ({children}) => {
|
||||
return (
|
||||
<Container>
|
||||
{children}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default HeroMainSection;
|
||||
@@ -0,0 +1,39 @@
|
||||
import styled from "styled-components";
|
||||
import { colors } from "@theme/colors";
|
||||
|
||||
const Buttons = styled.div<{row?: boolean}>`
|
||||
min-width: 20%;
|
||||
max-width: fit-content;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: ${(p) => p.row ? "row" : "column"};
|
||||
|
||||
a {
|
||||
display: contents;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button {
|
||||
color: ${colors.blue1};
|
||||
background-color: transparent;
|
||||
padding: 0.8rem 2rem;
|
||||
margin: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: .1em;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid ${colors.lightTurquoise};
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: ${colors.white};
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default Buttons;
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { colors } from "@theme/colors";
|
||||
|
||||
interface HeroPrimarySectionProps {
|
||||
header: string;
|
||||
text?: string;
|
||||
}
|
||||
|
||||
const Section = styled.section`
|
||||
margin: 10vh auto 0;
|
||||
max-width: 800px;
|
||||
text-align: center;
|
||||
line-height: 1.5rem;
|
||||
|
||||
h1 {
|
||||
line-height: 40px;
|
||||
@media screen and (max-width: 500px) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 400px;
|
||||
margin: 1em auto;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
a {
|
||||
color: ${colors.blue1};
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
color: ${colors.white};
|
||||
text-decoration: none
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const HeroPrimarySection: React.FC<HeroPrimarySectionProps> = ({ header, text, children }) => (
|
||||
<Section>
|
||||
<h1>{header}</h1>
|
||||
{text && (
|
||||
<p>{text}</p>
|
||||
)}
|
||||
{children}
|
||||
</Section>
|
||||
)
|
||||
|
||||
export default HeroPrimarySection;
|
||||
+16
-17
@@ -1,10 +1,6 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import ColorDiv from "../../ColorDiv/ColorDiv";
|
||||
|
||||
interface HeroSecondarySectionItemProps {
|
||||
note?: string;
|
||||
}
|
||||
import { colors } from "@theme/colors";
|
||||
|
||||
const Note = styled.span`
|
||||
color: white;
|
||||
@@ -25,6 +21,10 @@ const Item = styled.div`
|
||||
margin: 1rem 2rem 1rem;
|
||||
`;
|
||||
|
||||
interface HeroSecondarySectionItemProps {
|
||||
note?: string;
|
||||
}
|
||||
|
||||
export const HeroSecondarySectionItem: React.FC<HeroSecondarySectionItemProps> = ({note, children}) => (
|
||||
<Item>
|
||||
<Note>
|
||||
@@ -34,14 +34,13 @@ export const HeroSecondarySectionItem: React.FC<HeroSecondarySectionItemProps> =
|
||||
</Item>
|
||||
)
|
||||
|
||||
const Container = styled(ColorDiv)`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
const Section = styled.section`
|
||||
background-color: ${colors.green1};
|
||||
color: ${colors.darkBlue};
|
||||
|
||||
h1 {
|
||||
padding: 1em 0;
|
||||
padding: 1rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -51,16 +50,16 @@ const Items = styled.div`
|
||||
`;
|
||||
|
||||
interface HeroSecondarySectionProps {
|
||||
title: string;
|
||||
heading: string;
|
||||
}
|
||||
|
||||
const HeroSecondarySection: React.FC<HeroSecondarySectionProps> = ({title, children}) => (
|
||||
<Container textColor="dark-blue" backgroundColor="green1">
|
||||
<h1>{title}</h1>
|
||||
const HeroSecondarySection: React.FC<HeroSecondarySectionProps> = ({ heading, children }) => (
|
||||
<Section>
|
||||
<h1>{heading}</h1>
|
||||
<Items>
|
||||
{children}
|
||||
</Items>
|
||||
</Container>
|
||||
</Section>
|
||||
)
|
||||
|
||||
export default HeroSecondarySection;
|
||||
export default HeroSecondarySection;
|
||||
@@ -0,0 +1,7 @@
|
||||
export { default as Hero } from "./Hero";
|
||||
export { default as HeroPrimarySection } from "./HeroPrimarySection";
|
||||
export { default as HeroSecondarySection } from "./HeroSecondarySection";
|
||||
export { HeroSecondarySectionItem } from "./HeroSecondarySection";
|
||||
export { default as HeroAside } from "./HeroAside";
|
||||
export { HeroAsideItem as HeroAsideItem } from "./HeroAside";
|
||||
export { default as HeroPrimaryButtons } from "./HeroPrimaryButtons";
|
||||
@@ -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 }) => (
|
||||
<Box>
|
||||
{children}
|
||||
</Box>
|
||||
)
|
||||
|
||||
export default InfoBox;
|
||||
@@ -1,6 +0,0 @@
|
||||
@import "../../assets/scss/globals";
|
||||
|
||||
.info-box {
|
||||
justify-content: flex-end;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
import React from "react";
|
||||
import "./InfoBox.scss";
|
||||
|
||||
export interface InfoBoxProps {}
|
||||
export interface InfoBoxState {}
|
||||
|
||||
class InfoBox extends React.Component<InfoBoxProps, InfoBoxState> {
|
||||
constructor(props: InfoBoxProps) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children } = this.props;
|
||||
return (
|
||||
<div className="info-box">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default InfoBox;
|
||||
@@ -1,2 +0,0 @@
|
||||
import InfoBox from "./InfoBox";
|
||||
export default InfoBox;
|
||||
@@ -1,2 +0,0 @@
|
||||
import JsonLD from "./JsonLD";
|
||||
export default JsonLD;
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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<MainSectionProps & ColorDivProps, MainSectionState> {
|
||||
render() {
|
||||
const { children, className, ...props } = this.props;
|
||||
const classes = classNames(
|
||||
"main-section",
|
||||
className
|
||||
);
|
||||
|
||||
return (
|
||||
<ColorDiv className={classes} {...props}>
|
||||
{children}
|
||||
</ColorDiv>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MainSection;
|
||||
@@ -1,2 +0,0 @@
|
||||
import MainSection from "./MainSection";
|
||||
export default MainSection;
|
||||
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import TextAnchor from "./TextAnchor";
|
||||
import { colors } from "@theme/colors";
|
||||
|
||||
interface PageLinkProps {
|
||||
to: string;
|
||||
desc: string;
|
||||
}
|
||||
|
||||
const StyledPageLink = styled.div`
|
||||
border-left-color: ${colors.blue1};
|
||||
border-left-width: 0.8rem;
|
||||
border-left-style: solid;
|
||||
margin: 0 1rem 1rem 0;
|
||||
|
||||
p {
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
color: ${colors.darkBlue};
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 800;
|
||||
margin-left: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin-left: 1rem;
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
|
||||
color: ${colors.blue1};
|
||||
&:hover {
|
||||
color: ${colors.darkBlue};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const PageLink: React.FC<PageLinkProps> = ({ to, desc, children }) => (
|
||||
<StyledPageLink>
|
||||
<p>{children}</p>
|
||||
<TextAnchor to={to}>{desc}</TextAnchor>
|
||||
</StyledPageLink>
|
||||
);
|
||||
|
||||
export default PageLink;
|
||||
@@ -1,31 +0,0 @@
|
||||
@import "../../assets/scss/globals";
|
||||
|
||||
|
||||
.page-link {
|
||||
border-left-color: color(blue1);
|
||||
border-left-width: 0.8rem;
|
||||
border-left-style: solid;
|
||||
margin: 0 1rem 1rem 0;
|
||||
|
||||
& p {
|
||||
display: flex;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
color: color(dark-blue);
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 800;
|
||||
margin-left: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
& a {
|
||||
color: color(dark-blue);
|
||||
margin-left: 1rem;
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import React from "react";
|
||||
import "./PageLink.scss";
|
||||
import TextAnchor from "../TextAnchor";
|
||||
|
||||
export interface PageLinkProps {
|
||||
to: string;
|
||||
desc: string;
|
||||
}
|
||||
export interface PageLinkState { }
|
||||
|
||||
class PageLink extends React.Component<PageLinkProps, PageLinkState> {
|
||||
render() {
|
||||
const { to, desc } = this.props;
|
||||
return (
|
||||
<div className="page-link">
|
||||
<p>{this.props.children}</p>
|
||||
<TextAnchor to={to}>{desc}</TextAnchor>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PageLink;
|
||||
@@ -1,2 +0,0 @@
|
||||
import PageLink from "./PageLink";
|
||||
export default PageLink;
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
import React from "react";
|
||||
import "./PageSection.scss";
|
||||
import ColorDiv, { ColorDivProps } from "../ColorDiv/ColorDiv";
|
||||
|
||||
export 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<PageSectionProps & ColorDivProps, PageSectionState> {
|
||||
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 (
|
||||
<ColorDiv className={classNames.join(" ")} {...props}>
|
||||
{children}
|
||||
</ColorDiv>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PageSection;
|
||||
@@ -1,2 +0,0 @@
|
||||
import PageSection from "./PageSection";
|
||||
export default PageSection;
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
import React from "react";
|
||||
import "./Ribbon.scss";
|
||||
|
||||
export interface RibbonProps {}
|
||||
export interface RibbonState {}
|
||||
|
||||
class Ribbon extends React.Component<RibbonProps, RibbonState> {
|
||||
render() {
|
||||
return (
|
||||
<div className="ribbon">
|
||||
{this.props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Ribbon;
|
||||
@@ -1,2 +0,0 @@
|
||||
import Ribbon from "./Ribbon";
|
||||
export default Ribbon;
|
||||
@@ -1,2 +0,0 @@
|
||||
import SectionDividerWidget from "./SectionDividerWidget";
|
||||
export default SectionDividerWidget;
|
||||
@@ -0,0 +1,104 @@
|
||||
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { colors } from "@theme/colors";
|
||||
import Anchor from "@components/Anchor";
|
||||
|
||||
const Section = styled.section<{ colors: string }>`
|
||||
${(p) => p.colors}
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
align-items: baseline;
|
||||
padding: 2rem 0;
|
||||
|
||||
flex-direction: row;
|
||||
@media screen and (max-width: 600px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
& > a {
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
margin: 0.5rem 1rem 0;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1rem;
|
||||
}
|
||||
|
||||
& > h1 {
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
type Colors = "orange1" | "lightBlue" | "darkBlue" | "blue1" | "lightTurquoise";
|
||||
|
||||
interface CTASectionProps {
|
||||
bgColor?: Colors;
|
||||
link?: string;
|
||||
linkText?: string;
|
||||
}
|
||||
|
||||
const textColors = (bgColor: Colors) => {
|
||||
switch(bgColor) {
|
||||
case "orange1": return `
|
||||
color: ${colors.white};
|
||||
background-color: ${colors[bgColor]};
|
||||
a:hover {
|
||||
color: ${colors.darkBlue};
|
||||
}
|
||||
`;
|
||||
|
||||
case "darkBlue": return `
|
||||
background-color: ${colors[bgColor]};
|
||||
color: ${colors.white};
|
||||
`;
|
||||
|
||||
case "lightBlue": return `
|
||||
background-color: ${colors[bgColor]};
|
||||
color: ${colors.darkBlue};
|
||||
a:hover {
|
||||
color: ${colors.white};
|
||||
}
|
||||
`;
|
||||
|
||||
case "lightTurquoise": return `
|
||||
background-color: ${colors[bgColor]};
|
||||
color: ${colors.darkBlue};
|
||||
a:hover {
|
||||
color: ${colors.white};
|
||||
}
|
||||
`;
|
||||
case "blue1": return `
|
||||
background-color: ${colors[bgColor]};
|
||||
color: ${colors.white};
|
||||
a:hover {
|
||||
color: ${colors.darkBlue};
|
||||
}
|
||||
`;
|
||||
default: return ""
|
||||
}
|
||||
}
|
||||
|
||||
const CTASection: React.FC<CTASectionProps> = ({ bgColor = "orange1", link, linkText, children }) => (
|
||||
<Section colors={textColors(bgColor)}>
|
||||
<h1>{children}</h1>
|
||||
{link && (
|
||||
<Anchor to={link}>
|
||||
<h4>{linkText}</h4>
|
||||
</Anchor>
|
||||
)}
|
||||
</Section>
|
||||
);
|
||||
|
||||
export default CTASection;
|
||||
@@ -0,0 +1,37 @@
|
||||
import styled from "styled-components";
|
||||
import { colors } from "@theme/colors";
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
& > aside {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
& > * {
|
||||
width: calc(25% - 2rem);
|
||||
|
||||
@media screen and (min-width: 800px) and (max-width: 1200px) {
|
||||
width: calc(50% - 2rem);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
width: 100%;
|
||||
margin: 0 0 3rem 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default CardSection;
|
||||
@@ -0,0 +1,32 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
const StyledSection = styled.section`
|
||||
display: grid;
|
||||
padding: 24px;
|
||||
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-areas:
|
||||
"title"
|
||||
"content";
|
||||
|
||||
* {
|
||||
grid-area: content;
|
||||
}
|
||||
|
||||
& > h1,
|
||||
& > h2,
|
||||
& > h3,
|
||||
& > h4,
|
||||
& > h5,
|
||||
& > h6 {
|
||||
text-align: center;
|
||||
grid-area: title;
|
||||
}
|
||||
`;
|
||||
|
||||
const FullWidthSection: React.FC = (props) => (
|
||||
<StyledSection {...props} />
|
||||
)
|
||||
|
||||
export default FullWidthSection;
|
||||
@@ -0,0 +1,83 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { colors } from "@theme/colors";
|
||||
|
||||
const StyledSection = styled.section`
|
||||
display: grid;
|
||||
padding: 24px;
|
||||
|
||||
grid-template-columns: 1fr 2fr 1fr;
|
||||
grid-template-rows: 1fr auto;
|
||||
grid-template-areas:
|
||||
"title title title"
|
||||
"leftaside content rightaside";
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr auto auto auto;
|
||||
grid-template-areas:
|
||||
"title"
|
||||
"content"
|
||||
"rightaside"
|
||||
"leftaside";
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: ${colors.orange1};
|
||||
}
|
||||
|
||||
& > h1,
|
||||
& > h2,
|
||||
& > h3,
|
||||
& > h4,
|
||||
& > h5,
|
||||
& > h6 {
|
||||
text-align: center;
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
|
||||
& > div, p {
|
||||
grid-area: content;
|
||||
max-width: 1000px;
|
||||
|
||||
}
|
||||
|
||||
& > aside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
align-items: center;
|
||||
max-width: unset;
|
||||
margin-left: unset;
|
||||
margin-top: 48px;
|
||||
|
||||
* {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > aside:first-of-type {
|
||||
grid-area: rightaside;
|
||||
padding-left: 24px;
|
||||
@media screen and (max-width: 800px) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
& > aside:nth-of-type(2) {
|
||||
grid-area: leftaside;
|
||||
padding-right: 24px;
|
||||
@media screen and (max-width: 800px) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const TextSection: React.FC = (props) => (
|
||||
<StyledSection {...props} />
|
||||
)
|
||||
|
||||
export default TextSection;
|
||||
@@ -1,35 +0,0 @@
|
||||
@import "../../assets/scss/globals";
|
||||
|
||||
|
||||
.sponsor-reel {
|
||||
text-align: center;
|
||||
|
||||
h3 {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 500;
|
||||
color: color(dark-blue);
|
||||
margin: 1rem 0 4rem;
|
||||
font-size: 14px;
|
||||
|
||||
@media screen and (max-width: 1200px - 1px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: color(blue1);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&-logos {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
margin-bottom: 3rem;
|
||||
|
||||
img {
|
||||
margin: 0.5rem 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import React from "react";
|
||||
import "./SponsorReel.scss";
|
||||
import TextAnchor from "../TextAnchor";
|
||||
import Anchor from "../Anchor";
|
||||
|
||||
export interface SponsorReelProps { }
|
||||
export interface SponsorReelState { }
|
||||
|
||||
class SponsorReel extends React.Component<SponsorReelProps, SponsorReelState> {
|
||||
render() {
|
||||
return (
|
||||
<div className="sponsor-reel">
|
||||
<h3>Yhteistyössä</h3>
|
||||
<div className="sponsor-reel-logos">
|
||||
<Anchor to="#"><img src="https://placehold.it/200x200" /></Anchor>
|
||||
<Anchor to="#"><img src="https://placehold.it/200x200" /></Anchor>
|
||||
<Anchor to="#"><img src="https://placehold.it/200x200" /></Anchor>
|
||||
<Anchor to="#"><img src="https://placehold.it/200x200" /></Anchor>
|
||||
<Anchor to="#"><img src="https://placehold.it/200x200" /></Anchor>
|
||||
</div>
|
||||
<TextAnchor textColor="blue1" hoverColor="light-turquoise" to="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</TextAnchor>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default SponsorReel;
|
||||
@@ -1,2 +0,0 @@
|
||||
import SponsorReel from "./SponsorReel";
|
||||
export default SponsorReel;
|
||||
@@ -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<TextAnchorProps> = ({ children, to, textColor, hoverColor }) => {
|
||||
const classes = classNames(
|
||||
colorToClass(textColor),
|
||||
hoverColorToClass(hoverColor),
|
||||
)
|
||||
return (
|
||||
<A to={to} className={classes}>
|
||||
{children}
|
||||
</A>
|
||||
);
|
||||
}
|
||||
|
||||
export default TextAnchor;
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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<TextSize, string>([
|
||||
["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<TextAnchorProps, TextAnchorState> {
|
||||
render() {
|
||||
const { children, size, to, textColor, hoverColor } = this.props;
|
||||
const classes = classNames(
|
||||
"text-anchor",
|
||||
colorToClass(textColor),
|
||||
hoverColorToClass(hoverColor),
|
||||
textSizeToClassName.get(size)
|
||||
)
|
||||
return (
|
||||
<Anchor to={to} className={classes}>
|
||||
{children}
|
||||
</Anchor>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default TextAnchor;
|
||||
@@ -1,2 +0,0 @@
|
||||
import TextAnchor from "./TextAnchor";
|
||||
export default TextAnchor;
|
||||
@@ -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};
|
||||
}
|
||||
`;
|
||||
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import "./SectionDividerWidget.scss";
|
||||
import Icon from "../Icon";
|
||||
import { IconType } from "../Icon/Icon";
|
||||
import Icon from "../../Icon";
|
||||
import { IconType } from "../../Icon/Icon";
|
||||
|
||||
export interface SectionDividerWidgetProps {
|
||||
label: string;
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import { Question, InputProps, optionTypes, SignupQuestionError } from "./index";
|
||||
import Checkbox from "@components/Checkbox/Checkbox";
|
||||
import Checkbox from "@components/Widgets/Checkbox/Checkbox";
|
||||
|
||||
export interface OptionsWidgetProps {
|
||||
inputProps: InputProps;
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
@import "../../assets/scss/globals";
|
||||
@import "../../../assets/scss/globals";
|
||||
|
||||
|
||||
.signup-questions-widget {
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user