Merge pull request #12 from itk-dev/feature/start-route-btn

SALG-1278: Redo placement of carousel and start btn

Author: jeppekroghitk

package-lock.json

@@ -44,6 +44,7 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.19.1",
+    "@tailwindcss/line-clamp": "^0.4.4",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",

package.json

@@ -17,15 +17,15 @@ function Route({ id }) {
 
   return (
     <Link
-      className="bg-zinc-100 dark:bg-zinc-700 flex relative"
+      className="bg-zinc-100 dark:bg-zinc-700 flex flex-row relative h-32"
       to={`/route/${id}`}
     >
-      <div className="w-32 flex justify-center place-items-center">
+      <div className="flex-none w-36">
         <Image className="object-cover h-full" src={route.image} />
       </div>
-      <div className="flex-initial text-left leading-none p-3">
-        <span className="block mb-1">{route.name}</span>
-        <span className="text-xs ">{route.description}</span>
+      <div className="flex-initial text-left leading-none py-3 pl-3 pr-6 mb-6">
+        <h2 className="mb-2 font-bold">{route.name}</h2>
+        <div className="text-xs line-clamp-3">{route.description}</div>
       </div>
     </Link>
   );

src/components/routes/Route.jsx

@@ -7,7 +7,7 @@ import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a lo
 function RouteCarousel({ routes, onCarouselChange }) {
   return (
     <Carousel
-      className="absolute left-0 bottom-0 right-0 m-5 rounded-lg overflow-hidden max-h-96 md:max-w-lg"
+      className="rounded-lg overflow-hidden md:max-w-lg"
       showThumbs={false}
       showStatus={false}
       autoplay

src/components/routes/RouteCarousel.jsx

@@ -2,8 +2,6 @@ import { React, useEffect, useState } from "react";
 import MapWrapper from "../map/MapWrapper";
 import { getFeaturesForMap } from "../../util/helper";
 import BackButton from "../BackButton";
-import { ReactComponent as IconCirclePlay } from "../../icons/circle-play-solid.svg";
-import { ReactComponent as IconMap } from "../../icons/map-solid.svg";
 
 function SelectedRoute({ selectedRoute }) {
   const [featuresForMap, setFeaturesForMap] = useState(null);
@@ -18,17 +16,22 @@ function SelectedRoute({ selectedRoute }) {
 
   if (selectedRoute === null || featuresForMap === null) return null;
 
-  console.log(selectedRoute)
-
   return (
     <>
       <MapWrapper mapData={featuresForMap} goToView={featuresForMap[0]} />
       <BackButton>Kategorier</BackButton>
       <div className="relative ml-2">
         {/* TODO: show the real category instead of "Valgt kategory" */}
-        <p className="mt-10 text-sm font-bold text-emerald-800 dark:text-emerald-400 drop-shadow">Valgt kategori</p>
-        <h1 className="text-4xl font-bold mb-5 drop-shadow">{selectedRoute.name}</h1>
-        <div id="info-box" className="bg-zinc-100 dark:bg-zinc-700 rounded p-3 w-32 drop-shadow">
+        <p className="mt-10 text-sm font-bold text-emerald-800 dark:text-emerald-400 drop-shadow">
+          Valgt kategori
+        </p>
+        <h1 className="text-4xl font-bold mb-5 drop-shadow">
+          {selectedRoute.name}
+        </h1>
+        <div
+          id="info-box"
+          className="bg-zinc-100 dark:bg-zinc-700 rounded p-3 w-32 drop-shadow"
+        >
           <label htmlFor="distance" className="mb-5">
             <span className="text-xs">Distance</span>
             <div id="distance" className="text-lg">
@@ -49,26 +52,6 @@ function SelectedRoute({ selectedRoute }) {
             <div id="length" className="text-lg" />
           </label>
         </div>
-        <div id="buttons" className="relative mt-5 flex gap-3">
-          <button
-            className="p-2 rounded text-zinc-100 dark:text-zinc-800 bg-zinc-800 dark:bg-zinc-100 drop-shadow"
-            type="button"
-            // TODO: Change onClick to go to selected route
-            //onClick={() => setSource(podcast)}
-            >
-            <IconCirclePlay className="w-6 h-6" />
-            <span className="sr-only">Afspil</span>
-          </button>
-          <button
-            className="p-2 rounded text-zinc-100 dark:text-zinc-800 bg-zinc-800 dark:bg-zinc-100 drop-shadow"
-            type="button"
-            // TODO: Change onClick to toggle map layer
-            //onClick={() => setSource(podcast)}
-            >
-            <IconMap className="w-6 h-6" />
-            <span className="sr-only">Vis kortet</span>
-          </button>
-        </div>
       </div>
     </>
   );

src/components/routes/SelectedRoute.jsx

@@ -9,7 +9,9 @@ function Tag({ name, numberOfRoutes, id }) {
       to={`/tag/${id}`}
     >
       <span className="block text-lg font-bold">{name}</span>
-      <span className="text-s text-zinc-600 dark:text-zinc-300">{numberOfRoutes} historier</span>
+      <span className="text-s text-zinc-600 dark:text-zinc-300">
+        {numberOfRoutes} historier
+      </span>
     </Link>
   );
 }

src/components/tags/Tag.jsx

@@ -7,6 +7,8 @@ import {
   getIdsFromApiEndpoints,
 } from "../../util/helper";
 import RouteCarousel from "../routes/RouteCarousel";
+import { ReactComponent as IconCirclePlay } from "../../icons/circle-play-solid.svg";
+import { ReactComponent as IconMap } from "../../icons/map-solid.svg";
 
 // A tag page displays routes connected to the tag-id
 function TagPage() {
@@ -50,10 +52,32 @@ function TagPage() {
         onCarouselChange={onCarouselChange}
         selectedRoute={selectedRoute}
       />
-      <RouteCarousel
-        routes={displayedRoutes}
-        onCarouselChange={onCarouselChange}
-      />
+      <div className="absolute bottom-6 left-6 md:left-auto right-6 flex flex-col gap-3">
+        <div id="buttons" className="flex gap-3 justify-end">
+          <button
+            className="p-2 rounded text-zinc-100 dark:text-zinc-800 bg-zinc-800 dark:bg-zinc-100 drop-shadow"
+            type="button"
+            // TODO: Change onClick to toggle map layer
+            // onClick={() => setSource(podcast)}
+          >
+            <IconMap className="w-6 h-6" />
+            <span className="sr-only">Vis kortet</span>
+          </button>
+          <button
+            className="p-2 rounded text-zinc-100 dark:text-zinc-800 bg-zinc-800 dark:bg-zinc-100 drop-shadow"
+            type="button"
+            // TODO: Change onClick to go to selected route
+            // onClick={() => setSource(podcast)}
+          >
+            <IconCirclePlay className="w-6 h-6" />
+            <span className="sr-only">Afspil</span>
+          </button>
+        </div>
+        <RouteCarousel
+          routes={displayedRoutes}
+          onCarouselChange={onCarouselChange}
+        />
+      </div>
     </>
   );
 }

src/components/tags/TagPage.jsx

@@ -48,11 +48,14 @@ function TagsList() {
             <div className="flex flex-col gap-2">
               <p>Vælg først en kategori på listen herover.</p>
               <p>Vælg derefter den ønskede rute.</p>
-              <p>Gå hen til første del af ruten og der kan du starte afspilningen.</p>
+              <p>
+                Gå hen til første del af ruten og der kan du starte
+                afspilningen.
+              </p>
               <p>
                 Lyt til vejledningen eller brug navigations pilen i bunden af
-                rute visningen til at komme til næste punkt.
-                Husk at være opmærksom på dine opgivelser.
+                rute visningen til at komme til næste punkt. Husk at være
+                opmærksom på dine opgivelser.
               </p>
               <p>God fornøjelse med din podwalk.</p>
             </div>

src/components/tags/TagsList.jsx

@@ -4,5 +4,7 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/line-clamp'),
+  ],
 };