Popravki za dodajanje pojma

nuxt/app.vue

@@ -12,6 +12,7 @@
 :root {
     --siva: #D9D9D9;
     --bela: #fff;
+    --crna: #000;
     --rdeca: #f00;
     --roza: #ED008C;
   }
@@ -28,12 +29,23 @@
     margin: .2rem 0 1rem 0;
   }
 
+  h2 {
+    text-transform: uppercase;
+    margin-top: 0;
+  }
+
   .vsebina {
     position: relative;
     z-index: 50;
     padding: 0 32px;
   }
 
+  .gumb {
+    text-decoration: underline;
+    font-size: 3rem;
+    color: var(--crna);
+  }
+
   .stran {
     position: relative;
     background: var(--bela);
@@ -70,5 +82,17 @@
     }
   }
 
-
+  section.pojem {
+    position: relative;
+    background: var(--bela);
+    margin: 2rem;
+    border-radius: 24px;
+    padding: 2rem;
+    display: flex;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    max-width: 1216px;
+    margin-left: auto;
+    margin-right: auto;
+  }
 </style>

nuxt/components/DodajPojem.vue

@@ -1,28 +0,0 @@
-<script setup="setup">
-
-const { etherpadApiUrl } = useEtherpadApi()
-
-const prikazi = ref(false)
-const revisionId = ref(null)
-
-const dodajPojem = async () => {
-  revisionId.value = crypto.randomUUID()
-
-  // Ustvari nov, prazen pad
-  const padId = revisionId.value
-  const resp = await $fetch(`${etherpadApiUrl}/createPad?padID=${padId}`)
-  prikazi.value = true
-}
-
-</script>
-
-<template>
-  <div>
-    <div class="gumb" @click="dodajPojem()">
-      Dodaj pojem
-    </div>
-    <section class="pojem" v-if="prikazi">
-      <PojemForm :pojem="{}" :revisionId="revisionId" />
-    </section>
-  </div>
-</template>

nuxt/components/Pojem.vue

@@ -16,6 +16,7 @@ const revisionId = computed(() => pojem.value.id)
 await store.naloziPojme()
 
 const urejanje = ref(false)
