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

Add fade transition

Browse Source
This commit is contained in:
veikko
2022-06-29 22:58:32 +03:00
parent 9edd961865
commit 641a572fc1
9 changed files with 272 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
package-lock.json generated
View File

@@ -12,6 +12,7 @@
"react": "18.1.0", "react": "18.1.0",
"react-dom": "18.1.0", "react-dom": "18.1.0",
"react-icons": "^4.4.0", "react-icons": "^4.4.0",
"react-transition-group": "^4.4.2",
"reactstrap": "^9.1.1", "reactstrap": "^9.1.1",
"sass": "^1.52.2" "sass": "^1.52.2"
}, },
@@ -19,6 +20,7 @@
"@types/node": "17.0.40", "@types/node": "17.0.40",
"@types/react": "18.0.11", "@types/react": "18.0.11",
"@types/react-dom": "18.0.5", "@types/react-dom": "18.0.5",
"@types/react-transition-group": "^4.4.4",
"eslint": "8.17.0", "eslint": "8.17.0",
"eslint-config-next": "12.1.6", "eslint-config-next": "12.1.6",
"typescript": "4.7.3" "typescript": "4.7.3"
@@ -370,6 +372,15 @@
"@types/react": "*" "@types/react": "*"
} }
}, },
"node_modules/@types/react-transition-group": {
"version": "4.4.4",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz",
"integrity": "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==",
"dev": true,
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/scheduler": { "node_modules/@types/scheduler": {
"version": "0.16.2", "version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -3381,6 +3392,15 @@
"@types/react": "*" "@types/react": "*"
} }
}, },
"@types/react-transition-group": {
"version": "4.4.4",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz",
"integrity": "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==",
"dev": true,
"requires": {
"@types/react": "*"
}
},
"@types/scheduler": { "@types/scheduler": {
"version": "0.16.2", "version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",

2
package.json
View File

@@ -13,6 +13,7 @@
"react": "18.1.0", "react": "18.1.0",
"react-dom": "18.1.0", "react-dom": "18.1.0",
"react-icons": "^4.4.0", "react-icons": "^4.4.0",
"react-transition-group": "^4.4.2",
"reactstrap": "^9.1.1", "reactstrap": "^9.1.1",
"sass": "^1.52.2" "sass": "^1.52.2"
}, },
@@ -20,6 +21,7 @@
"@types/node": "17.0.40", "@types/node": "17.0.40",
"@types/react": "18.0.11", "@types/react": "18.0.11",
"@types/react-dom": "18.0.5", "@types/react-dom": "18.0.5",
"@types/react-transition-group": "^4.4.4",
"eslint": "8.17.0", "eslint": "8.17.0",
"eslint-config-next": "12.1.6", "eslint-config-next": "12.1.6",
"typescript": "4.7.3" "typescript": "4.7.3"

1
pages/_app.tsx
View File

@@ -1,4 +1,5 @@
import '../styles/globals.scss'; import '../styles/globals.scss';
import '../styles/transitions.scss';
import type { AppProps } from 'next/app'; import type { AppProps } from 'next/app';
import Footer from './components/Footer'; import Footer from './components/Footer';
import Header from './components/Header'; import Header from './components/Header';

