Merge pull request #43 from gone-bike/fix/details

Fix/details
gone-bike · Jun 16, 2023 · fa22d18 · fa22d18
2 parents 9c51b9c + e7dedc1
commit fa22d18
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 16 deletions.
diff --git a/astro/src/components/sections/DetailsSection.astro b/astro/src/components/sections/DetailsSection.astro
@@ -402,19 +402,18 @@ const colorsStr =
  )
  }
 
- <!-- grid gap-x-4 grid-cols-3 justify-start -->
- <div class="carousel mt-4 w-full overflow-hidden">
- <div class="carousel-inner flex overflow-x-auto pb-2">
+ <div class="mt-4 w-full overflow-hidden">
+ <div class="flex gap-4">
  {
  photos.length > 0 &&
  photos.map((photo) => (
  <a
- class="venobox carousel__photo flex-grow-0 flex-shrink-0 basis-auto pr-4"
+ class="venobox basis-full"
  data-gall="gallery01"
  href={photo.directus_files_id.filename_download}
  >
  <img
- class="w-24 h-full sm:w-40 md:w-56 object-cover rounded-lg"
+ class="w-full h-full object-cover rounded-lg"
  src={photo.directus_files_id.filename_download}
  width={photo.directus_files_id.width}
  height={photo.directus_files_id.height}
@@ -682,14 +681,3 @@ const colorsStr =
 
 <!-- share -->
 <script></script>
-
-<style>
- .carousel-inner {
- scroll-snap-type: x mandatory;
- scrollbar-width: thin;
- }
-
- .carousel-inner > * {
- scroll-snap-align: start;
- }
-</style>
diff --git a/astro/src/pages/report/[id].astro b/astro/src/pages/report/[id].astro
@@ -10,6 +10,8 @@ import DetailsSection, {
  // DetailsData,
  ReportDetails,
 } from "@components/sections/DetailsSection.astro";
+import BikesCard from "@components/cards/BikesCard.astro";
+import BikesList from "@components/bikes/BikesList.astro";
 // import config from "@utils/config";
 
 // import Report from "@models/report";
@@ -133,6 +135,60 @@ const detailsData = {
  locale_code: i18next.language,
  },
 } satisfies ReportDetails;
+
+const imgArr = [
+ {
+ imgPath: "/4b8d515f-ed58-4b3f-8c47-c9b57aa98a66.jpeg",
+ alt: "...1",
+ },
+ {
+ imgPath: "/4b8d515f-ed58-4b3f-8c47-c9b57aa98a66.jpeg",
+ alt: "...2",
+ },
+ {
+ imgPath: "/4b8d515f-ed58-4b3f-8c47-c9b57aa98a66.jpeg",
+ alt: "...3",
+ },
+];
+
+const otherBikesList = [
+ {
+ dateStr: "2022-05-28",
+ matchScore: 75,
+ brand: "Forme",
+ model: "Hooklow 2",
+ location: "Milano, Italy",
+ lang: "en",
+ imgs: imgArr,
+ },
+ {
+ dateStr: "2022-05-28",
+ matchScore: 75,
+ brand: "Forme",
+ model: "Hooklow 2",
+ location: "Milano, Italy",
+ lang: "en",
+ imgs: imgArr,
+ },
+ {
+ dateStr: "2022-05-28",
+ matchScore: 75,
+ brand: "Forme",
+ model: "Hooklow 2",
+ location: "Milano, Italy",
+ lang: "en",
+ imgs: imgArr,
+ },
+ {
+ dateStr: "2022-05-28",
+ matchScore: 75,
+ brand: "Forme",
+ model: "Hooklow 2",
+ location: "Milano, Italy",
+ lang: "en",
+ imgs: imgArr,
+ },
+];
 ---
 
 <BaseLayout title={t("test.x")} description="test" lang={i18next.language}>
@@ -144,6 +200,12 @@ const detailsData = {
  currentPage={"Forme Hooklow 2 - June 3, 2023"}
  />
  <DetailsSection data={detailsData} />
+
+ <section class="py-4 md:py-8">
+ <h2 class="text-2xl font-bold md:text-3xl">Other reports</h2>
+
+ <BikesList items={otherBikesList} />
+ </section>
  </BaseContainer>
  </main>
  <!-- <div class="container mx-auto">