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

Add "Kilta" page

Browse Source
This commit is contained in:
Jan Tuomi
2018-11-21 12:04:36 +02:00
parent 7a93b141b9
commit 3a2db665a7
12 changed files with 155 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/scss/_globals.scss
+2 -2
View File
@@ -7,8 +7,8 @@ $grey2: #efece4;
$orange1: #d57a2d;
$orange2: #dd934e;
$blue: #57b2df;
$green1: #beddeb;
$green2: #c0dcd9;
$light-turquoise: #beddeb;
$green: #c0dcd9;
$sand: #fdf9d7;
$font: 'Montserrat', sans-serif;
src/components/Button/Button.scss
+1 -1
View File
@@ -18,7 +18,7 @@
color: $blue;
font-weight: 800;
letter-spacing: 1.5px;
border: 1px solid $green2;
border: 1px solid $light-turquoise;
}
&.filled {
src/components/HeroAsideItem/HeroAsideItem.scss
-2
View File
@@ -14,7 +14,6 @@
}
h2 {
color: $light-blue;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 18px;
@@ -22,7 +21,6 @@
}
p {
color: $white;
font-size: 14px;
}
src/components/HeroAsideSection/HeroAsideSection.scss
+21
View File
@@ -13,4 +13,25 @@
text-align: left;
font-weight: 300;
padding: 3rem 1rem 2rem;
&.dark-blue {
background-color: $dark-blue;
h2 {
color: $light-blue;
}
p {
color: $white;
}
}
&.light-turquoise {
background-color: $light-turquoise;
h2,
p {
color: $dark-blue;
}
}
}
src/components/HeroAsideSection/HeroAsideSection.tsx
+19 -21
View File
@@ -2,32 +2,30 @@ import * as React from "react";
import "./HeroAsideSection.scss";
import HeroAsideItem from "../HeroAsideItem";
export interface HeroAsideSectionProps {}
export enum BackgroundColor {
DarkBlue,
LightTurquoise,
}
export interface HeroAsideSectionProps {
backgroundColor: BackgroundColor;
}
export interface HeroAsideSectionState {}
const colors = new Map<BackgroundColor, string>([
[BackgroundColor.DarkBlue, "dark-blue"],
[BackgroundColor.LightTurquoise, "light-turquoise"],
]);
class HeroAsideSection extends React.Component<HeroAsideSectionProps, HeroAsideSectionState> {
render() {
const { backgroundColor } = this.props;
const bgClass = colors.get(backgroundColor);
const className = `hero-aside-section ${bgClass}`;
return (
<div className="hero-aside-section">
<HeroAsideItem
title="Vasta-aloittanut opiskelija"
linkHref="/kilta/fuksi"
linkText="Fuksit">
Fuksikasvatusta, ISO-toimintaa, lorem
ipsum dolor sit ja amet.
</HeroAsideItem>
<HeroAsideItem
title="Harkitsetko uraa alalla?"
linkHref="/opinnot_ja_ura"
linkText="Opinnot ja ura">
Oletko abi, vaihtamassa uraa tai valmistumassa?
</HeroAsideItem>
<HeroAsideItem
title="Yhteistyö yritysten kanssa"
linkHref="/yritysyhteistyo"
linkText="Yritysyhteistyö">
Avoimet työpaikat ja excursiot. Infoa yritysten edustajille ja sponsseille.
</HeroAsideItem>
<div className={className}>
<div className="hero-aside-section-block">
{this.props.children}
</div>
</div>
);
}
src/components/PageSection/PageSection.scss
+4 -1
View File
@@ -1,13 +1,16 @@
@import "../../assets/scss/globals";
.page-section {
padding: 2rem 1rem;
background-color: $dark-blue;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
position: relative;
.padded {
padding: 2rem 1rem 3rem;
}
&:not(.card-section) {
@media screen and (max-width: 800px - 1px) {
flex-flow: column nowrap;
src/components/PageSection/PageSection.tsx
+4 -2
View File
@@ -12,6 +12,7 @@ export interface PageSectionProps {
center?: boolean;
bottomBorder?: boolean;
cardSection?: boolean; // does section contain a grid of cards
fullSize?: boolean;
}
export interface PageSectionState {}
@@ -23,11 +24,12 @@ const colors = new Map<BackgroundColor, string>([
class PageSection extends React.Component<PageSectionProps, PageSectionState> {
render() {
const { backgroundColor, children, center, bottomBorder, cardSection } = this.props;
const { backgroundColor, children, center, bottomBorder, cardSection, fullSize } = this.props;
const centerClass = center ? "center" : "";
const borderClass = bottomBorder ? "bottom-border" : "";
const cardsClass = cardSection ? "card-section" : "";
const className = `page-section ${colors.get(backgroundColor)} ${centerClass} ${borderClass} ${cardsClass}`;
const nonPaddedClass = fullSize ? "" : "padded";
const className = `page-section ${colors.get(backgroundColor)} ${centerClass} ${borderClass} ${cardsClass} ${nonPaddedClass}`;
return (
<div className={className}>
{children}
src/pages/FrontPage/FrontPage.tsx
+24 -2
View File
@@ -11,12 +11,15 @@ import { StaticContext } from "../../server/StaticContext";
import * as BeerImage from "../../assets/img/beer.jpeg";
import PageSection from "../../components/PageSection";
import { BackgroundColor as PageSectionColor } from "../../components/PageSection/PageSection";
import { BackgroundColor as HeroAsideColor } from "../../components/HeroAsideSection/HeroAsideSection";
import PageLink from "../../components/PageLink/PageLink";
import HeroMainSection from "../../components/HeroMainSection";
import HeroAsideSection from "../../components/HeroAsideSection";
import Button, { ButtonType } from "../../components/Button";
import Ribbon from "../../components/Ribbon";
import SponsorReel from "../../components/SponsorReel";
import HeroAsideItem from "../../components/HeroAsideItem";
interface FrontPageProps {
staticContext: StaticContext;
@@ -88,7 +91,7 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
const { events, feed } = this.state;
return (
<div className="front-page">
<PageSection backgroundColor={PageSectionColor.DarkBlue}>
<PageSection backgroundColor={PageSectionColor.DarkBlue} fullSize>
<HeroMainSection>
<h1>Aalto-yliopiston Sähköinsinöörikilta</h1>
<p>on elektroniikan ja sähkötekniikan opiskelijoiden järjestö.
@@ -98,7 +101,26 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
<Button type={ButtonType.Hero} onClick={() => { }}>Killan tehtävät&nbsp;›</Button>
<Button type={ButtonType.Hero} onClick={() => { }}>Vastapainoa opiskelulle&nbsp;›</Button>
</HeroMainSection>
<HeroAsideSection>
<HeroAsideSection backgroundColor={HeroAsideColor.DarkBlue}>
<HeroAsideItem
title="Vasta-aloittanut opiskelija"
linkHref="/kilta/fuksi"
linkText="Fuksit">
Fuksikasvatusta, ISO-toimintaa, lorem
ipsum dolor sit ja amet.
</HeroAsideItem>
<HeroAsideItem
title="Harkitsetko uraa alalla?"
linkHref="/opinnot_ja_ura"
linkText="Opinnot ja ura">
Oletko abi, vaihtamassa uraa tai valmistumassa?
</HeroAsideItem>
<HeroAsideItem
title="Yhteistyö yritysten kanssa"
linkHref="/yritysyhteistyo"
linkText="Yritysyhteistyö">
Avoimet työpaikat ja excursiot. Infoa yritysten edustajille ja sponsseille.
</HeroAsideItem>
</HeroAsideSection>
</PageSection>
<PageSection backgroundColor={PageSectionColor.White} cardSection>
src/pages/GuildPage/GuildPage.scss
+3
View File
@@ -0,0 +1,3 @@
.guild-page {
width: inherit;
}
src/pages/GuildPage/GuildPage.tsx
+70
View File
@@ -0,0 +1,70 @@
import * as React from "react";
import Helmet from "react-helmet";
import "./GuildPage.scss";
import PageSection from "../../components/PageSection";
import HeroMainSection from "../../components/HeroMainSection";
import HeroAsideSection from "../../components/HeroAsideSection";
import HeroAsideItem from "../../components/HeroAsideItem";
import Button from "../../components/Button";
import { ButtonType } from "../../components/Button";
import { BackgroundColor as PageSectionColor } from "../../components/PageSection/PageSection";
import { BackgroundColor as HeroAsideColor } from "../../components/HeroAsideSection/HeroAsideSection";
export interface GuildPageProps {}
export interface GuildPageState {}
class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
render() {
return (
<div className="guild-page">
<Helmet>
<link rel="canonical" href="https://sik.ayy.fi/kilta" />
</Helmet>
<div className="front-page">
<PageSection backgroundColor={PageSectionColor.DarkBlue} fullSize>
<HeroMainSection>
<h1>Kilta koostuu sähkötekniikan ja
elektroniikan (ELEC) tutkinto-ohjelmissa
opiskelevista
opiskelijoista</h1>
<p>Vapaa-ajan jäsenpalvelujen lisäksi killan tehtävänä
on edistää jäsentensä opintoja, tarjota uraohjausta ja
fuksikasvatusta. Jokaiselle jäsenelle löytyy varmasti
jotakin—kaukomaita, opiskelijalehti Sössöä, ja kiltaaktiivina
pääset kartuttamaan kokemusta, josta on
hyötyä myös työelämässä.</p>
<p>Arvot estrumquias doluptatur aut quam fugiti cus debit
landisciis eatemperes eumquibus di blat que sim etus idis
dolut labor ad magnat.</p>
</HeroMainSection>
<HeroAsideSection backgroundColor={HeroAsideColor.LightTurquoise}>
<HeroAsideItem
title="Toverielämää ja sähkötekniikkaa"
linkHref="/kilta/tehtavat"
linkText="Killan tehtavat ja tarina">
</HeroAsideItem>
<HeroAsideItem
title="Aktiivinen hallinto"
linkHref="/kilta/organisaatio"
linkText="Organisaatio">
</HeroAsideItem>
<HeroAsideItem
title="Kilta-aktiivit järjestävät monipuolista toimintaa"
linkHref="/kilta/organisaatio"
linkText="Toimikunnat ja jaokset">
</HeroAsideItem>
<HeroAsideItem
title="Edut jäsenille"
linkHref="/kilta/yliopisto"
linkText="Yliopiston jäsenedut">
</HeroAsideItem>
</HeroAsideSection>
</PageSection>
</div>
</div>
);
}
}
export default GuildPage;
src/pages/GuildPage/index.ts
+2
View File
@@ -0,0 +1,2 @@
import GuildPage from "./GuildPage";
export default GuildPage;
src/routes.tsx
+5 -3
View File
@@ -3,13 +3,14 @@ import { Fragment } from "react";
import { Switch, Route, DefaultRoute } from "react-router-dom";
import Helmet from "react-helmet";
import FrontPage from "./pages/FrontPage";
import GuildPage from "./pages/GuildPage";
import NotFoundPage from "./pages/NotFoundPage";
import CommonPage from "./pages/CommonPage";
import JsonLD from "./components/JsonLD";
import "./index.scss";
const renderFrontPage = (props): JSX.Element => {
return <CommonPage page={FrontPage} {...props} />;
const renderPage = (Page) => (props): JSX.Element => {
return <CommonPage page={Page} {...props} />;
};
const Routes = () => (
@@ -26,7 +27,8 @@ const Routes = () => (
"url": "https://sik.ayy.fi",
}} />
<Switch>
<Route exact path="/" render={renderFrontPage} />
<Route exact path="/" render={renderPage(FrontPage)} />
<Route path="/kilta" render={renderPage(GuildPage)} />
<Route component={NotFoundPage} />
</Switch>
</Fragment>