Add breadcrumbs to site views
- Introduce breadcrumb SCSS styles and integrate `breadcrumbs/site.blade.php`. - Update SCSS imports to include new breadcrumb styles.
This commit is contained in:
@@ -1,6 +1,7 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');
|
||||||
@import "reset";
|
@import "reset";
|
||||||
@import "forms";
|
@import "forms";
|
||||||
|
@import "breadcrumb";
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
|
|||||||
@@ -0,0 +1,45 @@
|
|||||||
|
.breadcrumb-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: .5rem 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
list-style: none;
|
||||||
|
background-color: #eee;
|
||||||
|
border-radius: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-item+.breadcrumb-item {
|
||||||
|
padding-left: .5rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-item+.breadcrumb-item:before {
|
||||||
|
float: left;
|
||||||
|
padding-right: .5rem;
|
||||||
|
color: #4b5563;
|
||||||
|
content: "/";
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-item.active {
|
||||||
|
color: #4b5563;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-item {
|
||||||
|
font-size: .75rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-item,.breadcrumb-item a {
|
||||||
|
color: #374151;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: .75rem;
|
||||||
|
}
|
||||||
|
.breadcrumb-item a:hover {
|
||||||
|
color: #00040b;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.breadcrumb-item,.breadcrumb-item a {
|
||||||
|
font-size:.875rem
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
@unless ($breadcrumbs->isEmpty())
|
||||||
|
<nav aria-label="breadcrumb" class="breadcrumb">
|
||||||
|
<ol class="breadcrumb-container">
|
||||||
|
@foreach ($breadcrumbs as $breadcrumb)
|
||||||
|
@if ($breadcrumb->url && !$loop->last)
|
||||||
|
<li class="breadcrumb-item"><a href="{{ $breadcrumb->url }}">{{ $breadcrumb->title }}</a></li>
|
||||||
|
@else
|
||||||
|
<li class="breadcrumb-item active" aria-current="page">{{ $breadcrumb->title }}</li>
|
||||||
|
@endif
|
||||||
|
@endforeach
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
@endunless
|
||||||
Reference in New Issue
Block a user