Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(landing): carousel of preview boards #1639

Merged
merged 9 commits into from
Sep 17, 2024
Merged

feat(landing): carousel of preview boards #1639

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
055f1d0
feat(landing): add carousel of preview-boards
SelmaBergstrand Sep 6, 2024
39df6b4
feat(landing): update preview boards
SelmaBergstrand Sep 6, 2024
41e532b
style(landing): add light and dark themes to previewboards
SelmaBergstrand Sep 9, 2024
a8e8d3c
style(landing): add fade animation to tavla carousel
SelmaBergstrand Sep 9, 2024
0b514b1
style(landing): make previewboards wider in mobile-view
SelmaBergstrand Sep 9, 2024
c8568dc
chore(landing): add posthog to carousel buttons
SelmaBergstrand Sep 11, 2024
5a638ce
fix(landing): change arrow icons to be buttons and remove unneccessar…
SelmaBergstrand Sep 14, 2024
b4885bc
fix(landing): keyboard navigation and voiceover of preview boards
SelmaBergstrand Sep 16, 2024
d54a50d
chore(landing): add aria-label to button group
SelmaBergstrand Sep 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 101 additions & 3 deletions tavla/app/(admin)/components/Preview/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,119 @@
'use client'

import { IconButton } from '@entur/button'
import { LeftArrowIcon, RightArrowIcon } from '@entur/icons'
import { Board } from 'Board/scenarios/Board'
import { usePostHog } from 'posthog-js/react'
import { useEffect, useState } from 'react'
import { TBoard } from 'types/settings'

const CarouselIndicators = ({
boards,
activeIndex,
onClick,
}: {
boards: TBoard[]
activeIndex: number
onClick: (index: number) => void
}) => {
return (
<div
className="flex flex-row md:space-x-3 space-x-5 justify-center mt-4"
aria-label="Knapper for å bytte mellom avgangstavler"
>
{boards.map((_, index) => (
<button
key={index}
className={`md:w-5 md:h-5 w-6 h-6 rounded-full bottom-5 ${
index === activeIndex ? 'bg-blue' : 'bg-tertiary'
}`}
onClick={() => onClick(index)}
/>
SelmaBergstrand marked this conversation as resolved.
Show resolved Hide resolved
))}
</div>
)
}

function Preview({ boards }: { boards: TBoard[] }) {
const [boardIndex, setBoardIndex] = useState(0)
const [fade, setFade] = useState(true)
const posthog = usePostHog()

useEffect(() => {
const interval = setInterval(() => {
setBoardIndex((boardIndex + 1) % boards.length)
}, 10000)
setFade(false)
setTimeout(() => {
setBoardIndex((boardIndex + 1) % boards.length)
setFade(true)
}, 500)
}, 4500)
return () => clearInterval(interval)
}, [boardIndex, boards])

const nextSlide = () => {
posthog.capture('CAROUSEL_ARROW_BTN')
setBoardIndex((prevIndex) =>
prevIndex === boards.length - 1 ? 0 : prevIndex + 1,
)
}
const prevSlide = () => {
posthog.capture('CAROUSEL_ARROW_BTN')
setBoardIndex((prevIndex) =>
prevIndex === 0 ? boards.length - 1 : prevIndex - 1,
)
}

const goToSlide = (index: number) => {
posthog.capture('CAROUSEL_INDICATOR_BTNS')
setBoardIndex(index)
}

