ui updates for card navigation
This commit is contained in:
@@ -141,38 +141,52 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<details
|
||||
class="group rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-900"
|
||||
dusk="recent-commits-card">
|
||||
<summary
|
||||
class="-mx-4 -mt-4 mb-4 flex cursor-pointer list-none items-center justify-between gap-3 rounded-t-xl bg-violet-700 px-4 py-4 text-white marker:hidden">
|
||||
<div class="flex min-w-0 items-center gap-3">
|
||||
<span
|
||||
class="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-violet-950 text-white ring-1 ring-violet-300/60 shadow-lg">
|
||||
<i class="fa-solid fa-code-branch text-lg" aria-hidden="true"></i>
|
||||
</span>
|
||||
|
||||
<div x-data="{ open: false }" class="overflow-hidden rounded-2xl border border-zinc-700 bg-gradient-to-br from-slate-950 to-slate-900 shadow-sm ring-1 ring-white/5">
|
||||
<button type="button" x-on:click="open = ! open"
|
||||
class="flex w-full items-center justify-between gap-4 border-b border-white/10 px-5 py-4 text-left transition hover:bg-white/[0.04]"
|
||||
aria-controls="helpdesk-recent-commits-panel"
|
||||
x-bind:aria-expanded="open ? 'true' : 'false'">
|
||||
<span class="min-w-0">
|
||||
<span class="block text-lg font-black text-white">Recent commits</span>
|
||||
<span class="block text-sm text-slate-400">Latest linked Git activity.</span>
|
||||
</span>
|
||||
|
||||
<span class="flex items-center gap-3">
|
||||
<a href="{{ route('helpdesk.settings') }}" wire:navigate x-on:click.stop class="hd-btn hd-btn-sm hd-btn-violet">Git setup</a>
|
||||
<i class="fa-solid fa-chevron-down text-slate-400 transition"
|
||||
x-bind:class="open ? 'rotate-180' : ''"
|
||||
aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div id="helpdesk-recent-commits-panel" x-show="open" x-cloak>
|
||||
<div class="space-y-2 p-5">
|
||||
@forelse ($recentCommits as $commit)
|
||||
<div class="rounded-xl border border-white/10 bg-white/[0.03] p-3">
|
||||
<div class="font-mono text-xs text-slate-500">{{ $commit->short_hash }} · {{ $commit->repository?->name }}</div>
|
||||
<div class="mt-1 truncate text-sm font-semibold text-slate-100">{{ $commit->message }}</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="rounded-xl border border-dashed border-slate-700 p-4 text-center text-sm text-slate-500">No commits tracked yet.</div>
|
||||
@endforelse
|
||||
<div class="min-w-0">
|
||||
<h2 class="text-lg font-black uppercase tracking-wide">Recent commits</h2>
|
||||
<p class="text-xs font-semibold text-violet-100">Latest linked Git activity</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-white/15 text-white ring-1 ring-white/20">
|
||||
<i class="fa-solid fa-chevron-right text-xs transition group-open:rotate-90" aria-hidden="true"></i>
|
||||
</span>
|
||||
</summary>
|
||||
|
||||
<div class="mb-4 flex justify-end">
|
||||
<a href="{{ route('helpdesk.settings') }}" wire:navigate class="hd-btn hd-btn-sm hd-btn-violet">
|
||||
Git setup
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
@forelse ($recentCommits as $commit)
|
||||
<div class="rounded-xl border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-700 dark:bg-zinc-950">
|
||||
<div class="font-mono text-xs text-zinc-500 dark:text-zinc-400">
|
||||
{{ $commit->short_hash }} · {{ $commit->repository?->name }}
|
||||
</div>
|
||||
<div class="mt-1 truncate text-sm font-semibold text-zinc-900 dark:text-zinc-100">
|
||||
{{ $commit->message }}
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="rounded-xl border border-dashed border-zinc-300 p-4 text-center text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">
|
||||
No commits tracked yet.
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user