Merge branch 'pojem-mobile-css' of git.kompot.si:yufu/manifest into pojem-mobile-css

nuxt/app.vue

@@ -40,10 +40,14 @@
     padding: 0 32px;
   }
 
-  .gumb {
+  a.gumb {
     text-decoration: underline;
     font-size: 3rem;
     color: var(--crna);
+    position: relative;
+    display: flex;
+    width: 100%;
+    justify-content: center;
   }
 
   .stran {

nuxt/components/Glava.vue

@@ -49,11 +49,13 @@ h1 {
 }
 
 img {
-  position: absolute;
+  position: fixed;
-  top: 0;
+  top: -10wh;
-  left: 0;
+  left: -10vw;
-  width: 100%;
+  width: 120vw;
+  height: 120vh;
   z-index: 10;
+  object-fit: cover;
 }
 
 .meni {

nuxt/components/Pojem.vue

@@ -16,7 +16,6 @@ const revisionId = computed(() => pojem.value.id)
 await store.naloziPojme()
 
 const urejanje = ref(false)
-
 const container = ref(null)
 
 const urediPojem = async () => {
@@ -33,12 +32,8 @@ onMounted(() => {
   // Link na pojem direktno? Poskrolaj nanj + odpri editiranje
   if (route.params.guid === revisionId.value) {
     urejanje.value = true
-    //const element = document.getElementById("pojem-obrazec")
+    window.container = container
-    //if (document.offsetWidth > 768) {
+    setTimeout(() => window.container.value.scrollIntoView(), 50)
-    setTimeout(() => container.value.scrollIntoView({
-      behavior: 'smooth'
-    }), 50)
-    //}
   }
 })
 
@@ -63,6 +58,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;
@@ -73,10 +82,17 @@ onMounted(() => {
     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) {