Vizualno pedenanje, preimenovanje route manifesta, pogled posameznih

pojmov
pull/42/head
Jurij Podgoršek 2024-01-24 16:44:09 +01:00 committed by Lio Novelli
parent ddcd40b56b
commit 7f57bce85f
13 changed files with 158 additions and 93 deletions

View File

@ -26,6 +26,10 @@
background: var(--siva); background: var(--siva);
} }
a {
color: var(--crna);
}
h1 { h1 {
text-align: center; text-align: center;
font-size: 5rem; font-size: 5rem;
@ -46,7 +50,6 @@
a.gumb { a.gumb {
text-decoration: underline; text-decoration: underline;
font-size: 3rem; font-size: 3rem;
color: var(--crna);
position: relative; position: relative;
display: flex; display: flex;
width: 100%; width: 100%;
@ -85,6 +88,7 @@
.navodila { .navodila {
padding-left: 2rem; padding-left: 2rem;
padding-right: 2rem; padding-right: 2rem;
text-align: center;
} }
footer { footer {
@ -93,7 +97,7 @@
} }
@media screen and (max-width: 325px) { @media screen and (max-width: 420px) {
.vsebina { .vsebina {
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;
@ -103,7 +107,7 @@
} }
} }
section.pojem { .okvir {
position: relative; position: relative;
background: var(--bela); background: var(--bela);
margin: 2rem; margin: 2rem;

View File

@ -2,21 +2,34 @@
const route = useRoute() const route = useRoute()
const pot = computed(() => route.path) const pot = computed(() => route.path)
const naManifestu = computed(() => route.path.indexOf('/pojmi') === 0) const naManifestu = computed(() => route.path.indexOf('/manifest') === 0)
</script> </script>
<template> <template>
<section class="glava" :class="{ manifest: naManifestu }"> <section class="glava" :class="{ manifest: naManifestu }">
<ul class="meni"> <ul class="meni">
<li><NuxtLink to="/">Domov</NuxtLink></li> <li>
<li><NuxtLink to="/pojmi">Manifest</NuxtLink></li> <NuxtLink to="/">
<li><NuxtLink to="https://yugofuturism.kompot.si/user" target="_blank">admin</NuxtLink></li> Domov
</ul> </NuxtLink>
<img src="/images/zvezda.png"> </li>
<li>
<NuxtLink to="/manifest">
Manifest
</NuxtLink>
</li>
<li>
<NuxtLink to="https://yugofuturism.kompot.si/user" target="_blank">
admin
</NuxtLink>
</li>
</ul>
<h1 v-if="naManifestu">MANIFEST</h1> <img src="/images/zvezda.png">
<h1 v-else>JUGOFUTURIZEM</h1>
</section> <h1 v-if="naManifestu">MANIFEST</h1>
<h1 v-else>JUGOFUTURIZEM</h1>
</section>
</template> </template>
<style scoped> <style scoped>
@ -103,4 +116,14 @@ ul {
} }
} }
@media screen and (min-width: 768px) {
.glava img {
width: 768px;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
</style> </style>

View File

@ -8,37 +8,40 @@ const naManifestu = computed(() => route.path.indexOf('/pojmi') === 0)
<template> <template>
<section class="noga"> <section class="noga">
<div class="maska"> <div class="maska">
<a href="maska.si"> <a href="https://maska.si" target="_blank">
<img src="/images/maska-logo.svg" /> <img src="/images/maska-logo.svg" />
</a> </a>
</div> </div>
<div class="kompot"> <div class="kompot">
<p> <p>
2024 <a href="kompot.si">Kompot</a> <a href="https://kompot.si" target="_blank">
<img src="/images/kompot_sm.png">
2024
Kompot
</a>
</p> </p>
</div> </div>
<div class="eu-projekti"> <div class="eu-projekti">
<div class="eu-projekti-logos"> <div class="eu-projekti-logos">
<img src="/images/peripheralvisions.svg" /> <img src="/images/peripheralvisions.png" />
<img src="/images/eu-logo.svg" /> <img src="/images/eu-logo.svg" />
</div> </div>
<p>Funded by the European Union. Views and opinions expressed are however those of the author(s) only and do not necessarily reflect those of the European Union or European Education and Culture Executive Agency (EACEA). Neither the European Union nor the granting authority can be held responsible for them.</p> <p>Funded by the European Union. Views and opinions expressed are however those of the author(s) only and do not necessarily reflect those of the European Union or European Education and Culture Executive Agency (EACEA). Neither the European Union nor the granting authority can be held responsible for them.</p>
</div> </div>
</section> </section>
</template> </template>
<style scoped> <style scoped>
.noga { .noga {
height: fit-content; background-color: black;
background-color: black; z-index: 100;
z-index: 100; display: flex;
display: flex; flex-direction: row;
flex-direction: row; justify-content: space-around;
justify-content: space-around; align-content: center;
align-content: center; flex-wrap: wrap;
flex-wrap: wrap; padding: 2rem;
padding: 2rem; align-content: center;
} }
p, a { p, a {
@ -46,6 +49,11 @@ p, a {
text-decoration: none; text-decoration: none;
} }
a {
margin-left: auto;
margin-right: auto;
}
.noga > div { .noga > div {
position: relative; position: relative;
display: block; display: block;
@ -59,6 +67,7 @@ p, a {
img { img {
width: 100%; width: 100%;
height: auto; height: auto;
max-width: 300px;
} }
.eu-projekti { .eu-projekti {
@ -71,6 +80,12 @@ img {
} }
a {
display: flex;
flex-direction: column;
align-items: center;
}
.eu-projekti-logos { .eu-projekti-logos {
position: relative; position: relative;
width: 100%; width: 100%;

View File

@ -10,11 +10,13 @@ const props = defineProps({
naslov: String naslov: String
}) })
if (props.naslov && !(props.naslov in store.pojmi)) {
await store.naloziPojme()
}
const pojem = computed(() => store.pojmi[props.naslov]) const pojem = computed(() => store.pojmi[props.naslov])
const revisionId = computed(() => pojem.value.id) const revisionId = computed(() => pojem.value.id)
await store.naloziPojme()
const urejanje = ref(false) const urejanje = ref(false)
const container = ref(null) const container = ref(null)
@ -29,88 +31,71 @@ const urediPojem = async () => {
} }
onMounted(() => { onMounted(() => {
// Link na pojem direktno? Poskrolaj nanj + odpri editiranje // Link na editiranje pojma? Poskrolaj nanj + odpri editiranje
if (route.params.guid === revisionId.value) { if (route.params.guid === revisionId.value) {
urejanje.value = true urejanje.value = true
window.container = container setTimeout(() => obrazec.value.scrollIntoView({ behavior: 'smooth' }), 50)
setTimeout(() => window.container.value.scrollIntoView(), 50) } else {
// Sicer samo poskrolaj na pojem
setTimeout(() => container.value.scrollIntoView({ behavior: 'smooth' }), 50)
} }
}) })
</script> </script>
<template> <template>
<section class="pojem" ref="container"> <section ref="container">
<div> <div v-if="!urejanje" class="gumb" @click="urediPojem">Uredi</div>
<h2>{{ pojem.naslov }}</h2> <div v-if="pojem" class="pojem">
<h2>{{ pojem }}</h2>
<div class="tekst" v-html="pojem.tekst" /> <div class="tekst" v-html="pojem.tekst" />
</div> </div>
<PojemForm v-if="urejanje" <PojemForm v-if="urejanje"
ref="obrazec"
:revisionId="revisionId" :revisionId="revisionId"
:pojem="pojem" :pojem="pojem"
:urejanje="urejanje" :urejanje="urejanje"
:onZapri="() => { urejanje = false; store.naloziPojme()}" :onZapri="() => { urejanje = false; store.naloziPojme()}"
/> />
<div>
<div v-if="!urejanje" class="gumb" @click="urediPojem">Uredi</div>
</div>
</section> </section>
</template> </template>
<style scoped> <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 { .pojem {
width: calc(50% - 32px);
margin-left: 32px;
gap: 1rem;
}
.pojem > div {
position: relative; position: relative;
width: 50%; width: 50%;
float: left;
} }
h2 { h2 {
text-transform: uppercase; text-transform: uppercase;
margin-top: 0; margin-top: 0;
} }
form.pojem {
width: calc(50% - 32px);
margin-left: 32px;
gap: 1rem;
float: right;
}
.gumb { .gumb {
position: absolute; position: sticky;
bottom: 0; top: 0;
right: 0; right: 0;
text-decoration: underline; float: right;
font-size: 3rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
PojemForm { .pojem {
width: 50%;
float: right;
}
.pojem > div {
min-height: 4rem; min-height: 4rem;
width: 100%; width: 100%;
} }
}
@media screen and (max-width: 768px) { form.pojem {
form.pojem { margin-left: 0;
width: 100%; min-height: 70vh;
margin-left: 0;
min-height: 70vh;
} }
} }
</style> </style>

View File

@ -30,9 +30,9 @@ const oddajPredlog = async data => {
// @TODO tole raje v pojmi.vue oz nov_pojem.vue - page! // @TODO tole raje v pojmi.vue oz nov_pojem.vue - page!
const etherNalozen = ev => { const etherNalozen = ev => {
if (props.pojem.nov) { if (props.pojem.nov) {
navigateTo('/nov_pojem/' + props.revisionId) navigateTo('/manifest/dodaj/' + props.revisionId)
} else { } else {
navigateTo('/pojmi/' + props.revisionId) navigateTo('/manifest/' + props.revisionId)
} }
//window.location.hash = props.revisionId //window.location.hash = props.revisionId
} }

View File

@ -0,0 +1,10 @@
import * as cryptoServer from 'crypto'
export const useCrypto = () => {
return {
getRandomUUID: () => (typeof window === 'undefined')
? cryptoServer.randomBytes(16).toString('hex') // Server code
: crypto.randomUUID() // Browser code
}
}

View File

@ -41,13 +41,17 @@ export default defineNuxtConfig({
hooks: { hooks: {
'pages:extend' (pages) { 'pages:extend' (pages) {
pages.push({ pages.push({
name: 'pojem', name: 'poglej_pojem',
path: '/pojmi/:guid', path: '/manifest/:naslov',
file: '~/pages/pojmi.vue' file: '~/pages/manifest/pojem.vue'
}, {
name: 'uredi_pojem',
path: '/manifest/:naslov/uredi/:guid',
file: '~/pages/manifest/pojem.vue'
}, { }, {
name: 'nov_pojem_guid', name: 'nov_pojem_guid',
path: '/nov_pojem/:guid', path: '/manifest/dodaj/:guid',
file: '~/pages/nov_pojem.vue' file: '~/pages/manifest/dodaj.vue'
}) })
} }
} }

View File

@ -1,9 +1,6 @@
<script setup="setup"> <script setup="setup">
import * as cryptoServer from 'crypto' const { getRandomUUID } = useCrypto()
const getRandomUUID = () => (typeof window === 'undefined')
? cryptoServer.randomBytes(16).toString('hex')
: crypto.randomUUID()
const { etherpadApiUrl } = useEtherpadApi() const { etherpadApiUrl } = useEtherpadApi()
const route = useRoute() const route = useRoute()

View File

@ -10,15 +10,20 @@ await store.naloziPojme()
<NuxtLink class="gumb" to="/nov_pojem"> <NuxtLink class="gumb" to="/nov_pojem">
Dodaj Nov Pojem Dodaj Nov Pojem
</NuxtLink> </NuxtLink>
<Pojem <NuxtLink
v-for="pojem in Object.keys(store.pojmi)" v-for="pojem in Object.keys(store.pojmi)"
:naslov="pojem" :naslov="pojem"
:key="store.pojmi[pojem].id" /> :to="`/manifest/${pojem}`"
class="okvir">
<h2>{{ pojem }}</h2>
</NuxtLink>
</template> </template>
<style scoped> <style scoped>
DodajPojem { a {
float: right clear: both;
}
h2 {
margin-bottom: 0;
} }
</style> </style>

View File

@ -0,0 +1,22 @@
<script setup="setup">
const { etherpadApiUrl } = useEtherpadApi()
const { naslov, guid } = useRoute().params
const { getRandomUUID } = useCrypto()
const revisionId = ref(null)
revisionId.value = guid ?? getRandomUUID()
// Ustvari nov, prazen pad
// @TODO parameter za seranje linka?
const padId = revisionId.value
const resp = await $fetch(`${etherpadApiUrl}/createPad?padID=${padId}`)
</script>
<template>
<div class="okvir">
<Pojem :naslov="naslov" />
</div>
</template>

Binary file not shown.

After

Width:  |  Height:  |  Size: 384 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

View File

@ -6,7 +6,7 @@ export const usePojmiStore = defineStore('pojmi', {
async naloziPojme() { async naloziPojme() {
const { jsonApiUrl, headers, deserialize } = useApi() const { jsonApiUrl, headers, deserialize } = useApi()
const data = await $fetch(`${jsonApiUrl}/node/concept?sort=created`, { headers }) const data = await $fetch(`${jsonApiUrl}/node/concept?sort=-changed`, { headers })
this.pojmi = await deserialize(data, s => ({ this.pojmi = await deserialize(data, s => ({
id: s.id, id: s.id,
naslov: s.title, naslov: s.title,