Popravljeno skrolanje sekcij (urejanje, dodajanje pojma)

nuxt/app.vue

@@ -83,6 +83,7 @@
     background: none;
     text-decoration: underline;
     width: fit-content;
+    z-index: 100;
   }
 
   footer {

nuxt/components/Pojem.vue

@@ -3,6 +3,8 @@
 import { stripHtml } from 'string-strip-html'
 
 const { etherFetch } = useEtherpadApi()
+const { poskrolaj } = useUi()
+
 const store = usePojmiStore()
 const route = useRoute()
 
@@ -40,16 +42,15 @@ onMounted(() => {
   // Link na editiranje pojma? Poskrolaj nanj + odpri editiranje
   if (route.params.guid === revisionId.value) {
     urejanje.value = true
-    setTimeout(() => obrazec.value.scrollIntoView({ behavior: 'smooth' }), 50)
   } else {
     // Sicer samo poskrolaj na pojem
-    setTimeout(() => {
-      const sekcija = container.value.parentNode
-      console.log('skrolam?', sekcija)
-      if (sekcija) {
-        sekcija.scrollIntoView({ behavior: 'smooth' })
-      }
-    }, 50)
+    poskrolaj(container.value.parentNode)
+  }
+})
+
+onUpdated(() => {
+  if (route.params.guid === revisionId.value) {
+    poskrolaj(obrazec.value)
   }
 })
 
@@ -62,11 +63,13 @@ onMounted(() => {
       <h2>{{ naslov }}</h2>
       <div class="tekst" v-html="pojem.tekst" />
     </div>
-    <PojemForm v-if="urejanje"
-     ref="obrazec"
-     :revisionId="revisionId"
-     :pojem="pojem"
-     :onZapri="() => { urejanje = false; store.naloziPojme() }" />
+    <div class="obrazec" ref="obrazec">
+      <PojemForm v-if="urejanje"
+        ref="obrazec"
+        :revisionId="revisionId"
+        :pojem="pojem"
+        :onZapri="() => { urejanje = false; store.naloziPojme() }" />
+    </div>
   </section>
 </template>
 
@@ -87,9 +90,12 @@ onMounted(() => {
   }
 
   form.pojem {
+    width: 100%;
+  }
+
+  .obrazec {
     width: calc(50% - 32px);
     margin-left: 32px;
-    gap: 1rem;
     float: right;
   }
 
@@ -106,8 +112,12 @@ onMounted(() => {
       width: 100%;
     }
 
-    form.pojem {
+    .obrazec {
+      width: 100%;
       margin-left: 0;
+    }
+
+    form.pojem {
       min-height: 70vh;
       width: 100%;
       margin-left: 0;

nuxt/components/PojemForm.vue

@@ -78,6 +78,10 @@ const etherNalozen = ev => {
 </template>
 
 <style>
+form {
+  gap: 1rem;
+}
+
 .etherpad-textarea {
   width: 100%;
   flex-grow: 1;

nuxt/composables/ui.js

@@ -0,0 +1,12 @@
+/* uporabne zadeve za vmesnik */
+
+export const useUi = () => ({
+  poskrolaj: (sekcija, timeout = 50) => {
+    setTimeout(() => {
+      console.log('UI SKROL!', sekcija)
+      if (sekcija && sekcija.scrollIntoView) {
+        sekcija.scrollIntoView({ behavior: 'smooth' })
+      }
+    }, timeout)
+  }
+})

nuxt/pages/manifest/dodaj.vue

@@ -1,8 +1,9 @@
 <script setup="setup">
 
 const { getRandomUUID } = useCrypto()
-
 const { etherpadApiUrl } = useEtherpadApi()
+const { poskrolaj } = useUi()
+
 const route = useRoute()
 
 const revisionId = ref(null)
@@ -18,11 +19,7 @@ const resp = await $fetch(`${etherpadApiUrl}/createPad?padID=${padId}`)
 const onZapri = () => { navigateTo('/manifest#skrol') }
 
 onMounted(() => {
-  setTimeout(() => {
-    console.log('element?', obrazec.value)
-    debugger
-    obrazec.value.scrollIntoView({ behavior: 'smooth' })
-  }, 50)
+  poskrolaj(obrazec.value)
 })
 
 </script>

nuxt/pages/manifest/index.vue

@@ -1,15 +1,16 @@
 <script setup="setup">
 
 const store = usePojmiStore()
+
+const { poskrolaj } = useUi()
+
 await store.naloziPojme()
 
 const navodila = ref(null)
 
 onMounted(() => {
   if (location && location.hash == '#skrol') {
-    setTimeout(() => {
-      navodila.value.scrollIntoView({ behavior: 'smooth' })
-    }, 50)
+    poskrolaj(navodila.value)
   }
 })