From c79472379d71ad3bc06a1c752ba551a873965818 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jurij=20Podgor=C5=A1ek?= <jurij@kompot.si>
Date: Wed, 17 Jan 2024 20:24:11 +0100
Subject: [PATCH] Oblikovanje glave, poskrolaj na pojem ce gres na link zanj

---
 nuxt/components/Glava.vue     | 12 +++++++++++-
 nuxt/components/Pojem.vue     | 15 +++++++++++++--
 nuxt/components/PojemForm.vue |  3 ++-
 nuxt/nuxt.config.js           | 10 +++++++++-
 4 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/nuxt/components/Glava.vue b/nuxt/components/Glava.vue
index 4871039..1132575 100644
--- a/nuxt/components/Glava.vue
+++ b/nuxt/components/Glava.vue
@@ -34,10 +34,20 @@ const naManifestu = computed(() => route.path.indexOf('/pojmi') === 0)
 
 h1 {
   font-family: Trailers;
-  font-size: 5rem;
+  font-size: 16rem;
   z-index: 50;
 }
 
+@media screen and (max-width: 1090px) {
+  h1 { font-size: 10rem; }
+}
+@media screen and (max-width: 768px) {
+  h1 { font-size: 8rem; }
+}
+@media screen and (max-width: 560px) {
+  h1 { font-size: 5rem; }
+}
+
 img {
   position: absolute;
   top: 0;
diff --git a/nuxt/components/Pojem.vue b/nuxt/components/Pojem.vue
index 20ef6d4..828ac4c 100644
--- a/nuxt/components/Pojem.vue
+++ b/nuxt/components/Pojem.vue
@@ -3,8 +3,8 @@
 import { stripHtml } from 'string-strip-html'
 
 const { etherFetch } = useEtherpadApi()
-
 const store = usePojmiStore()
+const route = useRoute()
 
 const props = defineProps({
   naslov: String
@@ -12,10 +12,12 @@ const props = defineProps({
 
 const pojem = computed(() => store.pojmi[props.naslov])
 const revisionId = computed(() => pojem.value.id)
+const pojemId = computed(() => 'pojem-' + revisionId.value)
 
 await store.naloziPojme()
 
 const urejanje = ref(false)
+const container = ref(null)
 
 const urediPojem = async () => {
   // Ustvari pad s tekstom pojma, ce se ne obstaja
@@ -27,10 +29,19 @@ const urediPojem = async () => {
   urejanje.value = true
 }
 
+onMounted(() => {
+  // Link na pojem direktno? Poskrolaj nanj + odpri editiranje
+  if (route.params.guid === revisionId.value) {
+    urejanje.value = true
+    window.container = container
+    setTimeout(() => container.value.scrollIntoView(), 50)
+  }
+})
+
 </script>
 
 <template>
-  <section class="pojem">
+  <section class="pojem" :key="pojemId" ref="container">
     <div>
       <h2>{{ pojem.naslov }}</h2>
       <div class="tekst" v-html="pojem.tekst" />
diff --git a/nuxt/components/PojemForm.vue b/nuxt/components/PojemForm.vue
index 4502ca4..a022499 100644
--- a/nuxt/components/PojemForm.vue
+++ b/nuxt/components/PojemForm.vue
@@ -29,7 +29,8 @@ const oddajPredlog = async data => {
 }
 
 const etherNalozen = ev => {
-  window.location.hash = props.revisionId
+  navigateTo('/pojmi/' + props.revisionId)
+  //window.location.hash = props.revisionId
 }
 
 </script>
diff --git a/nuxt/nuxt.config.js b/nuxt/nuxt.config.js
index 4ada511..e3017dc 100644
--- a/nuxt/nuxt.config.js
+++ b/nuxt/nuxt.config.js
@@ -28,7 +28,6 @@ export default defineNuxtConfig({
       changeOrigin: true,
       pathFilter:
         process.env.FILE_PATH
-
     }
   },
   runtimeConfig: {
@@ -38,5 +37,14 @@ export default defineNuxtConfig({
       etherpadUrl: process.env.ETHERPAD_URL,
       etherpadPrefix: process.env.ETHERPAD_PREFIX
     }
+  },
+  hooks: {
+    'pages:extend' (pages) {
+      pages.push({
+        name: 'pojem',
+        path: '/pojmi/:guid',
+        file: '~/pages/pojmi.vue'
+      })
+    }
   }
 })