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

New program page

Browse Source
This commit is contained in:
veikko
2022-06-17 22:35:10 +03:00
parent b7ee46401d
commit 438a2d4c07
8 changed files with 225 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
pages/archive.tsx
View File

@@ -1,8 +1,9 @@
import React from 'react'; import React from 'react';
import shared from '../styles/Shared.module.scss';
const Archive = () => { const Archive = () => {
return ( return (
<section className='page'> <section className={shared.page}>
<h1>Arkisto</h1> <h1>Arkisto</h1>
<i>Lisätietoja tulossa myöhemmin!</i> <i>Lisätietoja tulossa myöhemmin!</i>

3
pages/info.tsx
View File

@@ -1,8 +1,9 @@
import React from 'react'; import React from 'react';
import shared from '../styles/Shared.module.scss';
const Info = () => { const Info = () => {
return ( return (
<section className='page'> <section className={shared.page}>
<h1>Info</h1> <h1>Info</h1>
<i>Lisätietoja tulossa myöhemmin!</i> <i>Lisätietoja tulossa myöhemmin!</i>

9
pages/performers.tsx
View File

@@ -1,6 +1,7 @@
import Image from 'next/image'; import Image from 'next/image';
import React, { useState } from 'react'; import React, { useState } from 'react';
import styles from '../styles/Performers.module.scss'; import styles from '../styles/Performers.module.scss';
import shared from '../styles/Shared.module.scss';
import Performer from '../types/Performer'; import Performer from '../types/Performer';
import performers2021 from '../data/performers/2021'; import performers2021 from '../data/performers/2021';
import { BiChevronDown, BiChevronLeft } from 'react-icons/bi'; import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
@@ -21,7 +22,7 @@ const Performers = () => {
}; };
return ( return (
<section className='page'> <section className={shared.page}>
<h1>Esiintyjät</h1> <h1>Esiintyjät</h1>
<div className={styles.performersContainer}> <div className={styles.performersContainer}>
@@ -39,7 +40,7 @@ const Performers = () => {
layout='fixed' layout='fixed'
/> />
<h2>{p.name}</h2> <h2>{p.name}</h2>
<button className={styles.performerButton}> <button className={shared.openingChevron}>
{p.showDesc ? ( {p.showDesc ? (
<BiChevronDown size='3rem' /> <BiChevronDown size='3rem' />
) : ( ) : (
@@ -47,7 +48,7 @@ const Performers = () => {
)} )}
</button> </button>
</div> </div>
{p.showDesc ? ( {p.showDesc && (
<> <>
{p.paragraphs.map((parag) => ( {p.paragraphs.map((parag) => (
<p className={styles.performerDescription}> <p className={styles.performerDescription}>
@@ -55,8 +56,6 @@ const Performers = () => {
</p> </p>
))} ))}
</> </>
) : (
<></>
)} )}
</div> </div>
))} ))}

250
pages/program.tsx
View File

@@ -1,81 +1,185 @@
import React from 'react'; import React, { useState } from 'react';
import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
import styles from '../styles/Program.module.scss';
import shared from '../styles/Shared.module.scss';
interface DayToggles {
wed: boolean;
thu: boolean;
fri: boolean;
sat: boolean;
}
const Program = () => { const Program = () => {
const [dayToggles, setDayToggles] = useState<DayToggles>({
wed: false,
thu: false,
fri: false,
sat: false,
});
const toggleDayDesc = (day: keyof DayToggles) => {
let updated = { ...dayToggles };
updated[day] = !updated[day];
setDayToggles(updated);
};
return ( return (
<section className='page'> <section className={shared.page}>
<h1 id='program-start'>Ohjelma</h1> <h1 id='program-start'>Ohjelma</h1>
<i>OHJELMA PÄIVITTYY KEVÄÄN MITTAAN, PYSYKÄÄ KUULOLLA!</i> <i>OHJELMA PÄIVITTYY KEVÄÄN MITTAAN, PYSYKÄÄ KUULOLLA!</i>
<h2>Keskiviikko 20.7.</h2> <div className={styles.dayContainer}>
<p className='performance-paragraph'> <div
18-20 Olen polkuni päässä -illassa Ella Pyhältö lausuu rakastettuja className={styles.programTitle}
runoja Irja ja Veikko Aro-Heinilän kotipihalla (sateella sisällä). onClick={() => toggleDayDesc('wed')}
</p> >
<p className='performance-paragraph'>Sydämellisesti tervetuloa!</p> <h2>Keskiviikko 20.7.</h2>
<p className='performance-paragraph'> <button className={shared.openingChevron}>
Paikka: Huhtakarintie 24, Livonsaari {dayToggles.wed ? (
</p> <BiChevronDown size='3rem' />
<h2>Torstai 21.7.</h2> ) : (
<p className='performance-paragraph'> <BiChevronLeft size='3rem' />
14-16 Ainot ja Lauri esittävät Lähellä-nimisen poikkitaiteellisen )}
kokoonpanon, joka on saanut kolmannen kiinnityksen kiertopalkintoon </button>
Willi Kansa -katselmuksessa marraskuussa 2021 Irja ja Veikko </div>
Aro-Heinilän pihamaalla. Toisessa osassa iltapäivää kuullaan Irja {dayToggles.wed && (
Aro-Heinilän ja Arto Juurakon tekstejä Ainojen ja Laurin esittäminä. <>
</p> <p className={styles.programParag}>
<p className='performance-paragraph'> 18-20 Olen polkuni päässä -illassa Ella Pyhältö lausuu
17-19 Runollinen, musiikillinen ja merellinen matinea Cafe Laiturissa. rakastettuja runoja Irja ja Veikko Aro-Heinilän kotipihalla
Esiintymässä mm. Anja Erämaja. (sateella sisällä).
</p> </p>
<p className='performance-paragraph'> <p className={styles.programParag}>Sydämellisesti tervetuloa!</p>
Paikka: Huhtakarintie 24, Livonsaari sekä Cafe Laituri, Voiponlahdentie <p className={styles.programParag}>
37, Palva Paikka: Huhtakarintie 24, Livonsaari
</p> </p>
<h2>Perjantai 22.7.</h2> </>
<p className='performance-paragraph'> )}
11-14 Monologityöpaja, vetäjä teatteritaiteen maisteri Kati Urho. <hr />
</p> </div>
<p className='performance-paragraph'> <div className={styles.dayContainer}>
Ympäristöjargonia luovasti -työpaja, vetäjä journalisti ja <div
viestintäkonsultti Laura Rantanen. className={styles.programTitle}
</p> onClick={() => toggleDayDesc('thu')}
<p className='performance-paragraph'> >
14-20 Runoutta, musiikkia ja poikkitaiteellisia yllätyksiä <h2>Torstai 21.7.</h2>
puutarhalavalla tai myrskyn sattuessa Seurantalon salissa. <button className={shared.openingChevron}>
</p> {dayToggles.thu ? (
<p className='performance-paragraph'> <BiChevronDown size='3rem' />
Esiintymässä mm. Kari Aronpuro, Sanna Karlström, Katariina Vuorinen, Aki ) : (
Salmela, Heidi Iivari ja Laura Laakso. <BiChevronLeft size='3rem' />
</p> )}
<p className='performance-paragraph'> </button>
Musiikillisesta puolesta vastaa saksofonisti Mikko Innanen sekä </div>
Äyräs-kokoonpano: Olga Välimaa (laulu), Kauko Röyhkä (laulu, kitara, {dayToggles.thu && (
basso), Ilkka Turta (kitara), Kimmo Laine (basso, koskettimet), Roberto <>
Lanz (rummut). <p className={styles.programParag}>
</p> 14-16 Ainot ja Lauri esittävät Lähellä-nimisen poikkitaiteellisen
<p className='performance-paragraph'> kokoonpanon, joka on saanut kolmannen kiinnityksen
Tapahtuman ajan Sinervon talolla pitää majaa kiehtovien kirjojen tori. kiertopalkintoon Willi Kansa -katselmuksessa marraskuussa 2021
</p> Irja ja Veikko Aro-Heinilän pihamaalla. Toisessa osassa iltapäivää
<p className='performance-paragraph'> kuullaan Irja Aro-Heinilän ja Arto Juurakon tekstejä Ainojen ja
Paikka: Sinervon talo, Sauniementie 5, Teersalo Laurin esittäminä.
</p> </p>
<h2>Lauantai 23.7.</h2> <p className={styles.programParag}>
<p className='performance-paragraph'> 17-19 Runollinen, musiikillinen ja merellinen matinea Cafe
13-17 Runollinen iltapäivä. Romanttinen Velkuanmaa kutsuu mystisen Laiturissa. Esiintymässä mm. Anja Erämaja.
äärelle. </p>
</p> <p className={styles.programParag}>
<p className='performance-paragraph'> Paikka: Huhtakarintie 24, Livonsaari sekä Cafe Laituri,
Saaristohotelli Vaihelan terassilla runoilijat vievät kuulijat luomiinsa Voiponlahdentie 37, Palva
maailmoihin yhdessä muusikoiden kanssa. Samalla ehtii myös nauttimaan </p>
lounasta, juttelemaan muiden festarikävijöiden kanssa ja ihailemaan </>
ympäröivää luontoa. )}
</p> <hr />
<p className='performance-paragraph'> </div>
Juha Kulmala ja Diodi-yhtye, Saila Susiluoto ja Markku Pääskynen <div className={styles.dayContainer}>
(luuttu). <div
</p> className={styles.programTitle}
<p className='performance-paragraph'> onClick={() => toggleDayDesc('fri')}
Paikka: Vaihelan saaristohotelli, Velkuanmaantie 168, Velkuanmaa >
</p> <h2>Perjantai 22.7.</h2>
<button className={shared.openingChevron}>
{dayToggles.fri ? (
<BiChevronDown size='3rem' />
) : (
<BiChevronLeft size='3rem' />
)}
</button>
</div>
{dayToggles.fri && (
<>
<p className={styles.programParag}>
11-14 Monologityöpaja, vetäjä teatteritaiteen maisteri Kati Urho.
</p>
<p className={styles.programParag}>
Ympäristöjargonia luovasti -työpaja, vetäjä journalisti ja
viestintäkonsultti Laura Rantanen.
</p>
<p className={styles.programParag}>
14-20 Runoutta, musiikkia ja poikkitaiteellisia yllätyksiä
puutarhalavalla tai myrskyn sattuessa Seurantalon salissa.
</p>
<p className={styles.programParag}>
Esiintymässä mm. Kari Aronpuro, Sanna Karlström, Katariina
Vuorinen, Aki Salmela, Heidi Iivari ja Laura Laakso.
</p>
<p className={styles.programParag}>
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}>
Tapahtuman ajan Sinervon talolla pitää majaa kiehtovien kirjojen
tori.
</p>
<p className={styles.programParag}>
Paikka: Sinervon talo, Sauniementie 5, Teersalo
</p>
</>
)}
<hr />
</div>
<div className={styles.dayContainer}>
<div
className={styles.programTitle}
onClick={() => toggleDayDesc('sat')}
>
<h2>Lauantai 23.7.</h2>
<button className={shared.openingChevron}>
{dayToggles.sat ? (
<BiChevronDown size='3rem' />
) : (
<BiChevronLeft size='3rem' />
)}
</button>
</div>
{dayToggles.sat && (
<>
<p className={styles.programParag}>
13-17 Runollinen iltapäivä. Romanttinen Velkuanmaa kutsuu mystisen
äärelle.
</p>
<p className={styles.programParag}>
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}>
Juha Kulmala ja Diodi-yhtye, Saila Susiluoto ja Markku Pääskynen
(luuttu).
</p>
<p className={styles.programParag}>
Paikka: Vaihelan saaristohotelli, Velkuanmaantie 168, Velkuanmaa
</p>
</>
)}
<hr />
</div>
</section> </section>
); );
}; };

9
styles/Performers.module.scss
View File

@@ -1,8 +1,6 @@
.performersContainer { .performersContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 47rem;
max-width: 100%;
} }
.performerCard { .performerCard {
@@ -35,13 +33,6 @@
border-radius: 100%; border-radius: 100%;
} }
.performerButton {
height: 3rem;
width: 3rem;
background-color: transparent;
border: transparent;
}
.performerButton:hover { .performerButton:hover {
svg { svg {
color: rgb(117, 117, 117); color: rgb(117, 117, 117);

27
styles/Program.module.scss
View File

@@ -0,0 +1,27 @@
.dayContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
hr {
border: 0.2rem solid #d5caf29d;
width: 60%;
}
}
.programParag {
width: 60%;
}
.programTitle {
display: flex;
align-items: center;
justify-content: space-between;
width: 60%;
padding-left: 1.5rem;
padding-right: 1.5rem;
margin-top: 1.5rem;
h2 {
margin-right: 1rem;
}
}

13
styles/Shared.module.scss Normal file
View File

@@ -0,0 +1,13 @@
.openingChevron {
height: 3rem;
width: 3rem;
background-color: transparent;
border: transparent;
}
.page {
text-align: center;
margin-bottom: 8rem;
width: 47rem;
max-width: 100%;
}

5
styles/globals.scss
View File

@@ -23,11 +23,6 @@ main {
justify-content: center; justify-content: center;
} }
.page {
text-align: center;
margin-bottom: 8rem;
}
h1 { h1 {
font-size: 5rem; font-size: 5rem;
} }