Vizualno pedenanje, preimenovanje route manifesta, pogled posameznih

pojmov

nuxt/app.vue

@@ -26,6 +26,10 @@
     background: var(--siva);
   }
 
+  a {
+    color: var(--crna);
+  }
+
   h1 {
     text-align: center;
     font-size: 5rem;
@@ -46,7 +50,6 @@
   a.gumb {
     text-decoration: underline;
     font-size: 3rem;
-    color: var(--crna);
     position: relative;
     display: flex;
     width: 100%;
@@ -85,6 +88,7 @@
   .navodila {
     padding-left: 2rem;
     padding-right: 2rem;
+    text-align: center;
   }
 
   footer {
@@ -93,7 +97,7 @@
 }
 
 
-  @media screen and (max-width: 325px) {
+  @media screen and (max-width: 420px) {
     .vsebina {
       padding-right: 0;
       padding-left: 0;
@@ -103,7 +107,7 @@
     }
   }
 
-  section.pojem {
+  .okvir {
     position: relative;
     background: var(--bela);
     margin: 2rem;

nuxt/components/Glava.vue

@@ -2,16 +2,29 @@
 const route = useRoute()
 
 const pot = computed(() => route.path)
-const naManifestu = computed(() => route.path.indexOf('/pojmi') === 0)
+const naManifestu = computed(() => route.path.indexOf('/manifest') === 0)
 </script>
 
 <template>
   <section class="glava" :class="{ manifest: naManifestu }">
     <ul class="meni">
-          <li><NuxtLink to="/">Domov</NuxtLink></li>
+      <li>
-          <li><NuxtLink to="/pojmi">Manifest</NuxtLink></li>
+        <NuxtLink to="/">
-          <li><NuxtLink to="https://yugofuturism.kompot.si/user" target="_blank">admin</NuxtLink></li>
+          Domov
+        </NuxtLink>
+      </li>
+      <li>
+        <NuxtLink to="/manifest">
+          Manifest
+        </NuxtLink>
+      </li>
+      <li>
+        <NuxtLink to="https://yugofuturism.kompot.si/user" target="_blank">
+          admin
+        </NuxtLink>
+      </li>
     </ul>
+
     <img src="/images/zvezda.png">
 
     <h1 v-if="naManifestu">MANIFEST</h1>
@@ -103,4 +116,14 @@ ul {
   }
 }
 
+@media screen and (min-width: 768px) {
+  .glava img {
+    width: 768px;
+    height: auto;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
 </style>

nuxt/components/Noga.vue

@@ -8,19 +8,22 @@ const naManifestu = computed(() => route.path.indexOf('/pojmi') === 0)
 <template>
 <section class="noga">
     <div class="maska">
-        <a href="maska.si">
+        <a href="https://maska.si" target="_blank">
             <img src="/images/maska-logo.svg" />
         </a>
     </div>
     <div class="kompot">
         <p>
-            2024 <a href="kompot.si">Kompot</a>
+          <a href="https://kompot.si" target="_blank">
+            <img src="/images/kompot_sm.png">
+            2024
+            Kompot
+          </a>
         </p>
-            
     </div>
     <div class="eu-projekti">
       <div class="eu-projekti-logos">
-        <img src="/images/peripheralvisions.svg" />
+        <img src="/images/peripheralvisions.png" />
         <img src="/images/eu-logo.svg" />
       </div>
       <p>Funded by the European Union. Views and opinions expressed are however those of the author(s) only and do not necessarily reflect those of the European Union or European Education and Culture Executive Agency (EACEA). Neither the European Union nor the granting authority can be held responsible for them.</p>
@@ -30,7 +33,6 @@ const naManifestu = computed(() => route.path.indexOf('/pojmi') === 0)
 
 <style scoped>
 .noga {
-    height: fit-content;
   background-color: black;
   z-index: 100;
   display: flex;
@@ -39,6 +41,7 @@ const naManifestu = computed(() => route.path.indexOf('/pojmi') === 0)
   align-content: center;
   flex-wrap: wrap;
   padding: 2rem;
+  align-content: center;
 }
 
 p, a {
@@ -46,6 +49,11 @@ p, a {
     text-decoration: none;
 }
 
+a {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .noga > div {
     position: relative;
     display: block;
@@ -59,6 +67,7 @@ p, a {
 img {
     width: 100%;
     height: auto;
+    max-width: 300px;
 }
 
 .eu-projekti {
@@ -71,6 +80,12 @@ img {
 
 }
 
+a {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 .eu-projekti-logos {
     position: relative;
     width: 100%;

nuxt/components/Pojem.vue

@@ -10,11 +10,13 @@ const props = defineProps({
   naslov: String
 })
 
+if (props.naslov && !(props.naslov in store.pojmi)) {
+  await store.naloziPojme()
+}
+
 const pojem = computed(() => store.pojmi[props.naslov])
 const revisionId = computed(() => pojem.value.id)
 
-await store.naloziPojme()
-
 const urejanje = ref(false)
 const container = ref(null)
 
@@ -29,86 +31,69 @@ const urediPojem = async () => {
 }
 
 onMounted(() => {
-  // Link na pojem direktno? Poskrolaj nanj + odpri editiranje
+  // Link na editiranje pojma? Poskrolaj nanj + odpri editiranje
   if (route.params.guid === revisionId.value) {
     urejanje.value = true
-    window.container = container
+    setTimeout(() => obrazec.value.scrollIntoView({ behavior: 'smooth' }), 50)
-    setTimeout(() => window.container.value.scrollIntoView(), 50)
+  } else {
+    // Sicer samo poskrolaj na pojem
+    setTimeout(() => container.value.scrollIntoView({ behavior: 'smooth' }), 50)
   }
 })
 
 </script>
 
 <template>
-  <section class="pojem" ref="container">
+  <section ref="container">
-    <div>
+    <div v-if="!urejanje" class="gumb" @click="urediPojem">Uredi</div>
-      <h2>{{ pojem.naslov }}</h2>
+    <div v-if="pojem" class="pojem">
+      <h2>{{ pojem }}</h2>
       <div class="tekst" v-html="pojem.tekst" />
     </div>
     <PojemForm v-if="urejanje"
+     ref="obrazec"
      :revisionId="revisionId"
      :pojem="pojem"
      :urejanje="urejanje"
      :onZapri="() => { urejanje = false; store.naloziPojme()}"
      />
-    <div>
-      <div v-if="!urejanje" class="gumb" @click="urediPojem">Uredi</div>
-    </div>
   </section>
 </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 {
+  .pojem {
-    width: calc(50% - 32px);
-    margin-left: 32px;
-    gap: 1rem;
-  }
-
-  .pojem > div {
     position: relative;
     width: 50%;
+    float: left;
   }
 
   h2 {
     text-transform: uppercase;
     margin-top: 0;
   }
+
+  form.pojem {
+    width: calc(50% - 32px);
+    margin-left: 32px;
+    gap: 1rem;
+    float: right;
+  }
+
   .gumb {
-    position: absolute;
+    position: sticky;
-    bottom: 0;
+    top: 0;
     right: 0;
-    text-decoration: underline;
+    float: right;
-    font-size: 3rem;
   }
 
   @media screen and (max-width: 768px) {
-    PojemForm {
+    .pojem {
-      width: 50%;
-      float: right;
-    }
-    .pojem > div {
       min-height: 4rem;
       width: 100%;
     }
-  }
 
-    @media screen and (max-width: 768px) {
     form.pojem {
-        width: 100%;
       margin-left: 0;
       min-height: 70vh;
     }

nuxt/components/PojemForm.vue

@@ -30,9 +30,9 @@ const oddajPredlog = async data => {
 // @TODO tole raje v pojmi.vue oz nov_pojem.vue - page!
 const etherNalozen = ev => {
   if (props.pojem.nov) {
-    navigateTo('/nov_pojem/' + props.revisionId)
+    navigateTo('/manifest/dodaj/' + props.revisionId)
   } else {
-    navigateTo('/pojmi/' + props.revisionId)
+    navigateTo('/manifest/' + props.revisionId)
   }
   //window.location.hash = props.revisionId
 }

nuxt/composables/crypto.js

@@ -0,0 +1,10 @@
+import * as cryptoServer from 'crypto'
+
+export const useCrypto = () => {
+
+  return {
+    getRandomUUID: () => (typeof window === 'undefined')
+      ? cryptoServer.randomBytes(16).toString('hex') // Server code
+      : crypto.randomUUID()                          // Browser code
+  }
+}

nuxt/nuxt.config.js

@@ -41,13 +41,17 @@ export default defineNuxtConfig({
   hooks: {
     'pages:extend' (pages) {
       pages.push({
-        name: 'pojem',
+        name: 'poglej_pojem',
-        path: '/pojmi/:guid',
+        path: '/manifest/:naslov',
-        file: '~/pages/pojmi.vue'
+        file: '~/pages/manifest/pojem.vue'
+      }, {
+        name: 'uredi_pojem',
+        path: '/manifest/:naslov/uredi/:guid',
+        file: '~/pages/manifest/pojem.vue'
       }, {
         name: 'nov_pojem_guid',
-        path: '/nov_pojem/:guid',
+        path: '/manifest/dodaj/:guid',
-        file: '~/pages/nov_pojem.vue'
+        file: '~/pages/manifest/dodaj.vue'
       })
     }
   }

nuxt/pages/manifest/dodaj.vue

@@ -1,9 +1,6 @@
 <script setup="setup">
 
-import * as cryptoServer from 'crypto'
+const { getRandomUUID } = useCrypto()
-const getRandomUUID = () => (typeof window === 'undefined')
-      ? cryptoServer.randomBytes(16).toString('hex')
-      : crypto.randomUUID()
 
 const { etherpadApiUrl } = useEtherpadApi()
 const route = useRoute()

nuxt/pages/manifest/index.vue

@@ -10,15 +10,20 @@ await store.naloziPojme()
   <NuxtLink class="gumb" to="/nov_pojem">
     Dodaj Nov Pojem
   </NuxtLink>
-  <Pojem
+  <NuxtLink
     v-for="pojem in Object.keys(store.pojmi)"
     :naslov="pojem"
-    :key="store.pojmi[pojem].id" />
+    :to="`/manifest/${pojem}`"
-
+    class="okvir">
+    <h2>{{ pojem }}</h2>
+  </NuxtLink>
 </template>
 
 <style scoped>
-  DodajPojem {
+  a {
-    float: right
+    clear: both;
+  }
+  h2 {
+    margin-bottom: 0;
   }
 </style>

nuxt/pages/manifest/pojem.vue

@@ -0,0 +1,22 @@
+<script setup="setup">
+
+const { etherpadApiUrl } = useEtherpadApi()
+const { naslov, guid } = useRoute().params
+const { getRandomUUID } = useCrypto()
+
+const revisionId = ref(null)
+
+revisionId.value = 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>
+  <div class="okvir">
+    <Pojem :naslov="naslov" />
+  </div>
+</template>

nuxt/stores/pojmi.js

@@ -6,7 +6,7 @@ export const usePojmiStore = defineStore('pojmi', {
     async naloziPojme() {
       const { jsonApiUrl, headers, deserialize } = useApi()
 
-      const data = await $fetch(`${jsonApiUrl}/node/concept?sort=created`, { headers })
+      const data = await $fetch(`${jsonApiUrl}/node/concept?sort=-changed`, { headers })
       this.pojmi = await deserialize(data, s => ({
         id: s.id,
         naslov: s.title,