const currentBoard = boards[boardIndex] ?? undefined
if (!currentBoard) return null
return <Board board={currentBoard} style={{ display: 'flex' }} />
return (
<div className="xl:w-1/2 h-[50vh] overflow-hidden rounded-2xl py-10 w-full">
<div className="flex flex-row h-[40vh]">
<div className="my-auto hidden md:block ml-2">
<IconButton
onClick={prevSlide}
aria-label="Vis forrige tavle"
>
<LeftArrowIcon />
</IconButton>
</div>
<div
className="w-full mx-auto"
data-theme={currentBoard.theme ?? 'dark'}
>
<div
aria-label="Eksempel på avgangstavler"
className={`w-full h-full transform transition-all duration-500 ease-in-out p-2 ${
fade ? 'opacity-100' : 'opacity-0'
}`}
>
<Board
aria-hidden
board={currentBoard}
style={{ display: 'flex' }}
/>
</div>
</div>
<div className="my-auto hidden md:block mr-2">
<IconButton
onClick={nextSlide}
aria-label="Vis neste tavle"
>
<RightArrowIcon />
</IconButton>
</div>
</div>

<CarouselIndicators
boards={boards}
activeIndex={boardIndex}
onClick={goToSlide}
/>
</div>
)
}
export { Preview }
150 changes: 70 additions & 80 deletions tavla/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,90 +51,80 @@ async function Landing() {
</div>
</div>
</div>
<div className="flex flex-col justify-center pb-10">
<div className="flex flex-col mx-auto items-center justify-start py-4 container overflow-hidden">
<div className="flex flex-col items-center justify-start gap-4 py-4 w-full">
<div
className="xl:w-1/2 h-[40vh] overflow-hidden rounded-2xl py-10 w-full"
data-theme="dark"
>
<Preview boards={previewBoards} />
</div>

<div className="xl:w-1/2">
<Heading2>Kort om Tavla</Heading2>
<UnorderedList className="space-y-3 flex flex-col gap-1 pl-6">
<ListItem>
Du kan lage avgangstavler fra alle
stoppesteder, holdeplasser, knutepunkter,
fergekaier mm. i hele Norge. Dette gjelder
for alle typer offentlig transport,
inkludert ferger, hurtigbåter og fly.
</ListItem>
<ListItem>
Det er helt gratis å implementere og bruke
Tavla.
</ListItem>
<ListItem>
Tavla kan vises på ulike typer skjermer og
er tilpasset flere operativsystem og
oppløsninger.
</ListItem>
</UnorderedList>
<Paragraph className="pt-50 italic">
Tavla sin kildekode er tilgjengelig for alle på{' '}
<EnturLink href="https://github.com/entur/tavla">
GitHub
</EnturLink>
. Dette gjør at du kan følge utviklingen av
produktet direkte og foreslå forbedringer selv.
</Paragraph>
<div className="flex flex-col mx-auto items-center justify-start py-4 container overflow-hidden pb-10">
<div className="flex flex-col items-center justify-start gap-4 py-4 w-full">
<Preview boards={previewBoards} />

<Heading3>Enkelt å tilpasse og samarbeide</Heading3>
<div className="xl:w-1/2">
<Heading2>Kort om Tavla</Heading2>
<UnorderedList className="space-y-3 flex flex-col gap-1 pl-6">
<ListItem>
Du kan lage avgangstavler fra alle stoppesteder,
holdeplasser, knutepunkter, fergekaier mm. i
hele Norge. Dette gjelder for alle typer
offentlig transport, inkludert ferger,
hurtigbåter og fly.
</ListItem>
<ListItem>
Det er helt gratis å implementere og bruke
Tavla.
</ListItem>
<ListItem>
Tavla kan vises på ulike typer skjermer og er
tilpasset flere operativsystem og oppløsninger.
</ListItem>
</UnorderedList>
<Paragraph className="pt-50 italic">
Tavla sin kildekode er tilgjengelig for alle på{' '}
<EnturLink href="https://github.com/entur/tavla">
GitHub
</EnturLink>
. Dette gjør at du kan følge utviklingen av
produktet direkte og foreslå forbedringer selv.
</Paragraph>

<UnorderedList className="space-y-3 flex flex-col gap-1 pl-6">
<ListItem>
Tilpass tekststørrelse, fargetema, logo og
hvilken informasjon som skal vises, slik at
tavlen(e) passer til dine omgivelser og dine
besøkende sine behov.
</ListItem>
<ListItem>
Velg om du vil vise hele kollektivtilbudet
fra et stoppested, eller kun vise spesifikke
linjer, stoppesteder eller fremkomstmidler.
</ListItem>
<ListItem>
Opprett organisasjoner (mapper) for å samle
tavler og gi andre tilgang til å
administrere dem. Her kan du også velge
standardinnstillinger som vil gjelde alle
tavler i organisasjonen.
</ListItem>
</UnorderedList>
<Heading3>Enkelt å tilpasse og samarbeide</Heading3>

<Heading2 className="pt-8">
Eksempler på bruk
</Heading2>
<Heading3>Hoteller</Heading3>
<Paragraph>
Plasser Tavla i resepsjonsområdet slik at
gjester kan se sanntidsinformasjon om avganger
fra stoppesteder i nærheten.
</Paragraph>
<Heading3>Arbeidsplasser</Heading3>
<Paragraph>
Vis Tavla på informasjonspunkter eller skjermer
ved inngangen slik at besøkende enkelt kan
planlegge hjemreisen.
</Paragraph>
<Heading3>Kjøpesentre</Heading3>
<Paragraph>
Sett opp Tavla på sentrale steder slik at kunder
alltid har oppdatert informasjon om offentlig
transport.
</Paragraph>
</div>
<UnorderedList className="space-y-3 flex flex-col gap-1 pl-6">
<ListItem>
Tilpass tekststørrelse, fargetema, logo og
hvilken informasjon som skal vises, slik at
tavlen(e) passer til dine omgivelser og dine
besøkende sine behov.
</ListItem>
<ListItem>
Velg om du vil vise hele kollektivtilbudet fra
et stoppested, eller kun vise spesifikke linjer,
stoppesteder eller fremkomstmidler.
</ListItem>
<ListItem>
Opprett organisasjoner (mapper) for å samle
tavler og gi andre tilgang til å administrere
dem. Her kan du også velge standardinnstillinger
som vil gjelde alle tavler i organisasjonen.
</ListItem>
</UnorderedList>

<Heading2 className="pt-8">Eksempler på bruk</Heading2>
<Heading3>Hoteller</Heading3>
<Paragraph>
Plasser Tavla i resepsjonsområdet slik at gjester
kan se sanntidsinformasjon om avganger fra
stoppesteder i nærheten.
</Paragraph>
<Heading3>Arbeidsplasser</Heading3>
<Paragraph>
Vis Tavla på informasjonspunkter eller skjermer ved
inngangen slik at besøkende enkelt kan planlegge
hjemreisen.
</Paragraph>
<Heading3>Kjøpesentre</Heading3>
<Paragraph>
Sett opp Tavla på sentrale steder slik at kunder
alltid har oppdatert informasjon om offentlig
transport.
</Paragraph>
</div>
</div>
</div>
Expand Down
64 changes: 46 additions & 18 deletions tavla/src/Shared/utils/previewBoards.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,20 @@ export const previewBoards: TBoard[] = [
meta: {
fontSize: 'medium',
},
theme: 'dark',
tiles: [
{
columns: ['line', 'destination', 'time', 'realtime'],
placeId: 'NSR:StopPlace:58260',
name: 'Dalsbergstien',
columns: [
'line',
'destination',
'time',
'realtime',
'platform',
],
placeId: 'NSR:StopPlace:61291',
name: 'Stavanger stasjon, Stavanger',
type: 'stop_place',
uuid: 'uoO6yA-S0ztol4auy_QSv',
uuid: '1s9E_8qW_e2-cWii94rl4',
},
],
},
Expand All @@ -25,10 +32,17 @@ export const previewBoards: TBoard[] = [
tiles: [
{
columns: ['line', 'destination', 'time', 'realtime'],
placeId: 'NSR:StopPlace:58366',
name: 'Jernbanetorget',
placeId: 'NSR:StopPlace:58382',
name: 'Aker brygge, Oslo',
type: 'stop_place',
uuid: 'uoO6yA-S0ztol4auy_QSv',
uuid: 'lqfe6yE6hStaM8yWbfmb2',
whitelistedLines: [
'RUT:Line:3701',
'RUT:Line:3702',
'RUT:Line:3810',
'RUT:Line:3820',
'RUT:Line:3821',
],
},
],
},
Expand All @@ -37,20 +51,34 @@ export const previewBoards: TBoard[] = [
meta: {
fontSize: 'medium',
},
theme: 'light',
tiles: [
{
columns: [
'line',
'destination',
'time',
'realtime',
'arrivalTime',
],
placeId: 'NSR:StopPlace:58767',
name: 'Festøya ferjekai, Ørsta',
columns: ['line', 'destination', 'time', 'realtime'],
placeId: 'NSR:StopPlace:58856',
name: 'Lysaker stasjon, Bærum',
type: 'stop_place',
uuid: 'WPLoeygP7d173RifiQDvd',
walkingDistance: {
distance: 868,
visible: true,
},
},
],
},
{
id: 'aLr7VN03RDThtjYYfd9v',
meta: {
fontSize: 'medium',
},
theme: 'light',
tiles: [
{
columns: ['line', 'destination', 'time', 'realtime'],
placeId: 'NSR:StopPlace:59261',
name: 'Trondheim lufthavn, Stjørdal',
type: 'stop_place',
uuid: 'syD_TXEoo5x3R8ar2gB_V',
whitelistedLines: ['MOR:Line:1049', 'MOR:Line:1069'],
uuid: 'iELiaTnG7uxRM6aN2Ba9A',
},
],
},
Expand Down