153
pages/info.tsx
View File

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
import shared from '../styles/Shared.module.scss'; import shared from '../styles/Shared.module.scss';
import styles from '../styles/Info.module.scss'; import styles from '../styles/Info.module.scss';
import { BiChevronDown, BiChevronLeft } from 'react-icons/bi'; import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
import { CSSTransition } from 'react-transition-group';
interface InfoToggles { interface InfoToggles {
shop: boolean; shop: boolean;
@@ -42,19 +43,27 @@ const Info = () => {
)} )}
</button> </button>
</div> </div>
{infoToggles.shop && ( <CSSTransition
<> in={infoToggles.shop}
<p> timeout={1000}
Livonsaaren osuuskauppa palvelee klo 9-19 joka päivä. Keittiö ja classNames='fadeTransition'
baari 12-19 to-pe. Ostosten yhteydessä mahdollista nostaa >
käteistä, mutta suosittelemme tuomaan käteistä rahaa kaupungista {infoToggles.shop ? (
esim. mahdollisia kirjaostoksia varten. <div>
</p> <p>
<a href='https://https//livonsaarenosuuskauppa.fi/'> Livonsaaren osuuskauppa palvelee klo 9-19 joka päivä. Keittiö ja
Kaupan kotisivut baari 12-19 to-pe. Ostosten yhteydessä mahdollista nostaa
</a> käteistä, mutta suosittelemme tuomaan käteistä rahaa kaupungista
</> esim. mahdollisia kirjaostoksia varten.
)} </p>
<a href='https://https//livonsaarenosuuskauppa.fi/'>
Kaupan kotisivut
</a>
</div>
) : (
<></>
)}
</CSSTransition>
<hr /> <hr />
</div> </div>
<div className={styles.infoContainer}> <div className={styles.infoContainer}>
@@ -68,18 +77,26 @@ const Info = () => {
)} )}
</button> </button>
</div> </div>
{infoToggles.bus && ( <CSSTransition
<> in={infoToggles.bus}
<p> timeout={1000}
Bussi 403 lähteen Turusta ma-pe 16:30 ja saapuu Livonsaarelle classNames='fadeTransition'
17:37 ja Velkualle 17:48. Tämä on ainoa suorayhteys festivaali >
alueelle. {infoToggles.bus ? (
</p> <div>
<a href='https://https//www.foli.fi/fi'> <p>
Paikallisliikenteen bussiaikataulut Bussi 403 lähteen Turusta ma-pe 16:30 ja saapuu Livonsaarelle
</a> 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>
</div>
) : (
<></>
)}
</CSSTransition>
<hr /> <hr />
</div> </div>
<div className={styles.infoContainer}> <div className={styles.infoContainer}>
@@ -93,17 +110,27 @@ const Info = () => {
)} )}
</button> </button>
</div> </div>
{infoToggles.accom && ( <CSSTransition
<> in={infoToggles.accom}
<p> timeout={1000}
Majoituspalveluita Livonsaari-Velkua: Wanha Salakuljettaja classNames='fadeTransition'
(Teersalo), Livonsaari Caravan, Saaristohotelli Vaihela. >
</p> {infoToggles.accom ? (
<a href='https://oldsmuggler.fi/'>Vanha Salakuljettaja</a> <div>
<a href='https://www.livonsaarencaravan.fi/'>Livonsaari Caravan</a> <p>
<a href='https://vaihela.fi/'>Saaristohotelli Vaihela</a> 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>
</div>
) : (
<></>
)}
</CSSTransition>
<hr /> <hr />
</div> </div>
<div className={styles.infoContainer}> <div className={styles.infoContainer}>
@@ -117,18 +144,26 @@ const Info = () => {
)} )}
</button> </button>
</div> </div>
{infoToggles.ferry && ( <CSSTransition
<> in={infoToggles.ferry}
<p> timeout={1000}
Lossiyhteydet Palvaan ja Velkuanmaahan Finferries-sivustolla classNames='fadeTransition'
(huom. yövuoro edellyttää tilauksen etukäteen. Lossi on osa >
julkista tieverkostoa eli maksuton.) {infoToggles.ferry ? (
</p> <div>
<a href='https://www.finferries.fi/lauttaliikenne/lauttapaikat-ja-aikataulut/velkuanmaa.html'> <p>
Aikataulut Palvaan ja Velkuanmaahan Lossiyhteydet Palvaan ja Velkuanmaahan Finferries-sivustolla
</a> (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>
</div>
) : (
<></>
)}
</CSSTransition>
<hr /> <hr />
</div> </div>
<div className={styles.infoContainer}> <div className={styles.infoContainer}>
@@ -142,13 +177,21 @@ const Info = () => {
)} )}
</button> </button>
</div> </div>
{infoToggles.fb && ( <CSSTransition
<> in={infoToggles.fb}
<a href='https://https//www.facebook.com/Runosaari-festivaali-110533364561933'> timeout={1000}
Tapahtuman facebook-sivut classNames='fadeTransition'
</a> >
</> {infoToggles.fb ? (
)} <div>
<a href='https://https//www.facebook.com/Runosaari-festivaali-110533364561933'>
Tapahtuman facebook-sivut
</a>
</div>
) : (
<></>
)}
</CSSTransition>
<hr /> <hr />
</div> </div>
</section> </section>

25
pages/performers.tsx
View File

@@ -5,6 +5,7 @@ import shared from '../styles/Shared.module.scss';
import Performer from '../types/Performer'; import Performer from '../types/Performer';
import { BiChevronDown, BiChevronLeft } from 'react-icons/bi'; import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
import PerformersData from '../data/performers/2022'; import PerformersData from '../data/performers/2022';
import { CSSTransition } from 'react-transition-group';
interface PerformerCard extends Performer { interface PerformerCard extends Performer {
id: number; id: number;
@@ -65,15 +66,21 @@ const Performers = () => {
)} )}
</button> </button>
</div> </div>
{p.showDesc && ( <CSSTransition
<> in={p.showDesc}
{p.paragraphs.map((parag, index) => ( timeout={1000}
<p className={styles.performerDescription} key={index}> classNames='fadeTransition'
{parag.toString()} >
</p> {p.showDesc ? (
))} <div>
</> {p.paragraphs.map((parag, index) => (
)} <p key={index}>{parag.toString()}</p>
))}
</div>
) : (
<span></span>
)}
</CSSTransition>
<hr /> <hr />
</div> </div>
</div> </div>

