Merge pull request 'pojem-mobile-css' (#41) from pojem-mobile-css into master

Reviewed-on: #41
pull/54/head
Jan Kostanjevec 2024-03-05 14:36:54 +01:00
commit ce05befebe
24 changed files with 515 additions and 150 deletions

View File

@ -1,3 +1,3 @@
_core:
default_config_hash: 2OMXCScXUOLSYID9-phjO4q36nnnaMWNUlDxEqZzG1U
use_admin_theme: false
use_admin_theme: true

View File

@ -8,7 +8,7 @@ dependencies:
_core:
default_config_hash: 12Bd0mJQFIaXAkRfMVCAAcZ0oaxm94PoK8oHR9hkLmY
id: content
label: Sadržaj
label: Vsebine
module: node
description: 'Find and manage content.'
tag: default

View File

@ -4,6 +4,9 @@
<div class="vsebina">
<NuxtPage />
</div>
<footer>
<Noga />
</footer>
</section>
</template>
@ -12,6 +15,7 @@
:root {
--siva: #D9D9D9;
--bela: #fff;
--crna: #000;
--rdeca: #f00;
--roza: #ED008C;
}
@ -22,18 +26,36 @@
background: var(--siva);
}
a {
color: var(--crna);
}
h1 {
text-align: center;
font-size: 5rem;
margin: .2rem 0 1rem 0;
}
h2 {
text-transform: uppercase;
margin-top: 0;
}
.vsebina {
position: relative;
z-index: 50;
padding: 0 32px;
}
a.gumb {
text-decoration: underline;
font-size: 3rem;
position: relative;
display: flex;
width: 100%;
justify-content: center;
}
.stran {
position: relative;
background: var(--bela);
@ -63,4 +85,33 @@
width: fit-content;
}
footer {
position: relative;
z-index: 100;
}
@media screen and (max-width: 420px) {
.vsebina {
padding-right: 0;
padding-left: 0;
}
.stran {
margin: 0;
}
}
.okvir {
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;
}
</style>

View File

@ -1,28 +0,0 @@
<script setup="setup">
const { etherpadApiUrl } = useEtherpadApi()
const prikazi = ref(false)
const revisionId = ref(null)
const dodajPojem = async () => {
revisionId.value = crypto.randomUUID()
// Ustvari nov, prazen pad
const padId = revisionId.value
const resp = await $fetch(`${etherpadApiUrl}/createPad?padID=${padId}`)
prikazi.value = true
}
</script>
<template>
<div>
<div class="gumb" @click="dodajPojem()">
Dodaj pojem
</div>
<section class="pojem" v-if="prikazi">
<PojemForm :pojem="{}" :revisionId="revisionId" />
</section>
</div>
</template>

View File

