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

Reviewed-on: #41

config/sync/node.settings.yml

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

config/sync/views.view.content.yml

@@ -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

nuxt/app.vue

@@ -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>

nuxt/components/DodajPojem.vue

@@ -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>

nuxt/components/Glava.vue

@@ -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>
-          <li><NuxtLink to="/pojmi">Manifest</NuxtLink></li>
+        <NuxtLink to="/">
-          <li><NuxtLink to="https://yugofuturism.kompot.si/user" target="_blank">admin</NuxtLink></li>
+          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;
+  position: fixed;
-  top: 0;
+  top: -10vh;
-  left: 0;
+  left: -10vw;
-  width: 100%;
+  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>

nuxt/components/Noga.vue

@@ -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>

nuxt/components/Pojem.vue

@@ -10,13 +10,16 @@ const props = defineProps({
   naslov: String
 })
 
-const pojem = computed(() => store.pojmi[props.naslov])
+if (props.naslov && !(props.naslov in store.pojmi)) {
-const revisionId = computed(() => pojem.value.id)
-
   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(() => obrazec.value.scrollIntoView({ behavior: 'smooth' }), 50)
-    setTimeout(() => container.value.scrollIntoView(), 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">
+  <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>{{ 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 {
+  section {
-    position: relative;
+    width: 100%;
-    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;
     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;
+    position: sticky;
-    bottom: 0;
+    top: 0;
     right: 0;
-    text-decoration: underline;
+    float: right;
-    font-size: 3rem;
   }
 
   @media screen and (max-width: 768px) {
-    PojemForm {
+    .pojem {
-      width: 50%;
-      float: left;
-    }
-    .pojem > div {
       min-height: 4rem;
       width: 100%;
     }
-  }
+
-  @media screen and (max-width: 325px) {
+    form.pojem {
-    .pojem {
+      margin-left: 0;
-      margin-right: 0;
+      min-height: 70vh;
+      width: 100%;
       margin-left: 0;
     }
   }
-
 </style>

nuxt/components/PojemForm.vue

@@ -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">
+  <form class="pojem" @submit.prevent>
-      <input name="naslov" type="text" v-model="naslov">
+    <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>
+      <button class="gumb" @click="props.onZapri">
-        <input class="gumb" type="submit" value="Predlagaj">
+        {{ 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);
 }
 

nuxt/composables/crypto.js

@@ -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
+  }
+}

nuxt/nuxt.config.js

@@ -41,9 +41,17 @@ export default defineNuxtConfig({
   hooks: {
     'pages:extend' (pages) {
       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',
+        path: '/manifest/dodaj/:guid',
+        file: '~/pages/manifest/dodaj.vue'
       })
     }
   }

nuxt/pages/manifest/dodaj.vue

@@ -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>

nuxt/pages/manifest/index.vue

@@ -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>

nuxt/pages/manifest/pojem.vue

@@ -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>

nuxt/pages/pojmi.vue

@@ -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>

nuxt/stores/pojmi.js

@@ -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')
     },

web/modules/custom/etherpad_api/etherpad_api.routing.yml

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

web/modules/custom/etherpad_api/src/Client.php

@@ -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];

web/modules/custom/etherpad_api/src/Controller/EtherpadApiController.php

@@ -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];

web/sites/default/default.services.yml

@@ -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.