Core UI updates

This commit is contained in:
Mark Gregory
2026-06-16 08:49:52 +01:00
parent a96369c90a
commit a787303ba5
19 changed files with 182 additions and 113 deletions
@@ -16,7 +16,7 @@
<section class="doc-card">
<div class="doc-card-header">
<strong>Categories</strong>
<a class="doc-button dark" href="{{ route('documentation.categories.create') }}">New category</a>
<a class="doc-button success" href="{{ route('documentation.categories.create') }}">Create category</a>
</div>
<div class="doc-card-body">
<table class="doc-table">
@@ -39,11 +39,11 @@
<td>{{ $category->sort_order }}</td>
<td><span class="doc-badge {{ $category->is_active ? '' : 'archived' }}">{{ $category->is_active ? 'Active' : 'Inactive' }}</span></td>
<td>
<a class="doc-link" href="{{ route('documentation.categories.edit', $category) }}">Edit</a>
<a class="doc-button primary" href="{{ route('documentation.categories.edit', $category) }}">Edit</a>
<form method="POST" action="{{ route('documentation.categories.destroy', $category) }}" style="display:inline;" onsubmit="return confirm('Delete this category? Documents will become uncategorised.')">
@csrf
@method('DELETE')
<button type="submit" class="doc-link" style="border:0;background:none;cursor:pointer;padding:0;margin-left:10px;">Delete</button>
<button type="submit" class="doc-button danger" style="border:0;cursor:pointer;margin-left:10px;">Delete</button>
</form>
</td>
</tr>
@@ -38,7 +38,7 @@
<section class="doc-card">
<div class="doc-card-header">
<strong>Document register</strong>
<a class="doc-button dark" href="{{ route('documentation.documents.create') }}">New document</a>
<a class="doc-button success" href="{{ route('documentation.documents.create') }}">Create document</a>
</div>
<div class="doc-card-body">
<form class="doc-filter" method="GET" action="{{ route('documentation.documents.index') }}">
@@ -55,7 +55,7 @@
<option value="{{ $category->id }}" @selected((string) request('category') === (string) $category->id)>{{ $category->name }}</option>
@endforeach
</select>
<button class="doc-button light" type="submit">Filter</button>
<button class="doc-button primary" type="submit">Filter</button>
</form>
<table class="doc-table">
@@ -80,7 +80,7 @@
<td><span class="doc-badge {{ $document->status }}">{{ ucfirst($document->status) }}</span></td>
<td>{{ $document->version }}</td>
<td>{{ $document->updated_at?->format('d M Y H:i') }}</td>
<td><a class="doc-link" href="{{ route('documentation.documents.edit', $document) }}">Edit</a></td>
<td><a class="doc-button primary" href="{{ route('documentation.documents.edit', $document) }}">Edit</a></td>
</tr>
@empty
<tr><td colspan="6" class="doc-muted">No documents found.</td></tr>
@@ -126,50 +126,75 @@
}
.doc-button.primary,
.doc-button.register,
.doc-button.dark {
background: #2563eb;
color: #ffffff;
border-color: #2563eb;
box-shadow: 0 8px 18px rgba(37, 99, 235, .22);
}
.doc-button.primary:hover,
.doc-button.register:hover,
.doc-button.dark:hover {
background: #1d4ed8;
border-color: #1d4ed8;
}
.doc-button.secondary {
background: rgba(255, 255, 255, .10);
.doc-button.secondary,
.doc-button.category,
.doc-button.settings {
background: #7c3aed;
color: #ffffff;
border-color: rgba(255, 255, 255, .22);
border-color: #7c3aed;
box-shadow: 0 8px 18px rgba(124, 58, 237, .22);
}
.doc-button.secondary:hover {
background: rgba(255, 255, 255, .16);
.doc-button.secondary:hover,
.doc-button.category:hover,
.doc-button.settings:hover {
background: #6d28d9;
border-color: #6d28d9;
}
.doc-button.light {
background: #f8fafc;
color: #18181b;
border-color: #d4d4d8;
.doc-button.light,
.doc-button.cancel,
.doc-button.warning {
background: #f59e0b;
color: #ffffff;
border-color: #f59e0b;
box-shadow: 0 8px 18px rgba(245, 158, 11, .22);
}
html.dark .doc-button.light {
background: #09090b;
color: #f4f4f5;
border-color: #3f3f46;
.doc-button.light:hover,
.doc-button.cancel:hover,
.doc-button.warning:hover {
background: #d97706;
border-color: #d97706;
}
.doc-button.success {
background: #059669;
color: #ffffff;
border-color: #059669;
box-shadow: 0 8px 18px rgba(5, 150, 105, .22);
}
.doc-button.success:hover {
background: #047857;
border-color: #047857;
}
.doc-button.danger {
background: #dc2626;
color: #ffffff;
border-color: #dc2626;
box-shadow: 0 8px 18px rgba(220, 38, 38, .22);
}
.doc-button.danger:hover {
background: #b91c1c;
border-color: #b91c1c;
}
.doc-card {
@@ -38,6 +38,6 @@
</div>
</div>
<div class="doc-actions" style="margin-top:22px;">
<button class="doc-button dark" type="submit">Save category</button>
<a class="doc-button light" href="{{ route('documentation.categories.index') }}">Cancel</a>
<button class="doc-button success" type="submit">Save category</button>
<a class="doc-button warning" href="{{ route('documentation.categories.index') }}">Cancel</a>
</div>
@@ -104,6 +104,6 @@
</div>
</div>
<div class="doc-actions" style="margin-top:22px;">
<button class="doc-button dark" type="submit">Save document</button>
<a class="doc-button light" href="{{ route('documentation.documents.index') }}">Cancel</a>
<button class="doc-button success" type="submit">Save document</button>
<a class="doc-button warning" href="{{ route('documentation.documents.index') }}">Cancel</a>
</div>
@@ -8,9 +8,9 @@
</div>
<div class="doc-actions">
<a class="doc-button primary" href="{{ route('documentation.documents.create') }}" wire:navigate>Create document</a>
<a class="doc-button secondary" href="{{ route('documentation.categories.index') }}" wire:navigate>Manage categories</a>
<a class="doc-button secondary" href="{{ route('documentation.documents.index') }}" wire:navigate>Document register</a>
<a class="doc-button success" href="{{ route('documentation.documents.create') }}" wire:navigate>Create document</a>
<a class="doc-button category" href="{{ route('documentation.categories.index') }}" wire:navigate>Manage categories</a>
<a class="doc-button register" href="{{ route('documentation.documents.index') }}" wire:navigate>Document register</a>
</div>
</div>
</div>