Guild page text anchors

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;
-}
@@ -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;
@@ -1,2 +0,0 @@
-import CustomLink from "./CustomLink";
-export default CustomLink;
@@ -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;
+  }
+}
@@ -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;
@@ -0,0 +1,2 @@
+import TextAnchor from "./TextAnchor";
+export default TextAnchor;
@@ -35,7 +35,6 @@ h2 {
 }

 p {
-  color: $white;
  font-size: 16px;
 }

@@ -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
-              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>
+              <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 jotakin—kaukomaita, 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ää 3–13 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ää 1–2 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ää 3–13 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ää 1–2 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>