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

oblikovanje pojma in mobilni stili.

pull/41/head
janko 2024-01-19 12:42:02 +01:00
parent b93989ad1b
commit a43967d5bd
3 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
nuxt/app.vue
View File

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

19
nuxt/components/Pojem.vue
View File

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

12
nuxt/components/PojemForm.vue
View File

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