From 9f2ce6ab4080399f617090bf336561679a9fbe24 Mon Sep 17 00:00:00 2001 From: allenjiang <allenjianggo@gmail.com> Date: Fri, 13 Dec 2024 22:52:38 +0800 Subject: [PATCH] refactor: update posts tab style --- .../pages/users/show-user-page.blade.php | 2 +- .../livewire/shared/posts/posts.blade.php | 67 ++++++++++++++----- 2 files changed, 53 insertions(+), 16 deletions(-) diff --git a/resources/views/livewire/pages/users/show-user-page.blade.php b/resources/views/livewire/pages/users/show-user-page.blade.php index 2ce4767b..f07a4f2e 100644 --- a/resources/views/livewire/pages/users/show-user-page.blade.php +++ b/resources/views/livewire/pages/users/show-user-page.blade.php @@ -37,7 +37,7 @@ {{-- user information page --}} <x-layouts.layout-main> <div class="container mx-auto flex-1"> - <div class="flex animate-fade-in flex-col items-center justify-start px-4"> + <div class="animate-fade-in flex flex-col items-center justify-start px-4"> {{-- user information, posts and comments --}} <div class="w-full max-w-3xl" diff --git a/resources/views/livewire/shared/posts/posts.blade.php b/resources/views/livewire/shared/posts/posts.blade.php index 22c4dc2f..8c3603db 100644 --- a/resources/views/livewire/shared/posts/posts.blade.php +++ b/resources/views/livewire/shared/posts/posts.blade.php @@ -2,34 +2,71 @@ use App\Enums\PostOrder; @endphp -<div class="space-y-6"> +@script + <script> + // tab can only be 'information', 'posts', 'comments' + Alpine.data('postsTabs', () => ({ + tabSelected: @js($order), + tabButtonClicked(tabButton) { + this.tabSelected = tabButton.id.replace('-tab-button', ''); + this.tabRepositionMarker(tabButton); + }, + tabRepositionMarker(tabButton) { + this.$refs.tabMarker.style.width = tabButton.offsetWidth + 'px'; + this.$refs.tabMarker.style.height = tabButton.offsetHeight + 'px'; + this.$refs.tabMarker.style.left = tabButton.offsetLeft + 'px'; + }, + tabContentActive(tabContent) { + return this.tabSelected === tabContent.id.replace('-content', ''); + }, + init() { + let tabSelectedButtons = document.getElementById(this.tabSelected + '-tab-button'); + this.tabRepositionMarker(tabSelectedButtons); + } + })); + </script> +@endscript + +<div + class="space-y-6" + x-data="postsTabs" +> {{-- 文章排序 --}} - <div class="flex w-full flex-col-reverse text-sm md:flex-row md:justify-between"> - <nav class="flex w-full space-x-1 rounded-xl dark:text-gray-50 md:w-auto"> + <div class="flex w-full text-sm md:flex-row md:justify-between"> + <nav + class="relative z-0 inline-grid w-full select-none grid-cols-3 items-center justify-center rounded-lg text-gray-500 md:w-fit dark:text-gray-50" + wire:ignore + > @foreach (PostOrder::cases() as $postOrder) <button + class="relative z-20 inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium" + id="{{ $postOrder->value }}-tab-button" type="button" - wire:click.prevent="changeOrder('{{ $postOrder }}')" - wire:key="{{ $postOrder->value }}-post-order" - @class([ - 'flex w-1/3 md:w-auto items-center px-4 py-2 transition duration-300 rounded-lg ', - 'bg-gray-50 dark:bg-gray-800' => $order === $postOrder->value, - 'hover:bg-gray-50 dark:hover:bg-gray-800' => $order !== $postOrder->value, - ]) + x-on:click="tabButtonClicked($el)" + {{-- update url query parameter in livewire --}} + wire:click="changeOrder('{{ $postOrder }}')" + wire:key="{{ $postOrder->value }}-tab-button" > <x-dynamic-component class="w-4" :component="$postOrder->iconComponentName()" /> - - <span class="ml-2">{{ $postOrder->label() }}</span> + <span>{{ $postOrder->label() }}</span> </button> @endforeach + + <div + class="absolute left-0 z-10 h-full w-fit duration-300 ease-out" + x-ref="tabMarker" + x-cloak + > + <div class="h-full w-full rounded-md bg-gray-100 dark:bg-gray-800"></div> + </div> </nav> {{-- 文章類別訊息 --}} <div - class="hidden items-center justify-center rounded-lg bg-emerald-200 px-4 py-2 text-emerald-800 dark:bg-lividus-700 dark:text-gray-50 md:flex" + class="dark:bg-lividus-700 hidden items-center justify-center rounded-lg bg-emerald-200 px-4 py-2 text-emerald-800 md:flex dark:text-gray-50" > @if ($categoryId) {{ $categoryName }}:{{ $categoryDescription }} @@ -46,7 +83,7 @@ class="hidden items-center justify-center rounded-lg bg-emerald-200 px-4 py-2 te <x-card class="group relative z-0 grid cursor-pointer grid-cols-1 gap-4 overflow-hidden"> {{-- category icon --}} <div - class="absolute -bottom-16 -right-4 size-56 rotate-12 text-emerald-200 transition-all duration-300 group-hover:-bottom-4 group-hover:-right-0 dark:text-lividus-800" + class="dark:text-lividus-800 absolute -bottom-16 -right-4 size-56 rotate-12 text-emerald-200 transition-all duration-300 group-hover:-bottom-4 group-hover:-right-0" > {!! $post->category->icon !!} </div> @@ -74,7 +111,7 @@ class="absolute inset-0 z-20 block" {{-- 文章標籤 --}} @if ($post->tags_count > 0) <div class="z-20 flex w-fit flex-wrap items-center text-base"> - <x-icon.tags class="mr-1 w-4 text-emerald-300 dark:text-lividus-700" /> + <x-icon.tags class="dark:text-lividus-700 mr-1 w-4 text-emerald-300" /> @foreach ($post->tags as $tag) <x-tag :href="route('tags.show', ['id' => $tag->id])">