Metadata rendering for links, e.g. for WMS

radiantearth · Nov 14, 2023 · aee9ba2 · aee9ba2
1 parent ee9ba82
commit aee9ba2
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 9 deletions.
diff --git a/src/components/Link.vue b/src/components/Link.vue
@@ -1,9 +1,10 @@
 <template>
-  <li>
+  <li class="link">
     <StacLink :id="popoverId" :data="link" :fallbackTitle="fallbackTitle" class="pr-1" />
-    <b-popover :target="popoverId" triggers="hover" placement="right" container="#stac-browser">
-      <h6 class="small text-muted text-center">{{ $t('additionalActions') }}</h6>
+    <b-popover :target="popoverId" triggers="hover" placement="right" container="#stac-browser" custom-class="link-more">
+      <h3 class="first">{{ $t('additionalActions') }}</h3>
       <HrefActions vertical :data="link" size="sm" />
+      <Metadata :data="link" type="link" headerTag="h3" :ignoreFields="ignore" />
     </b-popover>
   </li>
 </template>
@@ -20,7 +21,8 @@ export default {
   components: {
     BPopover,
     HrefActions,
-    StacLink
+    StacLink,
+    Metadata: () => import('./Metadata.vue')
   },
   props: {
     link: {
@@ -32,6 +34,11 @@ export default {
       required: true
     }
   },
+  data() {
+    return {
+      ignore: ['href', 'type', 'rel', 'title']
+    };
+  },
   computed: {
     popoverId() {
       return "popover-link-" + linkId;
@@ -42,3 +49,46 @@ export default {
   }
 };
 </script>
+
+<style lang="scss">
+#stac-browser .link-more {
+  width: auto;
+  max-width: 600px;
+
+  h3 {
+    font-size: 0.85rem;
+    color: #6c757d;
+    text-align: center;
+    padding: 0;
+    font-weight: 600;
+    margin: 1rem 0 0.7rem;
+
+    &.first {
+      margin-top: 0;
+    }
+  }
+  
+  .metadata {
+    min-width: 400px;
+
+    h4 {
+      font-size: 0.85rem;
+      font-weight: normal;
+      margin-top: 0;
+      margin-bottom: 0.5rem;
+    }
+
+    .card-columns {
+      column-count: 1;
+    }
+    .card {
+      border: 0;
+      margin-top: 0;
+      font-size: 0.8rem;
+    }
+    .card-body {
+      padding: 0;
+    }
+  }
+}
+</style>
diff --git a/src/components/Metadata.vue b/src/components/Metadata.vue
@@ -1,6 +1,6 @@
 <template>
   <section v-if="formattedData.length > 0" class="metadata">
-    <h2 v-if="title">{{ title || $t('metadata.title') }}</h2>
+    <component :is="headerTag" v-if="title">{{ titleText }}</component>
     <b-card-group columns :class="`count-${formattedData.length}`">
       <MetadataGroup v-for="group in formattedData" v-bind="group" :key="group.extension" />
     </b-card-group>
@@ -39,8 +39,12 @@ export default {
             default: () => ([])
         },
         title: {
+            type: [Boolean, String],
+            default: true
+        },
+        headerTag: {
             type: String,
-            default: null
+            default: 'h2'
         }
     },
     data() {
@@ -50,6 +54,12 @@ export default {
     },
     computed: {
         ...mapState(['uiLanguage']),
+        titleText() {
+          if (typeof this.title === 'string') {
+            return this.title;
+          }
+          return this.$t('metadata.title');
+        }
     },
     watch: {
         uiLanguage: {

diff --git a/src/components/Provider.vue b/src/components/Provider.vue
@@ -23,7 +23,7 @@
         <b-card-text class="mt-4" v-if="provider.description">
           <Description :description="provider.description" compact />
         </b-card-text>
-        <Metadata class="mt-4" :data="provider" :ignoreFields="ignore" title="" type="Provider" />
+        <Metadata class="mt-4" :data="provider" :ignoreFields="ignore" :title="false" type="Provider" />
       </b-card-body>
     </b-collapse>
   </b-card>
@@ -76,4 +76,4 @@ export default {
     }
   }
 }
-</style>
+</style>
diff --git a/src/views/Catalog.vue b/src/views/Catalog.vue
@@ -37,7 +37,7 @@
         <Assets v-if="hasAssets" :assets="assets" :context="data" :shown="shownAssets" @showAsset="showAsset" />
         <Assets v-if="hasItemAssets && !hasItems" :assets="data.item_assets" :definition="true" />
         <Providers v-if="providers" :providers="providers" />
-        <Metadata :title="$t('metadata.title')" class="mb-4" :type="data.type" :data="data" :ignoreFields="ignoredMetadataFields" />
+        <Metadata class="mb-4" :type="data.type" :data="data" :ignoreFields="ignoredMetadataFields" />
         <CollectionLink v-if="collectionLink" :link="collectionLink" />
         <Links v-if="linkPosition === 'right'" :title="$t('additionalResources')" :links="additionalLinks" />
       </b-col>