frontend: initial commit

Signed-off-by: Nicolas Froger <nicolas@kektus.xyz>

summer2024-frontend/src/components/PostComponent.vue

@@ -0,0 +1,156 @@
+<script setup>
+import { ref } from 'vue'
+import { EyeOff, Info } from 'lucide-vue-next'
+
+defineProps(['post'])
+const section = ref(null)
+
+let postDataVisible = ref(true)
+const postData = ref(null)
+const postDataTitle = ref(null)
+const postDataDescription = ref(null)
+const postActionBtn = ref(null)
+
+function postDataToggle() {
+  if (postDataVisible.value) {
+    for (const data of postData.value) {
+      data.classList.remove('post-data-visible')
+    }
+    for (const title of postDataTitle.value) {
+      title.style.display = 'none'
+    }
+    for (const desc of postDataDescription.value) {
+      desc.style.display = 'none'
+    }
+    for (const btn of postActionBtn.value) {
+      btn.style.top = 'auto'
+      btn.style.right = 'auto'
+      btn.style.left = '0'
+      btn.style.bottom = '0'
+    }
+    postDataVisible.value = false
+  } else {
+    for (const data of postData.value) {
+      data.classList.add('post-data-visible')
+    }
+    for (const title of postDataTitle.value) {
+      title.style.display = 'block'
+    }
+    for (const desc of postDataDescription.value) {
+      desc.style.display = 'block'
+    }
+    for (const btn of postActionBtn.value) {
+      btn.style.top = '0'
+      btn.style.right = '0'
+      btn.style.left = 'auto'
+      btn.style.bottom = 'auto'
+    }
+    postDataVisible.value = true
+  }
+}
+</script>
+
+<template>
+  <div class="section" ref="section" :data-anchor="'post-' + post.id">
+    <div class="slide" v-for="asset in post.assets" :key="asset">
+      <img class="post-bg-media" :src="asset" />
+      <div class="post-container">
+        <div ref="postData" class="post-data post-data-visible">
+          <div class="post-action-btn" ref="postActionBtn" @click="postDataToggle">
+            <EyeOff v-if="postDataVisible" :size="20" />
+            <Info :size="20" v-else />
+          </div>
+          <h2 ref="postDataTitle">{{ post.location.city }}, {{ post.location.country }}</h2>
+          <div
+            ref="postDataDescription"
+            class="post-data-description scrollable-element"
+            v-html="post.formatedDescription"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.post-action-btn {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 10px;
+  padding: 5px;
+  backdrop-filter: blur(10px);
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.post-action-btn:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.section,
+.slide {
+  position: relative;
+  background-size: cover;
+  overflow: hidden;
+}
+
+.post-container {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  pointer-events: none;
+}
+
+.post-data-visible {
+  backdrop-filter: blur(3px);
+  background-color: rgba(205, 205, 205, 0.1);
+}
+
+.post-data {
+  grid-area: 3 / 1 / 4 / 2;
+  padding: 5px 20px;
+  margin: 30px;
+  border-radius: 6px;
+  pointer-events: auto;
+}
+
+@media screen and (max-width: 1024px) {
+  .post-data {
+    grid-area: 3 / 1 / 4 / 3;
+  }
+}
+@media screen and (max-width: 500px) {
+  .post-data {
+    grid-area: 3 / 1 / 4 / 4;
+    margin: 5px;
+  }
+}
+
+.post-data-description {
+  max-height: 200px;
+  overflow: scroll;
+}
+
+.post-bg-media {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  object-fit: cover;
+  z-index: -100;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+</style>

summer2024-frontend/src/components/WelcomeComponent.vue

@@ -0,0 +1,65 @@
+<script setup>
+
+import { usePostsStore } from '@/stores/posts.js'
+
+const postsStore = usePostsStore()
+</script>
+
+<template>
+  <div class="section" ref="section" data-anchor="welcome-section">
+    <div id="welcome-container">
+      <h3 class="welcome-content">3 semaines pour traverser 7 pays d'Europe en train</h3>
+      <div v-if="postsStore.posts.length > 0">
+        <p class="welcome-content">suivez mon voyage en naviguant vers le bas</p>
+        <div class="arrow" />
+      </div>
+      <div v-else>
+        <p>le contenu n'est pas encore disponible, revenez plus tard</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#welcome-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.welcome-content {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.arrow {
+  margin-top: 40px;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+  width: 1.5vw;
+  height: 1.5vw;
+  border-bottom: 5px solid white;
+  border-right: 5px solid white;
+  transform: rotate(45deg);
+  animation: arrowAnimation 3s infinite;
+}
+
+@keyframes arrowAnimation {
+  0% {
+    opacity: 0;
+    transform: rotate(45deg) translate(-20px, -20px);
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: rotate(45deg) translate(20px, 20px);
+  }
+}
+</style>