@ -1,17 +1,34 @@
<script setup="setup">
const route = useRoute()
const pot = computed(() => route.path)
const naManifestu = computed(() => route.path.indexOf('/pojmi') === 0)
const naManifestu = computed(() => route.path.indexOf('/manifest') === 0)
const { baseUrl } = useRuntimeConfig().public
</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="baseUrl + '/user'" class="posivljen" target="_blank">
admin
</NuxtLink>
</li>
</ul>
<img src="/images/zvezda.png">
<h1 v-if="naManifestu">MANIFEST</h1>
@ -49,13 +66,26 @@ h1 {
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
position: fixed;
top: -10vh;
left: -10vw;
width: 120vw;
height: 120vh;
z-index: 10;
object-fit: cover;
}
@media screen and (min-width: 1980px) {
img {
width: 100vw;
height: 100vh;
left: 0;
top: 0;
}
}
.meni {
position: absolute;
top: 0;
@ -82,6 +112,10 @@ ul {
width: 100%;
}
.posivljen {
opacity: 0.5;
}
@media screen and (max-width: 768px) {
.meni {
display: flex;
@ -90,4 +124,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

@ -0,0 +1,118 @@
<script setup="setup">
const route = useRoute()
const pot = computed(() => route.path)
const naManifestu = computed(() => route.path.indexOf('/pojmi') === 0)
</script>
<template>
<section class="noga">
<div class="maska">
<a href="https://maska.si" target="_blank">
<img src="/images/maska-logo.svg" />
</a>
</div>
<div class="kompot">
<p>
<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.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>
</div>
</section>
</template>
<style scoped>
.noga {
background-color: black;
z-index: 100;
display: flex;
flex-direction: row;
justify-content: space-around;
align-content: center;
flex-wrap: wrap;
padding: 2rem;
align-content: center;
}
p, a {
color: white;
text-decoration: none;
}
a {
margin-left: auto;
margin-right: auto;
}
.noga > div {
position: relative;
display: block;
height: 70%;
max-width: 30%;
margin-top: auto;
margin-bottom: auto;
min-height: 2rem;
height: fit-content;
}
img {
width: 100%;
height: auto;
max-width: 300px;
}
.eu-projekti {
padding: 1rem;
display: flex;
flex-direction: column;
background-color: #D9D9D9;
border-radius: 16px;
}
a {
display: flex;
flex-direction: column;
align-items: center;
}
.eu-projekti-logos {
position: relative;
width: 100%;
display: flex;
justify-content: space-between;
}
.eu-projekti-logos img {
max-width: 40%;
}
.eu-projekti p {
color: black;
}
@media screen and (max-width: 764px) {
.noga {
display: block;
}
.noga div {
max-width: 100%;
}
.kompot {
text-align: center;
}
}
</style>

View File

@ -10,13 +10,16 @@ const props = defineProps({
naslov: String
})
const pojem = computed(() => store.pojmi[props.naslov])
const revisionId = computed(() => pojem.value.id)
if (props.naslov && !(props.naslov in store.pojmi)) {
await store.naloziPojme()
}
const pojem = computed(() => store.pojmi[props.naslov])
const revisionId = computed(() => pojem.value ? pojem.value.id : null)
const urejanje = ref(false)
const container = ref(null)
const obrazec = ref(null)
const urediPojem = async () => {
// Ustvari pad s tekstom pojma, ce se ne obstaja
@ -29,86 +32,85 @@ const urediPojem = async () => {
}
onMounted(() => {
// Link na pojem direktno? Poskrolaj nanj + odpri editiranje
// Prazen pojem? Nazaj na manifest
if (!pojem.value.id) {
navigateTo('/manifest#skrol')
}
// Link na editiranje pojma? Poskrolaj nanj + odpri editiranje
if (route.params.guid === revisionId.value) {
urejanje.value = true
window.container = container
setTimeout(() => container.value.scrollIntoView(), 50)
setTimeout(() => obrazec.value.scrollIntoView({ behavior: 'smooth' }), 50)
} else {
// Sicer samo poskrolaj na pojem
setTimeout(() => {
const sekcija = container.value.parentNode
console.log('skrolam?', sekcija)
if (sekcija) {
sekcija.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>{{ naslov }}</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;
section {
width: 100%;
}
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: left;
}
.pojem > div {
.pojem {
min-height: 4rem;
width: 100%;
}
}
@media screen and (max-width: 325px) {
.pojem {
margin-right: 0;
form.pojem {
margin-left: 0;
min-height: 70vh;
width: 100%;
margin-left: 0;
}
}
</style>

View File

@ -7,7 +7,6 @@ const store = usePojmiStore()
const props = defineProps({
revisionId: String,
pojem: Object,
urejanje: Object,
onZapri: Function
})
@ -16,34 +15,63 @@ let email = ref('')
const oddajPredlog = async data => {
// @TODO vsebina pada v tekst, testirat
if (!naslov.value) {
alert("Manjka naslov pojma!")
return
}
const starNaslov = props.pojem.naslov
const resp = await etherFetch('/getText', { padID: props.revisionId })
store.ustvariPojem({
const stvarjenje = store.ustvariPojem({
title: naslov.value,
email: email.value,
text: resp.data.text,
uuid: props.revisionId
})
console.log(stvarjenje)
alert("sprememba predlagana!")
stvarjenje.then(() => {
console.log('NOV NASLOV?', starNaslov, props.pojem.naslov)
if (starNaslov !== props.pojem.naslov) {
navigateTo('/manifest/' + encodeURIComponent(props.pojem.naslov))
}
})
props.onZapri()
}
// @TODO tole raje v pojmi.vue oz nov_pojem.vue - page!
const etherNalozen = ev => {
navigateTo('/pojmi/' + props.revisionId)
if (props.pojem.nov) {
navigateTo('/manifest/dodaj/' + props.revisionId, {
replace: true
})
} else {
navigateTo('/manifest/' + encodeURIComponent(props.pojem.naslov) + '/uredi/' + props.revisionId, {
replace: true
})
}
//window.location.hash = props.revisionId
}
</script>
<template>
<form class="pojem" @submit.prevent="oddajPredlog">
<input name="naslov" type="text" v-model="naslov">
<form class="pojem" @submit.prevent>
<input name="naslov" type="text" placeholder="Naslov" v-model="naslov">
<EtherpadTextarea :onLoad="etherNalozen" :revisionId="props.revisionId" />
<input name="email" type="email" placeholder="E-poštni naslov" v-model="email">
<div class="gumbi">
<button class="gumb" @click="props.onZapri">Zapri</button>
<input class="gumb" type="submit" value="Predlagaj">
<button class="gumb" @click="props.onZapri">
{{ props.zapriLabel ?? 'Zapri' }}
</button>
<button class="gumb oddaj" @click="oddajPredlog">
Predlagaj
</button>
</div>
</form>
@ -55,6 +83,8 @@ const etherNalozen = ev => {
flex-grow: 1;
border-radius: 16px;
border: 2px solid var(--siva);
box-sizing: border-box;
min-height: 500px;
}
input {
@ -68,12 +98,19 @@ input {
flex-direction: row;
justify-content: space-between;
}
.gumb,
.gumbi input,
.gumbi button {
text-transform: uppercase;
padding: 0;
margin: 0;
}
.pojem.form .gumb {
width: 50%;
}
.pojem input[type=submit] {
.pojem button.oddaj {
color: var(--roza);
}

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,9 +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: '/manifest/dodaj/:guid',
file: '~/pages/manifest/dodaj.vue'
})
}
}

View File

@ -0,0 +1,47 @@
<script setup="setup">
const { getRandomUUID } = useCrypto()
const { etherpadApiUrl } = useEtherpadApi()
const route = useRoute()
const revisionId = ref(null)
const obrazec = ref(null)
revisionId.value = route.params.guid ? route.params.guid : getRandomUUID()
// Ustvari nov, prazen pad
// @TODO parameter za seranje linka?
const padId = revisionId.value
const resp = await $fetch(`${etherpadApiUrl}/createPad?padID=${padId}`)
const onZapri = () => { navigateTo('/manifest#skrol') }
onMounted(() => {
setTimeout(() => {
console.log('element?', obrazec.value)
debugger
obrazec.value.scrollIntoView({ behavior: 'smooth' })
}, 50)
})
</script>
<template>
<section class="okvir" ref="obrazec">
<PojemForm
:pojem="{ nov: true }"
:revisionId="revisionId"
zapriLabel="Nazaj"
:onZapri="onZapri" />
</section>
</template>
<style scoped>
section.okvir {
max-width: 608px;
}
form.pojem {
width: 100%;
}
</style>

View File

@ -0,0 +1,45 @@
<script setup="setup">
const store = usePojmiStore()
await store.naloziPojme()
const navodila = ref(null)
onMounted(() => {
if (location && location.hash == '#skrol') {
setTimeout(() => {
navodila.value.scrollIntoView({ behavior: 'smooth' })
}, 50)
}
})
</script>
<template>
<h3 class="navodila" ref="navodila">Vsak lahko prispeva k vsebinam manifesta. Predlaga lahko nov pojem ali ureja, dopolni ali predela obstoječe.</h3>
<NuxtLink class="gumb" to="/manifest/dodaj">
Dodaj Nov Pojem
</NuxtLink>
<NuxtLink
v-for="pojem in Object.keys(store.pojmi)"
:naslov="pojem"
:to="`/manifest/${encodeURIComponent(pojem)}`"
class="okvir">
<h2>{{ pojem }}</h2>
</NuxtLink>
</template>
<style scoped>
a {
clear: both;
}
h2 {
margin-bottom: 0;
}
.navodila {
padding-left: 2rem;
padding-right: 2rem;
text-align: center;
}
</style>

View File

@ -0,0 +1,30 @@
<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>
<NuxtLink class="gumb" to="/manifest#skrol">
Manifest
</NuxtLink>
<br>
<br>
</template>

View File

@ -1,25 +0,0 @@
<script setup="setup">
const store = usePojmiStore()
await store.naloziPojme()
</script>
<template>
<DodajPojem />
<!--
<Pojem naslov="Yugofuturist manifesto" />
<Pojem naslov="Jadran potem" />
<Pojem naslov="JUGA 2023" />
-->
<Pojem
v-for="pojem in Object.keys(store.pojmi)"
:naslov="pojem"
:key="store.pojmi[pojem].id" />
</template>
<style scoped>
DodajPojem {
float: right
}
</style>

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 384 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 498 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 68 KiB

View File

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

View File

@ -1,4 +1,4 @@
etherpad_api.example:
etherpad_api.proxy:
path: '/etherpad-api/{components}'
defaults:
_title: 'Etherpad API'

View File

@ -17,13 +17,6 @@ class Client {
*/
protected $httpClient;
/**
* The config.
*
* @var \Drupal\Core\Config\ImmutableConfig
*/
protected $config;
protected $apiKey = null;
protected $baseUrl = null;
@ -40,11 +33,11 @@ class Client {
*/
public function __construct(ClientInterface $httpClient, ImmutableConfig $config) {
$this->httpClient = $httpClient;
$this->config = $config;
$this->baseUrl = $config->get('url') ? rtrim($config->get('url'), '/') : null;
$this->apiKey = $config->get('key');
}
/* Preveri veljavnost tokena-a s klicom na etherpadov api. */
public function checkToken() {
if ($this->baseUrl) {
return $this->request('checkToken');
@ -53,7 +46,8 @@ class Client {
}
/**
* Method description.
* Poizvedi na etherpadov API. Doda baseURL in verzijo pred zeljen url, doda
* API ključ in uredi parametre. Vendo je POST!
*/
public function request($url, $opts = []) {
$uri = "{$this->baseUrl}/" . self::API_VERSION . '/' . explode('?', $url)[0];

View File

@ -36,6 +36,8 @@ class EtherpadApiController extends ControllerBase {
$data = array_merge($request->query->all(), $request->request->all());
if ($data['padID']) {
// @TODO prefix v config!
// Zahtevnejše ampak lepše bi bilo pa uporabit group API:
// https://etherpad.org/doc/v1.8.4/#index_creategroup
$data['padID'] = 'yufu-' . $data['padID'];
}
$opts = ['form_params' => $data];

View File

@ -206,14 +206,14 @@ parameters:
# for more information about the topic in general.
# Note: By default the configuration is disabled.
cors.config:
enabled: false
enabled: true
# Specify allowed headers, like 'x-allowed-header'.
allowedHeaders: []
# Specify allowed request methods, specify ['*'] to allow all possible ones.
allowedMethods: []
# Configure requests allowed from specific origins. Do not include trailing
# slashes with URLs.
allowedOrigins: ['*']
allowedOrigins: ['yufu.kompot.si', 'localhost']
# Sets the Access-Control-Expose-Headers header.
exposedHeaders: false
# Sets the Access-Control-Max-Age header.