oblikoanje forma 1

nuxt/app.vue

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

nuxt/components/Pojem.vue

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

nuxt/components/PojemForm.vue

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