Popravki za dodajanje pojma

pull/41/head
Jurij Podgoršek 2024-01-19 13:35:03 +01:00
parent a43967d5bd
commit 0f5a42f917
7 changed files with 96 additions and 73 deletions

View File

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

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()
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) {

View File

@ -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">
<input name="naslov" type="text" v-model="naslov">
<form class="pojem" @submit.prevent="oddajPredlog">
<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">
<div class="gumbi">
<button class="gumb" @click="props.onZapri">Zapri</button>
<input class="gumb" type="submit" value="Predlagaj">
</div>
<input name="email" type="email" placeholder="E-poštni naslov" v-model="email">
<div class="gumbi">
<button class="gumb" @click="props.onZapri">Zapri</button>
<input class="gumb" type="submit" value="Predlagaj">
</div>
</form>
</form>
</template>
<style>
.etherpad-textarea {
width: 100%;
flex-grow: 1;
border-radius: 16px;
border: 2px solid var(--siva);
width: 100%;
flex-grow: 1;
border-radius: 16px;
border: 2px solid var(--siva);
box-sizing: border-box;
}
input {

View File

@ -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'
})
}
}

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">
const store = usePojmiStore()
await store.naloziPojme()
</script>
<template>
<DodajPojem />
<!--
<Pojem naslov="Yugofuturist manifesto" />
<Pojem naslov="Jadran potem" />
<Pojem naslov="JUGA 2023" />
-->
<NuxtLink class="gumb" to="/nov_pojem">
Dodaj Pojem
</NuxtLink>
<Pojem
v-for="pojem in Object.keys(store.pojmi)"
:naslov="pojem"