Show file formats for collections, minor style improvements #217, ...

src/components/Catalog.vue

@@ -5,8 +5,9 @@
       <b-card-title>
         <StacLink :data="[data, catalog]" class="stretched-link" />
       </b-card-title>
-      <b-card-text v-if="data && (data.description || data.deprecated)" class="intro">
-        <b-badge v-if="data.deprecated" variant="warning" class="deprecated">{{ $t('deprecated') }}</b-badge>
+      <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>
       <b-card-text v-if="temporalExtent" class="datetime"><span v-html="temporalExtent" /></b-card-text>
@@ -20,7 +21,7 @@ import StacFieldsMixin from './StacFieldsMixin';
 import ThumbnailCardMixin from './ThumbnailCardMixin';
 import StacLink from './StacLink.vue';
 import STAC from '../models/stac';
-import { formatTemporalExtent } from '@radiantearth/stac-fields/formatters';
+import { formatMediaType, formatTemporalExtent } from '@radiantearth/stac-fields/formatters';
 import Utils from '../utils';
 
 export default {
@@ -29,9 +30,8 @@ export default {
     StacLink
   },
   filters: {
-    summarize(text) {
-      return Utils.summarizeMd(text, 300);
-    }
+    summarize: text => Utils.summarizeMd(text, 300),
+    formatMediaType: value => formatMediaType(value, null, {shorten: true})
   },
   mixins: [
     ThumbnailCardMixin,
@@ -72,6 +72,12 @@ export default {
         }
       }
       return null;
+    },
+    fileFormats() {
+      if (this.data) {
+        return this.data.getFileFormats();
+      }
+      return [];
     }
   },
   methods: {
@@ -86,6 +92,7 @@ export default {
 </script>
 
 <style lang="scss">
+@import '~bootstrap/scss/mixins';
 @import '../theme/variables.scss';
 
 #stac-browser {
@@ -122,6 +129,14 @@ export default {
       &.has-extent:not(.has-thumbnail) {
         padding-top: 0.75em;
       }
+      
+      @include media-breakpoint-down(lg) {
+        margin-bottom: 0.2em;
+        .card-title {
+          margin-top: 0.6em;
+        }
+      }
+        
 
       .card-img-right {
         min-height: 100px;
@@ -149,6 +164,10 @@ export default {
         top: 0;
         right: 0;
         font-size: 80%;
+        white-space: nowrap;
+        max-width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
       }
     }
   }

src/components/Catalogs.vue

@@ -2,7 +2,9 @@
   <section class="catalogs mb-4">
     <h2>
       <span class="title">{{ $tc('stacCatalog', catalogs.length ) }}</span>
-      <b-badge v-if="hasMultiple" pill variant="secondary ml-2">{{ catalogs.length }}</b-badge>
+      <b-badge v-if="hasMultiple" pill variant="secondary ml-2">
+        <template v-if="catalogs.length !== catalogView.length">{{ catalogView.length }}/</template>{{ catalogs.length }}
+      </b-badge>
       <ViewButtons class="ml-4" v-model="view" />
       <SortButtons v-if="hasMultiple" class="ml-2" v-model="sort" />
     </h2>

src/components/Item.vue

@@ -1,21 +1,22 @@
 <template>
-  <b-card no-body class="item-card" :class="{queued: !data, deprecated: isDeprecated}" v-b-visible.400="load">
+  <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>
       <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-text v-if="fileFormats.length > 0 || isDeprecated">
-        <b-badge v-for="format in fileFormats" :key="format" variant="secondary" class="mr-1 mt-1 fileformat">{{ format | formatMediaType }}</b-badge>
-        <b-badge v-if="isDeprecated" variant="warning" class="mr-1 mt-1 deprecated">{{ $t('deprecated') }}</b-badge>
-      </b-card-text>
     </b-card-body>
   </b-card>
 </template>
@@ -27,6 +28,7 @@ import StacLink from './StacLink.vue';
 import STAC from '../models/stac';
 import { formatTemporalExtent, formatTimestamp, formatMediaType } from '@radiantearth/stac-fields/formatters';
 import Registry from '@radiantearth/stac-fields/registry';
+import Utils from '../utils';
 
 Registry.addDependency('content-type', require('content-type'));
 
@@ -36,7 +38,8 @@ export default {
     StacLink
   },
   filters: {
-    formatMediaType,
+    summarize: text => Utils.summarizeMd(text, 150),
+    formatMediaType: value => formatMediaType(value, null, {shorten: true}),
     formatTemporalExtent,
     formatTimestamp
   },
@@ -61,16 +64,16 @@ export default {
       return null;
     },
     fileFormats() {
-      if (!this.data) {
-        return [];
+      if (this.data) {
+        return this.data.getFileFormats();
       }
-      return Object.values(this.data.assets)
-        .filter(asset => Array.isArray(asset.roles) && asset.roles.includes('data') && typeof asset.type === 'string') // Look for data files
-        .map(asset => asset.type) // Array shall only contain media types
-        .filter((v, i, a) => a.indexOf(v) === i); // Unique values
+      return [];
     },
     isDeprecated() {
       return this.data instanceof STAC && Boolean(this.data.properties.deprecated);
+    },
+    hasDescription() {
+      return this.data instanceof STAC && Utils.hasText(this.data.properties.description);
     }
   },
   methods: {
@@ -101,16 +104,25 @@ export default {
       min-height: 200px;
     }
 
-    .badge {
+    .intro {
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
       overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: 100%;
+      margin-bottom: 0.5rem;
+    }
 
-      &.deprecated {
-        text-transform: uppercase;
+    &.description {
+      .intro {
+        text-align: left;
+        margin-bottom: 0.75rem;
       }
     }
 
+    .badge.deprecated {
+      text-transform: uppercase;
+    }
+
     .card-img {
       width: auto;
       height: auto;

src/models/stac.js

@@ -96,6 +96,20 @@ class STAC {
     }
   }
 
+  getFileFormats() {
+    let assets = [];
+    if ((this.isItem() || this.isCollection()) && Utils.isObject(this.assets)) {
+      assets = assets.concat(Object.values(this.assets));
+    }
+    if (this.isCollection() && Utils.isObject(this.item_assets)) {
+      assets = assets.concat(Object.values(this.item_assets));
+    }
+    return assets
+      .filter(asset => Array.isArray(asset.roles) && asset.roles.includes('data') && typeof asset.type === 'string') // Look for data files
+      .map(asset => asset.type) // Array shall only contain media types
+      .filter((v, i, a) => a.indexOf(v) === i); // Unique values
+  }
+
   getChildren(priority = null) {
     if (!this.isCatalogLike()) {
       return [];