Merge pull request #193 from benoitdemaegdt/feat_news-banner

Ajout d'une bannière de news
benoitdemaegdt · Nov 5, 2023 · 6201e03 · 6201e03
2 parents 363e3cd + a82b5e9
commit 6201e03
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 10 deletions.
diff --git a/components/NewsBanner.vue b/components/NewsBanner.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="relative isolate flex items-center gap-x-6 overflow-hidden bg-lvv-blue-100 px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
+    <div class="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl" aria-hidden="true">
+      <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#C84271] to-[#9089fc] opacity-70" style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)" />
+    </div>
+    <div class="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl" aria-hidden="true">
+      <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30" style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)" />
+    </div>
+    <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
+      <div class="text-sm leading-6 text-gray-900">
+        <strong class="font-semibold">3 nov. 2023</strong><svg viewBox="0 0 2 2" class="mx-2 inline h-0.5 w-0.5 fill-current" aria-hidden="true"><circle cx="1" cy="1" r="1" /></svg>
+      </div>
+      <div>
+        Un tronçon de la Voie Lyonnaise 2 terminé !
+      </div>
+      <NuxtLink to="/historique" class="flex-none text-lvv-blue-600 py-1 text-sm font-semibold hover:underline">
+        Lire l'annonce <span aria-hidden="true">&rarr;</span>
+      </NuxtLink>
+    </div>
+    <div class="flex flex-1 justify-end">
+      <button type="button" class="-m-3 p-3 focus-visible:outline-offset-[-4px]" @click="close">
+        <span class="sr-only">Dismiss</span>
+        <Icon name="mdi:close" class="h-5 w-5" aria-hidden="true" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(['close']);
+function close() {
+  emit('close');
+}
+</script>
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,7 +1,34 @@
 <template>
   <div>
+    <NewsBanner v-if="!isNewsBannerClosed" @close="closeNewsBanner" />
     <AppHeader class="sticky top-0" />
     <slot />
     <AppFooter />
   </div>
 </template>
+
+<script setup>
+const isNewsBannerClosed = ref(false);
+
+onMounted(() => {
+  // if the banner was closed more than 7 days ago, show it again
+  const newsBannerClosedAt = localStorage.getItem('newsBannerClosedAt');
+  if (newsBannerClosedAt) {
+    const newsBannerClosedAtDate = new Date(newsBannerClosedAt);
+    const now = new Date();
+    const diffInMilliseconds = now - newsBannerClosedAtDate;
+    const diffInHours = diffInMilliseconds / (1000 * 60 * 60);
+    if (diffInHours > 24 * 7) {
+      localStorage.removeItem('isNewsBannerClosed');
+      localStorage.removeItem('newsBannerClosedAt');
+    }
+  }
+  isNewsBannerClosed.value = localStorage.getItem('isNewsBannerClosed') === 'true';
+});
+
+function closeNewsBanner() {
+  isNewsBannerClosed.value = true;
+  localStorage.setItem('isNewsBannerClosed', 'true');
+  localStorage.setItem('newsBannerClosedAt', new Date().toISOString());
+}
+</script>
diff --git a/pages/historique.vue b/pages/historique.vue
@@ -21,15 +21,14 @@
           <div class="max-w-none prose-h3:mb-4 prose prose-lg text-gray-500">
             <h3>Elargissement des couloirs bus sur le boulevard des Belges entre la rue Waldeck Rousseau et le rue Fournet</h3>
             <p>Comme annoncé lors de la concertation du tronçon central de la <b>Voie Lyonnaise 2</b>, la Métropole a procédé a l'élargissement des couloirs bus sur le boulevard des Belges en réduisant la circulation automobile sur une seule voie. Les travaux de marquage ont été réalisés pendant les vacances scolaires de la Toussaint.</p>
-              <a href="https://www.grandlyon.com/fileadmin/user_upload/media/pdf/grands-projets/concertation-reglementaire/20220601_voieslyonnaises_ligne2_dossier-concertation.pdf" target="_blank">Voir le dossier de concertation (p19)<br></a>
-
+            <a href="https://www.grandlyon.com/fileadmin/user_upload/media/pdf/grands-projets/concertation-reglementaire/20220601_voieslyonnaises_ligne2_dossier-concertation.pdf" target="_blank">Voir le dossier de concertation (p19)<br></a>
             <NuxtLink to="/voie-lyonnaise-2">
               Voir le détail de la Voie Lyonnaise 2
             </NuxtLink>
           </div>
         </div>
       </section>
-      
+
       <section class="md:flex">
         <h2 class="pl-7 prose prose-lg text-gray-500 md:w-1/4 md:pl-0 md:pr-12 md:text-right">
           16 octobre 2023
@@ -42,14 +41,14 @@
             <p>Dans la concertation de mars-avril 2023 sur le tronçon Tassin - Lyon 5 de la Voie Lyonnaise 8, la Métropole proposait 2 variantes pour relier l'Avenue de la République et l'Avenue Victor Hugo.</p>
             <p>
               <a href="https://jeparticipe.grandlyon.com/media/default/0001/01/bd50d56d86221d7c4daf56f310abe3cb77aff211.pdf" target="_blank">Voir le dossier de concertation (p18)</a>
-            </p>            
+            </p>
             <p>Lors de la commission permanente du 16 octobre 2023, la Métropole a finalement validé la variante par l'avenue Vincent Serre.</p>
             <p>
               <a href="https://agora.grandlyon.com/portail/jsp/openfile.jsp?pdf=A9iCZwGvgK5FubNtu322bcS53GS0sK4fqUNzpPiImFcNNkx%2BTqSn6NcCoEvAfojpQXos53usMrkPJoSRf%2FIaOpbByk853Y1HvC8f5zVB7%2BI2fdWBM0KS7G%2Bc3TocC2uS" target="_blank">Voir la délibération de la commission permanente du 16 octobre 2023<br></a>
-            
-            <NuxtLink to="/voie-lyonnaise-8">
-              Voir le détail de la Voie Lyonnaise 8
-            </NuxtLink>
+
+              <NuxtLink to="/voie-lyonnaise-8">
+                Voir le détail de la Voie Lyonnaise 8
+              </NuxtLink>
             </p>
           </div>
         </div>
@@ -70,7 +69,7 @@
               <li>Sur la Voie Lyonnaise 7 : l'absence de modification de l'existant sur le pont Churchill et l'avenue Garibaldi au sud de la rue Vauban, ainsi que le report de l'aménagement du boulevard des Belges à l'Ouest de Garibaldi</li>
               <li>Sur la Voie Lyonnaise 8 : le report de l'aménagement de la traversée de Perrache entrainant la déviation de la ligne en tronçon commun avec la VL12 pour traverser la Presqu'île, ainsi que le report de l'aménagement de la rue Marius Berliet et de l'avenue Mermoz le long de T6</li>
             </ul>
-            
+
             <NuxtLink to="/voie-lyonnaise-4">
               Voir le détail de la Voie Lyonnaise 4<br>
             </NuxtLink>
@@ -83,7 +82,7 @@
           </div>
         </div>
       </section>
-      
+
       <section class="md:flex">
         <h2 class="pl-7 prose prose-lg text-gray-500 md:w-1/4 md:pl-0 md:pr-12 md:text-right">
           2 octobre 2023