From d9c26b9c93788398094e94865635eaf72ec58239 Mon Sep 17 00:00:00 2001
From: bramjanssen <bram.janssen@vito.be>
Date: Tue, 13 Aug 2024 13:41:18 +0200
Subject: [PATCH] feat: setup of grid system as replacement for the card-group
 in catalogue and items

---
 src/components/Catalog.vue  | 51 ++++++++++++++++++++++++-------------
 src/components/Catalogs.vue |  6 ++---
 src/components/Item.vue     | 44 +++++++++++++++++---------------
 src/components/Items.vue    |  4 +--
 src/components/ViewMixin.js | 18 ++-----------
 5 files changed, 63 insertions(+), 60 deletions(-)

diff --git a/src/components/Catalog.vue b/src/components/Catalog.vue
index c6774519b..97cc78dcf 100644
--- a/src/components/Catalog.vue
+++ b/src/components/Catalog.vue
@@ -1,22 +1,24 @@
 <template>
-  <b-card no-body :class="classes" v-b-visible.400="load" :img-right="isList">
-    <b-card-img-lazy v-if="hasImage" class="thumbnail" offset="200" v-bind="thumbnail" />
-    <b-card-body>
-      <b-card-title>
-        <StacLink :data="[data, catalog]" class="stretched-link" />
-      </b-card-title>
-      <b-card-text v-if="data && (fileFormats.length > 0 || data.description || data.deprecated)" class="intro">
-        <b-badge v-if="data.deprecated" variant="warning" class="mr-1 mt-1 deprecated">{{ $t('deprecated') }}</b-badge>
-        <b-badge v-for="format in fileFormats" :key="format" variant="secondary" class="mr-1 mt-1 fileformat">{{ format | formatMediaType }}</b-badge>
-        {{ data.description | summarize }}
-      </b-card-text>
-      <Keywords v-if="showKeywordsInCatalogCards && keywords.length > 0" :keywords="keywords" variant="primary" :center="!isList" />
-      <b-card-text v-if="temporalExtent" class="datetime"><small v-html="temporalExtent" /></b-card-text>
-    </b-card-body>
-    <b-card-footer>
-      <slot name="footer" :data="data" />
-    </b-card-footer>
-  </b-card>
+  <div :class="containerClasses">
+    <b-card no-body :class="classes" v-b-visible.400="load" :img-right="isList">
+      <b-card-img-lazy v-if="hasImage" class="thumbnail" offset="200" v-bind="thumbnail" />
+      <b-card-body>
+        <b-card-title>
+          <StacLink :data="[data, catalog]" class="stretched-link" />
+        </b-card-title>
+        <b-card-text v-if="data && (fileFormats.length > 0 || data.description || data.deprecated)" class="intro">
+          <b-badge v-if="data.deprecated" variant="warning" class="mr-1 mt-1 deprecated">{{ $t('deprecated') }}</b-badge>
+          <b-badge v-for="format in fileFormats" :key="format" variant="secondary" class="mr-1 mt-1 fileformat">{{ format | formatMediaType }}</b-badge>
+          {{ data.description | summarize }}
+        </b-card-text>
+        <Keywords v-if="showKeywordsInCatalogCards && keywords.length > 0" :keywords="keywords" variant="primary" :center="!isList" />
+        <b-card-text v-if="temporalExtent" class="datetime"><small v-html="temporalExtent" /></b-card-text>
+      </b-card-body>
+      <b-card-footer>
+        <slot name="footer" :data="data" />
+      </b-card-footer>
+    </b-card>
+  </div>
 </template>
 
 <script>
@@ -46,6 +48,10 @@ export default {
     catalog: {
       type: Object,
       required: true
+    },
+    isList:  {
+      type: Boolean,
+      required: true,
     }
   },
   computed: {
@@ -67,6 +73,15 @@ export default {
       }
       return classes;
     },
+    containerClasses() {
+      let classes = ['p-1', 'm-0']
+      if (this.isList) {
+        classes.push('w-100')
+      } else {
+        classes.push(...['col-sm-6', 'col-md-4'])
+      }
+      return classes;
+    },
     data() {
       return this.getStac(this.catalog);
     },
diff --git a/src/components/Catalogs.vue b/src/components/Catalogs.vue
index 594af1e0d..63adfcb17 100644
--- a/src/components/Catalogs.vue
+++ b/src/components/Catalogs.vue
@@ -21,13 +21,13 @@
     <b-alert v-if="hasSearchCritera && catalogView.length === 0" variant="warning" class="mt-2" show>{{ $t('catalogs.noMatches') }}</b-alert>
     <section class="list">
       <Loading v-if="loading" fill top />
-      <component :is="cardsComponent" v-bind="cardsComponentProps">
-        <Catalog v-for="catalog in catalogView" :catalog="catalog" :key="catalog.href">
+      <div class="row">
+        <Catalog v-for="catalog in catalogView" :catalog="catalog" :isList="isList" :key="catalog.href" >
           <template #footer="{data}">
             <slot name="catalogFooter" :data="data" />
           </template>
         </Catalog>
