use carrousel in datahub record API and links lists

geonetwork · Oct 13, 2023 · 4eba543 · 4eba543
1 parent bbb1828
commit 4eba543
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 8 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
@@ -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 + 1rem);
+}
+@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
@@ -4,13 +4,22 @@
 >
   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-4"
+  stepsContainerClass="right-[var(--container-outside-width)] bottom-[100%] 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
@@ -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 + 1rem);
+}
+@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
@@ -4,10 +4,22 @@
 >
   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-4"
+  stepsContainerClass="right-[var(--container-outside-width)] bottom-[100%] 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>