198
pages/program.tsx
View File

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
import { BiChevronDown, BiChevronLeft } from 'react-icons/bi'; import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
import styles from '../styles/Program.module.scss'; import styles from '../styles/Program.module.scss';
import shared from '../styles/Shared.module.scss'; import shared from '../styles/Shared.module.scss';
import { CSSTransition } from 'react-transition-group';
interface DayToggles { interface DayToggles {
wed: boolean; wed: boolean;
@@ -44,17 +45,25 @@ const Program = () => {
)} )}
</button> </button>
</div> </div>
{dayToggles.wed && ( <CSSTransition
<> in={dayToggles.wed}
<p> timeout={1000}
18-20 Olen polkuni päässä -illassa Ella Pyhältö lausuu classNames='fadeTransition'
rakastettuja runoja Irja ja Veikko Aro-Heinilän kotipihalla >
(sateella sisällä). {dayToggles.wed ? (
</p> <div>
<p>Sydämellisesti tervetuloa!</p> <p>
<p>Paikka: Huhtakarintie 24, Livonsaari</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>Sydämellisesti tervetuloa!</p>
<p>Paikka: Huhtakarintie 24, Livonsaari</p>
</div>
) : (
<></>
)}
</CSSTransition>
<hr /> <hr />
</div> </div>
<div className={styles.dayContainer}> <div className={styles.dayContainer}>
@@ -71,26 +80,34 @@ const Program = () => {
)} )}
</button> </button>
</div> </div>
{dayToggles.thu && ( <CSSTransition
<> in={dayToggles.thu}
<p> timeout={1000}
14-16 Ainot ja Lauri esittävät Lähellä-nimisen poikkitaiteellisen classNames='fadeTransition'
kokoonpanon, joka on saanut kolmannen kiinnityksen >
kiertopalkintoon Willi Kansa -katselmuksessa marraskuussa 2021 {dayToggles.thu ? (
Irja ja Veikko Aro-Heinilän pihamaalla. Toisessa osassa iltapäivää <div>
kuullaan Irja Aro-Heinilän ja Arto Juurakon tekstejä Ainojen ja <p>
Laurin esittäminä. 14-16 Ainot ja Lauri esittävät Lähellä-nimisen
</p> poikkitaiteellisen kokoonpanon, joka on saanut kolmannen
<p> kiinnityksen kiertopalkintoon Willi Kansa -katselmuksessa
17-19 Runollinen, musiikillinen ja merellinen matinea Cafe marraskuussa 2021 Irja ja Veikko Aro-Heinilän pihamaalla.
Laiturissa. Esiintymässä mm. Anja Erämaja. Toisessa osassa iltapäivää kuullaan Irja Aro-Heinilän ja Arto
</p> Juurakon tekstejä Ainojen ja Laurin esittäminä.
<p> </p>
Paikka: Huhtakarintie 24, Livonsaari sekä Cafe Laituri, <p>
Voiponlahdentie 37, Palva 17-19 Runollinen, musiikillinen ja merellinen matinea Cafe
</p> Laiturissa. Esiintymässä mm. Anja Erämaja.
</> </p>
)} <p>
Paikka: Huhtakarintie 24, Livonsaari sekä Cafe Laituri,
Voiponlahdentie 37, Palva
</p>
</div>
) : (
<></>
)}
</CSSTransition>
<hr /> <hr />
</div> </div>
<div className={styles.dayContainer}> <div className={styles.dayContainer}>
@@ -107,36 +124,45 @@ const Program = () => {
)} )}
</button> </button>
</div> </div>
{dayToggles.fri && ( <CSSTransition
<> in={dayToggles.fri}
<p> timeout={1000}
11-14 Monologityöpaja, vetäjä teatteritaiteen maisteri Kati Urho. classNames='fadeTransition'
</p> >
<p> {dayToggles.fri ? (
Ympäristöjargonia luovasti -työpaja, vetäjä journalisti ja <div>
viestintäkonsultti Laura Rantanen. <p>
</p> 11-14 Monologityöpaja, vetäjä teatteritaiteen maisteri Kati
<p> Urho.
14-20 Runoutta, musiikkia ja poikkitaiteellisia yllätyksiä </p>
puutarhalavalla tai myrskyn sattuessa Seurantalon salissa. <p>
</p> Ympäristöjargonia luovasti -työpaja, vetäjä journalisti ja
<p> viestintäkonsultti Laura Rantanen.
Esiintymässä mm. Kari Aronpuro, Sanna Karlström, Katariina </p>
Vuorinen, Aki Salmela, Heidi Iivari ja Laura Laakso. <p>
</p> 14-20 Runoutta, musiikkia ja poikkitaiteellisia yllätyksiä
<p> puutarhalavalla tai myrskyn sattuessa Seurantalon salissa.
Musiikillisesta puolesta vastaa saksofonisti Mikko Innanen sekä </p>
Äyräs-kokoonpano: Olga Välimaa (laulu), Kauko Röyhkä (laulu, <p>
kitara, basso), Ilkka Turta (kitara), Kimmo Laine (basso, Esiintymässä mm. Kari Aronpuro, Sanna Karlström, Katariina
koskettimet), Roberto Lanz (rummut). Vuorinen, Aki Salmela, Heidi Iivari ja Laura Laakso.
</p> </p>
<p> <p>
Tapahtuman ajan Sinervon talolla pitää majaa kiehtovien kirjojen Musiikillisesta puolesta vastaa saksofonisti Mikko Innanen sekä
tori. Äyräs-kokoonpano: Olga Välimaa (laulu), Kauko Röyhkä (laulu,
</p> kitara, basso), Ilkka Turta (kitara), Kimmo Laine (basso,
<p>Paikka: Sinervon talo, Sauniementie 5, Teersalo</p> koskettimet), Roberto Lanz (rummut).
</> </p>
)} <p>
Tapahtuman ajan Sinervon talolla pitää majaa kiehtovien kirjojen
tori.
</p>
<p>Paikka: Sinervon talo, Sauniementie 5, Teersalo</p>
</div>
) : (
<></>
)}
</CSSTransition>
<hr /> <hr />
</div> </div>
<div className={styles.dayContainer}> <div className={styles.dayContainer}>
@@ -153,27 +179,35 @@ const Program = () => {
)} )}
</button> </button>
</div> </div>
{dayToggles.sat && ( <CSSTransition
<> in={dayToggles.sat}
<p> timeout={1000}
13-17 Runollinen iltapäivä. Romanttinen Velkuanmaa kutsuu mystisen classNames='fadeTransition'
äärelle. >
</p> {dayToggles.sat ? (
<p> <div>
Saaristohotelli Vaihelan terassilla runoilijat vievät kuulijat <p>
luomiinsa maailmoihin yhdessä muusikoiden kanssa. Samalla ehtii 13-17 Runollinen iltapäivä. Romanttinen Velkuanmaa kutsuu
myös nauttimaan lounasta, juttelemaan muiden festarikävijöiden mystisen äärelle.
kanssa ja ihailemaan ympäröivää luontoa. </p>
</p> <p>
<p> Saaristohotelli Vaihelan terassilla runoilijat vievät kuulijat
Juha Kulmala ja Diodi-yhtye, Saila Susiluoto ja Markku Pääskynen luomiinsa maailmoihin yhdessä muusikoiden kanssa. Samalla ehtii
(luuttu). myös nauttimaan lounasta, juttelemaan muiden festarikävijöiden
</p> kanssa ja ihailemaan ympäröivää luontoa.
<p> </p>
Paikka: Vaihelan saaristohotelli, Velkuanmaantie 168, Velkuanmaa <p>
</p> Juha Kulmala ja Diodi-yhtye, Saila Susiluoto ja Markku Pääskynen
</> (luuttu).
)} </p>
<p>
Paikka: Vaihelan saaristohotelli, Velkuanmaantie 168, Velkuanmaa
</p>
</div>
) : (
<></>
)}
</CSSTransition>
<hr /> <hr />
</div> </div>
</section> </section>

2
styles/Info.module.scss
View File

@@ -8,7 +8,7 @@
width: 80%; width: 80%;
} }
p { div {
width: 80%; width: 80%;
} }
} }

2
styles/Program.module.scss
View File

@@ -9,7 +9,7 @@
width: 80%; width: 80%;
} }
p { div {
width: 80%; width: 80%;
} }
} }

17
styles/transitions.scss Normal file
View File

@@ -0,0 +1,17 @@
.fadeTransition-enter {
opacity: 0;
}
.fadeTransition-enter-active {
opacity: 1;
transition: opacity 1000ms;
}
.fadeTransition-exit {
opacity: 1;
}
.fadeTransition-exit-active {
opacity: 0;
transition: opacity 1000ms;
}