+
 const container = ref(null)
 
 const urediPojem = async () => {
@@ -32,9 +33,12 @@ onMounted(() => {
   // Link na pojem direktno? Poskrolaj nanj + odpri editiranje
   if (route.params.guid === revisionId.value) {
     urejanje.value = true
-    window.container = container
     //const element = document.getElementById("pojem-obrazec")
-    setTimeout(() => window.container.value.scrollIntoView(), 50)
+    //if (document.offsetWidth > 768) {
+    setTimeout(() => container.value.scrollIntoView({
+      behavior: 'smooth'
+    }), 50)
+    //}
   }
 })
 
@@ -59,41 +63,20 @@ onMounted(() => {
 </template>
 
 <style scoped>
-  section.pojem {
-    position: relative;
-    background: var(--bela);
-    margin: 2rem;
-    border-radius: 24px;
-    padding: 2rem;
-    display: flex;
-    flex-wrap: wrap;
-    box-sizing: border-box;
-    max-width: 1216px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
   form.pojem {
     width: calc(50% - 32px);
     margin-left: 32px;
     gap: 1rem;
   }
 
-    .pojem > div {
+  .pojem > div {
     position: relative;
     width: 50%;
   }
-
-  h2 {
-    text-transform: uppercase;
-    margin-top: 0;
-  }
   .gumb {
     position: absolute;
     bottom: 0;
     right: 0;
-    text-decoration: underline;
-    font-size: 3rem;
   }
 
   @media screen and (max-width: 768px) {

nuxt/components/PojemForm.vue

@@ -27,33 +27,40 @@ const oddajPredlog = async data => {
   props.onZapri()
 }
 
+// @TODO tole raje v pojmi.vue oz nov_pojem.vue - page!
 const etherNalozen = ev => {
-  navigateTo('/pojmi/' + props.revisionId)  
+  if (props.pojem.nov) {
+    navigateTo('/nov_pojem/' + props.revisionId)
+  } else {
+    navigateTo('/pojmi/' + props.revisionId)
+  }
+  //window.location.hash = props.revisionId
 }
 
 </script>
 
 <template>
-    <form id="pojem-obrazec" class="pojem" @submit.prevent="oddajPredlog">
+  <form class="pojem" @submit.prevent="oddajPredlog">
-      <input name="naslov" type="text" v-model="naslov">
+    <input name="naslov" type="text" v-model="naslov">
 
-      <EtherpadTextarea :onLoad="etherNalozen" :revisionId="props.revisionId" />
+    <EtherpadTextarea :onLoad="etherNalozen" :revisionId="props.revisionId" />
 
-      <input name="email" type="email" placeholder="E-poštni naslov" v-model="email">
+    <input name="email" type="email" placeholder="E-poštni naslov" v-model="email">
-      <div class="gumbi">
+    <div class="gumbi">
-        <button class="gumb" @click="props.onZapri">Zapri</button>
+      <button class="gumb" @click="props.onZapri">Zapri</button>
-        <input class="gumb" type="submit" value="Predlagaj">
+      <input class="gumb" type="submit" value="Predlagaj">
-      </div>
+    </div>
 
-    </form>
+  </form>
 </template>
 
 <style>
 .etherpad-textarea {
-    width: 100%;
+  width: 100%;
-    flex-grow: 1;
+  flex-grow: 1;
-    border-radius: 16px;
+  border-radius: 16px;
-    border: 2px solid var(--siva);
+  border: 2px solid var(--siva);
+  box-sizing: border-box;
 }
 
 input {

nuxt/nuxt.config.js

@@ -44,6 +44,10 @@ export default defineNuxtConfig({
         name: 'pojem',
         path: '/pojmi/:guid',
         file: '~/pages/pojmi.vue'
+      }, {
+        name: 'nov_pojem_guid',
+        path: '/nov_pojem/:guid',
+        file: '~/pages/nov_pojem.vue'
       })
     }
   }

nuxt/pages/nov_pojem.vue

@@ -0,0 +1,35 @@
+<script setup="setup">
+
+import * as cryptoServer from 'crypto'
+const getRandomUUID = () => (typeof window === 'undefined')
+      ? cryptoServer.randomBytes(16).toString('hex')
+      : crypto.randomUUID()
+
+const { etherpadApiUrl } = useEtherpadApi()
+const route = useRoute()
+
+const revisionId = ref(null)
+
+revisionId.value = route.params.guid ? route.params.guid : getRandomUUID()
+
+// Ustvari nov, prazen pad
+// @TODO parameter za seranje linka?
+const padId = revisionId.value
+const resp = await $fetch(`${etherpadApiUrl}/createPad?padID=${padId}`)
+
+</script>
+
+<template>
+  <section class="pojem">
+    <PojemForm :pojem="{ nov: true }" :revisionId="revisionId" />
+  </section>
+</template>
+
+<style scoped>
+section.pojem {
+  max-width: 608px;
+}
+form.pojem {
+  width: 100%;
+}
+</style>

nuxt/pages/pojmi.vue

@@ -1,16 +1,14 @@
 <script setup="setup">
+
 const store = usePojmiStore()
 await store.naloziPojme()
 
 </script>
 
 <template>
-  <DodajPojem />
+  <NuxtLink class="gumb" to="/nov_pojem">
-  <!--
+    Dodaj Pojem
-    <Pojem naslov="Yugofuturist manifesto" />
+  </NuxtLink>
-    <Pojem naslov="Jadran potem" />
-    <Pojem naslov="JUGA 2023" />
-  -->
   <Pojem
     v-for="pojem in Object.keys(store.pojmi)"
     :naslov="pojem"