nemunaire/travel-steps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve mobile UX by hiding menu and showing dates inline

Browse source 
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>
This commit is contained in:
nemunaire 2025-12-17 20:52:55 +07:00
commit 9a307cdcb2
2 changed files with 12 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

16
summer2024-frontend/src/components/PostComponent.vue
View file

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

2
summer2024-frontend/src/views/PostsView.vue
View file

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