frontend: add shadcn vue, replace custom css with tailwind

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

summer2024-frontend/src/components/PostComponent.vue

@@ -14,36 +14,40 @@ const postActionBtn = ref(null)
 function postDataToggle() {
   if (postDataVisible.value) {
     for (const data of postData.value) {
-      data.classList.remove('post-data-visible')
+      data.classList.remove('backdrop-blur-sm');
+      data.classList.remove('bg-gray-400/10');
+      data.classList.add('bg-gray-400/0');
     }
     for (const title of postDataTitle.value) {
-      title.style.display = 'none'
+      title.classList.add("opacity-0");
     }
     for (const desc of postDataDescription.value) {
-      desc.style.display = 'none'
+      desc.classList.add("opacity-0");
     }
     for (const btn of postActionBtn.value) {
-      btn.style.top = 'auto'
-      btn.style.right = 'auto'
-      btn.style.left = '0'
-      btn.style.bottom = '0'
+      btn.classList.remove("top-0");
+      btn.classList.remove("right-0");
+      btn.classList.add("left-0");
+      btn.classList.add("bottom-0");
     }
     postDataVisible.value = false
   } else {
     for (const data of postData.value) {
-      data.classList.add('post-data-visible')
+      data.classList.add('backdrop-blur-sm');
+      data.classList.add('bg-gray-400/10');
+      data.classList.remove('bg-gray-400/0');
     }
     for (const title of postDataTitle.value) {
-      title.style.display = 'block'
+      title.classList.remove("opacity-0");
     }
     for (const desc of postDataDescription.value) {
-      desc.style.display = 'block'
+      desc.classList.remove("opacity-0");
     }
     for (const btn of postActionBtn.value) {
-      btn.style.top = '0'
-      btn.style.right = '0'
-      btn.style.left = 'auto'
-      btn.style.bottom = 'auto'
+      btn.classList.add("top-0");
+      btn.classList.add("right-0");
+      btn.classList.remove("left-0");
+      btn.classList.remove("bottom-0");
     }
     postDataVisible.value = true
   }
@@ -51,19 +55,24 @@ function postDataToggle() {
 </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">
+  <div class="section relative overflow-hidden" ref="section" :data-anchor="'post-' + post.id">
+    <div class="slide relative overflow-hidden" v-for="asset in post.assets" :key="asset">
+      <img class="absolute top-0 left-0 w-full h-full object-cover -z-10" :src="asset" />
+      <div class="grid grid-cols-3 grid-rows-5 absolute w-full h-full top-0 left-0 pointer-events-none">
+        <div ref="postData" class="col-start-1 col-span-3 lg:col-span-1 row-start-4 row-span-2 self-end place-self-stretch m-6 p-2 bg-gray-400/10 backdrop-blur-sm rounded-lg pointer-events-auto transition-colors duration-500">
+          <div class="absolute top-0 right-0 m-2 p-2 backdrop-blur-sm rounded-sm bg-black/10 hover:bg-black/20 cursor-pointer transition-colors duration-200 opacity-100" 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>
+          <h2
+            ref="postDataTitle"
+            class="mx-2 scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-opacity duration-500 mt-1"
+          >
+            {{ post.location.city }}, {{ post.location.country }}
+          </h2>
           <div
             ref="postDataDescription"
-            class="post-data-description scrollable-element"
+            class="m-2 scrollable-element max-h-48 overflow-y-scroll transition-opacity duration-500"
             v-html="post.formatedDescription"
           ></div>
         </div>
@@ -73,84 +82,4 @@ function postDataToggle() {
 </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>