Harmonize and fix back buttons behavior and inconsistent scroll behaviour

zimui/src/components/TopicHome.vue

@@ -17,16 +17,19 @@ const props = defineProps({
 })
 
 const topic = ref<Topic>()
+const dataLoaded = ref(false)
 
 /** Retrieve topic data */
 const fetchData = async function () {
+  dataLoaded.value = false
   if (props.slug == undefined) {
     return
   }
   const resp = await main.fetchTopic(props.slug)
   if (resp) {
     topic.value = resp
   }
+  dataLoaded.value = true
 }
 
 watch(props, fetchData)
@@ -64,12 +67,12 @@ const hasParents = (): boolean => {
   )
 }
 
-/** Return the slug of the last parent in the parents hierarchy */
-const parentSlug = (): string | null => {
-  if (!topic.value || !topic.value.parents || topic.value.parents.length == 0) {
-    return null
+/** Navigate to the previous page */
+const goToPreviousPage = () => {
+  // click browser back button
+  if (window.history.length > 1) {
+    window.history.back()
   }
-  return topic.value.parents[topic.value.parents.length - 1].slug
 }
 </script>
 
@@ -111,7 +114,11 @@ const parentSlug = (): string | null => {
         </ul>
       </div>
     </nav>
-    <div class="jumbotron" :class="{ 'with-description': topic.description }">
+    <div
+      v-if="dataLoaded"
+      class="jumbotron"
+      :class="{ 'with-description': topic.description }"
+    >
       <div class="container">
         <div
           class="align-items-start d-flex justify-content-between mt-5"
@@ -123,18 +130,17 @@ const parentSlug = (): string | null => {
               'col-sm-12': !topic.thumbnail,
             }"
           >
-            <router-link :to="`./${parentSlug()}`">
-              <button
-                v-if="hasParents()"
-                type="button"
-                class="btn back-button rounded-circle btn-secondary light"
-              >
-                <FontAwesomeIcon
-                  aria-label="Arrow Left icon"
-                  icon="fa-solid fa-arrow-left"
-                />
-              </button>
-            </router-link>
+            <button
+              v-if="hasParents()"
+              type="button"
+              class="btn back-button rounded-circle btn-secondary light"
+              @click="goToPreviousPage"
+            >
+              <FontAwesomeIcon
+                aria-label="Arrow Left icon"
+                icon="fa-solid fa-arrow-left"
+              />
+            </button>
             <h1 class="d-md-none h3">{{ topic.title }}</h1>
             <h1 class="d-md-block d-none">{{ topic.title }}</h1>
             <div class="lead mb-2">
@@ -149,11 +155,13 @@ const parentSlug = (): string | null => {
         </div>
       </div>
     </div>
-    <TopicSection
-      v-for="(content, contentIndex) in getTopicSections(topic.sections)"
-      :key="contentIndex"
-      :data="content"
-    />
+    <div v-if="dataLoaded">
+      <TopicSection
+        v-for="(content, contentIndex) in getTopicSections(topic.sections)"
+        :key="contentIndex"
+        :data="content"
+      />
+    </div>
 
     <div v-if="hasTopicAndNonTopicSection(topic.sections)" class="container">
       <div class="row">

zimui/src/main.ts

@@ -23,6 +23,9 @@ app.use(VueScreen, 'bootstrap5')
 const router = createRouter({
   history: createWebHashHistory(),
   routes: routes,
+  scrollBehavior() {
+    return { top: 0, behavior: 'instant' }
+  },
 })
 
 app.use(router)

zimui/src/pages/HomePage.vue

@@ -12,6 +12,9 @@ const topic: Ref<string> = ref(params.value.topic as string)
 // update topic when route params are changed
 watch(params, () => {
   topic.value = params.value.topic as string
+  if (topic.value === undefined && main.channelData != null) {
+    topic.value = main.channelData.rootSlug
+  }
 })
 
 // fetch channel data and set default topic if needed