yufu
/
manifest
6
2
Fork 0
Code Issues 21 Pull Requests 1 Packages Projects 4 Releases Wiki Activity

oblikoanje forma 1

pull/26/head
janko 2024-01-17 20:35:42 +01:00
parent df5048e4e1
commit 9e5cd462a8
3 changed files with 58 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
nuxt/app.vue
View File

@ -13,6 +13,7 @@
--siva: #D9D9D9; --siva: #D9D9D9;
--bela: #fff; --bela: #fff;
--rdeca: #f00; --rdeca: #f00;
--roza: #ED008C;
} }
body { body {
@ -30,6 +31,7 @@
.vsebina { .vsebina {
position: relative; position: relative;
z-index: 50; z-index: 50;
padding: 0 32px;
} }
.stran { .stran {
@ -53,13 +55,12 @@
.gumb { .gumb {
font-family: Trailers; font-family: Trailers;
font-size: 2rem; font-size: 3rem;
cursor: pointer; cursor: pointer;
} border: none;
background: none;
.etherpad-textarea { text-decoration: underline;
height: 25rem; width: fit-content;
width: 100%;
} }
</style> </style>

14
nuxt/components/Pojem.vue
View File

@ -35,7 +35,11 @@ const urediPojem = async () => {
<h2>{{ pojem.naslov }}</h2> <h2>{{ pojem.naslov }}</h2>
<div class="tekst" v-html="pojem.tekst" /> <div class="tekst" v-html="pojem.tekst" />
</div> </div>
<PojemForm v-if="urejanje" :revisionId="revisionId" :pojem="pojem" :urejanje="urejanje" /> <PojemForm v-if="urejanje"
:revisionId="revisionId"
:pojem="pojem"
:urejanje="urejanje"
:onZapri="()=>urejanje=false" />
<div> <div>
<div v-if="!urejanje" class="gumb" @click="urediPojem">Uredi</div> <div v-if="!urejanje" class="gumb" @click="urediPojem">Uredi</div>
</div> </div>
@ -43,7 +47,7 @@ const urediPojem = async () => {
</template> </template>
<style scoped> <style scoped>
.pojem { section.pojem {
position: relative; position: relative;
background: var(--bela); background: var(--bela);
margin: 2rem; margin: 2rem;
@ -57,6 +61,12 @@ const urediPojem = async () => {
margin-right: auto; margin-right: auto;
} }
form.pojem {
width: calc(50% - 32px);
margin-left: 32px;
gap: 1rem;
}
.pojem > div { .pojem > div {
position: relative; position: relative;
width: 50%; width: 50%;

45
nuxt/components/PojemForm.vue
View File

@ -7,7 +7,8 @@ const store = usePojmiStore()
const props = defineProps({ const props = defineProps({
revisionId: String, revisionId: String,
pojem: Object, pojem: Object,
urejanje: Object urejanje: Object,
onZapri: Function
}) })
let naslov = ref(props.pojem.naslov) let naslov = ref(props.pojem.naslov)
@ -34,18 +35,46 @@ const etherNalozen = ev => {
</script> </script>
<template> <template>
<section class="pojem">
<form class="pojem" @submit.prevent="oddajPredlog"> <form class="pojem" @submit.prevent="oddajPredlog">
<label for="naslov">Naslov</label>
<input name="naslov" type="text" v-model="naslov"> <input name="naslov" type="text" v-model="naslov">
<label for="tekst">Besedilo</label>
<EtherpadTextarea :onLoad="etherNalozen" :revisionId="props.revisionId" /> <EtherpadTextarea :onLoad="etherNalozen" :revisionId="props.revisionId" />
<label for="email">E-poštni naslov</label> <input name="email" type="email" placeholder="E-poštni naslov" v-model="email">
<input name="email" type="email" v-model="email"> <div class="gumbi">
<button class="gumb" @click="props.onZapri">Zapri</button>
<input class="gumb" type="submit" value="Predlagaj">
</div>
<input type="submit" value="Predlagaj">
</form> </form>
</section>
</template> </template>
<style>
.etherpad-textarea {
width: 100%;
flex-grow: 1;
border-radius: 16px;
border: 2px solid var(--siva);
}
input {
border: 2px solid var(--siva);
border-radius: 8px;
padding: 15px;
}
.gumbi {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.pojem.form .gumb {
width: 50%;
}
.pojem input[type=submit] {
color: var(--roza);
}
</style>