Use CSS grid for card grid layout (#702)

* Use CSS grid for Catalogs

* Use CSS grid for Items

* Apply grid to item grids as well. (Fix problem 1, 2)

* Force column flex layout (Fix problem 3

* Increase card min-width (fix problem 4)

* Center preview that are shorter / narrower than available space (fix problem 6)

* Left-align card content

* Experiment: Align title, desc, meta on subgrid

* Centralize CSS and some code for Cards, small improvements to styling, clean-up

* Workaround for line-clamp

---------

Co-authored-by: Matthias Mohr <[email protected]>

Author: philippschmitt

src/components/ThumbnailCardMixin.js renamed to src/components/CardMixin.js

@@ -1,44 +1,61 @@
-import { mapState } from 'vuex';
-
-export default {
-  props: {
-    showThumbnail: {
-      type: Boolean,
-      default: true
-    }
-  },
-  computed: {
-    ...mapState(['cardViewMode', 'crossOriginMedia', 'defaultThumbnailSize']),
-    isList() {
-      return this.data && !this.data.isItem() && this.cardViewMode === 'list';
-    },
-    hasImage() {
-      return this.showThumbnail && this.thumbnail;
-    },
-    thumbnail() {
-      if (this.data) {
-        let thumbnails = this.data.getThumbnails(true, 'thumbnail');
-        if (thumbnails.length > 0) {
-          let t = thumbnails[0];
-          let width, height;
-          const shape = t.getMetadata('proj:shape');
-          if (Array.isArray(shape) && shape.length === 2) {
-            [height, width] = shape;
-          }
-          else if (Array.isArray(this.defaultThumbnailSize) && this.defaultThumbnailSize.length === 2) {
-            [height, width] = this.defaultThumbnailSize;
-          }
-          return {
-            src: t.getAbsoluteUrl(),
-            alt: t.title,
-            crossorigin: this.crossOriginMedia,
-            width,
-            height,
-            placement: this.isList ? 'end' : 'top'
-          };
-        }
-      }
-      return null;
-    }
-  }
-};
+import { mapState } from 'vuex';
+import Utils from '../utils';
+import { STAC } from 'stac-js';
+
+export default {
+  props: {
+    showThumbnail: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    ...mapState(['cardViewMode', 'crossOriginMedia', 'defaultThumbnailSize']),
+    isList() {
+      return this.data && !this.data.isItem() && this.cardViewMode === 'list';
+    },
+    hasImage() {
+      return this.showThumbnail && this.thumbnail;
+    },
+    thumbnail() {
+      if (this.data) {
+        let thumbnails = this.data.getThumbnails(true, 'thumbnail');
+        if (thumbnails.length > 0) {
+          let t = thumbnails[0];
+          let width, height;
+          const shape = t.getMetadata('proj:shape');
+          if (Array.isArray(shape) && shape.length === 2) {
+            [height, width] = shape;
+          }
+          else if (Array.isArray(this.defaultThumbnailSize) && this.defaultThumbnailSize.length === 2) {
+            [height, width] = this.defaultThumbnailSize;
+          }
+          return {
+            src: t.getAbsoluteUrl(),
+            alt: t.title,
+            crossorigin: this.crossOriginMedia,
+            width,
+            height,
+            placement: this.isList ? 'end' : 'top'
+          };
+        }
+      }
+      return null;
+    },
+    keywords() {
+      if (this.data) {
+        return this.data.getMetadata('keywords') || [];
+      }
+      return [];
+    },
+    isDeprecated() {
+      return this.data instanceof STAC && Boolean(this.data.getMetadata('deprecated'));
+    },
+    hasDescription() {
+      return this.data instanceof STAC && Utils.hasText(this.data.getMetadata('description'));
+    },
+    summarizeDescription() {
+      return this.hasDescription ? Utils.summarizeMd(this.data.getMetadata('description'), 300) : '';
+    }
+  }
+};

src/components/Catalog.vue

@@ -1,16 +1,18 @@
 <template>
   <b-card no-body :class="classes" v-visible.400="load" :img-placement="isList ? 'end' : undefined">
-    <b-card-img v-if="hasImage" class="thumbnail" v-bind="thumbnail" lazy />
+    <div class="card-img-wrapper">
+      <b-card-img v-if="hasImage" class="thumbnail" v-bind="thumbnail" lazy />
+    </div>
     <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="me-1 mt-1 deprecated">{{ $t('deprecated') }}</b-badge>
+      <b-card-text v-if="fileFormats.length > 0 || hasDescription || isDeprecated" class="intro">
+        <b-badge v-if="isDeprecated" variant="warning" class="me-1 mt-1 deprecated">{{ $t('deprecated') }}</b-badge>
         <b-badge v-for="format in fileFormats" :key="format" variant="secondary" class="me-1 mt-1 fileformat">{{ formatMediaType(format) }}</b-badge>
-        {{ summarizeDescription(data.description) }}
+        {{ summarizeDescription }}
       </b-card-text>
-      <Keywords v-if="showKeywordsInCatalogCards && keywords.length > 0" :keywords="keywords" variant="primary" :center="!isList" />
+      <Keywords v-if="showKeywordsInCatalogCards && keywords.length > 0" :keywords="keywords" variant="primary" />
       <b-card-text v-if="temporalExtent" class="datetime"><small v-html="temporalExtent" /></b-card-text>
     </b-card-body>
     <b-card-footer>
@@ -24,11 +26,10 @@ import { defineAsyncComponent } from 'vue';
 import { mapState, mapGetters } from 'vuex';
 import FileFormatsMixin from './FileFormatsMixin';
 import StacFieldsMixin from './StacFieldsMixin';
-import ThumbnailCardMixin from './ThumbnailCardMixin';
+import CardMixin from './CardMixin';
 import StacLink from './StacLink.vue';
 import { STAC } from 'stac-js';
 import { formatMediaType, formatTemporalExtent } from '@radiantearth/stac-fields/formatters';
-import Utils from '../utils';
 import { BCard, BCardBody, BCardFooter, BCardImg, BCardText, BCardTitle } from 'bootstrap-vue-next';
 
 export default {
@@ -45,7 +46,7 @@ export default {
   },
   mixins: [
     FileFormatsMixin,
-    ThumbnailCardMixin,
+    CardMixin,
     StacFieldsMixin({ formatTemporalExtent })
   ],
   props: {
@@ -84,12 +85,6 @@ export default {
         }
       }
       return null;
-    },
-    keywords() {
-      if (this.data) {
-        return this.data.getMetadata('keywords') || [];
-      }
-      return [];
     }
   },
   methods: {
@@ -99,112 +94,9 @@ export default {
       }
       this.$store.commit(visible ? 'queue' : 'unqueue', this.catalog.getAbsoluteUrl());
     },
-    summarizeDescription(text) {
-      return Utils.summarizeMd(text, 300);
-    },
     formatMediaType(value) {
       return formatMediaType(value, null, {shorten: true});
     }
   }
 };
 </script>
