From 8a57c35eaba8c85a85babcbe554955d287b2b053 Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Fri, 13 Oct 2023 00:09:09 +0200
Subject: [PATCH] use carrousel in datahub record API and links lists

---
 .../src/lib/data-apis/data-apis.component.css | 18 ++++++++++++++++
 .../lib/data-apis/data-apis.component.html    | 21 +++++++++++++------
 .../data-otherlinks.component.css             | 18 ++++++++++++++++
 .../data-otherlinks.component.html            | 20 ++++++++++++++----
 4 files changed, 67 insertions(+), 10 deletions(-)

diff --git a/libs/feature/record/src/lib/data-apis/data-apis.component.css b/libs/feature/record/src/lib/data-apis/data-apis.component.css
index e69de29bb2..fdbe6cd0c8 100644
--- a/libs/feature/record/src/lib/data-apis/data-apis.component.css
+++ b/libs/feature/record/src/lib/data-apis/data-apis.component.css
@@ -0,0 +1,18 @@
+/*
+  this computes the space outside of the main column when using `container-lg px-4`
+  FIXME: this component is dependant on the datahub context and should be in the app instead
+*/
+:host {
+  --container-outside-width: calc(50vw - 1024px / 2);
+}
+@media (max-width: 1024px) {
+  :host {
+    --container-outside-width: 1rem;
+  }
+}
+
+gn-ui-carousel {
+  display: block;
+  margin-left: calc(-1 * var(--container-outside-width));
+  margin-right: calc(-1 * var(--container-outside-width));
+}
diff --git a/libs/feature/record/src/lib/data-apis/data-apis.component.html b/libs/feature/record/src/lib/data-apis/data-apis.component.html
index 4aa7bd198b..b7b623d5e7 100644
--- a/libs/feature/record/src/lib/data-apis/data-apis.component.html
+++ b/libs/feature/record/src/lib/data-apis/data-apis.component.html
@@ -1,16 +1,25 @@
 <p
-  class="font-title text-[28px] font-medium mt-8 text-title text-center sm:mt-12 sm:text-left"
+  class="font-title text-[28px] font-medium mt-8 mb-5 text-title text-center sm:mt-12 sm:mb-[-22px] sm:text-left"
   translate
 >
   record.metadata.api
 </p>
-<div
-  class="mb-4 -ml-4 px-4 sm:pt-4 pt-2 justify-center flex flex-row flex-wrap sm:gap-4 sm:justify-start md:flex-nowrap md:items-stretch md:overflow-x-auto md:overflow-y-visible"
+<gn-ui-carousel
+  containerClass="gap-4 py-10"
+  stepsContainerClass="right-[var(--container-outside-width)] bottom-[calc(100%-12px)] top-auto"
 >
   <gn-ui-api-card
-    *ngFor="let link of facade.apiLinks$ | async"
-    class="shrink w-80 my-2"
+    *ngFor="
+      let link of facade.apiLinks$ | async;
+      let first = first;
+      let last = last
+    "
     [link]="link"
+    class="w-80"
+    [ngClass]="{
+      'mr-[var(--container-outside-width)]': last,
+      'ml-[var(--container-outside-width)]': first
+    }"
   >
   </gn-ui-api-card>
-</div>
+</gn-ui-carousel>
diff --git a/libs/feature/record/src/lib/data-otherlinks/data-otherlinks.component.css b/libs/feature/record/src/lib/data-otherlinks/data-otherlinks.component.css
index e69de29bb2..fdbe6cd0c8 100644
--- a/libs/feature/record/src/lib/data-otherlinks/data-otherlinks.component.css
+++ b/libs/feature/record/src/lib/data-otherlinks/data-otherlinks.component.css
@@ -0,0 +1,18 @@
+/*
+  this computes the space outside of the main column when using `container-lg px-4`
+  FIXME: this component is dependant on the datahub context and should be in the app instead
+*/
+:host {
+  --container-outside-width: calc(50vw - 1024px / 2);
+}
+@media (max-width: 1024px) {
+  :host {
+    --container-outside-width: 1rem;
+  }
+}
+
+gn-ui-carousel {
+  display: block;
+  margin-left: calc(-1 * var(--container-outside-width));
+  margin-right: calc(-1 * var(--container-outside-width));
+}
diff --git a/libs/feature/record/src/lib/data-otherlinks/data-otherlinks.component.html b/libs/feature/record/src/lib/data-otherlinks/data-otherlinks.component.html
index 7dae5599f6..91be0773da 100644
--- a/libs/feature/record/src/lib/data-otherlinks/data-otherlinks.component.html
+++ b/libs/feature/record/src/lib/data-otherlinks/data-otherlinks.component.html
@@ -1,13 +1,25 @@
 <p
-  class="font-title text-[28px] font-medium mt-8 mb-6 text-title text-center sm:mt-12 sm:mb-4 sm:text-left"
+  class="font-title text-[28px] font-medium mt-8 mb-5 text-title text-center sm:mt-12 sm:mb-[-22px] sm:text-left"
   translate
 >
   record.metadata.links
 </p>
-<div class="grid gap-2 grid-cols-1 sm:gap-6 sm:grid-cols-2 lg:grid-cols-3">
+<gn-ui-carousel
+  containerClass="gap-4 py-10"
+  stepsContainerClass="right-[var(--container-outside-width)] bottom-[calc(100%-12px)] top-auto"
+>
   <gn-ui-link-card
-    *ngFor="let link of facade.otherLinks$ | async"
+    *ngFor="
+      let link of facade.otherLinks$ | async;
+      let first = first;
+      let last = last
+    "
     [link]="link"
+    class="w-80"
+    [ngClass]="{
+      'mr-[var(--container-outside-width)]': last,
+      'ml-[var(--container-outside-width)]': first
+    }"
   >
   </gn-ui-link-card>
-</div>
+</gn-ui-carousel>