Refactored Color Livewire components, added CreateColor, EditColor, and ShowColor components. Updated views, navigation, and Tailwind color schemes. Adjusted database migrations for consistency.
This commit is contained in:
+67
-40
@@ -8,15 +8,18 @@
|
||||
@source '../../vendor/laravel/jetstream/**/*.blade.php';
|
||||
|
||||
@theme {
|
||||
--font-sans:
|
||||
Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
|
||||
--font-sans: Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
|
||||
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
|
||||
--color-jet: #33312e;
|
||||
--color-pumpkin: #FE7F2D;
|
||||
--color-sunglow: #FCCA46;
|
||||
--color-olivine: #A1C181;
|
||||
--color-zomp: #619B8A;
|
||||
--color-jet: #33312e;
|
||||
--color-pumpkin: #FE7F2D;
|
||||
--color-olivine: #A1C181;
|
||||
|
||||
--color-cornflower: #8ecae6;
|
||||
--color-pacific: #219ebc;
|
||||
--color-elephant: #023047;
|
||||
--color-selective: #ffb703;
|
||||
--color-gold-drop: #fb8500;
|
||||
|
||||
--color-jet-50: #f6f5f5;
|
||||
--color-jet-100: #e8e6e5;
|
||||
@@ -54,41 +57,65 @@
|
||||
--color-olivine-900: #324027;
|
||||
--color-olivine-950: #182211;
|
||||
|
||||
--color-nuke-50: oklch(0.99 0.0358 117.24);
|
||||
--color-nuke-100: oklch(0.97 0.0779 120.18);
|
||||
--color-nuke-200: oklch(0.95 0.1412 121.89);
|
||||
--color-nuke-300: oklch(0.93 0.2049 125.66);
|
||||
--color-nuke-400: oklch(0.91 0.2468 130.72);
|
||||
--color-nuke-500: oklch(0.84 0.231054 131.6647);
|
||||
--color-nuke-600: oklch(0.71 0.197756 132.5804);
|
||||
--color-nuke-700: oklch(0.57 0.1604 132.33);
|
||||
--color-nuke-800: oklch(0.48 0.1306 131.73);
|
||||
--color-nuke-900: oklch(0.43 0.112 131.31);
|
||||
--color-nuke-950: oklch(0.29 0.0821 132.58);
|
||||
--color-cornflower-50: #f2f9fd;
|
||||
--color-cornflower-100: #e5f1f9;
|
||||
--color-cornflower-200: #c5e3f2;
|
||||
--color-cornflower-300: #8ecae6;
|
||||
--color-cornflower-400: #58b2d8;
|
||||
--color-cornflower-500: #3298c5;
|
||||
--color-cornflower-600: #237ba6;
|
||||
--color-cornflower-700: #1d6187;
|
||||
--color-cornflower-800: #1c5370;
|
||||
--color-cornflower-900: #1c465e;
|
||||
--color-cornflower-950: #132d3e;
|
||||
|
||||
--color-etheral-50:oklch(0.98 0.019 204.85);
|
||||
--color-etheral-100:oklch(0.95 0.0444 210.46);
|
||||
--color-etheral-200:oklch(0.9 0.0777 214.41);
|
||||
--color-etheral-300:oklch(0.82 0.1327 218.85);
|
||||
--color-etheral-400:oklch(0.77 0.1401 223.63);
|
||||
--color-etheral-500:oklch(0.68 0.1345 228.8);
|
||||
--color-etheral-600:oklch(0.58 0.1216 233.84);
|
||||
--color-etheral-700:oklch(0.5 0.1034 235.16);
|
||||
--color-etheral-800:oklch(0.43 0.0843 235.25);
|
||||
--color-etheral-900:oklch(0.38 0.0743 238.47);
|
||||
--color-etheral-950:oklch(0.29 0.0601 239.11);
|
||||
--color-pacific-50: #eefbfd;
|
||||
--color-pacific-100: #d5f3f8;
|
||||
--color-pacific-200: #b0e7f1;
|
||||
--color-pacific-300: #7ad5e6;
|
||||
--color-pacific-400: #3cb9d4;
|
||||
--color-pacific-500: #219ebc;
|
||||
--color-pacific-600: #1e7e9c;
|
||||
--color-pacific-700: #1f657f;
|
||||
--color-pacific-800: #215569;
|
||||
--color-pacific-900: #204659;
|
||||
--color-pacific-950: #102e3c;
|
||||
|
||||
--color-blackout-50:oklch(0.97 0 0);
|
||||
--color-blackout-100:oklch(0.93 0 0);
|
||||
--color-blackout-200:oklch(0.86 0 0);
|
||||
--color-blackout-300:oklch(0.76 0 0);
|
||||
--color-blackout-400:oklch(0.63 0 0);
|
||||
--color-blackout-500:oklch(0.53 0 0);
|
||||
--color-blackout-600:oklch(0.48 0 0);
|
||||
--color-blackout-700:oklch(0.43 0 0);
|
||||
--color-blackout-800:oklch(0.39 0 0);
|
||||
--color-blackout-900:oklch(0.36 0 0);
|
||||
--color-blackout-950:oklch(0.31 0 0);
|
||||
--color-elephant-50: #effaff;
|
||||
--color-elephant-100: #ddf5ff;
|
||||
--color-elephant-200: #b4edff;
|
||||
--color-elephant-300: #72e0ff;
|
||||
--color-elephant-400: #27d2ff;
|
||||
--color-elephant-500: #00bdfc;
|
||||
--color-elephant-600: #0098d9;
|
||||
--color-elephant-700: #0079af;
|
||||
--color-elephant-800: #006690;
|
||||
--color-elephant-900: #035477;
|
||||
--color-elephant-950: #023047;
|
||||
|
||||
--color-selective-50: #fffeea;
|
||||
--color-selective-100: #fff9c5;
|
||||
--color-selective-200: #fff485;
|
||||
--color-selective-300: #ffe746;
|
||||
--color-selective-400: #ffd71b;
|
||||
--color-selective-500: #ffb703;
|
||||
--color-selective-600: #e28b00;
|
||||
--color-selective-700: #bb6202;
|
||||
--color-selective-800: #984b08;
|
||||
--color-selective-900: #7c3e0b;
|
||||
--color-selective-950: #481f00;
|
||||
|
||||
--color-gold-drop-50: #fffbec;
|
||||
--color-gold-drop-100: #fff5d3;
|
||||
--color-gold-drop-200: #ffe8a5;
|
||||
--color-gold-drop-300: #ffd56d;
|
||||
--color-gold-drop-400: #ffb732;
|
||||
--color-gold-drop-500: #ff9f0a;
|
||||
--color-gold-drop-600: #fb8500;
|
||||
--color-gold-drop-700: #cc6302;
|
||||
--color-gold-drop-800: #a14c0b;
|
||||
--color-gold-drop-900: #82400c;
|
||||
--color-gold-drop-950: #461e04;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="bg-jet-900 w-full border-b border-jet-900">
|
||||
<div class="bg-elephant w-full border-b border-elephant-900">
|
||||
<div class="container mx-auto py-6 px-4 sm:px-6 lg:px-8 flex justify-between items-center">
|
||||
<x-header.header-left>
|
||||
@isset($headerleft)
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
|
||||
<title>{{ $title . ' | ' . config('app.name') ?? config('app.name') }}</title>
|
||||
</head>
|
||||
<body class="font-sans antialiased bg-jet-950/50">
|
||||
<body class="font-sans antialiased bg-neutral-900">
|
||||
<x-navbar />
|
||||
<div class="flex flex-row">
|
||||
<!--
|
||||
|
||||
@@ -1,51 +1,65 @@
|
||||
<section class="bg-jet-950">
|
||||
<flux:header class="container mx-auto flex items-center">
|
||||
<flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />
|
||||
<section class="bg-elephant/50">
|
||||
<flux:header class="container mx-auto flex items-center">
|
||||
<flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left"/>
|
||||
|
||||
<flux:brand href="{{ route('dashboard') }}" name="FilamentApp" class="max-lg:hidden dark:hidden" />
|
||||
<flux:brand href="{{ route('dashboard') }}" name="FilamentApp" class="max-lg:hidden! hidden dark:flex" />
|
||||
<flux:brand href="{{ route('dashboard') }}" name="FilamentApp" class="max-lg:hidden dark:hidden"/>
|
||||
<flux:brand href="{{ route('dashboard') }}" name="FilamentApp" class="max-lg:hidden! hidden dark:flex"/>
|
||||
|
||||
<flux:navbar class="-mb-px max-lg:hidden">
|
||||
<flux:navbar.item wire:navigate icon="home" href="{{ route('dashboard') }}">Dashboard</flux:navbar.item>
|
||||
<flux:navbar.item wire:navigate icon="shopping-bag" href="{{ route('orders.index') }}">Orders</flux:navbar.item>
|
||||
<flux:navbar class="-mb-px max-lg:hidden">
|
||||
<flux:navbar.item wire:navigate icon="home" href="{{ route('dashboard') }}">Dashboard</flux:navbar.item>
|
||||
<flux:navbar.item wire:navigate icon="shopping-bag" href="{{ route('orders.index') }}">Orders
|
||||
</flux:navbar.item>
|
||||
|
||||
|
||||
<flux:dropdown >
|
||||
<flux:navbar.item icon="circle-stack" icon-trailing="chevron-down">Filaments</flux:navbar.item>
|
||||
<flux:navmenu class="bg-jet">
|
||||
<flux:navmenu.item wire:navigate icon="circle-stack" href="{{ route('filaments.index') }}">All Filaments</flux:navmenu.item>
|
||||
<flux:navmenu.separator />
|
||||
<flux:navmenu.item wire:navigate icon="archive-box" href="{{ route('manufacturer.index') }}">Manufacturers</flux:navmenu.item>
|
||||
<flux:navmenu.item wire:navigate icon="paint-brush" href="{{ route('color.index') }}">Colors</flux:navmenu.item>
|
||||
<flux:navmenu.item wire:navigate icon="clipboard" href="{{ route('type.index') }}">Types</flux:navmenu.item>
|
||||
<flux:navmenu.item wire:navigate icon="clipboard" href="{{ route('buildplate.index') }}">BuildPlates</flux:navmenu.item>
|
||||
</flux:navmenu>
|
||||
</flux:dropdown>
|
||||
</flux:navbar>
|
||||
<flux:dropdown>
|
||||
|
||||
<flux:navbar.item icon="circle-stack" icon-trailing="chevron-down">Database</flux:navbar.item>
|
||||
|
||||
<flux:navmenu class="bg-white">
|
||||
<flux:navmenu.item wire:navigate icon="circle-stack" href="{{ route('filaments.index') }}">All
|
||||
Filaments
|
||||
</flux:navmenu.item>
|
||||
<flux:navmenu.separator/>
|
||||
<flux:navmenu.item wire:navigate icon="archive-box" href="{{ route('manufacturer.index') }}">
|
||||
Manufacturers
|
||||
</flux:navmenu.item>
|
||||
<flux:navmenu.item wire:navigate icon="paint-brush" href="{{ route('color.index') }}">Colors
|
||||
</flux:navmenu.item>
|
||||
<flux:navmenu.item wire:navigate icon="clipboard" href="{{ route('type.index') }}">Types
|
||||
</flux:navmenu.item>
|
||||
<flux:navmenu.item wire:navigate icon="clipboard" href="{{ route('buildplate.index') }}">
|
||||
BuildPlates
|
||||
</flux:navmenu.item>
|
||||
</flux:navmenu>
|
||||
</flux:dropdown>
|
||||
</flux:navbar>
|
||||
|
||||
|
||||
<flux:spacer />
|
||||
<flux:spacer/>
|
||||
|
||||
<flux:navbar class="mr-4">
|
||||
<flux:navbar.item icon="magnifying-glass" href="#" label="Search" />
|
||||
<flux:navbar.item class="max-lg:hidden" icon="cog-6-tooth" href="{{ route('settings.index') }}" label="Settings" />
|
||||
<flux:separator vertical variant="subtle" class="my-2"/>
|
||||
</flux:navbar>
|
||||
<flux:navbar class="mr-4">
|
||||
<flux:navbar.item icon="magnifying-glass" href="#" label="Search"/>
|
||||
<flux:navbar.item class="max-lg:hidden" icon="cog-6-tooth" href="{{ route('settings.index') }}"
|
||||
label="Settings"/>
|
||||
<flux:separator vertical variant="subtle" class="my-2"/>
|
||||
</flux:navbar>
|
||||
|
||||
<flux:dropdown position="top" align="start">
|
||||
<flux:profile avatar="{{ Auth::user()->profile_photo_url }}" />
|
||||
<flux:dropdown position="top" align="start">
|
||||
<flux:profile avatar="{{ Auth::user()->profile_photo_url }}"/>
|
||||
|
||||
<flux:menu>
|
||||
<flux:menu.item href="{{ route('profile.show') }}" icon="user">{{ Auth::user()->name }}</flux:menu.item>
|
||||
<flux:menu>
|
||||
<flux:menu.item href="{{ route('profile.show') }}" icon="user">{{ Auth::user()->name }}</flux:menu.item>
|
||||
|
||||
<flux:menu.separator />
|
||||
<form method="POST" action="{{ route('logout') }}" x-data>
|
||||
@csrf
|
||||
<flux:menu.item href="{{ route('logout') }}" icon="arrow-right-start-on-rectangle" @click.prevent="$root.submit();">Logout</flux:menu.item>
|
||||
</form>
|
||||
<flux:menu.separator/>
|
||||
<form method="POST" action="{{ route('logout') }}" x-data>
|
||||
@csrf
|
||||
<flux:menu.item href="{{ route('logout') }}" icon="arrow-right-start-on-rectangle"
|
||||
@click.prevent="$root.submit();">Logout
|
||||
</flux:menu.item>
|
||||
</form>
|
||||
|
||||
</flux:menu>
|
||||
</flux:dropdown>
|
||||
</flux:menu>
|
||||
</flux:dropdown>
|
||||
|
||||
</flux:header>
|
||||
</flux:header>
|
||||
</section>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div>
|
||||
<table class="w-full rounded-lg">
|
||||
<thead class="border-b border-jet-200 rounded-t-lg">
|
||||
<thead class="border-b border-white/70 rounded-t-lg">
|
||||
<tr class="text-left ">
|
||||
{{ $tableheader }}
|
||||
</tr>
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
<section>
|
||||
<form wire:submit="save">
|
||||
<x-header>
|
||||
{{ __('Create Color') }}
|
||||
|
||||
<x-slot name="headerright">
|
||||
<flux:button type="submit" variant="primary" class="bg-selective hover:bg-selective-600 text-gray-950 hover:cursor-pointer transition-all ease-in-out" icon="check">Save</flux:button>
|
||||
<flux:button wire:click="cancel" variant="primary" class=" bg-red-700 shadow hover:bg-red-800 hover:cursor-pointer transition-all ease-in-out" icon="x-mark">Cancel</flux:button>
|
||||
</x-slot>
|
||||
</x-header>
|
||||
|
||||
<div class="container m-auto my-8 bg-elephant-950 border border-elephant-900 rounded-lg shadow p-6 text-gray-50">
|
||||
<div>
|
||||
<div class="px-4 sm:px-0">
|
||||
<h3 class="text-base/7 font-semibold text-white">Color Information</h3>
|
||||
<p class="mt-1 max-w-2xl text-sm/6 text-gray-200">Color details.</p>
|
||||
</div>
|
||||
<div class="mt-6 border-t border-white/10">
|
||||
<dl class="divide-y divide-white/10">
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-gray-100">Name</dt>
|
||||
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:input wire:model="name" type="text" class="mt-1 block w-full"/>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-gray-100">Hex Code</dt>
|
||||
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:input.group>
|
||||
<flux:input.group.prefix>#</flux:input.group.prefix>
|
||||
<flux:input wire:model="hex" type="text" class="block w-full"/>
|
||||
</flux:input.group>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
@@ -0,0 +1,41 @@
|
||||
<section>
|
||||
<form wire:submit="save">
|
||||
<x-header>
|
||||
{{ __('Create Color') }}
|
||||
|
||||
<x-slot name="headerright">
|
||||
<flux:button type="submit" variant="primary" class="bg-selective hover:bg-selective-600 text-gray-950 hover:cursor-pointer transition-all ease-in-out" icon="check">Save</flux:button>
|
||||
<flux:button wire:click="cancel" variant="primary" class=" bg-red-700 shadow hover:bg-red-800 hover:cursor-pointer transition-all ease-in-out" icon="x-mark">Cancel</flux:button>
|
||||
</x-slot>
|
||||
</x-header>
|
||||
|
||||
<div class="container m-auto my-8 bg-elephant-950 border border-elephant-900 rounded-lg shadow p-6 text-gray-50">
|
||||
<div>
|
||||
<div class="px-4 sm:px-0">
|
||||
<h3 class="text-base/7 font-semibold text-white">Color Information</h3>
|
||||
<p class="mt-1 max-w-2xl text-sm/6 text-gray-200">Color details.</p>
|
||||
</div>
|
||||
<div class="mt-6 border-t border-white/10">
|
||||
<dl class="divide-y divide-white/10">
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-gray-100">Name</dt>
|
||||
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:input wire:model="name" type="text" class="mt-1 block w-full"/>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-gray-100">Hex Code</dt>
|
||||
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:input.group>
|
||||
<flux:input.group.prefix>#</flux:input.group.prefix>
|
||||
<flux:input wire:model="hex" type="text" class="block w-full"/>
|
||||
</flux:input.group>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
@@ -3,12 +3,12 @@
|
||||
{{ __('Colors') }}
|
||||
|
||||
<x-slot name="headerleft">
|
||||
<input type="text" placeholder="Search..." wire:model.live="search" class="bg-jet-700 border-jet-500 rounded text-jet-50 placeholder:text-jet-200 focus:border-olivine focus:ring-olivine" />
|
||||
<input type="text" placeholder="Search..." wire:model.live="search" class="bg-black/10 border-white/20 rounded text-gray-50 placeholder:text-gray-200 focus:border-white/50 focus:ring-white/50" />
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="headerright">
|
||||
<flux:modal.trigger name="createModal">
|
||||
<flux:button variant="primary" class="bg-olivine hover:bg-olivine-600">Create Color</flux:button>
|
||||
<flux:button wire:click="create" variant="primary" class="bg-selective hover:bg-selective-600 text-gray-950 transition ease-in-out hover:cursor-pointer">Create Type</flux:button>
|
||||
</flux:modal.trigger>
|
||||
</x-slot>
|
||||
</x-header>
|
||||
@@ -16,26 +16,25 @@
|
||||
|
||||
|
||||
|
||||
<div class="container m-auto my-8 bg-jet-800 rounded-lg shadow p-6 text-jet-50">
|
||||
<div class="container m-auto my-8 bg-elephant border border-elephant-900 rounded-lg shadow p-6 text-gray-50">
|
||||
<x-table>
|
||||
<x-slot name="tableheader">
|
||||
<x-table.header>Name</x-table.header>
|
||||
<x-table.header>Color</x-table.header>
|
||||
<x-table.header>Hex</x-table.header>
|
||||
<x-table.header>Rolls</x-table.header>
|
||||
<x-table.header class="w-1/6"></x-table.header>
|
||||
<x-table.header class="w-[150px]">Actions</x-table.header>
|
||||
</x-slot>
|
||||
|
||||
@foreach ($colors as $color)
|
||||
<tr wire:key="{{ $color->id }}" class="text-jet-200 border-b border-jet-600 hover:bg-jet-700 transition duration-150 ease-in-out">
|
||||
<x-table.item><p class="p-4 px-3 pl-6 font-bold ">{{ $color->name }}</p></x-table.item>
|
||||
<x-table.item><div class="p-4 px-3 mx-3 h-8 rounded" style="background-color: {{ $color->hex }}"></div></x-table.item>
|
||||
<tr wire:key="{{ $color->id }}" class="text-gray-200 border-b border-white/50 hover:bg-white/10 transition duration-150 ease-in-out">
|
||||
<x-table.item><p class="p-4 px-3 pl-6 font-bold "><a wire:click="edit({{ $color->id }})" class="hover:cursor-pointer">{{ $color->name }}</a></p></x-table.item>
|
||||
<x-table.item><div class="p-4 mx-3 w-[20px] h-[20px] rounded" style="background-color:#{{ $color->hex }}"></div></x-table.item>
|
||||
<x-table.item><p class="p-4 px-3 text-left ">{{ $color->hex }}</p></x-table.item>
|
||||
<x-table.item><p class="p-4 px-3"></p></x-table.item>
|
||||
<x-table.item>
|
||||
<div class="flex flex-row gap-4 justify-end pr-8">
|
||||
<flux:button variant="ghost" wire:click="edit({{ $color->id }})" class=" rounded-lg px-4 py-2 cursor-pointer" icon="pencil">Edit</flux:button>
|
||||
<flux:button variant="danger" wire:click="deleteModal({{ $color->id }})" icon="x-mark">Delete</flux:button>
|
||||
<flux:button variant="primary" class="text-gray-200 bg-transparent shadow-none hover:bg-cornflower hover:shadow hover:text-gray-950 hover:cursor-pointer" wire:click="show({{ $color->id }})" icon="magnifying-glass"></flux:button>
|
||||
<flux:button variant="primary" class="text-gray-200 bg-transparent shadow-none hover:bg-gold-drop hover:shadow hover:text-gray-950 hover:cursor-pointer" wire:click="edit({{ $color->id }})" icon="pencil"></flux:button>
|
||||
<flux:button variant="primary" class="text-gray-200 bg-transparent shadow-none hover:bg-red-700 hover:shadow hover:cursor-pointer" wire:click="delete({{ $color->id }})" icon="trash"></flux:button>
|
||||
</div>
|
||||
</x-table.item>
|
||||
</tr>
|
||||
@@ -47,67 +46,4 @@
|
||||
</x-table>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Create Form -->
|
||||
<flux:modal wire:model.self='createModal' name="createModal" class="md:w-lg">
|
||||
<form wire:submit.prevent="create">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<flux:heading size="lg" class="text-nuke-400">Create color</flux:heading>
|
||||
<flux:text class="mt-2">Create a new color.</flux:text>
|
||||
</div>
|
||||
<flux:input label="Name" wire:model="name" placeholder="Color Name" required />
|
||||
<flux:input label="hex" wire:model="hex" type="color" required />
|
||||
<div class="flex gap-2">
|
||||
<flux:spacer />
|
||||
<flux:button variant="ghost" wire:click='cancel'>Cancel</flux:button>
|
||||
<flux:button type="submit" variant="primary" class="bg-nuke-400 hover:bg-nuke-500">Create</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</flux:modal>
|
||||
|
||||
<!-- Edit Form -->
|
||||
@empty($color)
|
||||
@else
|
||||
<flux:modal wire:model.self='editModal' name="editModal" class="md:w-lg">
|
||||
<form wire:submit.prevent="save({{ $editid }})">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<flux:heading size="lg" class="text-etheral-300">Edit color</flux:heading>
|
||||
<flux:text class="mt-2">Edit an existing color.</flux:text>
|
||||
</div>
|
||||
<flux:input label="Name" wire:model="name" placeholder="Color Name" required />
|
||||
<flux:input label="hex" wire:model="hex" type="color" required />
|
||||
<div class="flex gap-2">
|
||||
<flux:spacer />
|
||||
<flux:button variant="ghost" wire:click='cancel'>Cancel</flux:button>
|
||||
<flux:button type="submit" variant="primary" class="bg-etheral-300 hover:bg-etheral-400">Save</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</flux:modal>
|
||||
@endempty
|
||||
|
||||
<!-- Delete Form -->
|
||||
<flux:modal wire:model.self='deleteModal' name="deleteModal" class="md:w-lg">
|
||||
<form wire:submit.prevent="delete({{ $deleteid }})">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<flux:heading size="lg" class="text-red-500">Delete color?</flux:heading>
|
||||
<flux:text class="mt-2">
|
||||
<p>You're about to delete this color.</p>
|
||||
<p>This action cannot be reversed.</p>
|
||||
</flux:text>
|
||||
</div>
|
||||
<flux:input label="Name" wire:model="name" disabled placeholder="Color Name" required />
|
||||
<flux:input label="hex" wire:model="hex" disabled type="color" required />
|
||||
<div class="flex gap-2">
|
||||
<flux:spacer />
|
||||
<flux:button variant="ghost" wire:click='cancel'>Cancel</flux:button>
|
||||
<flux:button type="submit" variant="danger">Delete color</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</flux:modal>
|
||||
</section>
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
<section>
|
||||
<x-header>
|
||||
{{ __('Create Color') }}
|
||||
|
||||
<x-slot name="headerright">
|
||||
<flux:button wire:click="back" variant="primary" class="bg-transparent shadow-none hover:bg-black/10 hover:cursor-pointer transition-all ease-in-out" icon="arrow-left">Back</flux:button>
|
||||
<flux:button wire:click="edit({{ $color->id }})" variant="primary" class="bg-selective text-gray-950 shadow-none hover:bg-selective-600 hover:cursor-pointer transition-all ease-in-out" icon="check">Edit</flux:button>
|
||||
</x-slot>
|
||||
</x-header>
|
||||
|
||||
<div class="container m-auto my-8 bg-elephant-950 border border-elephant-900 rounded-lg shadow p-6 text-gray-50">
|
||||
<div>
|
||||
<div class="px-4 sm:px-0">
|
||||
<h3 class="text-base/7 font-semibold text-white">Color Information</h3>
|
||||
<p class="mt-1 max-w-2xl text-sm/6 text-gray-200">Color details.</p>
|
||||
</div>
|
||||
<div class="mt-6 border-t border-white/10">
|
||||
<dl class="divide-y divide-white/10">
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-gray-100">Name</dt>
|
||||
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
|
||||
{{ $color->name }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-gray-100">Hex Code</dt>
|
||||
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-[20px] h-[20px] rounded" style="background-color:#{{ $color->hex }}"></div>
|
||||
<span>#{{ $color->hex }}</span>
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
@@ -1,12 +1,6 @@
|
||||
<div>
|
||||
<x-header>
|
||||
{{ __('Dashboard') }}
|
||||
|
||||
<x-slot name="headerright">
|
||||
<flux:modal.trigger name="createModal">
|
||||
<flux:button variant="primary" class="bg-olivine transition-all hover:bg-jet hover:text-jet-100 hover:cursor-pointer">Create Buildplate</flux:button>
|
||||
</flux:modal.trigger>
|
||||
</x-slot>
|
||||
</x-header>
|
||||
|
||||
<div class="py-12">
|
||||
|
||||
@@ -4,28 +4,28 @@
|
||||
{{ __('Create Type') }}
|
||||
|
||||
<x-slot name="headerright">
|
||||
<flux:button type="submit" variant="primary" icon="check">Save</flux:button>
|
||||
<flux:button wire:click="cancel" variant="danger" icon="x-mark">Cancel</flux:button>
|
||||
<flux:button type="submit" variant="primary" class="bg-selective hover:bg-selective-600 text-gray-950 hover:cursor-pointer transition-all ease-in-out" icon="check">Save</flux:button>
|
||||
<flux:button wire:click="cancel" variant="primary" class=" bg-red-700 shadow hover:bg-red-800 hover:cursor-pointer transition-all ease-in-out" icon="x-mark">Cancel</flux:button>
|
||||
</x-slot>
|
||||
</x-header>
|
||||
|
||||
<div class="container m-auto my-8 bg-jet-800 rounded-lg shadow p-6 text-jet-50">
|
||||
<div class="container m-auto my-8 bg-elephant-950 border border-elephant-900 rounded-lg shadow p-6 text-gray-50">
|
||||
<div>
|
||||
<div class="px-4 sm:px-0">
|
||||
<h3 class="text-base/7 font-semibold text-white">Type Information</h3>
|
||||
<p class="mt-1 max-w-2xl text-sm/6 text-jet-200">Type details.</p>
|
||||
<p class="mt-1 max-w-2xl text-sm/6 text-gray-200">Type details.</p>
|
||||
</div>
|
||||
<div class="mt-6 border-t border-white/10">
|
||||
<dl class="divide-y divide-white/10">
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-jet-100">Name</dt>
|
||||
<dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
|
||||
<dt class="text-sm/6 font-medium text-gray-100">Name</dt>
|
||||
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:input wire:model="name" type="text" class="mt-1 block w-full"/>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-jet-100">Description</dt>
|
||||
<dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
|
||||
<dt class="text-sm/6 font-medium text-gray-100">Description</dt>
|
||||
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:textarea wire:model="description" type="text" class="mt-1 block w-full"/>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
@@ -4,30 +4,29 @@
|
||||
{{ __('Create Type') }}
|
||||
|
||||
<x-slot name="headerright">
|
||||
<flux:button type="submit" variant="primary" icon="check">Save</flux:button>
|
||||
<flux:button wire:click="cancel" variant="danger" icon="x-mark">Cancel</flux:button>
|
||||
<flux:button type="submit" variant="primary" class="bg-selective hover:bg-selective-600 text-gray-950 hover:cursor-pointer transition-all ease-in-out" icon="check">Save</flux:button>
|
||||
<flux:button wire:click="cancel" variant="primary" class=" bg-red-700 shadow hover:bg-red-800 hover:cursor-pointer transition-all ease-in-out" icon="x-mark">Cancel</flux:button>
|
||||
</x-slot>
|
||||
</x-header>
|
||||
|
||||
<div class="container m-auto my-8 bg-jet-800 rounded-lg shadow p-6 text-jet-50">
|
||||
<div class="container m-auto my-8 bg-elephant border border-elephant-900 rounded-lg shadow p-6 text-gray-50">
|
||||
<div>
|
||||
<div>Loaded: {{ $type?->id }} - {{ $type?->name }}</div>
|
||||
<div class="px-4 sm:px-0">
|
||||
<h3 class="text-base/7 font-semibold text-white">Type Information</h3>
|
||||
<p class="mt-1 max-w-2xl text-sm/6 text-jet-200">Type details.</p>
|
||||
<p class="mt-1 max-w-2xl text-sm/6 text-gray-200">Type details.</p>
|
||||
</div>
|
||||
<div class="mt-6 border-t border-white/10">
|
||||
<dl class="divide-y divide-white/10">
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-jet-100">Name</dt>
|
||||
<dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:input wire:model="type.name" type="text" class="mt-1 block w-full"/>
|
||||
<dt class="text-sm/6 font-medium text-gray-100">Name</dt>
|
||||
<dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:input wire:model="name" type="text" class="mt-1 block w-full"/>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
|
||||
<dt class="text-sm/6 font-medium text-jet-100">Description</dt>
|
||||
<dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
|
||||
<flux:textarea wire:model="type.description" type="text" rows="auto" class="mt-1 block w-full" />
|
||||
<dt class="text-sm/6 font-medium text-gray-100">Description</dt>
|
||||
<dd class="mt-1 text-sm/6 text-jet-gray sm:col-span-2 sm:mt-0">
|
||||
<flux:textarea wire:model="description" type="text" rows="auto" class="mt-1 block w-full" />
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
@@ -3,19 +3,20 @@
|
||||
{{ __('Types') }}
|
||||
|
||||
<x-slot name="headerleft">
|
||||
<input type="text" placeholder="Search..." wire:model.live="search" class="bg-jet-700 border-jet-500 rounded text-jet-50 placeholder:text-jet-200 focus:border-olivine focus:ring-olivine" />
|
||||
<input type="text" placeholder="Search..." wire:model.live="search" class="bg-black/10 border-white/20 rounded text-gray-50 placeholder:text-gray-200 focus:border-white/50 focus:ring-white/50" />
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="headerright">
|
||||
<flux:modal.trigger name="createModal">
|
||||
<flux:button wire:click="create" variant="primary" class="bg-olivine hover:bg-olivine-600">Create Type</flux:button>
|
||||
</flux:modal.trigger> </x-slot>
|
||||
<flux:button wire:click="create" variant="primary" class="bg-selective hover:bg-selective-600 text-gray-950 transition ease-in-out hover:cursor-pointer">Create Type</flux:button>
|
||||
</flux:modal.trigger>
|
||||
</x-slot>
|
||||
</x-header>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="container m-auto my-8 bg-jet-800 rounded-lg shadow p-6 text-jet-50">
|
||||
<div class="container m-auto my-8 bg-elephant-950 rounded-lg shadow p-6 text-gray-50 border border-elephant-900">
|
||||
<x-table>
|
||||
<x-slot name="tableheader">
|
||||
<x-table.header>Name</x-table.header>
|
||||
@@ -25,15 +26,15 @@
|
||||
</x-slot>
|
||||
|
||||
@foreach ($types as $type)
|
||||
<tr wire:key="{{ $type->id }}" class="text-jet-200 border-b border-jet-600 hover:bg-jet-700 transition duration-150 ease-in-out">
|
||||
<x-table.item><p class="p-4 px-3 pl-6 font-bold">{{ $type->name }}</p></x-table.item>
|
||||
<tr wire:key="{{ $type->id }}" class="text-gray-200 border-b border-white/40 hover:bg-white/10 transition duration-150 ease-in-out">
|
||||
<x-table.item><p class="p-4 px-3 pl-6 font-bold"><a class="hover:cursor-pointer" wire:click="show({{ $type->id }})" >{{ $type->name }}</a></p></x-table.item>
|
||||
<x-table.item><p class="p-4 px-3">{{ $type->description }}</p></x-table.item>
|
||||
<x-table.item><p class="p-4 px-3">{{ $type->amount }}</p></x-table.item>
|
||||
<x-table.item>
|
||||
<div class="flex flex-row gap-4 justify-end pr-8">
|
||||
<flux:button variant="primary" class="text-jet-200 bg-transparent shadow-none hover:bg-olivine hover:shadow hover:text-jet-950" wire:click="show({{ $type->id }})" icon="magnifying-glass"></flux:button>
|
||||
<flux:button variant="primary" class="text-jet-200 bg-transparent shadow-none hover:bg-pumpkin-500 hover:shadow" wire:click="edit({{ $type->id }})" icon="pencil"></flux:button>
|
||||
<flux:button variant="primary" class="text-jet-200 bg-transparent shadow-none hover:bg-red-600 hover:shadow" wire:click="delete({{ $type->id }})" icon="trash"></flux:button>
|
||||
<flux:button variant="primary" class="text-gray-200 bg-transparent shadow-none hover:bg-cornflower hover:shadow hover:text-gray-950 hover:cursor-pointer" wire:click="show({{ $type->id }})" icon="magnifying-glass"></flux:button>
|
||||
<flux:button variant="primary" class="text-gray-200 bg-transparent shadow-none hover:bg-gold-drop hover:shadow hover:text-gray-950 hover:cursor-pointer" wire:click="edit({{ $type->id }})" icon="pencil"></flux:button>
|
||||
<flux:button variant="primary" class="text-gray-200 bg-transparent shadow-none hover:bg-red-700 hover:shadow hover:cursor-pointer" wire:click="delete({{ $type->id }})" icon="trash"></flux:button>
|
||||
</div>
|
||||
</x-table.item>
|
||||
</tr>
|
||||
|
||||
@@ -3,12 +3,12 @@
|
||||
{{ __('Show Type - ') . $type->name }}
|
||||
|
||||
<x-slot name="headerright">
|
||||
<flux:button wire:click="back" variant="ghost" icon="arrow-left">Back</flux:button>
|
||||
<flux:button wire:click="edit({{ $type->id }})" variant="primary" icon="check">Edit</flux:button>
|
||||
<flux:button wire:click="back" variant="primary" class="bg-transparent shadow-none hover:bg-black/10 hover:cursor-pointer transition-all ease-in-out" icon="arrow-left">Back</flux:button>
|
||||
<flux:button wire:click="edit({{ $type->id }})" variant="primary" class="bg-selective text-gray-950 shadow-none hover:bg-selective-600 hover:cursor-pointer transition-all ease-in-out" icon="check">Edit</flux:button>
|
||||
</x-slot>
|
||||
</x-header>
|
||||
|
||||
<div class="container m-auto my-8 bg-jet-800 rounded-lg shadow p-6 text-jet-50">
|
||||
<div class="container m-auto my-8 bg-elephant-950 rounded-lg shadow p-6 text-gray-50 border border-elephant-900">
|
||||
<div>
|
||||
<div class="px-4 sm:px-0">
|
||||
<h3 class="text-base/7 font-semibold text-white">Type Information</h3>
|
||||
|
||||
@@ -46,7 +46,7 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
|
||||
</button>
|
||||
@endif
|
||||
@else
|
||||
<span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
|
||||
<span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md dark:text-gray-600 dark:bg-gray-800 dark:border-gray-600">
|
||||
{!! __('pagination.next') !!}
|
||||
</span>
|
||||
@endif
|
||||
|
||||
+11
-11
@@ -16,11 +16,11 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
|
||||
<div class="flex justify-between flex-1 sm:hidden">
|
||||
<span>
|
||||
@if ($paginator->onFirstPage())
|
||||
<span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
|
||||
<span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300">
|
||||
{!! __('pagination.previous') !!}
|
||||
</span>
|
||||
@else
|
||||
<button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-blue-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
|
||||
<button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-blue-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300">
|
||||
{!! __('pagination.previous') !!}
|
||||
</button>
|
||||
@endif
|
||||
@@ -28,11 +28,11 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
|
||||
|
||||
<span>
|
||||
@if ($paginator->hasMorePages())
|
||||
<button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-blue-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
|
||||
<button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-blue-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300">
|
||||
{!! __('pagination.next') !!}
|
||||
</button>
|
||||
@else
|
||||
<span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
|
||||
<span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md dark:text-gray-600 dark:bg-gray-800 dark:border-gray-600">
|
||||
{!! __('pagination.next') !!}
|
||||
</span>
|
||||
@endif
|
||||
@@ -58,14 +58,14 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
|
||||
{{-- Previous Page Link --}}
|
||||
@if ($paginator->onFirstPage())
|
||||
<span aria-disabled="true" aria-label="{{ __('pagination.previous') }}">
|
||||
<span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5" aria-hidden="true">
|
||||
<span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5 dark:bg-gray-800 dark:border-gray-600" aria-hidden="true">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
@else
|
||||
<button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.previous') }}">
|
||||
<button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:active:bg-gray-700 dark:focus:border-blue-800" aria-label="{{ __('pagination.previous') }}">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
@@ -78,7 +78,7 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
|
||||
{{-- "Three Dots" Separator --}}
|
||||
@if (is_string($element))
|
||||
<span aria-disabled="true">
|
||||
<span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5">{{ $element }}</span>
|
||||
<span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300">{{ $element }}</span>
|
||||
</span>
|
||||
@endif
|
||||
|
||||
@@ -88,10 +88,10 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
|
||||
<span wire:key="paginator-{{ $paginator->getPageName() }}-page{{ $page }}">
|
||||
@if ($page == $paginator->currentPage())
|
||||
<span aria-current="page">
|
||||
<span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5">{{ $page }}</span>
|
||||
<span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 dark:bg-gray-800 dark:border-gray-600">{{ $page }}</span>
|
||||
</span>
|
||||
@else
|
||||
<button type="button" wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
|
||||
<button type="button" wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400 dark:hover:text-gray-300 dark:active:bg-gray-700 dark:focus:border-blue-800" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
|
||||
{{ $page }}
|
||||
</button>
|
||||
@endif
|
||||
@@ -103,14 +103,14 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
|
||||
<span>
|
||||
{{-- Next Page Link --}}
|
||||
@if ($paginator->hasMorePages())
|
||||
<button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.next') }}">
|
||||
<button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:active:bg-gray-700 dark:focus:border-blue-800" aria-label="{{ __('pagination.next') }}">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
@else
|
||||
<span aria-disabled="true" aria-label="{{ __('pagination.next') }}">
|
||||
<span class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5" aria-hidden="true">
|
||||
<span class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5 dark:bg-gray-800 dark:border-gray-600" aria-hidden="true">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
Reference in New Issue
Block a user