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-dom": "18.1.0",
"react-icons": "^4.4.0",
"react-transition-group": "^4.4.2",
"reactstrap": "^9.1.1",
"sass": "^1.52.2"
},
@@ -19,6 +20,7 @@
"@types/node": "17.0.40",
"@types/react": "18.0.11",
"@types/react-dom": "18.0.5",
"@types/react-transition-group": "^4.4.4",
"eslint": "8.17.0",
"eslint-config-next": "12.1.6",
"typescript": "4.7.3"
@@ -370,6 +372,15 @@
"@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": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -3381,6 +3392,15 @@
"@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": {
"version": "0.16.2",
"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-dom": "18.1.0",
"react-icons": "^4.4.0",
"react-transition-group": "^4.4.2",
"reactstrap": "^9.1.1",
"sass": "^1.52.2"
},
@@ -20,6 +21,7 @@
"@types/node": "17.0.40",
"@types/react": "18.0.11",
"@types/react-dom": "18.0.5",
"@types/react-transition-group": "^4.4.4",
"eslint": "8.17.0",
"eslint-config-next": "12.1.6",
"typescript": "4.7.3"

1
pages/_app.tsx
View File

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

75
pages/info.tsx
View File

@@ -2,6 +2,7 @@ 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';
import { CSSTransition } from 'react-transition-group';
interface InfoToggles {
shop: boolean;
@@ -42,8 +43,13 @@ const Info = () => {
)}
</button>
</div>
{infoToggles.shop && (
<>
<CSSTransition
in={infoToggles.shop}
timeout={1000}
classNames='fadeTransition'
>
{infoToggles.shop ? (
<div>
<p>
Livonsaaren osuuskauppa palvelee klo 9-19 joka päivä. Keittiö ja
baari 12-19 to-pe. Ostosten yhteydessä mahdollista nostaa
@@ -53,8 +59,11 @@ const Info = () => {
<a href='https://https//livonsaarenosuuskauppa.fi/'>
Kaupan kotisivut
</a>
</>
</div>
) : (
<></>
)}
</CSSTransition>
<hr />
</div>
<div className={styles.infoContainer}>
@@ -68,8 +77,13 @@ const Info = () => {
)}
</button>
</div>
{infoToggles.bus && (
<>
<CSSTransition
in={infoToggles.bus}
timeout={1000}
classNames='fadeTransition'
>
{infoToggles.bus ? (
<div>
<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
@@ -78,8 +92,11 @@ const Info = () => {
<a href='https://https//www.foli.fi/fi'>
Paikallisliikenteen bussiaikataulut
</a>
</>
</div>
) : (
<></>
)}
</CSSTransition>
<hr />
</div>
<div className={styles.infoContainer}>
@@ -93,17 +110,27 @@ const Info = () => {
)}
</button>
</div>
{infoToggles.accom && (
<>
<CSSTransition
in={infoToggles.accom}
timeout={1000}
classNames='fadeTransition'
>
{infoToggles.accom ? (
<div>
<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://www.livonsaarencaravan.fi/'>
Livonsaari Caravan
</a>
<a href='https://vaihela.fi/'>Saaristohotelli Vaihela</a>
</>
</div>
) : (
<></>
)}
</CSSTransition>
<hr />
</div>
<div className={styles.infoContainer}>
@@ -117,8 +144,13 @@ const Info = () => {
)}
</button>
</div>
{infoToggles.ferry && (
<>
<CSSTransition
in={infoToggles.ferry}
timeout={1000}
classNames='fadeTransition'
>
{infoToggles.ferry ? (
<div>
<p>
Lossiyhteydet Palvaan ja Velkuanmaahan Finferries-sivustolla
(huom. yövuoro edellyttää tilauksen etukäteen. Lossi on osa
@@ -127,8 +159,11 @@ const Info = () => {
<a href='https://www.finferries.fi/lauttaliikenne/lauttapaikat-ja-aikataulut/velkuanmaa.html'>
Aikataulut Palvaan ja Velkuanmaahan
</a>
</>
</div>
) : (
<></>
)}
</CSSTransition>
<hr />
</div>
<div className={styles.infoContainer}>
@@ -142,13 +177,21 @@ const Info = () => {
)}
</button>
</div>
{infoToggles.fb && (
<>
<CSSTransition
in={infoToggles.fb}
timeout={1000}
classNames='fadeTransition'
>
{infoToggles.fb ? (
<div>
<a href='https://https//www.facebook.com/Runosaari-festivaali-110533364561933'>
Tapahtuman facebook-sivut
</a>
</>
</div>
) : (
<></>
)}
</CSSTransition>
<hr />
</div>
</section>

19
pages/performers.tsx
View File

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

76
pages/program.tsx
View File

@@ -2,6 +2,7 @@ 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';
import { CSSTransition } from 'react-transition-group';
interface DayToggles {
wed: boolean;
@@ -44,8 +45,13 @@ const Program = () => {
)}
</button>
</div>
{dayToggles.wed && (
<>
<CSSTransition
in={dayToggles.wed}
timeout={1000}
classNames='fadeTransition'
>
{dayToggles.wed ? (
<div>
<p>
18-20 Olen polkuni päässä -illassa Ella Pyhältö lausuu
rakastettuja runoja Irja ja Veikko Aro-Heinilän kotipihalla
@@ -53,8 +59,11 @@ const Program = () => {
</p>
<p>Sydämellisesti tervetuloa!</p>
<p>Paikka: Huhtakarintie 24, Livonsaari</p>
</>
</div>
) : (
<></>
)}
</CSSTransition>
<hr />
</div>
<div className={styles.dayContainer}>
@@ -71,15 +80,20 @@ const Program = () => {
)}
</button>
</div>
{dayToggles.thu && (
<>
<CSSTransition
in={dayToggles.thu}
timeout={1000}
classNames='fadeTransition'
>
{dayToggles.thu ? (
<div>
<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
Irja ja Veikko Aro-Heinilän pihamaalla. Toisessa osassa iltapäivää
kuullaan Irja Aro-Heinilän ja Arto Juurakon tekstejä Ainojen ja
Laurin esittäminä.
14-16 Ainot ja Lauri esittävät Lähellä-nimisen
poikkitaiteellisen kokoonpanon, joka on saanut kolmannen
kiinnityksen kiertopalkintoon Willi Kansa -katselmuksessa
marraskuussa 2021 Irja ja Veikko Aro-Heinilän pihamaalla.
Toisessa osassa iltapäivää kuullaan Irja Aro-Heinilän ja Arto
Juurakon tekstejä Ainojen ja Laurin esittäminä.
</p>
<p>
17-19 Runollinen, musiikillinen ja merellinen matinea Cafe
@@ -89,8 +103,11 @@ const Program = () => {
Paikka: Huhtakarintie 24, Livonsaari sekä Cafe Laituri,
Voiponlahdentie 37, Palva
</p>
</>
</div>
) : (
<></>
)}
</CSSTransition>
<hr />
</div>
<div className={styles.dayContainer}>
@@ -107,10 +124,16 @@ const Program = () => {
)}
</button>
</div>
{dayToggles.fri && (
<>
<CSSTransition
in={dayToggles.fri}
timeout={1000}
classNames='fadeTransition'
>
{dayToggles.fri ? (
<div>
<p>
11-14 Monologityöpaja, vetäjä teatteritaiteen maisteri Kati Urho.
11-14 Monologityöpaja, vetäjä teatteritaiteen maisteri Kati
Urho.
</p>
<p>
Ympäristöjargonia luovasti -työpaja, vetäjä journalisti ja
@@ -135,8 +158,11 @@ const Program = () => {
tori.
</p>
<p>Paikka: Sinervon talo, Sauniementie 5, Teersalo</p>
</>
</div>
) : (
<></>
)}
</CSSTransition>
<hr />
</div>
<div className={styles.dayContainer}>
@@ -153,11 +179,16 @@ const Program = () => {
)}
</button>
</div>
{dayToggles.sat && (
<>
<CSSTransition
in={dayToggles.sat}
timeout={1000}
classNames='fadeTransition'
>
{dayToggles.sat ? (
<div>
<p>
13-17 Runollinen iltapäivä. Romanttinen Velkuanmaa kutsuu mystisen
äärelle.
13-17 Runollinen iltapäivä. Romanttinen Velkuanmaa kutsuu
mystisen äärelle.
</p>
<p>
Saaristohotelli Vaihelan terassilla runoilijat vievät kuulijat
@@ -172,8 +203,11 @@ const Program = () => {
<p>
Paikka: Vaihelan saaristohotelli, Velkuanmaantie 168, Velkuanmaa
</p>
</>
</div>
) : (
<></>
)}
</CSSTransition>
<hr />
</div>
</section>

2
styles/Info.module.scss
View File

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

2
styles/Program.module.scss
View File

@@ -9,7 +9,7 @@
width: 80%;
}
p {
div {
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;
}