Vizualno pedenanje, preimenovanje route manifesta, pogled posameznih
pojmovpull/41/head
parent
f775e7131f
commit
7b20d666b3
10
nuxt/app.vue
10
nuxt/app.vue
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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%;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
|
@ -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'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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()
|
|
@ -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>
|
|
@ -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 |
|
@ -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,
|
||||||
|
|
Loading…
Reference in New Issue