oblikovanje pojma in mobilni stili.

nuxt/app.vue

@@ -63,4 +63,12 @@
     width: fit-content;
   }
 
+  @media screen and (max-width: 325px) {
+    .vsebina {
+      padding-right: 0;
+      padding-left: 0;
+    }
+  }
+
+
 </style>

nuxt/components/Pojem.vue

@@ -33,7 +33,8 @@ onMounted(() => {
   if (route.params.guid === revisionId.value) {
     urejanje.value = true
     window.container = container
-    setTimeout(() => container.value.scrollIntoView(), 50)
+    //const element = document.getElementById("pojem-obrazec")
+    setTimeout(() => window.container.value.scrollIntoView(), 50)
   }
 })
 
@@ -49,7 +50,8 @@ onMounted(() => {
      :revisionId="revisionId"
      :pojem="pojem"
      :urejanje="urejanje"
-     :onZapri="() => { urejanje = false; store.naloziPojme() }" />
+     :onZapri="() => { urejanje = false; store.naloziPojme()}"
+     />
     <div>
       <div v-if="!urejanje" class="gumb" @click="urediPojem">Uredi</div>
     </div>
@@ -97,18 +99,19 @@ onMounted(() => {
   @media screen and (max-width: 768px) {
     PojemForm {
       width: 50%;
-      float: left;
+      float: right;
     }
     .pojem > div {
       min-height: 4rem;
       width: 100%;
     }
   }
-  @media screen and (max-width: 325px) {
-    .pojem {
-      margin-right: 0;
-      margin-left: 0;
+
+    @media screen and (max-width: 768px) {
+      form.pojem {
+        width: 100%;
+        margin-left: 0;
+        min-height: 70vh;
     }
   }
-
 </style>

nuxt/components/PojemForm.vue

@@ -29,13 +29,12 @@ const oddajPredlog = async data => {
 
 const etherNalozen = ev => {
   navigateTo('/pojmi/' + props.revisionId)  
-  //window.location.hash = props.revisionId
 }
 
 </script>
 
 <template>
-    <form class="pojem" @submit.prevent="oddajPredlog">
+    <form id="pojem-obrazec" class="pojem" @submit.prevent="oddajPredlog">
       <input name="naslov" type="text" v-model="naslov">
 
       <EtherpadTextarea :onLoad="etherNalozen" :revisionId="props.revisionId" />
@@ -68,6 +67,13 @@ input {
   flex-direction: row;
   justify-content: space-between;
 }
+.gumb,
+.gumbi input,
+.gumbi button {
+  text-transform: uppercase;
+  padding: 0;
+  margin: 0;
+}
 
 .pojem.form .gumb {
   width: 50%;