Guild page text anchors

This commit is contained in:
Aarni Halinen
2019-05-27 19:52:49 +03:00
parent 584ec851f8
commit ba46130b38
8 changed files with 93 additions and 69 deletions
@@ -1,5 +0,0 @@
@import "../../assets/scss/globals";
.custom-link {
text-decoration: underline;
}
-20
View File
@@ -1,20 +0,0 @@
import * as React from "react";
import { Link } from "react-router-dom";
import "./CustomLink.scss";
export interface CustomLinkProps {
linkText: string;
linkHref: string;
}
export interface CustomLinkState {}
class CustomLink extends React.Component<CustomLinkProps, CustomLinkState> {
render() {
const { linkText, linkHref } = this.props;
return (
<Link className="custom-link" to={linkHref}>{linkText}</Link>
);
}
}
export default CustomLink;
-2
View File
@@ -1,2 +0,0 @@
import CustomLink from "./CustomLink";
export default CustomLink;
+19
View File
@@ -0,0 +1,19 @@
@import "../../assets/scss/globals";
.text-anchor {
color: $blue;
text-decoration: underline;
font-weight: 600;
&:hover {
color: $blue;
}
&.sm {
font-size: 1em;
}
&.lg {
font-size: 2em;
}
}
+41
View File
@@ -0,0 +1,41 @@
import * as React from "react";
import "./TextAnchor.scss";
import { Link } from "react-router-dom";
export enum TextSize {
Small,
Large,
}
const sizes = new Map<TextSize, string>([
[TextSize.Small, "sm"],
[TextSize.Large, "lg"],
]);
export interface TextAnchorProps {
size?: TextSize;
to: string;
}
export interface TextAnchorState {}
class TextAnchor extends React.Component<TextAnchorProps, TextAnchorState> {
render() {
const { children, size, to } = this.props;
const className = `text-anchor ${sizes.get(size ? size : TextSize.Small)}`;
if (to.startsWith("/")) {
return (
<Link to={to} className={className}>
{children}
</Link>
);
} else {
return (
<a href={to} className={className}>
{children}
</a>
);
}
}
}
export default TextAnchor;
+2
View File
@@ -0,0 +1,2 @@
import TextAnchor from "./TextAnchor";
export default TextAnchor;
-1
View File
@@ -35,7 +35,6 @@ h2 {
}
p {
color: $white;
font-size: 16px;
}
+31 -41
View File
@@ -12,8 +12,8 @@ import Ribbon from "../../components/Ribbon";
import InfoBox from "../../components/InfoBox";
import { BackgroundColor as PageSectionColor } from "../../components/PageSection/PageSection";
import { BackgroundColor as HeroAsideColor } from "../../components/HeroAsideSection/HeroAsideSection";
import CustomLink from "../../components/CustomLink";
import Accordion from "../../components/Accordion";
import TextAnchor from "../../components/TextAnchor/index";
export interface GuildPageProps {}
export interface GuildPageState {}
@@ -28,19 +28,9 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
<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
jotakinkaukomaita, 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>
<h1>Kilta koostuu sähkötekniikan ja elektroniikan (ELEC) tutkinto-ohjelmissa opiskelevista opiskelijoista</h1>
<p>Vapaa-ajan <TextAnchor to="/">jäsenpalvelujen</TextAnchor> lisäksi killan tehtävänä on edistää jäsentensä <TextAnchor to="/">opintoja</TextAnchor>, tarjota uraohjausta ja <TextAnchor to="/">fuksikasvatusta</TextAnchor>. Jokaiselle jäsenelle löytyy varmasti jotakinkaukomaita, opiskelijalehti <TextAnchor to="https://sosso.fi">Sössöä</TextAnchor>, 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
@@ -69,55 +59,55 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
<AsideSection className="page__white" />
<MainSection>
<h2>Killan tehtävät ja tarina</h2>
Kilta tukee jäsentensä hyvinvointia ja tarjoaa vastapainoa opiskelulle. Kilta järjestää
<p>Kilta tukee jäsentensä hyvinvointia ja tarjoaa vastapainoa opiskelulle. Kilta järjestää
esimerkiksi urheilutapahtumia, kulttuurielämyksiä ja näiden lisäksi sitsejä ja
saunailtoja. Valinnanvaraa on, joten tapahtumakalenterin aktiivisella seuraamisella
saunailtoja. Valinnanvaraa on, joten <TextAnchor to="/kalenteri">tapahtumakalenterin</TextAnchor> aktiivisella seuraamisella
saattaa olla hyvinkin miellyttäviä seuraamuksia. Voit myös itse järjestää mieleisesi
tapahtuman killan tukemana, tai ehdottaa sitä killan toimitsijoille.
tapahtuman killan tukemana, tai ehdottaa sitä killan toimitsijoille.</p>
Yhteistyössä korkeakoulun kanssa, kilta kehittää opetusta. Kilta on mukana
<p>Yhteistyössä korkeakoulun kanssa, kilta kehittää <TextAnchor to="/opinnot">opetusta</TextAnchor>. Kilta on mukana
kurssien kehittämisessä, valvoo kiltalaisten etua korkeakoulussa ja tuo korkeakoulun
henkilöstöä lähemmäs kiltalaisia.
Kilta avaa oven yritysmaailmaan järjestämällä yritysten kanssa excursioita,
Kilta avaa oven <TextAnchor to="/yritysyhteistyo">yritysmaailmaan</TextAnchor> järjestämällä yritysten kanssa excursioita,
saunailtoja ja yritystapahtumia. Lisäksi killan kautta kuulee ensimmäisten joukossa
uusista avoimista työpaikoista.
Killalla on Otaniemen mukavin kiltahuone, jossa voi käydä hengähtämässä
Killalla on Otaniemen mukavin <TextAnchor to="/kiltahuone">kiltahuone</TextAnchor>, jossa voi käydä hengähtämässä
luentojen välillä, hakea apua vaikeisiin tehtäviin tai järjestää vaikka leffailtoja. Tämän
lisäksi killalla on myös haastavampaan elektroniikkaharrasteluun sopivat tilat.
lisäksi killalla on myös haastavampaan elektroniikkaharrasteluun sopivat tilat.</p>
<h3>Takana lähes satavuotinen historia</h3>
Vaikka kilta onkin ajan hermolla, on sillä takana lähes satavuotinen historia.
<p>Vaikka kilta onkin ajan hermolla, on sillä takana lähes satavuotinen historia.
Sähköinsinööriklubin tuore puheenjohtaja lausahti klubin ensimmäisessä
varsinaisessa kokouksessa 16. helmikuuta 1921: Koska klubi nyt ensi kerran
kokoontuu, niin pyydän lausua toivomuksena, että klubin jäsenillä aina tulisi
olemaan hauskaa, että toverielämä kukoistaisi ja että myös sähkötekniikkaa
klubissa harrastettaisiin..
klubissa harrastettaisiin..</p>
Vaikka ajat ovat muuttuneet, klubi on muuttunut killaksi ja jäsenmäärä kasvanut
<p>Vaikka ajat ovat muuttuneet, klubi on muuttunut killaksi ja jäsenmäärä kasvanut
alkuajoista valtavasti, ohjaavat nämä kolme asiaa edelleen killan toimintaa. Vaikka
pitkästä historiasta kannattaa olla ylpeä, ei sitä tarvitse kokea taakkana. Uutta
historiaa luodaan koko ajan ja tässä on meillä kaikilla mahdollista olla mukana. Ole
aktiivinen, ota asioista selvää ja osallistu kaikkeen mahdolliseen. Tulet varmasti
yllättymään kaikesta siitä mitä täältä keskuudestamme löytyy.
yllättymään kaikesta siitä mitä täältä keskuudestamme löytyy.</p>
<h3>Meitä teekkareita on todella moneen lähtöön</h3>
Minkäänlaista perus- tai ihanneteekkaria ei ole olemassa, vaan paras teekkariuden
<p>Minkäänlaista perus- tai ihanneteekkaria ei ole olemassa, vaan paras teekkariuden
määritelmä kuuluukin: teekkarius on kaikkea sitä, mitä teekkarit tekevät. Yksi asia
meitä kaikkia kuitenkin yhdistää. Opiskelemme jotain tekniikkaan liittyvää täällä
Aalto-yliopistossa.
Teekkariutta on vaikkapa toimiminen killoissa tai jossain AYY:n lukuisista
yhdistyksistä. Teekkariutta on yhtä lailla SIK:n tapahtumien järjestäminen tai niihin
Teekkariutta on vaikkapa toimiminen killoissa tai jossain <TextAnchor to="https://ayy.fi/yhdistykset/yhdistyslistaus/">AYY:n lukuisista
yhdistyksistä</TextAnchor>. Teekkariutta on yhtä lailla SIK:n tapahtumien järjestäminen tai niihin
osallistuminen kuin vaikkapa laulaminen Polyteknikkojen Kuorossa tai sukeltaminen
Polyteknikkojen sukelluskerho Kuplassa. Kaikille varmasti löytyy jotain itseä
kiinnostavaa.
kiinnostavaa.</p>
Teekkareilla, varsinkin otaniemeläisillä, on pitkä ja vahva historia. Siihen kannattaa
<p>Teekkareilla, varsinkin otaniemeläisillä, on pitkä ja vahva historia. Siihen kannattaa
tutustua, jotta saa jonkinlaisen kuvan siitä vahvasta teekkarihengestä, joka
meillä täällä opinahjossamme vallitsee ja on vallinnut koko sen historian ajan.
Teekkariuteen kuuluu olennaisena osana mukautuminen ajan vaatimuksiin. Jos asiat
tehtäisiin aina vanhaa toistaen, ei voitaisi enää edes puhua teekkariudesta.
tehtäisiin aina vanhaa toistaen, ei voitaisi enää edes puhua teekkariudesta.</p>
</MainSection>
<AsideSection className="page__white">
<div>
@@ -130,7 +120,7 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
</div>
<div>
<InfoBox>
Herrasmies- tai herrasnaisuus kuuluu olennaisena osana teekkariuteen. Hyvät käytöstavat on syytä aina pitää mielessä, liikuttiin sitten puku päällä excuilla tai sitseillä tai haalarit päällä Tukholman illassa.
Herrasmies- tai herrasnaisuus kuuluu olennaisena osana teekkariuteen. Hyvät <TextAnchor to="https://issuu.com/studentunionayy/docs/tavoistaan_teekkari_tunnetaan/25">käytöstavat</TextAnchor> on syytä aina pitää mielessä, liikuttiin sitten puku päällä excuilla tai sitseillä tai haalarit päällä Tukholman illassa.
</InfoBox>
</div>
</AsideSection>
@@ -145,14 +135,14 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
<MainSection>
<h2>Organisaatio</h2>
Sähköinsinöörikillassa toimeenpanovaltaa käyttää 313 kiltalaisen muodostama hallitus apunaan lukuisa määrä toimihenkilöitä. Hallituksen ja toimihenkilöt valitsee killan valtuusto, joka myös valvoo näiden toimintaa. Käytännössä valtuusto valitsee vaalikokouksessaan ensin uuden puheenjohtajan ja jää 12 viikon mittaiselle kokoustauolle. Tauon jälkeen puheenjohtaja esittelee valtuustolle ehdotuksensa hallitukseksi ja toimihenkilöiksi, ja valtuusto joko hyväksyy tai hylkää ehdotuksen noin tunnin kestävän kysely- ja esittelytuokion jälkeen. Hallituksen kuulumiset lorem.
<p>Sähköinsinöörikillassa toimeenpanovaltaa käyttää 313 kiltalaisen muodostama <TextAnchor to="/hallitus">hallitus</TextAnchor> apunaan lukuisa määrä toimihenkilöitä. Hallituksen ja toimihenkilöt valitsee killan <TextAnchor to="/valtuusto">valtuusto</TextAnchor>, joka myös valvoo näiden toimintaa. Käytännössä valtuusto valitsee vaalikokouksessaan ensin uuden puheenjohtajan ja jää 12 viikon mittaiselle kokoustauolle. Tauon jälkeen puheenjohtaja esittelee valtuustolle ehdotuksensa hallitukseksi ja toimihenkilöiksi, ja valtuusto joko hyväksyy tai hylkää ehdotuksen noin tunnin kestävän kysely- ja esittelytuokion jälkeen. <TextAnchor to="/kuulumiset">Hallituksen kuulumiset</TextAnchor> lorem.</p>
<h3>Valtuuston toimintaa</h3>
Killan valtuusto valitaan marraskuussa pidettävillä vaaleilla yhdeksi vuodeksi kerrallaan. Vaaleissa ovat vaalikelpoisia ja äänioikeutettuja kaikki SIK:n varsinaiset jäsenet. Uuden valtuuston toiminta alkaa varsin pian valitsemisen jälkeen vaalikokouksessa, jossa todetaan uusi kokoonpano, valitaan puhemiehistö, killan hallituksen puheenjohtaja ja muut hallituksen jäsenet, toimihenkilöt, toimikuntien puheenjohtajat sekä tilintarkastajat. Toinen sääntömääräinen valtuuston kokous on helmikuinen vuosikokous, jossa käsitellään mm. edellisen vuoden toimintakertomus ja tilinpäätös, sekä kuluvan vuoden toimintasuunnitelma ja budjetti. Lisäksi valtuusto pitää tarpeelliseksi katsomanssa määrän kokouksia pitkin vuotta. Pöytäkirjat ja muut dokumentit lorem ipsum.
<p>Killan valtuusto valitaan marraskuussa pidettävillä vaaleilla yhdeksi vuodeksi kerrallaan. Vaaleissa ovat vaalikelpoisia ja äänioikeutettuja kaikki SIK:n varsinaiset jäsenet. Uuden valtuuston toiminta alkaa varsin pian valitsemisen jälkeen vaalikokouksessa, jossa todetaan uusi kokoonpano, valitaan puhemiehistö, killan hallituksen puheenjohtaja ja muut hallituksen jäsenet, toimihenkilöt, toimikuntien puheenjohtajat sekä tilintarkastajat. Toinen sääntömääräinen valtuuston kokous on helmikuinen vuosikokous, jossa käsitellään mm. edellisen vuoden toimintakertomus ja tilinpäätös, sekä kuluvan vuoden toimintasuunnitelma ja budjetti. Lisäksi valtuusto pitää tarpeelliseksi katsomanssa määrän kokouksia pitkin vuotta. <TextAnchor to="/dokumenttiarkisto">Pöytäkirjat ja muut dokumentit</TextAnchor> lorem ipsum.</p>
<h3>Hallituksen toimintaa</h3>
Jokaisella hallituksen jäsenellä on oma vastuualueensa, jota hän hoitaa yhdessä mahdollisen toimikuntansa kanssa. Puheenjohtajan tehtävä on pitää langat käsissään, ja olla perillä kaikesta, mitä killassa tapahtuu. Hallitus tekee päätökset ja sopii menettelytavat viikottaisessa kokouksessaan. Hallitus on vastuussa kaikesta killan näkyvästä ja näkymättömästä toiminnasta, ja se on myös oikea osoite, jos joku asia vaivaa mieltä, tai mielessä on parannusehdotus mihin tahansa asiaan.
<p>Jokaisella hallituksen jäsenellä on oma vastuualueensa, jota hän hoitaa yhdessä mahdollisen <TextAnchor to="/toimikunnat">toimikuntansa</TextAnchor> kanssa. Puheenjohtajan tehtävä on pitää langat käsissään, ja olla perillä kaikesta, mitä killassa tapahtuu. Hallitus tekee päätökset ja sopii menettelytavat viikottaisessa kokouksessaan. Hallitus on vastuussa kaikesta killan näkyvästä ja näkymättömästä toiminnasta, ja se on myös oikea osoite, jos joku asia vaivaa mieltä, tai mielessä on <TextAnchor to="/palaute">parannusehdotus</TextAnchor> mihin tahansa asiaan.</p>
</MainSection>
<AsideSection className="page__white">
@@ -168,7 +158,7 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
</PageSection>
<PageSection backgroundColor={PageSectionColor.DarkBlue}>
<Ribbon>
<p>Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, toimikunnat ja jaokset.</p>
<p>Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <TextAnchor to="/toimikunnat">toimikunnat</TextAnchor> ja <TextAnchor to="/jaokset">jaokset</TextAnchor>.</p>
</Ribbon>
</PageSection>
<div style={{ display: "flex", }}>
@@ -190,13 +180,13 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
<AsideSection className="page__light-blue">
<h3>Runsaasti erilaisia tehtäviä</h3>
<p>
Killassa on todella monenlaisia tehtäviä. Olitpa koodaaja, urheilija tai ammattimainen juhlija, killasta löytyy tekemistä juuri sinulle. Toimikunnissa sitoudut toimintaan vuodeksi kerrallaan. Jaostoiminta mahdollistaa kiltatoiminnan kokeilun pienemmässä mittakaavassa. Tehtäväkuvaukset lorem ipsum dolor sit amet alla. Jos ei löydy sopivaa lorem ipsum dolor sit amet, voit perustaa myös oman.
Killassa on todella monenlaisia tehtäviä. Olitpa koodaaja, urheilija tai ammattimainen juhlija, killasta löytyy tekemistä juuri sinulle. <TextAnchor to="/toimikunnat">Toimikunnissa</TextAnchor> sitoudut toimintaan vuodeksi kerrallaan. <TextAnchor to="/jaostot">Jaostoiminta</TextAnchor> mahdollistaa kiltatoiminnan kokeilun pienemmässä mittakaavassa. Tehtäväkuvaukset lorem ipsum dolor sit amet alla. Jos ei löydy sopivaa lorem ipsum dolor sit amet, voit perustaa myös oman.
</p>
<p>
» Haluatko <CustomLink linkHref={""} linkText={"valtuustoon"}/>, <CustomLink linkHref={""} linkText={"hallitukseen"}/> tai <CustomLink linkHref={""} linkText={"toimariksi"}/>?
» Haluatko <TextAnchor to={""} >valtuustoon</TextAnchor>, <TextAnchor to={""}>hallitukseen</TextAnchor> tai <TextAnchor to={""}>toimariksi</TextAnchor>?
</p>
<p>
» <CustomLink linkHref={""} linkText={"Toimihenkilönä"}/> pääset edistämään opintoja
» <TextAnchor to={""}>Toimihenkilönä</TextAnchor> pääset edistämään opintoja
</p>
<p>
» Lorem ipsum
@@ -249,12 +239,12 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
Sen lisäksi että kilta tarjoaa jäsenilleen palveluja ja aktiviteetteja, Aalto-yliopisto tarjoaa lorem ipsum dolor sit amet.
</p>
<p>
» <CustomLink linkHref={"https://download.aalto.fi"} linkText={"Download.aalto.fi"}/> Täältä voit ladata yliopiston tarjoamia ohjelmia ilmaiseksi.
» <TextAnchor to={"https://download.aalto.fi"}>Download.aalto.fi</TextAnchor> Täältä voit ladata yliopiston tarjoamia ohjelmia ilmaiseksi.
</p>
</MainSection>
<AsideSection className="page__white">
<InfoBox>
<CustomLink linkHref={""} linkText={"Jäseneksi liittyminen"}/> on helppoa, hauskaa ja hyödyllistä 8 jäsenmaksulla pääset nauttimaan kaikista jäseneduista.
<TextAnchor to={""}>Jäseneksi liittyminen</TextAnchor> on helppoa, hauskaa ja hyödyllistä 8 jäsenmaksulla pääset nauttimaan kaikista jäseneduista.
</InfoBox>
</AsideSection>
</PageSection>