Popravki za dodajanje pojma

pull/42/head
Jurij Podgoršek 2024-01-19 13:35:03 +01:00 committed by Lio Novelli
parent ab7c083530
commit 4b47a99b78
7 changed files with 96 additions and 73 deletions

View File

@ -12,6 +12,7 @@
:root { :root {
--siva: #D9D9D9; --siva: #D9D9D9;
--bela: #fff; --bela: #fff;
--crna: #000;
--rdeca: #f00; --rdeca: #f00;
--roza: #ED008C; --roza: #ED008C;
} }
@ -28,12 +29,23 @@
margin: .2rem 0 1rem 0; margin: .2rem 0 1rem 0;
} }
h2 {
text-transform: uppercase;
margin-top: 0;
}
.vsebina { .vsebina {
position: relative; position: relative;
z-index: 50; z-index: 50;
padding: 0 32px; padding: 0 32px;
} }
.gumb {
text-decoration: underline;
font-size: 3rem;
color: var(--crna);
}
.stran { .stran {
position: relative; position: relative;
background: var(--bela); 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> </style>

View File

@ -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>

View File

@ -16,6 +16,7 @@ const revisionId = computed(() => pojem.value.id)
await store.naloziPojme() await store.naloziPojme()
const urejanje = ref(false) const urejanje = ref(false)
const container = ref(null) const container = ref(null)
const urediPojem = async () => { const urediPojem = async () => {
@ -32,9 +33,12 @@ onMounted(() => {
// Link na pojem direktno? Poskrolaj nanj + odpri editiranje // Link na pojem direktno? Poskrolaj nanj + odpri editiranje
if (route.params.guid === revisionId.value) { if (route.params.guid === revisionId.value) {
urejanje.value = true urejanje.value = true
window.container = container
//const element = document.getElementById("pojem-obrazec") //const element = document.getElementById("pojem-obrazec")
setTimeout(() => window.container.value.scrollIntoView(), 50) //if (document.offsetWidth > 768) {
setTimeout(() => container.value.scrollIntoView({
behavior: 'smooth'
}), 50)
//}
} }
}) })
@ -59,20 +63,6 @@ onMounted(() => {
</template> </template>
<style scoped> <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 { form.pojem {
width: calc(50% - 32px); width: calc(50% - 32px);
margin-left: 32px; margin-left: 32px;
@ -83,17 +73,10 @@ onMounted(() => {
position: relative; position: relative;
width: 50%; width: 50%;
} }
h2 {
text-transform: uppercase;
margin-top: 0;
}
.gumb { .gumb {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
text-decoration: underline;
font-size: 3rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {

View File

@ -27,14 +27,20 @@ const oddajPredlog = async data => {
props.onZapri() props.onZapri()
} }
// @TODO tole raje v pojmi.vue oz nov_pojem.vue - page!
const etherNalozen = ev => { const etherNalozen = ev => {
if (props.pojem.nov) {
navigateTo('/nov_pojem/' + props.revisionId)
} else {
navigateTo('/pojmi/' + props.revisionId) navigateTo('/pojmi/' + props.revisionId)
}
//window.location.hash = props.revisionId
} }
</script> </script>
<template> <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" />
@ -54,6 +60,7 @@ const etherNalozen = ev => {
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 { input {

View File

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

View File

@ -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>

View File

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