Vizualno pedenanje, preimenovanje route manifesta, pogled posameznih

pojmov
pull/41/head
Jurij Podgoršek 2024-01-24 16:44:09 +01:00
parent f775e7131f
commit 7b20d666b3
13 changed files with 158 additions and 93 deletions

View File

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

View File

@ -2,16 +2,29 @@
const route = useRoute()
const pot = computed(() => route.path)
const naManifestu = computed(() => route.path.indexOf('/pojmi') === 0)
const naManifestu = computed(() => route.path.indexOf('/manifest') === 0)
</script>
<template>
<section class="glava" :class="{ manifest: naManifestu }">
<ul class="meni">
<li><NuxtLink to="/">Domov</NuxtLink></li>
<li><NuxtLink to="/pojmi">Manifest</NuxtLink></li>
<li><NuxtLink to="https://yugofuturism.kompot.si/user" target="_blank">admin</NuxtLink></li>
<li>
<NuxtLink to="/">
Domov
</NuxtLink>
</li>
<li>
<NuxtLink to="/manifest">
Manifest
</NuxtLink>
</li>
<li>
<NuxtLink to="https://yugofuturism.kompot.si/user" target="_blank">
admin
</NuxtLink>
</li>
</ul>
<img src="/images/zvezda.png">
<h1 v-if="naManifestu">MANIFEST</h1>
@ -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>

View File

@ -8,19 +8,22 @@ const naManifestu = computed(() => route.path.indexOf('/pojmi') === 0)
<template>
<section class="noga">
<div class="maska">
<a href="maska.si">
<a href="https://maska.si" target="_blank">
<img src="/images/maska-logo.svg" />
</a>
</div>
<div class="kompot">
<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>
</div>
<div class="eu-projekti">
<div class="eu-projekti-logos">
<img src="/images/peripheralvisions.svg" />
<img src="/images/peripheralvisions.png" />
<img src="/images/eu-logo.svg" />
</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>
@ -30,7 +33,6 @@ const naManifestu = computed(() => route.path.indexOf('/pojmi') === 0)
<style scoped>
.noga {
height: fit-content;
background-color: black;
z-index: 100;
display: flex;
@ -39,6 +41,7 @@ const naManifestu = computed(() => route.path.indexOf('/pojmi') === 0)
align-content: center;
flex-wrap: wrap;
padding: 2rem;
align-content: center;
}
p, a {
@ -46,6 +49,11 @@ p, a {
text-decoration: none;
}
a {
margin-left: auto;
margin-right: auto;
}
.noga > div {
position: relative;
display: block;
@ -59,6 +67,7 @@ p, a {
img {
width: 100%;
height: auto;
max-width: 300px;
}
.eu-projekti {
@ -71,6 +80,12 @@ img {
}
a {
display: flex;
flex-direction: column;
align-items: center;
}
.eu-projekti-logos {
position: relative;
width: 100%;

View File

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

View File

@ -30,9 +30,9 @@ const oddajPredlog = async data => {
// @TODO tole raje v pojmi.vue oz nov_pojem.vue - page!
const etherNalozen = ev => {
if (props.pojem.nov) {
navigateTo('/nov_pojem/' + props.revisionId)
navigateTo('/manifest/dodaj/' + props.revisionId)
} else {
navigateTo('/pojmi/' + props.revisionId)
navigateTo('/manifest/' + 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: {
'pages:extend' (pages) {
pages.push({
name: 'pojem',
path: '/pojmi/:guid',
file: '~/pages/pojmi.vue'
name: 'poglej_pojem',
path: '/manifest/:naslov',
file: '~/pages/manifest/pojem.vue'
}, {
name: 'uredi_pojem',
path: '/manifest/:naslov/uredi/:guid',
file: '~/pages/manifest/pojem.vue'
}, {
name: 'nov_pojem_guid',
path: '/nov_pojem/:guid',
file: '~/pages/nov_pojem.vue'
path: '/manifest/dodaj/:guid',
file: '~/pages/manifest/dodaj.vue'
})
}
}

View File

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

View File

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