Skip to content

Commit 3c444e6

Browse files
jeppekroghitkjeppekroghitk
authored
Merge pull request #8 from itk-dev/feature/styling
SALG-1278: Initial styling of category selection and route browsing
2 parents 6187021 + 8892614 commit 3c444e6

20 files changed

+233
-96
lines changed

‎src/App.jsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect, useState, useMemo, useRef, useContext } from "react";
2-
import { Routes, Navigate, Route, useNavigate } from "react-router-dom";
2+
import { Routes, Navigate, Route } from "react-router-dom";
33
import TagPage from "./components/tags/TagPage";
44
import LatLongContext from "./context/latitude-longitude-context";
55
import AudioContext from "./context/audio-context";
@@ -10,8 +10,6 @@ import TagsList from "./components/tags/TagsList";
1010
import RoutePage from "./components/routes/RoutePage";
1111
import ApiEndpointContext from "./context/api-endpoint-context";
1212

13-
// import "./App.css";
14-
1513
function App() {
1614
const [geolocationAvailable, setGeolocationAvailable] = useState();
1715
const [lat, setLat] = useState(null);
@@ -21,7 +19,6 @@ function App() {
2119
const [source, setSource] = useState(null);
2220
const [cache, setCache] = useState({});
2321
const audioRef = useRef();
24-
const navigate = useNavigate();
2522

2623
const cacheContext = useMemo(
2724
() => ({
@@ -119,12 +116,7 @@ function App() {
119116
const { fileUrl } = useContext(ApiEndpointContext);
120117

121118
return (
122-
<div className="App">
123-
<div>
124-
<button type="button" onClick={() => navigate(-1)}>
125-
go back
126-
</button>
127-
</div>
119+
<div className="App h-full min-h-screen w-screen p-3 text-zinc-800 dark:text-white bg-zinc-100 dark:bg-zinc-800">
128120
<LatLongContext.Provider value={contextLatLong}>
129121
<CacheContext.Provider value={cacheContext}>
130122
<AudioContext.Provider value={audio}>
@@ -145,7 +137,14 @@ function App() {
145137
</LatLongContext.Provider>
146138
{audioRef && source && (
147139
// eslint-disable-next-line jsx-a11y/media-has-caption
148-
<audio ref={audioRef} controls src={`${fileUrl}${source}`} />
140+
<div className="fixed left-3 bottom-0 right-3 bg-zinc-200 dark:bg-zinc-700">
141+
<audio
142+
className="w-full"
143+
ref={audioRef}
144+
controls
145+
src={`${fileUrl}${source}`}
146+
/>
147+
</div>
149148
)}
150149
</div>
151150
);

‎src/components/BackButton.jsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { React } from "react";
2+
import { useNavigate } from "react-router-dom";
3+
import { ReactComponent as AngleLeft } from "../icons/angle-left-solid.svg";
4+
import { ReactComponent as Xmark } from "../icons/xmark-solid.svg";
5+
6+
function BackButton({ children }) {
7+
const navigate = useNavigate();
8+
9+
return (
10+
<button
11+
className="relative flex place-content-center dark:bg-zinc-800 dark:text-white text-sm"
12+
type="button"
13+
onClick={() => navigate(-1)}
14+
>
15+
<span className="bg-zinc-300 dark:bg-zinc-700 flex place-content-center px-3 mr-2 rounded">
16+
{children === "Afslut" ? (
17+
<Xmark className="inline w-2" />
18+
) : (
19+
<AngleLeft className="inline w-2" />
20+
)}
21+
</span>
22+
{children}
23+
</button>
24+
);
25+
}
26+
27+
export default BackButton;

‎src/components/Image.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { React, useContext } from "react";
22
import ApiEndpointContext from "../context/api-endpoint-context";
33

4-
function Image({ src }) {
4+
function Image({ src, className }) {
55
const { fileUrl } = useContext(ApiEndpointContext);
6-
return <img width="300" src={`${fileUrl}${src}`} alt="" />;
6+
return <img className={className} src={`${fileUrl}${src}`} alt="" />;
77
}
88

99
export default Image;

‎src/components/map/MapWrapper.jsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -168,11 +168,14 @@ function MapWrapper({ mapData, goToView }) {
168168
}
169169
}, [mapData]);
170170

171+
// TODO: Remove zoom and info btn
172+
171173
return (
172-
<div className="map-container">
173-
<div ref={mapElement} className="map" id="map">
174+
<div className="map-container absolute left-0 top-0 h-screen px-3 pt-12 pb-3">
175+
<div ref={mapElement} className="map rounded-xl overflow-hidden" id="map">
174176
<div id="tooltip" className="tooltip" />
175177
</div>
178+
<div className="map-color-overlay absolute left-0 top-0 bottom-0 right-0 w-screen h-screen bg-zinc-400 dark:bg-zinc-800 opacity-70 dark:opacity-80" />
176179
</div>
177180
);
178181
}

‎src/components/map/map-wrapper.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
.map-container,
44
.map {
5-
height: 400px;
5+
height: 100%;
66
width: 100%;
77
display: block;
88
/* filter: brightness(55%); */
@@ -389,7 +389,7 @@
389389
padding: 0 15px;
390390
height: 40px;
391391
align-items: center;
392-
justify-content: center;
392+
justify-content: center;
393393
}
394394

395395
.tooltip:not(:empty) .tooltip-btn {

‎src/components/points-of-interest/PointOfInterest.jsx‎

Lines changed: 62 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ import PodcastWrapper from "./PodcastWrapper";
55
import PermissionContext from "../../context/permission-context";
66
import AudioContext from "../../context/audio-context";
77
import Image from "../Image";
8+
import { ReactComponent as CirclePlay } from "../../icons/circle-play-solid.svg";
9+
import { ReactComponent as ClosedCap } from "../../icons/closed-captioning-solid.svg";
10+
import { ReactComponent as RulerHorizontal } from "../../icons/ruler-horizontal-solid.svg";
11+
import { ReactComponent as Xmark } from "../../icons/xmark-solid.svg";
812

913
function PointOfInterest({
1014
pointOfInterest: {
@@ -81,20 +85,66 @@ function PointOfInterest({
8185
if (isExperienceIdInLocalstorage()) {
8286
setUnlocked(true);
8387
}
88+
8489
}, []);
8590

8691
return (
87-
<>
88-
<h2>{name}</h2>
89-
<Image src={image} />
90-
<div>
91-
{!unlocked && (
92-
<label htmlFor="distance">
93-
afstand
94-
{/* todo this is slow and would benefit from loading screen / skeleton componenet */}
95-
<div id="distance">{proximity} m</div>
96-
</label>
97-
)}
92+
<div
93+
className={
94+
unlocked
95+
? `flex items-start gap-4 p-4`
96+
: `flex items-start gap-4 p-4 opacity-10`
97+
}
98+
>
99+
<Image src={image} className="w-24 h-24 rounded-full" />
100+
<div className="flex flex-col">
101+
<h2 className="text-zinc-900 text-sm font-bold dark:text-zinc-200 my-3">
102+
{name}
103+
</h2>
104+
<div className="text-zinc-500 text-sm font-medium dark:text-zinc-400">
105+
{!unlocked && (
106+
<label htmlFor="distance">
107+
<RulerHorizontal className="w-4 inline mr-3" />
108+
<span className="sr-only">Afstand</span>
109+
{/* todo this is slow and would benefit from loading screen / skeleton componenet */}
110+
<span className="text-md" id="distance">
111+
{proximity} m
112+
</span>
113+
</label>
114+
)}
115+
<div className="flex gap-2">
116+
{unlocked && (
117+
<button
118+
className="p-1 rounded text-zinc-800 bg-zinc-100"
119+
type="button"
120+
onClick={() => setSource(podcast)}
121+
>
122+
<CirclePlay className="w-6" />
123+
<span className="sr-only">Afspil</span>
124+
</button>
125+
)}
126+
{unlocked && (
127+
<button
128+
className="p-1 rounded text-zinc-800 bg-zinc-100"
129+
type="button"
130+
onClick={() => setViewSubtitles(!viewSubtitles)}
131+
>
132+
{viewSubtitles ? (
133+
<Xmark className="h-6 w-6 text-zinc-800" />
134+
) : (
135+
<ClosedCap className="h-6 w-6 text-zinc-800" />
136+
)}
137+
<span className="sr-only">Se tekst</span>
138+
</button>
139+
)}
140+
</div>
141+
{viewSubtitles && (
142+
<div className="bg-zinc-200 text-zinc-800 dark:bg-zinc-500 dark:text-white p-2 rounded mt-2">
143+
{subtitles}
144+
</div>
145+
)}
146+
{!unlocked && <div>Lås op ved at gå tættere på</div>}
147+
</div>
98148
</div>
99149
{unlocked && (
100150
<button type="button" onClick={() => setSource(podcast)}>
@@ -109,7 +159,7 @@ function PointOfInterest({
109159
{!unlocked && <div>kan ikke tilgås</div>}
110160
{viewSubtitles && <div>{subtitles}</div>}
111161
{unlocked && IFrameUrl && <PodcastWrapper IFrameUrl={IFrameUrl} />}
112-
</>
162+
</div>
113163
);
114164
}
115165

‎src/components/routes/Route.jsx‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { React, useEffect, useState } from "react";
22
import { Link } from "react-router-dom";
33
import useFetch from "../../util/useFetch";
44
import Image from "../Image";
5+
import { ReactComponent as CirclePlay } from "../../icons/circle-play-solid.svg";
56

67
function Route({ id }) {
78
const { data } = useFetch(`routes/${id}`);
@@ -16,13 +17,19 @@ function Route({ id }) {
1617
if (route === null) return null;
1718

1819
return (
19-
<span>
20-
<Link className="" to={`/route/${id}`}>
21-
{route.name}
22-
</Link>
23-
<div>{route.description}</div>
24-
<Image src={route.image} />
25-
</span>
20+
<Link
21+
className="bg-zinc-100 dark:bg-zinc-700 flex relative"
22+
to={`/route/${id}`}
23+
>
24+
<div className="w-32 flex justify-center place-items-center">
25+
<CirclePlay className="absolute w-6" />
26+
<Image className="object-cover h-full" src={route.image} />
27+
</div>
28+
<div className="flex-initial text-left leading-none p-3">
29+
<span className="block mb-1">{route.name}</span>
30+
<span className="text-xs ">{route.description}</span>
31+
</div>
32+
</Link>
2633
);
2734
}
2835

‎src/components/routes/RouteCarousel.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a lo
77
function RouteCarousel({ routes, onCarouselChange }) {
88
return (
99
<Carousel
10+
className="absolute left-0 bottom-0 right-0 m-5 rounded-lg overflow-hidden max-h-96 md:max-w-lg"
1011
showThumbs={false}
1112
showStatus={false}
1213
autoplay

‎src/components/routes/RoutePage.jsx‎

Lines changed: 58 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1-
import { React, useEffect, useState } from "react";
1+
import { React, useEffect, useState, useContext } from "react";
22
import { useParams } from "react-router-dom";
33
import useFetch from "../../util/useFetch";
44
import PointOfInterest from "../points-of-interest/PointOfInterest";
55
import { getAngleFromLocationToDestination } from "../../util/helper";
6+
import BackButton from "../BackButton";
7+
import { ReactComponent as LocationArrow } from "../../icons/location-arrow-solid.svg";
8+
import AudioContext from "../../context/audio-context";
69

710
function RoutePage() {
811
const { id } = useParams();
@@ -15,6 +18,11 @@ function RoutePage() {
1518
const [latitude, setLatitude] = useState(0);
1619
const [longitude, setLongitude] = useState(0);
1720
const [destinationName, setDestinationName] = useState(null);
21+
const [userLatitude, setUserLatitude] = useState(0);
22+
const [userLongitude, setUserLongitude] = useState(0);
23+
const { audio } = useContext(AudioContext);
24+
let handlerAvailable = true;
25+
let locationHandlerAvailable = true;
1826
const isIOS =
1927
navigator.userAgent.match(/(iPod|iPhone|iPad)/) &&
2028
navigator.userAgent.match(/AppleWebKit/);
@@ -89,41 +97,56 @@ function RoutePage() {
8997
}, [pointsOfInterest]);
9098

9199
if (selectedRoute === null) return null;
100+
92101
return (
93-
<>
94-
<h1>{selectedRoute.name}</h1>
95-
{pointsOfInterest &&
96-
pointsOfInterest
97-
.toReversed()
98-
.map((pointOfInterest) => (
99-
<PointOfInterest
100-
pointOfInterest={pointOfInterest}
101-
key={pointOfInterest.id}
102-
/>
103-
))}
104-
<img
105-
alt=""
106-
style={{
107-
width: 100,
108-
display: "block",
109-
margin: "auto",
110-
transform: `rotate(${-rotation}deg)`,
111-
}}
112-
src="data:image/png;base64,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"
113-
/>
114-
<button
115-
style={{
116-
width: 300,
117-
height: 100,
118-
display: "block",
119-
margin: "auto",
120-
}}
121-
type="button"
122-
onClick={() => startWaypointer()}
123-
>
124-
Vis mig vej til {destinationName}
125-
</button>
126-
</>
102+
<div className="flex flex-col place-items-start pb-20">
103+
<BackButton>Afslut</BackButton>
104+
<h1 className="text-xl font-bold my-3">{selectedRoute.name}</h1>
105+
<div className="overflow-y-auto h-4/6 relative w-full bg-white dark:bg-zinc-700 dark:highlight-white/5 shadow-lg ring-1 ring-black/5 rounded-lg flex flex-col divide-y dark:divide-zinc-200/5">
106+
{pointsOfInterest &&
107+
pointsOfInterest
108+
.toReversed()
109+
.map((pointOfInterest) => (
110+
<PointOfInterest
111+
pointOfInterest={pointOfInterest}
112+
key={pointOfInterest.id}
113+
/>
114+
))}
115+
</div>
116+
{/* TODO: Make room for audio player below when playing */}
117+
<div className="fixed left-3 bottom-3 right-3 bg-zinc-200 dark:bg-zinc-700 flex gap-3 rounded-lg p-3 pb-15 divide-x dark:divide-zinc-200/5">
118+
<div>
119+
<span className="block text-sm text-bold">Afstand til del 1</span>
120+
<span className="block">180 meter</span>
121+
<button
122+
className="bg-zinc-700 dark:bg-zinc-200 dark:text-zinc-800 rounded text-sm py-1 px-3"
123+
type="button"
124+
onClick={() => startWaypointer()}
125+
>
126+
Vis mig vej
127+
</button>
128+
</div>
129+
<div className="pl-3">
130+
<div className="flex justify-between mb-3">
131+
<span className="text-sm text-bold">Retning</span>
132+
<span className="w-1/2">
133+
<LocationArrow
134+
className="inline w-5"
135+
style={{
136+
transform: `rotate(${-rotation}deg)`,
137+
}}
138+
/>
139+
</span>
140+
</div>
141+
<div className="text-xs text-zinc-500">
142+
Lat: {userLatitude}/{latitude}
143+
</div>
144+
<div className="text-xs text-zinc-500">
145+
Long: {userLongitude}/{longitude}
146+
</div>
147+
</div>
148+
</div>
149+
</div>
127150
);
128151
}
129152

0 commit comments

Comments
 (0)