tietokonepaja/runosaari
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New info page

Browse Source
This commit is contained in:
veikko
2022-06-18 00:31:43 +03:00
parent 438a2d4c07
commit 4d66ff85e0
5 changed files with 215 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
pages/info.tsx
View File

@@ -1,12 +1,156 @@
import React from 'react';
import React, { useState } from 'react';
import shared from '../styles/Shared.module.scss';
import styles from '../styles/Info.module.scss';
import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
interface InfoToggles {
shop: boolean;
bus: boolean;
accom: boolean;
ferry: boolean;
fb: boolean;
}
const Info = () => {
const [infoToggles, setInfoToggles] = useState<InfoToggles>({
shop: false,
bus: false,
accom: false,
ferry: false,
fb: false,
});
const toggleInfo = (info: keyof InfoToggles) => {
let updated = { ...infoToggles };
updated[info] = !updated[info];
setInfoToggles(updated);
};
return (
<section className={shared.page}>
<h1>Info</h1>
<i>Lisätietoja tulossa myöhemmin!</i>
<div className={styles.infoContainer}>
<div className={styles.infoTitle} onClick={() => toggleInfo('shop')}>
<h2>Livonsaaren Osuuskauppa</h2>
<button className={shared.openingChevron}>
{infoToggles.shop ? (
<BiChevronDown size='3rem' />
) : (
<BiChevronLeft size='3rem' />
)}
</button>
</div>
{infoToggles.shop && (
<>
<p>
Livonsaaren osuuskauppa palvelee klo 9-19 joka päivä. Keittiö ja
baari 12-19 to-pe. Ostosten yhteydessä mahdollista nostaa
käteistä, mutta suosittelemme tuomaan käteistä rahaa kaupungista
esim. mahdollisia kirjaostoksia varten.
</p>
<a href='https://https//livonsaarenosuuskauppa.fi/'>
Kaupan kotisivut
</a>
</>
)}
<hr />
</div>
<div className={styles.infoContainer}>
<div className={styles.infoTitle} onClick={() => toggleInfo('bus')}>
<h2>Bussiaikataulut</h2>
<button className={shared.openingChevron}>
{infoToggles.bus ? (
<BiChevronDown size='3rem' />
) : (
<BiChevronLeft size='3rem' />
)}
</button>
</div>
{infoToggles.bus && (
<>
<p>
Bussi 403 lähteen Turusta ma-pe 16:30 ja saapuu Livonsaarelle
17:37 ja Velkualle 17:48. Tämä on ainoa suorayhteys festivaali
alueelle.
</p>
<a href='https://https//www.foli.fi/fi'>
Paikallisliikenteen bussiaikataulut
</a>
</>
)}
<hr />
</div>
<div className={styles.infoContainer}>
<div className={styles.infoTitle} onClick={() => toggleInfo('accom')}>
<h2>Majoitus</h2>
<button className={shared.openingChevron}>
{infoToggles.accom ? (
<BiChevronDown size='3rem' />
) : (
<BiChevronLeft size='3rem' />
)}
</button>
</div>
{infoToggles.accom && (
<>
<p>
Majoituspalveluita Livonsaari-Velkua: Wanha Salakuljettaja
(Teersalo), Livonsaari Caravan, Saaristohotelli Vaihela.
</p>
<a href='https://oldsmuggler.fi/'>Vanha Salakuljettaja</a>
<a href='https://www.livonsaarencaravan.fi/'>Livonsaari Caravan</a>
<a href='https://vaihela.fi/'>Saaristohotelli Vaihela</a>
</>
)}
<hr />
</div>
<div className={styles.infoContainer}>
<div className={styles.infoTitle} onClick={() => toggleInfo('ferry')}>
<h2>Lossiyhteydet</h2>
<button className={shared.openingChevron}>
{infoToggles.ferry ? (
<BiChevronDown size='3rem' />
) : (
<BiChevronLeft size='3rem' />
)}
</button>
</div>
{infoToggles.ferry && (
<>
<p>
Lossiyhteydet Palvaan ja Velkuanmaahan Finferries-sivustolla
(huom. yövuoro edellyttää tilauksen etukäteen. Lossi on osa
julkista tieverkostoa eli maksuton.)
</p>
<a href='https://www.finferries.fi/lauttaliikenne/lauttapaikat-ja-aikataulut/velkuanmaa.html'>
Aikataulut Palvaan ja Velkuanmaahan
</a>
</>
)}
<hr />
</div>
<div className={styles.infoContainer}>
<div className={styles.infoTitle} onClick={() => toggleInfo('fb')}>
<h2>Facebook</h2>
<button className={shared.openingChevron}>
{infoToggles.fb ? (
<BiChevronDown size='3rem' />
) : (
<BiChevronLeft size='3rem' />
)}
</button>
</div>
{infoToggles.fb && (
<>
<a href='https://https//www.facebook.com/Runosaari-festivaali-110533364561933'>
Tapahtuman facebook-sivut
</a>
</>
)}
<hr />
</div>
</section>
);
};

38
pages/program.tsx
View File

