bao/portal-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance admin breadcrumb component with updated styling, a new home link, and embedded CSS, and add rounded corners to the datacenter card.

Browse Source
This commit is contained in:
pbao9
2026-02-02 23:30:10 +07:00
parent 372b6bf0f6
commit e45556d09c
2 changed files with 58 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/administrator/pages/package/datacenter/index.blade.php
+1 -1
View File
@@ -15,7 +15,7 @@ $breadcrumbItems = [
@endsection
@section('content')
@if (auth()->guard('admins')->user()->can('manager package module'))
<div class="card card-primary card-outline">
<div class="card card-primary card-outline rounded-4">
<div class="card-header d-flex justify-content-end gap-2">
@include('administrator.pages.block.Sync.Datacenter')
</div>
resources/views/components/admin-breadcrumb.blade.php
+57 -9
View File
@@ -1,19 +1,67 @@
@props(['items' => []])
<nav class="page-breadcrumb">
<ol class="breadcrumb">
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-white p-3 rounded-4 d-flex align-items-center mb-4">
<li class="breadcrumb-item">
<a href="{{ route('dashboard') }}"
class="d-flex align-items-center text-muted text-decoration-none transition-colors hover-text-primary">
<i data-lucide="home" style="width: 18px; height: 18px;"></i>
</a>
</li>
@foreach($items as $item)
@if(!empty($item['active']))
<li class="breadcrumb-item active" aria-current="page">{{ $item['label'] }}</li>
@else
<li class="breadcrumb-item">
@if(isset($item['url']))
<a href="{{ $item['url'] }}">{{ $item['label'] }}</a>
@else
<li class="breadcrumb-item active d-flex align-items-center text-primary fw-bold" aria-current="page">
<span class="badge bg-primary-subtle text-primary border border-primary-subtle rounded-pill px-3 py-2">
{{ $item['label'] }}
@endif
</span>
</li>
@else
<li class="breadcrumb-item d-flex align-items-center">
@if(isset($item['url']))
<a href="{{ $item['url'] }}" class="text-dark text-decoration-none fw-medium hover-text-primary">
{{ $item['label'] }}
</a>
@else
<span class="text-muted">{{ $item['label'] }}</span>
@endif
</li>
@endif
@endforeach
</ol>
</nav>
<style>
.breadcrumb-item+.breadcrumb-item::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
vertical-align: middle;
margin-top: 1px;
}
.hover-text-primary:hover {
color: var(--bs-primary) !important;
}
.bg-primary-subtle {
background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
}
.border-primary-subtle {
border-color: rgba(var(--bs-primary-rgb), 0.2) !important;
}
.fade-in-up {
animation: fadeInUp 0.5s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>