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

WIP

Browse Source
This commit is contained in:
Veikko Lintujärvi
2024-05-25 12:24:45 +03:00
parent 8f57fc8456
commit c9be2af52e
7 changed files with 152 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
pages/archive.tsx → pages/arkisto.tsx
View File

0
pages/performers/[id].tsx → pages/esiintyjat/[id].tsx
View File

2
pages/index.tsx
View File

@@ -6,7 +6,7 @@ import styles from '../styles/Index.module.scss';
import Lead from './components/Lead';
import Collaboration from './components/Collaboration';
import Workshops from './workshops';
import Archive from './archive';
import Archive from './arkisto';
// import Workshops from './workshops';
const Home: NextPage = () => {

2
pages/performers.tsx
View File

@@ -89,7 +89,7 @@ const Performers = () => {
) : (
<i>Lisätietoja tulossa myöhemmin...</i>
)}
<Link href="/archive">
<Link href="/arkisto">
<a>
<span className={styles.archiveLinkText}>Aiempien vuosien esiintyjiä</span>
<FiExternalLink fontSize={20} />

133
pages/program.tsx
View File

@@ -4,6 +4,9 @@ import shared from '../styles/Shared.module.scss';
import styles from '../styles/Program.module.scss';
import { CSSTransition } from 'react-transition-group';
import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
import Performer from '../types/Performer';
import Image from 'next/image';
import Link from 'next/link';
interface DayToggles {
wed: boolean;
@@ -12,56 +15,100 @@ interface DayToggles {
sat: boolean;
}
const firstPerformers: Performer[] = [];
const secondPerformers: Performer[] = [];
const Program = () => {
const [firstPerformers] = useState([
{ id: "ayras", name: "Äyräs", paragraphs: [] },
{ id: "hanna_storm", name: "Hanna Storm", paragraphs: [] },
{ id: "juha_rautio", name: "Juha Rautio", paragraphs: [] },
{ id: "katariina_vuorinen", name: "Katariina Vuorinen & Ilkka Turta", paragraphs: [] }]);
const [secondPerformers] = useState([
{ id: "juha_kulmala", name: "Juha Kulmala + Positroninen runo-orkesteri", paragraphs: [] },
{ id: "terhi_forssen", name: "Terhi Forssén", paragraphs: [] },
{ id: "katariina_vuorinen", name: "Katariina Vuorinen & Björn", paragraphs: [] }]);
return (
<section className={shared.page}>
<h1 id='program-start'>Ohjelma</h1>
{/* Vaihela */}
<h2 className={styles.programTitle}>
<span>7.6.</span>
<a href='https://www.cafelaituri.fi'>
<span className={styles.placeName}>Vaihela</span>
<div className={styles.eventContainer}>
{/* Vaihela */}
<div className={styles.event}>
<div className={styles.programTitle}>
<span className={styles.timeSpan}>pe</span>
<span className={styles.timeSpan}>7.6.</span>
<span className={styles.timeSpan}>18 - 21</span>
</div>
<h2>
<a href='https://www.cafelaituri.fi'>
<span className={styles.placeName}>Vaihela</span>
<FiExternalLink fontSize={20} />
</a>
</h2>
<div className={styles.performerList}>
{firstPerformers.map((p) => (
<a href={'/esiintyjat/' + p.id} className={styles.performerCard}>
<Image
className={styles.performerImage}
src={'/performers/2024/' + p.id + '.jpg'}
width={80}
height={80}
layout='fixed'
alt={p.name}
/>
<span className={styles.performerName}>{p.name}</span>
</a>
))}
</div>
<br />
<br />
<i>Ohjelma täydentyy...</i>
</div>
{/* Laituri */}
<div className={styles.event}>
<div className={styles.programTitle}>
<span className={styles.timeSpan}>pe</span>
<span className={styles.timeSpan}>14.6.</span>
<span className={styles.timeSpan}>18 - 21</span>
</div>
<h2>
<a href='https://www.cafelaituri.fi'>
<span className={styles.placeName}>Laituri</span>
<FiExternalLink fontSize={20} />
</a>
</h2>
<div className={styles.performerList}>
{secondPerformers.map((p) => (
<a href={'/esiintyjat/' + p.id} className={styles.performerCard}>
<Image
className={styles.performerImage}
src={'/performers/2024/' + p.id + '.jpg'}
width={80}
height={80}
layout='fixed'
alt={p.name}
/>
<span className={styles.performerName}>{p.name}</span>
</a>
))}
</div>
<br />
<br />
<i>Ohjelma täydentyy...</i>
</div>
</div>
<Link href="/arkisto">
<a>
<span className={styles.archiveLinkText}>Aiempien vuosien esiintyjiä</span>
<FiExternalLink fontSize={20} />
</a>
<span>pe</span>
</h2>
<span className={styles.locationAddress}>
Saaristohotelli Vaihela, Velkuanmaantie 168, Velkuanmaa
</span>
<span className={styles.timeSpan}>18:00 - 21:00</span>
<ul className={styles.performerList}>
<li>Äyräs</li>
<li>Hanna Storm</li>
<li>Juha Rautio</li>
<li>Katariina Vuorinen<br />& Ilkka Turta</li>
</ul>
<i>Ohjelma täydentyy...</i>
<hr className={styles.programHr} />
{/* Laituri */}
<h2 className={styles.programTitle}>
<span>14.6.</span>
<a href='https://www.cafelaituri.fi'>
<span className={styles.placeName}>Laituri</span>
<FiExternalLink fontSize={20} />
</a>
<span>pe</span>
</h2>
<span className={styles.locationAddress}>
Café Laituri, Voiponlahdentie 37, Palva
</span>
<span className={styles.timeSpan}>18:00 - 21:00</span>
<ul className={styles.performerList}>
<li>Juha Kulmala + Positroninen runo-orkesteri </li>
<li>Terhi Forssén</li>
<li>Katariina Vuorinen & Björn</li>
</ul>
<i>Ohjelma täydentyy...</i>
<hr className={styles.programHr} />
</section>
</Link>
</section >
);
};

0
pages/safety.tsx → pages/turvallisuus.tsx
View File

70
styles/Program.module.scss
View File

@@ -22,7 +22,7 @@
.programTitle {
display: flex;
align-items: baseline;
justify-content: space-evenly;
justify-content: space-between;
width: 80%;
max-width: 25rem;
padding-left: 1.5rem;
@@ -54,16 +54,54 @@
}
.performerList {
font-size: 1.5rem;
font-weight: bold;
list-style-type: none;
line-height: 1.5rem;
max-width: 20rem;
padding-left: 0;
margin-top: 0;
display: flex;
flex-wrap: wrap;
gap: 2em;
justify-content: space-around;
margin-top: 3rem;
}
li {
margin-top: 1em;
.performerCard {
display: flex;
align-items: center;
flex-direction: column;
text-decoration: none;
color: #2f273e;
img {
border-radius: 50%;
}
}
.performerCard:hover {
color: rgb(117, 117, 117);
transition: color 0.3s;
}
.performerName {
max-width: 105px;
word-wrap: normal;
}
.eventContainer {
display: flex;
gap: 4%;
margin-bottom: 2em;
}
.event {
min-width: 40%;
padding: 4%;
background-color: #e7e2f5;
}
@media screen and (max-width: 768px) {
.eventContainer {
flex-wrap: wrap;
}
.event {
margin-top: 2em;
}
}
@@ -125,3 +163,15 @@
width: 43%;
margin-top: 1em;
}
.archiveLink {
margin-top: 1rem;
}
.archiveLinkText {
font-size: 2.5rem;
margin-right: 1rem;
color: #2f273e;
text-decoration: none;
font-weight: bold;
}