@@ -46,15 +46,13 @@ const Program = () => {
</div>
{dayToggles.wed && (
<>
<p className={styles.programParag}>
<p>
18-20 Olen polkuni päässä -illassa Ella Pyhältö lausuu
rakastettuja runoja Irja ja Veikko Aro-Heinilän kotipihalla
(sateella sisällä).
</p>
<p className={styles.programParag}>Sydämellisesti tervetuloa!</p>
<p className={styles.programParag}>
Paikka: Huhtakarintie 24, Livonsaari
</p>
<p>Sydämellisesti tervetuloa!</p>
<p>Paikka: Huhtakarintie 24, Livonsaari</p>
</>
)}
<hr />
@@ -75,7 +73,7 @@ const Program = () => {
</div>
{dayToggles.thu && (
<>
<p className={styles.programParag}>
<p>
14-16 Ainot ja Lauri esittävät Lähellä-nimisen poikkitaiteellisen
kokoonpanon, joka on saanut kolmannen kiinnityksen
kiertopalkintoon Willi Kansa -katselmuksessa marraskuussa 2021
@@ -83,11 +81,11 @@ const Program = () => {
kuullaan Irja Aro-Heinilän ja Arto Juurakon tekstejä Ainojen ja
Laurin esittäminä.
</p>
<p className={styles.programParag}>
<p>
17-19 Runollinen, musiikillinen ja merellinen matinea Cafe
Laiturissa. Esiintymässä mm. Anja Erämaja.
</p>
<p className={styles.programParag}>
<p>
Paikka: Huhtakarintie 24, Livonsaari sekä Cafe Laituri,
Voiponlahdentie 37, Palva
</p>
@@ -111,34 +109,32 @@ const Program = () => {
</div>
{dayToggles.fri && (
<>
<p className={styles.programParag}>
<p>
11-14 Monologityöpaja, vetäjä teatteritaiteen maisteri Kati Urho.
</p>
<p className={styles.programParag}>
<p>
Ympäristöjargonia luovasti -työpaja, vetäjä journalisti ja
viestintäkonsultti Laura Rantanen.
</p>
<p className={styles.programParag}>
<p>
14-20 Runoutta, musiikkia ja poikkitaiteellisia yllätyksiä
puutarhalavalla tai myrskyn sattuessa Seurantalon salissa.
</p>
<p className={styles.programParag}>
<p>
Esiintymässä mm. Kari Aronpuro, Sanna Karlström, Katariina
Vuorinen, Aki Salmela, Heidi Iivari ja Laura Laakso.
</p>
<p className={styles.programParag}>
<p>
Musiikillisesta puolesta vastaa saksofonisti Mikko Innanen sekä
Äyräs-kokoonpano: Olga Välimaa (laulu), Kauko Röyhkä (laulu,
kitara, basso), Ilkka Turta (kitara), Kimmo Laine (basso,
koskettimet), Roberto Lanz (rummut).
</p>
<p className={styles.programParag}>
<p>
Tapahtuman ajan Sinervon talolla pitää majaa kiehtovien kirjojen
tori.
</p>
<p className={styles.programParag}>
Paikka: Sinervon talo, Sauniementie 5, Teersalo
</p>
<p>Paikka: Sinervon talo, Sauniementie 5, Teersalo</p>
</>
)}
<hr />
@@ -159,21 +155,21 @@ const Program = () => {
</div>
{dayToggles.sat && (
<>
<p className={styles.programParag}>
<p>
13-17 Runollinen iltapäivä. Romanttinen Velkuanmaa kutsuu mystisen
äärelle.
</p>
<p className={styles.programParag}>
<p>
Saaristohotelli Vaihelan terassilla runoilijat vievät kuulijat
luomiinsa maailmoihin yhdessä muusikoiden kanssa. Samalla ehtii
myös nauttimaan lounasta, juttelemaan muiden festarikävijöiden
kanssa ja ihailemaan ympäröivää luontoa.
</p>
<p className={styles.programParag}>
<p>
Juha Kulmala ja Diodi-yhtye, Saila Susiluoto ja Markku Pääskynen
(luuttu).
</p>
<p className={styles.programParag}>
<p>
Paikka: Vaihelan saaristohotelli, Velkuanmaantie 168, Velkuanmaa
</p>
</>

35
styles/Info.module.scss Normal file
View File

@@ -0,0 +1,35 @@
.infoContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
hr {
border: 0.2rem solid #d5caf29d;
width: 60%;
}
p {
width: 60%;
}
}
.infoTitle {
display: flex;
align-items: center;
justify-content: space-between;
width: 60%;
padding-left: 1.5rem;
padding-right: 1.5rem;
margin-top: 1.5rem;
cursor: pointer;
h2 {
margin-right: 1rem;
}
h2:hover {
color: rgb(117, 117, 117);
transition: color 0.3s;
}
}

12
styles/Program.module.scss
View File

@@ -3,14 +3,15 @@
flex-direction: column;
justify-content: center;
align-items: center;
hr {
border: 0.2rem solid #d5caf29d;
width: 60%;
}
}
.programParag {
p {
width: 60%;
}
}
.programTitle {
@@ -21,7 +22,14 @@
padding-left: 1.5rem;
padding-right: 1.5rem;
margin-top: 1.5rem;
cursor: pointer;
h2 {
margin-right: 1rem;
}
h2:hover {
color: rgb(117, 117, 117);
transition: color 0.3s;
}
}

7
styles/Shared.module.scss
View File

@@ -5,6 +5,13 @@
border: transparent;
}
.openingChevron:hover {
svg {
color: rgb(117, 117, 117);
transition: color 0.3s;
}
}
.page {
text-align: center;
margin-bottom: 8rem;