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

View File

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

View File

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

View File

@ -7,7 +7,8 @@ const store = usePojmiStore()
const props = defineProps({
revisionId: String,
pojem: Object,
urejanje: Object
urejanje: Object,
onZapri: Function
})
let naslov = ref(props.pojem.naslov)
@ -34,18 +35,46 @@ const etherNalozen = ev => {
</script>
<template>
<section class="pojem">
<form class="pojem" @submit.prevent="oddajPredlog">
<label for="naslov">Naslov</label>
<input name="naslov" type="text" v-model="naslov">
<label for="tekst">Besedilo</label>
<EtherpadTextarea :onLoad="etherNalozen" :revisionId="props.revisionId" />
<label for="email">E-poštni naslov</label>
<input name="email" type="email" v-model="email">
<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 type="submit" value="Predlagaj">
</form>
</section>
</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>