-      </component>
+      </div>
     </section>
     <Pagination v-if="showPagination" :pagination="pagination" @paginate="paginate" />
     <b-button v-else-if="hasMore" @click="loadMore" variant="primary" v-b-visible.300="loadMore">{{ $t('catalogs.loadMore') }}</b-button>
diff --git a/src/components/Item.vue b/src/components/Item.vue
index 3afd5c5a2..c6fb13a14 100644
--- a/src/components/Item.vue
+++ b/src/components/Item.vue
@@ -1,25 +1,27 @@
 <template>
-  <b-card no-body class="item-card" :class="{queued: !data, deprecated: isDeprecated, description: hasDescription}" v-b-visible.400="load">
-    <b-card-img-lazy v-if="hasImage" class="thumbnail" offset="200" v-bind="thumbnail" />
-    <b-card-body>
-      <b-card-title>
-        <StacLink :data="[data, item]" class="stretched-link" />
-      </b-card-title>
-      <b-card-text v-if="fileFormats.length > 0 || hasDescription || isDeprecated" class="intro">
-        <b-badge v-if="isDeprecated" variant="warning" class="mr-1 mt-1 deprecated">{{ $t('deprecated') }}</b-badge>
-        <b-badge v-for="format in fileFormats" :key="format" variant="secondary" class="mr-1 mt-1 fileformat">{{ format | formatMediaType }}</b-badge>
-        <template v-if="hasDescription">{{ data.properties.description | summarize }}</template>
-      </b-card-text>
-      <Keywords v-if="showKeywordsInItemCards && keywords.length > 0" :keywords="keywords" variant="primary" center />
-      <b-card-text>
-        <small class="text-muted">
-          <template v-if="extent">{{ extent | formatTemporalExtent }}</template>
-          <template v-else-if="data && data.properties.datetime">{{ data.properties.datetime | formatTimestamp }}</template>
-          <template v-else>{{ $t('items.noTime') }}</template>
-        </small>
-      </b-card-text>
-    </b-card-body>
-  </b-card>
+  <div class="p-1 m-0 col-sm-6 col-md-4">
+    <b-card no-body class="item-card" :class="{queued: !data, deprecated: isDeprecated, description: hasDescription}" v-b-visible.400="load">
+      <b-card-img-lazy v-if="hasImage" class="thumbnail" offset="200" v-bind="thumbnail" />
+      <b-card-body>
+        <b-card-title>
+          <StacLink :data="[data, item]" class="stretched-link" />
+        </b-card-title>
+        <b-card-text v-if="fileFormats.length > 0 || hasDescription || isDeprecated" class="intro">
+          <b-badge v-if="isDeprecated" variant="warning" class="mr-1 mt-1 deprecated">{{ $t('deprecated') }}</b-badge>
+          <b-badge v-for="format in fileFormats" :key="format" variant="secondary" class="mr-1 mt-1 fileformat">{{ format | formatMediaType }}</b-badge>
+          <template v-if="hasDescription">{{ data.properties.description | summarize }}</template>
+        </b-card-text>
+        <Keywords v-if="showKeywordsInItemCards && keywords.length > 0" :keywords="keywords" variant="primary" center />
+        <b-card-text>
+          <small class="text-muted">
+            <template v-if="extent">{{ extent | formatTemporalExtent }}</template>
+            <template v-else-if="data && data.properties.datetime">{{ data.properties.datetime | formatTimestamp }}</template>
+            <template v-else>{{ $t('items.noTime') }}</template>
+          </small>
+        </b-card-text>
+      </b-card-body>
+    </b-card>
+  </div>
 </template>
 
 <script>
diff --git a/src/components/Items.vue b/src/components/Items.vue
index 3db7fae19..bf2194bbb 100644
--- a/src/components/Items.vue
+++ b/src/components/Items.vue
@@ -24,9 +24,9 @@
 
     <section class="list">
       <Loading v-if="loading" fill top />
-      <b-card-group v-if="chunkedItems.length > 0" columns>
+      <div v-if="chunkedItems.length > 0" class="row">
         <Item v-for="item in chunkedItems" :item="item" :key="item.href" />
-      </b-card-group>
+      </div>
       <b-alert v-else :variant="hasFilters ? 'warning' : 'info'" show>
         <template v-if="hasFilters">{{ $t('search.noItemsFound') }}</template>
         <template v-else>{{ $t('items.noneAvailableForCollection') }}</template>
diff --git a/src/components/ViewMixin.js b/src/components/ViewMixin.js
index 34a52d47b..a31a977e6 100644
--- a/src/components/ViewMixin.js
+++ b/src/components/ViewMixin.js
@@ -5,22 +5,8 @@ export default {
     ViewButtons
   },
   computed: {
-    cardsComponent() {
-      return (this.view === 'list') ? 'div' : 'b-card-group';
-    },
-    cardsComponentProps() {
-      if (this.view === 'list') {
-        return {
-          class: [
-            'card-list'
-          ]
-        };
-      }
-      else {
-        return {
-          columns: true
-        };
-      }
+    isList() {
+      return this.view === 'list'
     },
     view: {
       get() {