isaacclad/ladill-servers
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use + icon buttons on mobile dashboards.
Deploy Ladill Servers / deploy (push) Successful in 44s
Details

Browse Source 
Sync mobile-header-btn partials, mobile x-btn.create, and update dashboard header actions for consistent mobile FABs.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-06-28 16:21:47 +00:00
co-authored by Cursor
parent 2a37f5dde5
commit 0c917bff5c
4 changed files with 114 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/btn/create.blade.php
+18 -2
View File
@@ -1,17 +1,33 @@
@props([
'href' => null,
'type' => 'button',
'label' => null,
])
@php
$tag = $href ? 'a' : 'button';
$ariaLabel = $label ?? trim(preg_replace('/\s+/', ' ', strip_tags((string) $slot)));
@endphp
<{{ $tag }}
@if ($href) href="{{ $href }}" @endif
@if ($tag === 'button') type="{{ $type }}" @endif
{{ $attributes->class(['btn-primary']) }}
aria-label="{{ $ariaLabel }}"
title="{{ $ariaLabel }}"
{{ $attributes->class(['btn-fab h-10 w-10 lg:hidden']) }}
>
<svg class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
</svg>
</{{ $tag }}>
<{{ $tag }}
@if ($href) href="{{ $href }}" @endif
@if ($tag === 'button') type="{{ $type }}" @endif
{{ $attributes->class(['btn-primary hidden lg:inline-flex']) }}
>
<svg class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
</svg>
{{ $slot }}
</{{ $tag }}>
resources/views/partials/mobile-header-btn.blade.php
+53
View File
@@ -0,0 +1,53 @@
@php
$variant = $variant ?? 'primary';
$type = $type ?? 'submit';
$tag = ! empty($href) ? 'a' : 'button';
$ariaLabel = $ariaLabel ?? $label ?? '';
$desktopLabel = $desktopLabel ?? $label ?? '';
$showDesktopIcon = $showDesktopIcon ?? ($variant === 'primary');
$mobileClass = match ($variant) {
'primary' => 'btn-fab h-10 w-10 lg:hidden',
'outline' => 'inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-700 shadow-sm transition hover:border-slate-300 hover:bg-slate-50 lg:hidden',
'dark' => 'inline-flex h-10 w-10 items-center justify-center rounded-full bg-gray-900 text-white shadow-sm transition hover:bg-gray-800 lg:hidden',
'indigo' => 'inline-flex h-10 w-10 items-center justify-center rounded-full bg-indigo-600 text-white shadow-sm transition hover:bg-indigo-700 lg:hidden',
default => 'btn-fab h-10 w-10 lg:hidden',
};
$desktopClass = match ($variant) {
'primary' => 'btn-primary hidden items-center lg:inline-flex',
'outline' => 'hidden items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition hover:bg-gray-50 lg:inline-flex',
'dark' => 'hidden items-center gap-1.5 rounded-lg bg-gray-900 px-3.5 py-2 text-sm font-medium text-white transition hover:bg-gray-800 lg:inline-flex',
'indigo' => 'hidden items-center justify-center rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-700 lg:inline-flex',
default => 'btn-primary hidden items-center lg:inline-flex',
};
$extraClass = $class ?? '';
@endphp
<{{ $tag }}
@if ($tag === 'a') href="{{ $href }}" @endif
@if ($tag === 'button') type="{{ $type }}" @endif
aria-label="{{ $ariaLabel }}"
title="{{ $ariaLabel }}"
@if (! empty($attributes)) {!! $attributes !!} @endif
class="{{ trim($mobileClass.' '.$extraClass) }}"
>
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
</svg>
</{{ $tag }}>
<{{ $tag }}
@if ($tag === 'a') href="{{ $href }}" @endif
@if ($tag === 'button') type="{{ $type }}" @endif
@if (! empty($attributes)) {!! $attributes !!} @endif
class="{{ trim($desktopClass.' '.$extraClass) }}"
>
@if ($showDesktopIcon)
<svg class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
</svg>
@endif
{{ $desktopLabel }}
</{{ $tag }}>
resources/views/partials/mobile-icon-link.blade.php
+27
View File
@@ -0,0 +1,27 @@
@php
$icon = $icon ?? 'arrow';
$desktopClass = $desktopClass ?? 'text-xs font-medium text-indigo-600 hover:text-indigo-700';
$label = $label ?? '';
@endphp
<a href="{{ $href }}"
aria-label="{{ $label }}"
title="{{ $label }}"
class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-indigo-50 text-indigo-600 ring-1 ring-indigo-100 transition hover:bg-indigo-100 lg:h-auto lg:w-auto lg:rounded-none lg:bg-transparent lg:ring-0 lg:hover:bg-transparent">
<span class="lg:hidden">
@if ($icon === 'shield')
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"/>
</svg>
@elseif ($icon === 'calendar')
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"/>
</svg>
@else
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/>
</svg>
@endif
</span>
<span class="hidden lg:inline {{ $desktopClass }}">{{ $label }}</span>
</a>
resources/views/servers/dashboard.blade.php
+16 -11
View File
@@ -2,18 +2,23 @@
@section('title', 'Overview — Ladill Servers')
@section('content')
<div class="mx-auto max-w-5xl">
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<h1 class="text-xl font-semibold tracking-tight text-slate-900">Overview</h1>
<p class="mt-0.5 text-sm text-slate-500">Your VPS and dedicated servers at a glance.</p>
<div class="flex items-center justify-between gap-3">
<div class="min-w-0 flex-1">
<h1 class="truncate text-lg font-semibold tracking-tight text-slate-900 lg:text-xl">Overview</h1>
<p class="mt-0.5 hidden text-sm text-slate-500 sm:block">Your VPS and dedicated servers at a glance.</p>
</div>
<div class="flex flex-wrap gap-2">
<a href="{{ route('servers.vps', ['order' => 1]) }}" class="inline-flex items-center justify-center btn-primary">
Order VPS
</a>
<a href="{{ route('servers.dedicated', ['order' => 1]) }}" class="inline-flex items-center justify-center rounded-lg border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">
Order dedicated
</a>
<div class="flex shrink-0 items-center gap-2">
@include('partials.mobile-header-btn', [
'href' => route('servers.vps', ['order' => 1]),
'label' => 'Order VPS',
'variant' => 'primary',
])
@include('partials.mobile-header-btn', [
'href' => route('servers.dedicated', ['order' => 1]),
'label' => 'Order dedicated',
'variant' => 'outline',
'showDesktopIcon' => false,
])
</div>
</div>