TTMK/web2.0-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

All sorts of BS

Browse Source
This commit is contained in:
Aarni Halinen
2020-10-08 23:33:51 +03:00
parent 1b6bee5493
commit 8e883d7eac
37 changed files with 414 additions and 564 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Anchor.tsx
+25
View File
@@ -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;
src/components/Anchor/Anchor.tsx
-29
View File
@@ -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;
src/components/Anchor/index.ts
-2
View File
@@ -1,2 +0,0 @@
import Anchor from "./Anchor";
export default Anchor;
src/components/AsideSection/AsideSection.scss
-10
View File
@@ -1,10 +0,0 @@
@import "../../assets/scss/globals";
.aside-section {
display: flex;
flex: 1;
flex-flow: column;
justify-content: space-between;
padding: 3rem 4rem;
}
src/components/AsideSection/AsideSection.tsx
+27 -19
View File
@@ -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<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>
);
const Section = styled.div<ColorDivProps>`
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<AsideSectionProps> = ({ textColor, backgroundColor, hoverColor, backgroundHoverColor, ...props }) => (
<Section
textColor={ColorMapper.get(textColor)}
backgroundColor={ColorMapper.get(backgroundColor)}
hoverColor={ColorMapper.get(hoverColor)}
hoverBackgroundColor={ColorMapper.get(backgroundHoverColor)}
{...props}
/>
);
export default AsideSection;
src/components/Checkbox/Checkbox.tsx
+3 -2
View File
@@ -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};
}
`;
src/components/ColorDiv/ColorDiv.scss
-66
View File
@@ -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;
}
}
src/components/ColorDiv/ColorDiv.tsx
+27 -23
View File
@@ -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<HTMLDivElement> {
interface ColorsProps {
textColor?: string;
backgroundColor?: string;
hoverColor?: string;
hoverBackgroundColor?: string;
}
export type ColorDivProps = 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>
);
const Div = styled.div<ColorsProps>`
color: ${(p) => p.textColor};
background-color: ${(p) => p.backgroundColor};
&:hover {
color: ${(p) => p.hoverColor};
background-color: ${(p) => p.hoverBackgroundColor};
}
}
`;
const ColorDiv: React.FC<ColorDivProps> = ({ textColor, backgroundColor, hoverColor, backgroundHoverColor, ...props }) => (
<Div
textColor={ColorMapper.get(textColor)}
backgroundColor={ColorMapper.get(backgroundColor)}
hoverColor={ColorMapper.get(hoverColor)}
hoverBackgroundColor={ColorMapper.get(backgroundHoverColor)}
{...props}
/>
);
export default ColorDiv;
src/components/Hero/HeroAsideItem.tsx
+56
View File
@@ -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<HeroAsideItemProps> = ({ title, linkText, linkHref, children }) => (
<Section>
<h2>{title}</h2>
<p>{children}</p>
<Anchor to={linkHref}>
<h6>{linkText} ›</h6>
</Anchor>
</Section>
)
export default HeroAsideItem;
src/components/Hero/HeroAsideItem/HeroAsideItem.scss
-36
View File
@@ -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);
}
}
src/components/Hero/HeroAsideItem/HeroAsideItem.tsx
-21
View File
@@ -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;
src/components/Hero/HeroAsideSection.tsx
+53
View File
@@ -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<ColorDivProps> = (props) => {
return (
<Section {...props} />
);
}
export default HeroAsideSection;
src/components/Hero/HeroAsideSection/HeroAsideSection.scss
-43
View File
@@ -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);
}
}
src/components/Hero/HeroAsideSection/HeroAsideSection.tsx
-22
View File
@@ -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;
src/components/Hero/HeroMainSection/HeroMainSection.tsx → src/components/Hero/HeroMainSection.tsx
View File
src/components/Hero/HeroSecondarySection/HeroSecondarySection.tsx → src/components/Hero/HeroSecondarySection.tsx
+1 -1
View File
@@ -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;
src/components/MainSection.tsx
+30
View File
@@ -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<ColorDivProps> = (props) => (
<Section {...props} />
);
export default MainSection;
src/components/MainSection/MainSection.scss
-21
View File
@@ -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;
}
}
src/components/MainSection/MainSection.tsx
-25
View File
@@ -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;
src/components/MainSection/index.ts
-2
View File
@@ -1,2 +0,0 @@
import MainSection from "./MainSection";
export default MainSection;
src/components/PageSection/PageSection.scss
-40
View File
@@ -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);
}
}
}
src/components/PageSection/PageSection.tsx
+37 -23
View File
@@ -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<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>
);
const Section = styled(ColorDiv)<PageSectionProps>`
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<PageSectionProps & ColorDivProps> = (props) => {
return (
<Section {...props} />
);
}
export default PageSection;
src/components/Ribbon/Ribbon.scss
-24
View File
@@ -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;
}
}
src/components/Ribbon/Ribbon.tsx
+29 -12
View File
@@ -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<RibbonProps, RibbonState> {
render() {
return (
<div className="ribbon">
{this.props.children}
</div>
);
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;
src/components/TextAnchor.tsx
+30
View File
@@ -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;
src/components/TextAnchor/TextAnchor.scss
-18
View File
@@ -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;
}
}
src/components/TextAnchor/TextAnchor.tsx
-49
View File
@@ -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;
src/components/TextAnchor/index.ts
-2
View File
@@ -1,2 +0,0 @@
import TextAnchor from "./TextAnchor";
export default TextAnchor;
src/theme/colors.ts
+25 -7
View File
@@ -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<Colors, string>([
["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"
}
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;
src/views/ActualPage/ActualPageView.tsx
+10 -10
View File
@@ -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<ActualPageViewProps> = ({events, feed}) => {
<PageSection backgroundColor="light-turquoise" textColor="dark-blue">
<Ribbon>
<h3>Kuvia tapahtumista.</h3>
<TextAnchor textColor="dark-blue" hoverColor="blue1" size="small-ribbon" to="https://sosso.fi">
<TextAnchor textColor="dark-blue" hoverColor="blue1" to="https://sosso.fi">
<h6>Kuvagalleria&nbsp;›</h6>
</TextAnchor>
</Ribbon>
@@ -106,7 +106,7 @@ const ActualPageView: React.FC<ActualPageViewProps> = ({events, feed}) => {
<PageSection backgroundColor="blue1">
<Ribbon>
<h3>Sinustako kilta-aktiivi?</h3>
<TextAnchor textColor="white1" hoverColor="dark-blue" size="small-ribbon" to="https://sosso.fi">
<TextAnchor textColor="white1" hoverColor="dark-blue" to="https://sosso.fi">
<h6>Tule mukaan kiltatoimintaan&nbsp;›</h6>
</TextAnchor>
</Ribbon>
src/views/ContactsPage/ContactsPageView.tsx
+1 -1
View File
@@ -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[];
src/views/CorporatePage/CorporatePageView.tsx
+9 -9
View File
@@ -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 = () => (
<AsideSection backgroundColor="white1" textColor="black1" />
<MainSection backgroundColor="white1" textColor="black1">
<h3>Lyhyesti killasta ja sen toiminnasta</h3>
<p><strong>Aalto-yliopiston Sähköinsinöörikillan</strong> 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.</p>
<h3 id="yhteistyomahdollisuudet">Yhteistyömahdollisuudet</h3>
@@ -83,7 +83,7 @@ const CorporatePageView: React.FC = () => (
<PageSection backgroundColor="orange1">
<Ribbon>
<h3>Mainos Sössöön?</h3>
<TextAnchor textColor="white1" hoverColor="blue1" size="small-ribbon" to="https://sosso.fi">
<TextAnchor textColor="white1" hoverColor="blue1" to="https://sosso.fi">
<h4>Killan lehden mediakortin löydät täältä›</h4>
</TextAnchor>
</Ribbon>
src/views/EventPage/EventPageView.tsx
+18 -14
View File
@@ -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<EventPageViewProps> = ({ event }) => {
<h1>
{event.title_fi}
</h1>
<p className="event-desc">
<p>
{event.description_fi}
</p>
<img src={event.image || event.tags[0].icon} alt={event.title_fi} />
<div>
<img src={event.image || event.tags[0].icon} alt={event.title_fi} />
</div>
<Content>
<ReactMarkdown source={event.content_fi} escapeHtml={false} />
</Content>
{/* We may have multiple signup forms. Generate own Button for each one */}
<div className="event-signup-buttons">
<SignupButtons>
{event.signupForm.map(sf => (
<Anchor key={sf.id} to={`/signup/${sf.id}`}>
<Button type="filled" onClick={() => {}}>
@@ -96,7 +100,7 @@ const EventPageView: React.FC<EventPageViewProps> = ({ event }) => {
</Anchor>
)
)}
</div>
</SignupButtons>
</StyledSection>
</PageSection>
);
src/views/FreshmenPage/FreshmenPageView.tsx
+12 -12
View File
@@ -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 = () => (
<p>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!</p>
<p>Ensi askeleina suosittelen, että liityt teille fukseille tehdyille Telegram-kanaville. Tästä pääset tiedotuskanavalle ja <TextAnchor to="https://t.me/joinchat/GsmJjhst3-BYIHQSefVhHg" textColor="blue1" hoverColor="dark-blue">tästä</TextAnchor> tutustumaan fuksikavereihin ja ISOihisi.</p>
<h6>Matka nimeltä Teekkarius</h6>
<p>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.</p>
@@ -102,7 +102,7 @@ const FreshmenPageView: React.FC = () => (
<PageSection backgroundColor="light-turquoise">
<Ribbon>
<h3>Killassa tapahtuu kaikenlaista!</h3>
<TextAnchor textColor="white1" hoverColor="blue1" size="small-ribbon" to="/kilta/toiminta">
<TextAnchor textColor="white1" hoverColor="blue1" to="/kilta/toiminta">
<h4>Seuraa killan tapahtumia</h4>
</TextAnchor>
</Ribbon>
src/views/FrontPage/FrontPageView.tsx
+4 -4
View File
@@ -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<FrontPageViewProps> = ({ events, feed }) => (
<PageSection backgroundColor="orange1">
<Ribbon>
<h3>Sössöä vuodesta 1969.</h3>
<TextAnchor textColor="white1" hoverColor="blue1" size="small-ribbon" to="https://sosso.fi">
<TextAnchor textColor="white1" hoverColor="blue1" to="https://sosso.fi">
<h4>Lue opiskelijalehden viimeisin numero&nbsp;›</h4>
</TextAnchor>
</Ribbon>
src/views/GuildPage/GuildPageView.tsx
+4 -4
View File
@@ -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 = () => (
</PageSection>
<PageSection backgroundColor="dark-blue">
<Ribbon>
<p>Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <TextAnchor textColor="white1" hoverColor="blue1" size="ribbon" to="/toimikunnat">toimikunnat</TextAnchor> ja <TextAnchor textColor="white1" hoverColor="blue1" size="ribbon" to="/jaokset">jaokset</TextAnchor>.</p>
<p>Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <TextAnchor textColor="white1" hoverColor="blue1" to="/toimikunnat">toimikunnat</TextAnchor> ja <TextAnchor textColor="white1" hoverColor="blue1" to="/jaokset">jaokset</TextAnchor>.</p>
</Ribbon>
</PageSection>
<div style={{ display: "flex" }}>
src/views/StudiesPage/StudiesPageView.tsx
+13 -13
View File
@@ -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 = () => (
<div className="studies-page">
@@ -54,17 +54,17 @@ const StudiesPageView: React.FC = () => (
<h6>Emmaleena</h6>
<p>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.</p>
<h6>ALUMNIEN TARINOITA</h6>
<p>SIKin alumneja löytyy vaikka mistä! Tässä muutama esimerkki erilaisista työtehtävistä ja tarinoista.</p>
</MainSection>
<AsideSection backgroundColor="white1" textColor="black1">
<div>
<PageLink to="https:https://static.sika.sik.party/saannot/excursiosaannot.pdf" desc="Lue täältä&nbsp;›">
Kurssitarjonta
Kurssitarjonta
</PageLink>
<PageLink to="/jaseneksi/" desc="ja tule mukaan toimintaamme&nbsp;›">
Liity jäseneksi
Liity jäseneksi
</PageLink>
</div>
</AsideSection>
@@ -72,7 +72,7 @@ const StudiesPageView: React.FC = () => (
<PageSection backgroundColor="orange1">
<Ribbon>
<h3>Hae opiskelemaan!</h3>
<TextAnchor textColor="white1" hoverColor="blue1" size="small-ribbon" to="https://aalto.fi">
<TextAnchor textColor="white1" hoverColor="blue1" to="https://aalto.fi">
<h4>Lue lisää Aallon sivuilta</h4>
</TextAnchor>
</Ribbon>