Space-efficiency of asset listing #77, v2.8.0

Open-EO · Apr 14, 2022 · 39bb871 · 39bb871
1 parent 4016eb7
commit 39bb871
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,12 +6,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.8.0] - 2022-04-14
+
 ### Added
 
 - Support for the experimental Federation Extension
 - New component `FederationMissingNotice`
 - `Tabs`: New slot and event with name `empty`
 
+### Changed
+
+- Make assets more compact
+
 ### Fixed
 
 - `ModelBuilder`:
@@ -499,7 +505,8 @@ First stable release.
 Please see the [Releases](https://github.com/Open-EO/openeo-vue-components/releases) for changelogs prior to v1.0.0.
 
 
-[Unreleased]: https://github.com/Open-EO/openeo-vue-components/compare/v2.7.1...HEAD
+[Unreleased]: https://github.com/Open-EO/openeo-vue-components/compare/v2.8.0...HEAD
+[2.8.0]: https://github.com/Open-EO/openeo-vue-components/compare/v2.7.1...v2.8.0
 [2.7.1]: https://github.com/Open-EO/openeo-vue-components/compare/v2.7.0...v2.7.1
 [2.7.0]: https://github.com/Open-EO/openeo-vue-components/compare/v2.6.2...v2.7.0
 [2.6.2]: https://github.com/Open-EO/openeo-vue-components/compare/v2.6.1...v2.6.2

diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 A set of [Vue](https://vuejs.org) components for [openEO](http://openeo.org).
 
-This library's version is [**2.7.1**](CHANGELOG.md) and supports **openEO API versions 1.0.x and 1.1.x**.
+This library's version is [**2.8.0**](CHANGELOG.md) and supports **openEO API versions 1.0.x and 1.1.x**.
 Legacy versions supporting API version 0.x are available as [releases](https://github.com/Open-EO/openeo-vue-components/releases).
 
 npm: [@openeo/vue-components](https://www.npmjs.com/package/@openeo/vue-components)

diff --git a/components/Process.vue b/components/Process.vue
@@ -222,13 +222,6 @@ export default {
 	}
 	.actions {
 		text-align: right;
-		.action {
-			background-color: chocolate;
-
-			&:hover {
-				background-color: black;
-			}
-		}
 	}
 	strong {
 		&.deprecated {

diff --git a/components/base.scss b/components/base.scss
@@ -181,6 +181,13 @@
 .vue-component .badges .experimental {
 	background-color: blueviolet;
 }
+.vue-component .badges .action {
+	background-color: chocolate;
+
+	&:hover {
+		background-color: black;
+	}
+}
 /* Badges for UDFs */
 .vue-component .badges .docker {
 	background-color: #0db7ed;

diff --git a/components/internal/StacAsset.vue b/components/internal/StacAsset.vue
@@ -1,12 +1,13 @@
 <template>
   <li class="vue-component asset">
     <h4>
-      {{ asset.title || id }}
-      <ul v-if="Array.isArray(asset.roles)" class="badges small inline">
-        <li v-for="role in asset.roles" :key="role" class="badge" :class="role === 'data' ? 'primary' : 'secondary'">{{ role }}</li>
+      <ul class="badges actions">
+        <li class="badge action download"><a class="badge-fill" :href="asset.href" target="_blank" download>Download '{{ asset.title || id }}' as {{ fileFormat }}</a></li>
+      </ul>
+      <ul v-if="Array.isArray(asset.roles)" class="badges">
+        <li v-for="role in asset.roles" :key="role" class="badge" :class="role === 'data' ? 'green' : 'secondary'">{{ role }}</li>
       </ul>
     </h4>
-    <p class="download"><a :href="asset.href" target="_blank">Download {{ fileFormat }}</a></p>
     <Description v-if="asset.description" :description="asset.description" :compact="true" />
     <StacFields type="Asset" :metadata="asset" :ignore="ignore" title="" :context="context" headingTag="h5" />
   </li>
@@ -55,8 +56,23 @@ export default {
 
 <style lang="scss">
 .vue-component.asset {
-  h4, h5  {
-    font-size: 1em;
+  h4  {
+    font-size: 1.1em;
+    margin: 0;
+    font-weight: normal;
+
+    .download {
+      margin-right: 1em;
+    }
+  }
+  h5  {
+    font-size: 1.1em;
+    font-weight: bold;
+    margin: 0.75em 0 0.5em;
+  }
+
+  .metadata {
+    font-size: 0.9em;
   }
 }
 </style>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openeo/vue-components",
-  "version": "2.7.1",
+  "version": "2.8.0",
   "author": "openEO Consortium",
   "contributors": [
     {