From 9a307cdcb2b988bca974d000538cad4637f8686b Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Wed, 17 Dec 2025 20:52:55 +0700
Subject: [PATCH] Improve mobile UX by hiding menu and showing dates inline
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hide the navigation menu on small screens (below lg breakpoint) to save space, and display relative dates directly in each post component for mobile users.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .../src/components/PostComponent.vue             | 16 +++++++++++-----
 summer2024-frontend/src/views/PostsView.vue      |  2 +-
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/summer2024-frontend/src/components/PostComponent.vue b/summer2024-frontend/src/components/PostComponent.vue
index 4789f4f..4702579 100644
--- a/summer2024-frontend/src/components/PostComponent.vue
+++ b/summer2024-frontend/src/components/PostComponent.vue
@@ -154,12 +154,18 @@ function scrollSlideToIndex(index) {
         style="text-shadow: black 0 0 7px"
       >
         <div class="flex flex-nowrap justify-between">
-          <h2
-            ref="postDataTitle"
-            class="mx-2 scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-opacity duration-500 mt-1"
+          <div
+              ref="postDataTitle"
           >
-            {{ post.city }}, {{ post.country }}
-          </h2>
+            <h2
+              class="mx-2 scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-opacity duration-500 mt-1"
+            >
+              {{ post.city }}, {{ post.country }}
+            </h2>
+            <p class="block lg:hidden mx-2 text-sm opacity-80 transition-opacity duration-500">
+              {{ post.formatedDate }}
+            </p>
+          </div>
           <div class="flex items-center">
             <div
               ref="postDataWeather"
diff --git a/summer2024-frontend/src/views/PostsView.vue b/summer2024-frontend/src/views/PostsView.vue
index e59f26f..54dc984 100644
--- a/summer2024-frontend/src/views/PostsView.vue
+++ b/summer2024-frontend/src/views/PostsView.vue
@@ -199,7 +199,7 @@ function onLeave(origin, destination) {
   >
     <ul
       id="menu"
-      class="col-start-1 col-span-full row-start-1 max-h-32 lg:max-h-52 h-fit mt-28 sm:mt-16 lg:m-0 lg:col-start-5 lg:col-span-1 lg:row-start-3 lg:row-span-1 pointer-events-auto overflow-y-scroll overscroll-y-contain transition-opacity duration-1000 opacity-0"
+      class="hidden lg:block col-start-1 col-span-full row-start-1 max-h-32 lg:max-h-52 h-fit mt-28 sm:mt-16 lg:m-0 lg:col-start-5 lg:col-span-1 lg:row-start-3 lg:row-span-1 pointer-events-auto overflow-y-scroll overscroll-y-contain transition-opacity duration-1000 opacity-0"
       ref="menu"
       @mouseenter="fullpageOnScrollableElementEnter"
       @touchstart="fullpageOnScrollableElementEnter"