layout adjustments

frontend/src/App.vue

@@ -169,7 +169,7 @@ import { CzNotifications, Notifications } from "@cznethub/cznet-vue-core";
 import { Subscription } from "rxjs";
 import User from "@/models/user.model";
 import CdLogin from "@/components/account/cd.login.vue";
-import { RouteLocationRaw, useRoute, useRouter } from "vue-router";
+import { RouteLocationRaw, useRoute } from "vue-router";
 
 @Component({
   name: "app",
@@ -252,10 +252,7 @@ class App extends Vue {
         this.logInDialog.isActive = true;
 
         this.logInDialog.onLoggedIn = () => {
-          if (redirectTo)
-            useRouter()
-              .push(redirectTo)
-              .catch(() => {});
+          if (redirectTo) this.$router.push(redirectTo).catch(() => {});
 
           this.logInDialog.isActive = false;
         };

frontend/src/components/contribute/cd.contribute.vue

@@ -130,7 +130,6 @@ import {
   NavigationGuardNext,
   RouteLocationNormalized,
   useRoute,
-  useRouter,
 } from "vue-router";
 
 const initialData = {};
@@ -224,7 +223,7 @@ class CdContribute extends Vue {
           type: "success",
         });
         this.hasUnsavedChanges = false;
-        useRouter().push({
+        this.$router.push({
           name: "dataset",
           params: { id: this.submissionId },
         });
@@ -249,7 +248,7 @@ class CdContribute extends Vue {
           message: `Your submission has been saved!`,
           type: "success",
         });
-        useRouter().push({
+        this.$router.push({
           name: "dataset",
           params: { id: savedDatasetId },
         });
@@ -281,12 +280,12 @@ class CdContribute extends Vue {
 
   onCancel() {
     if (this.isEditMode) {
-      useRouter().push({
+      this.$router.push({
         name: "dataset",
         params: { id: this.submissionId },
       });
     } else {
-      useRouter().push({ name: "submissions" });
+      this.$router.push({ name: "submissions" });
     }
   }
 

frontend/src/components/dataset/cd.dataset-html.vue

@@ -6,27 +6,30 @@
         class="sidebar pr-8 break-word"
       >
         <div class="sidebar--content">
-          <div class="text-h6">Table of contents</div>
-          <ol class="text-body-2">
-            <template v-for="(item, index) of tableOfContents">
-              <li
-                v-if="!(item.isShown === false)"
-                :key="index"
-                class="my-2 text-body-1"
-              >
-                <!-- <router-link :to="{ hash: item.link }">{{
-                  item.title
-                }}</router-link> -->
-
-                <a @click="goTo(item.link, scrollOptions)">{{ item.title }}</a>
-              </li>
-            </template>
-          </ol>
+          <v-card>
+            <v-card-title>Table of contents</v-card-title>
+            <v-divider></v-divider>
+            <v-card-text>
+              <v-list density="compact">
+                <template v-for="(item, index) of tableOfContents">
+                  <v-list-item
+                    v-if="!(item.isShown === false)"
+                    :key="index"
+                    :value="index"
+                    class="my-2 text-body-1"
+                    @click="goTo(item.link, scrollOptions)"
+                  >
+                    {{ item.title }}
+                  </v-list-item>
+                </template>
+              </v-list>
+            </v-card-text>
+          </v-card>
 
           <v-card
             v-if="data.citation && data.citation.length"
             class="mt-8"
-            flat
+            variant="flat"
           >
             <v-card-title class="pa-0 pb-2">How to cite</v-card-title>
             <v-card-text
@@ -55,7 +58,7 @@
             v-if="hasSpatialFeatures"
             class="mt-8"
             variant="elevated"
-            elevation="2"
+            elevation="1"
           >
             <v-card-title class="text-overline primary--text darken-4">
               Spatial Coverage
@@ -151,16 +154,16 @@
             v-if="data.temporalCoverage"
             class="mt-8"
             variant="elevated"
-            elevation="2"
+            elevation="1"
           >
             <v-card-title class="text-overline primary--text darken-4">
               Temporal Coverage
             </v-card-title>
             <v-divider></v-divider>
 
             <v-card-text>
-              <v-timeline align-top dense>
-                <v-timeline-item small>
+              <v-timeline align-top density="compact" line-color="info">
+                <v-timeline-item dot-color="primary">
                   <div>
                     <div class="font-weight-normal">
                       <strong>Start Date</strong>
@@ -169,7 +172,7 @@
                   </div>
                 </v-timeline-item>
 
-                <v-timeline-item small color="orange">
+                <v-timeline-item dot-color="orange">
                   <div>
                     <div class="font-weight-normal">
                       <strong>End Date</strong>
@@ -246,7 +249,10 @@
                 :key="index"
               >
                 <template v-slot:activator="{ props }">
-                  <span class="mr-2" v-bind="{ ...props, ...infoValueAttr }">
+                  <span
+                    class="mr-2 cursor-pointer"
+                    v-bind="{ ...props, ...infoValueAttr }"
+                  >
                     <div class="d-inline-block">
                       {{ creator.name }} <v-icon small>mdi-menu-down</v-icon>
                     </div>
@@ -391,6 +397,7 @@
               </div>
             </template>
 
+            <!-- TODO -->
             <div v-bind="infoLabelAttr">Host Repository:</div>
             <div v-bind="infoValueAttr">
               HydroShare
@@ -452,7 +459,12 @@
             @showMetadata="onShowMetadata($event)"
           />
 
-          <v-card v-if="readmeMd" class="readme-container" flat outlined>
+          <v-card
+            v-if="readmeMd"
+            class="readme-container"
+            variant="elevated"
+            elevation="1"
+          >
             <v-card-title>README</v-card-title>
             <v-divider></v-divider>
             <v-card-text>
@@ -644,8 +656,8 @@
           </div>
           <v-divider class="primary mb-2"></v-divider>
 
-          <v-timeline align-top dense>
-            <v-timeline-item small>
+          <v-timeline align-top density="compact" line-color="info">
+            <v-timeline-item dot-color="primary">
               <div>
                 <div class="font-weight-normal">
                   <strong>Start Date</strong>
@@ -654,7 +666,7 @@
               </div>
             </v-timeline-item>
 
-            <v-timeline-item small color="orange">
+            <v-timeline-item dot-color="orange">
               <div>
                 <div class="font-weight-normal">
                   <strong>End Date</strong>
@@ -666,6 +678,7 @@
         </div>
       </div>
     </div>
+
     <div v-else-if="isLoading" class="text-h6 text--secondary my-12">
       <v-progress-circular indeterminate color="primary" />
     </div>
@@ -674,7 +687,7 @@
       border="start"
       colored-border
       type="error"
-      elevation="2"
+      elevation="1"
       >Failed to load dataset</v-alert
     >
     <!-- <v-card>
@@ -1030,6 +1043,7 @@ export default toNative(CdDataset);
 .page-content {
   flex-grow: 1;
   max-width: 100%;
+  min-width: 0;
 
   &.is-sm {
     .dataset-info {

frontend/src/components/register/cd.register-dataset.vue

@@ -198,7 +198,6 @@
 <script lang="ts">
 import { Component, Vue, toNative } from "vue-facing-decorator";
 import Submission from "@/models/submission.model";
-import { useRouter } from "vue-router";
 const exampleUrl =
   "https://www.hydroshare.org/resource/9d3d437466764bb5b6668d2742cf9db2/";
 const exampleIdentifier = "9d3d437466764bb5b6668d2742cf9db2";
@@ -254,7 +253,7 @@ class CdRegisterDataset extends Vue {
 
   goToViewDataset() {
     if (this.submission?.id) {
-      useRouter().push({
+      this.$router.push({
         name: "dataset",
         params: {
           id: this.submission.id,

frontend/src/components/search-results/cd.search-results.vue

@@ -418,7 +418,7 @@ import SearchHistory from "@/models/search-history.model";
 import Search from "@/models/search.model";
 import { clamp } from "@vueuse/core";
 import { VNumberInput } from "vuetify/labs/VNumberInput";
-import { useRoute, useRouter } from "vue-router";
+import { useRoute } from "vue-router";
 
 const options: LoaderOptions = { libraries: ["drawing"] };
 const loader: Loader = new Loader(
@@ -650,7 +650,7 @@ class CdSearchResults extends Vue {
   }
 
   goToDataset(id: string) {
-    useRouter().push({ path: `dataset/${id}` });
+    this.$router.push({ path: `dataset/${id}` });
   }
 
   public onIntersect(_isIntersecting: boolean, entries: any[], _observer: any) {
@@ -689,7 +689,7 @@ class CdSearchResults extends Vue {
       }
 
       // Note: this will reload the component
-      useRouter()
+      this.$router
         .push({
           name: "search",
           query: this.routeParams,

frontend/src/components/search/cd.search.vue

@@ -82,6 +82,7 @@ import type {
   VTextField,
 } from "vuetify/lib/components/index.mjs";
 import { IHint } from "@/types";
+import { useRoute } from "vue-router";
 
 const typeaheadDebounceTime = 500;
 
@@ -199,7 +200,7 @@ class CdSearch extends Vue {
     this._onChange();
     this.previousValueInternal = this.valueInternal;
     if (this.valueInternal && useRoute().name !== "search") {
-      useRouter()
+      this.$router
         .push({ name: "search", query: { q: this.valueInternal } })
         .catch(sameRouteNavigationErrorHandler);
     }

frontend/src/guards.ts

@@ -30,7 +30,6 @@ export const hasUnsavedChangesGuard: NavigationGuard = (to, from, next) => {
         await User.commit((state) => {
           state.hasUnsavedChanges = false;
         });
-        // await useRouter().push(to.path)
         next({ path: to.path });
       },
     });

frontend/src/routes.ts

@@ -74,6 +74,7 @@ export const routes: RouteRecordRaw[] = [
     components: { content: CdDatasetHtml, footer: CdFooter },
     meta: {
       title: "Dataset",
+      flat: true,
     },
   },
   {