Some ActualPage layout
This commit is contained in:
Aarni Halinen
@@ -26,9 +26,9 @@ class Accordion extends React.Component<AccordionProps, AccordionState> {
|
||||
}
|
||||
|
||||
handleClick() {
|
||||
this.setState({
|
||||
isOpen: !this.state.isOpen,
|
||||
});
|
||||
this.setState((prevState) => ({
|
||||
isOpen: !prevState.isOpen,
|
||||
}));
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
@@ -30,4 +30,8 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 20%;
|
||||
|
||||
&-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,19 @@
|
||||
import React from "react";
|
||||
import { Helmet } from "react-helmet";
|
||||
import "./ActualPage.scss";
|
||||
import PageSection from "../../components/PageSection";
|
||||
import { ColorEnum } from "../../components/ColorDiv/ColorDiv";
|
||||
import HeroMainSection from "../../components/HeroMainSection";
|
||||
import HeroAsideSection from "../../components/HeroAsideSection";
|
||||
import HeroAsideItem from "../../components/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 { TextSize } from "../../components/TextAnchor/TextAnchor";
|
||||
import Button, { ButtonType } from "../../components/Button/index";
|
||||
import Accordion from "../../components/Accordion";
|
||||
|
||||
export interface ActualPageProps {}
|
||||
export interface ActualPageState {}
|
||||
@@ -12,7 +25,111 @@ class ActualPage extends React.Component<ActualPageProps, ActualPageState> {
|
||||
<Helmet>
|
||||
<link rel="canonical" href="https://sik.ayy.fi/kilta/toiminta" />
|
||||
</Helmet>
|
||||
Actual Page
|
||||
<PageSection backgroundColor={ColorEnum.DarkBlue} fullSize className="lander-hero">
|
||||
<HeroMainSection>
|
||||
<div>
|
||||
<h1>Yritystapahtumia ja vastapainoa opiskelulle</h1>
|
||||
<p>
|
||||
Teekkarielämä ei ole pelkkää saunomista, juhlimista ja muita huvituksia—tai no, on se sitäkin.
|
||||
</p>
|
||||
<div className="hero-button-container-row">
|
||||
<Button type={ButtonType.Hero} onClick={() => { }}>
|
||||
<h6>Tapahtumat ›</h6>
|
||||
</Button>
|
||||
<Button type={ButtonType.Hero} onClick={() => { }}>
|
||||
<h6>Uutiset ›</h6>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hero-secondary-section">
|
||||
<h1>Kiltahuone sijaitsee Tuas-talossa (Maarintie 8)</h1>
|
||||
<p>Killan hallitus päivystää kiltahuoneella maanantaisin klo 12.15–13.15. Tuolloin voit ostaa kiltatuotteita, kuten esim. haalarimerkkejä tai laulukirjoja.</p>
|
||||
<p>Kiltapäiväkerho Kiltis kokoontuu torstaisin klo XX.XX kiltahuoneella. Lorem ipsum dolor sit amet. Lämpimästi tervetuloa kaikki SIKkiläiset ja SIK-mieliset!</p>
|
||||
</div>
|
||||
</HeroMainSection>
|
||||
<HeroAsideSection textColor={ColorEnum.DarkBlue} backgroundColor={ColorEnum.LightTurquoise}>
|
||||
<p>
|
||||
Kilta järjestää jäsenilleen jos jonkinlaista projektia ja toimintaa, muun muassa:
|
||||
</p>
|
||||
<HeroAsideItem
|
||||
title="keksimistä ja rakentelua"
|
||||
linkHref="#elepaja"
|
||||
linkText="Elektroniikkapaja">
|
||||
</HeroAsideItem>
|
||||
<HeroAsideItem
|
||||
title="Tiimipelejä ja liikuntaa"
|
||||
linkHref="#urheilu"
|
||||
linkText="Urheilu">
|
||||
</HeroAsideItem>
|
||||
<HeroAsideItem
|
||||
title="Konsertteja ja teatterivierailuja"
|
||||
linkHref="#kulttuuri"
|
||||
linkText="Kulttuuri">
|
||||
</HeroAsideItem>
|
||||
<HeroAsideItem
|
||||
title="Verkostoitumista"
|
||||
linkHref="#yritysyhteistyö"
|
||||
linkText="Yritysyhteistyö">
|
||||
</HeroAsideItem>
|
||||
<HeroAsideItem
|
||||
title="Uusia suhteita ulkopaikkakuntalaisten kanssa"
|
||||
linkHref="#ulkosuhteet"
|
||||
linkText="Ulkoiset suhteet">
|
||||
</HeroAsideItem>
|
||||
</HeroAsideSection>
|
||||
</PageSection>
|
||||
<PageSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black}>
|
||||
<MainSection>
|
||||
<h3>Tapahtumat</h3>
|
||||
</MainSection>
|
||||
</PageSection>
|
||||
<PageSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black}>
|
||||
<MainSection>
|
||||
<h3>Uutiset</h3>
|
||||
</MainSection>
|
||||
</PageSection>
|
||||
<PageSection backgroundColor={ColorEnum.LightTurquoise} textColor={ColorEnum.DarkBlue}>
|
||||
<Ribbon>
|
||||
<h3>Kuvia tapahtumista.</h3>
|
||||
<TextAnchor textColor={ColorEnum.DarkBlue} hoverColor={ColorEnum.Blue} size={TextSize.SmallRibbon} to="https://sosso.fi">
|
||||
<h6>Kuvagalleria ›</h6>
|
||||
</TextAnchor>
|
||||
</Ribbon>
|
||||
</PageSection>
|
||||
Kuva-galleriasta hyviä kuvia 3kpl. (Esim. wireframen kuvat)
|
||||
<PageSection backgroundColor={ColorEnum.Blue}>
|
||||
<Ribbon>
|
||||
<h3>Sinustako kilta-aktiivi?</h3>
|
||||
<TextAnchor textColor={ColorEnum.White} hoverColor={ColorEnum.Blue} size={TextSize.SmallRibbon} to="https://sosso.fi">
|
||||
<h6>Tule mukaan kiltatoimintaan ›</h6>
|
||||
</TextAnchor>
|
||||
</Ribbon>
|
||||
</PageSection>
|
||||
<PageSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black}>
|
||||
<AsideSection />
|
||||
<MainSection>
|
||||
<h3>Yritystapahtumia ja vastapainoa opiskelulle</h3>
|
||||
<p>
|
||||
Toimintaa ylläpitää ja järjestää jaokset ja toimikunnat.
|
||||
</p>
|
||||
<Accordion title="Rakenna kaikkea elektroniikkaan liittyvää">
|
||||
Jotain elepajasta
|
||||
</Accordion>
|
||||
<Accordion title="Urheilua ja lajikokeiluja">
|
||||
Jotain elepajasta
|
||||
</Accordion>
|
||||
<Accordion title="Kulttuuria kulinarismista teatteriin">
|
||||
Jotain elepajasta
|
||||
</Accordion>
|
||||
<Accordion title="Yhteistyö yritysten kanssa">
|
||||
Jotain elepajasta
|
||||
</Accordion>
|
||||
<Accordion title="Kansainvälisty ja luo suhteita">
|
||||
Jotain elepajasta
|
||||
</Accordion>
|
||||
</MainSection>
|
||||
<AsideSection />
|
||||
</PageSection>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user