-
-<style lang="scss">
-@import '~bootstrap/scss/mixins';
-@import '../theme/variables.scss';
-
-#stac-browser {
-  .catalog-card {
-    &.deprecated {
-      opacity: 0.5;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-
-    .card-body, .card-footer {
-      position: relative;
-    }
-    .card-footer:empty {
-      display: none;
-    }
-    
-    /* Card image base styling */
-    .card-img-top,
-    .card-img-end,
-    .card-img-start {
-      object-fit: contain;
-      object-position: center;
-    }
-    
-    .intro {
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      line-clamp: 3;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      overflow-wrap: anywhere;
-      text-align: left;
-    }
-    &.has-extent {
-      .intro {
-        margin-bottom: 0.5rem;
-      }
-    }
-    .datetime {
-      color: $secondary;
-    }
-    .badge.deprecated {
-      text-transform: uppercase;
-    }
-  }
-  .card-list {
-    .catalog-card {
-      box-sizing: border-box;
-      margin: 0.5em 0;
-      display: flex;
-
-      .card-img-end {
-        min-height: 100px;
-        height: 100%;
-        max-height: 8.5rem;
-        max-width: 33%;
-        object-fit: contain;
-        object-position: center right;
-      }
-      .card-footer {
-        min-width: 175px;
-        max-width: 175px;
-        border-top: 0;
-      }
-      .intro {
-        -webkit-line-clamp: 2;
-        line-clamp: 2;
-      }
-    }
-  }
-  .card-columns {
-    .catalog-card {
-      box-sizing: border-box;
-      margin-top: 0.5em 0;
-      text-align: center;
-
-      &.queued {
-        min-height: 10rem;
-      }
-      .card-img-top {
-        width: auto;
-        height: auto;
-        max-width: 100%;
-        max-height: 300px;
-        object-fit: contain;
-        object-position: center;
-      }
-      .card-title {
-        text-align: center;
-      }
-    }
-  }
-}
-</style>

src/components/Catalogs.vue

@@ -24,7 +24,7 @@
     <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 />
-      <div :class="view === 'list' ? 'card-list' : 'card-columns'">
+      <div :class="view === 'list' ? 'card-list' : 'card-grid'">
         <Catalog v-for="catalog in catalogView" :catalog="catalog" :key="catalog.href">
           <template #footer="{data}">
             <slot name="catalogFooter" :data="data" />