truncgit/citrus-cms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement admin dashboard header with notification, user, and admin tool components

Browse Source
This commit is contained in:
Ümit Tunç
2026-04-29 07:10:09 +03:00
parent a9911d6a47
commit 118da4ffe1
2 changed files with 154 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/admin/inc/citrus-design.blade.php
+26 -3
View File
@@ -188,13 +188,36 @@
#page-header .btn-dual-secondary { #page-header .btn-dual-secondary {
background: transparent !important; background: transparent !important;
border: none !important; border: none !important;
width: 32px !important; width: 36px !important;
height: 32px !important; height: 36px !important;
border-radius: 6px !important; border-radius: 8px !important;
color: #475569 !important;
} }
#page-header .btn-dual-secondary:hover { #page-header .btn-dual-secondary:hover {
background: #f1f5f9 !important; background: #f1f5f9 !important;
color: var(--citrus-primary) !important;
}
/* Breadcrumb styling */
.breadcrumb-item + .breadcrumb-item::before {
content: "/";
font-family: inherit;
font-weight: 400;
font-size: 11px;
color: #cbd5e1;
padding-right: 8px;
padding-left: 8px;
}
.breadcrumb-item {
display: flex;
align-items: center;
}
.content-header-section {
display: flex !important;
align-items: center !important;
} }
.mini-header { .mini-header {
resources/views/admin/inc/header.blade.php
+128 -101
View File
@@ -3,81 +3,81 @@
<div class="content-header"> <div class="content-header">
<!-- Left Section --> <!-- Left Section -->
<div class="content-header-section"> <div class="content-header-section">
<!-- Toggle Sidebar --> @if (isset($c) && $c->icon)
<button type="button" class="btn btn-circle btn-dual-secondary" data-toggle="layout" data-action="sidebar_toggle"> <div class="mr-15 d-flex align-items-center justify-content-center"
<i class="fas fa-bars"></i> style="width: 36px; height: 36px; background: #f8fafc; border-radius: 10px; border: 1px solid #f1f5f9;">
</button> <img src="{{ url($c->icon) }}" alt="" style="width: 20px; height: 20px; object-fit: contain;">
<!-- END Toggle Sidebar --> </div>
@endif
<!-- Open Search Section --> <!-- Page Title & Breadcrumbs -->
<button type="button" class="btn btn-circle btn-dual-secondary" data-toggle="layout" data-action="header_search_on"> <div class="d-flex flex-column justify-content-center">
<i class="fas fa-search"></i> <div class="font-size-md font-w700 text-dark mb-0" style="line-height: 1.2;">@yield('title')</div>
</button> <nav class="breadcrumb bg-transparent p-0 mb-0 font-size-xs" style="line-height: 1;">
<!-- END Open Search Section --> <a class="breadcrumb-item text-muted" href="{{url('admin')}}">Projects</a>
@if (isset($c) && $c->parent)
<!-- Project Info (Visible on large screens) --> <?php $parent = DB::table('types')->where('id', $c->parent)->first(); ?>
<div class="d-none d-lg-inline-block ml-10"> @if ($parent)
<span class="font-w700 text-white text-uppercase">{{setting("project_number")}}</span> <a class="breadcrumb-item text-muted" href="javascript:void(0)">{{ $parent->title }}</a>
<span class="text-white-op " @endif
style="max-width:30%; display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; text-align:center; cursor:pointer;" @endif
data-toggle="popover" <span class="breadcrumb-item active text-muted">@yield('title')</span>
data-placement="bottom" </nav>
data-html="true"
data-original-title="{{ setting("project_name") }}"
data-content='{{ setting("project_name_ru") }}'>
- {{ setting("project_name") }} / {{ setting("project_name_ru") }}
</span>
</div> </div>
</div> </div>
<!-- END Left Section --> <!-- END Left Section -->
<!-- Right Section --> <!-- Right Section -->
<div class="content-header-section"> <div class="content-header-section">
<!-- Feedback Button --> <!-- Feedback Button -->
<button type="button" class="btn btn-rounded btn-dual-secondary" <button type="button" class="btn btn-rounded btn-dual-secondary" id="openFeedback" title="Feedback">
id="openFeedback" <i class="fas fa-comment-dots"></i>
title="Feedback"> </button>
<i class="fas fa-comment-dots"></i>
</button>
@if($u->level == "Admin") @if($u->level == "Admin")
<!-- Admin Tools Dropdown --> <!-- Admin Tools Dropdown -->
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button type="button" class="btn btn-rounded btn-dual-secondary" id="page-header-admin-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-rounded btn-dual-secondary" id="page-header-admin-dropdown"
<i class="fa fa-wrench"></i> data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button> <i class="fa fa-wrench"></i>
<div class="dropdown-menu dropdown-menu-right min-width-200" aria-labelledby="page-header-admin-dropdown"> </button>
<h5 class="h6 text-center py-10 mb-5 border-b text-uppercase">Admin Tools</h5> <div class="dropdown-menu dropdown-menu-right min-width-200"
aria-labelledby="page-header-admin-dropdown">
<a class="dropdown-item" href="javascript:void(0)" onclick=" <h5 class="h6 text-center py-10 mb-5 border-b text-uppercase">Admin Tools</h5>
Swal.fire('', 'Cronjob is Started', 'success');
$.get('{{url("cron")}}', function(d){ <a class="dropdown-item" href="javascript:void(0)" onclick="
Swal.fire('', 'Cronjob is OK', 'success') Swal.fire('', 'Cronjob is Started', 'success');
});"> $.get('{{url("cron")}}', function(d){
<i class="fa fa-cog mr-5"></i> {{e2("Run CronJOB")}} Swal.fire('', 'Cronjob is OK', 'success')
</a> });">
<i class="fa fa-cog mr-5"></i> {{e2("Run CronJOB")}}
<a class="dropdown-item" href="javascript:void(0)" onclick="$.get('{{url("clear-cache")}}',function(d) { </a>
Swal.fire('', 'Cache is Cleared!', 'success')
});"> <a class="dropdown-item" href="javascript:void(0)" onclick="$.get('{{url("clear-cache")}}',function(d) {
<i class="fa fa-sync mr-5"></i> {{__('Clear cache')}} Swal.fire('', 'Cache is Cleared!', 'success')
</a> });">
<i class="fa fa-sync mr-5"></i> {{__('Clear cache')}}
</a>
</div>
</div> </div>
</div>
@endif @endif
<!-- Language Dropdown --> <!-- Language Dropdown -->
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button type="button" class="btn btn-rounded btn-dual-secondary" id="page-header-language-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-rounded btn-dual-secondary" id="page-header-language-dropdown"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-globe"></i> <i class="fa fa-globe"></i>
<span class="d-none d-sm-inline-block ml-5">{{e2(App::getLocale())}}</span> <span class="d-none d-sm-inline-block ml-5">{{e2(App::getLocale())}}</span>
</button> </button>
<div class="dropdown-menu dropdown-menu-right min-width-200" aria-labelledby="page-header-language-dropdown"> <div class="dropdown-menu dropdown-menu-right min-width-200"
aria-labelledby="page-header-language-dropdown">
<h5 class="h6 text-center py-10 mb-5 border-b text-uppercase">{{ e2("Change Language") }}</h5> <h5 class="h6 text-center py-10 mb-5 border-b text-uppercase">{{ e2("Change Language") }}</h5>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<?php $dil = languages(); foreach($dil AS $d) { ?> <?php $dil = languages();
<a class="dropdown-item" href="javascript:void(0)" onclick="$.get('?ajax=set-locale&l={{$d}}',function(){location.reload()})"> foreach ($dil as $d) { ?>
<a class="dropdown-item" href="javascript:void(0)"
onclick="$.get('?ajax=set-locale&l={{$d}}',function(){location.reload()})">
<i class="fa fa-language mr-5"></i> {{e2($d)}} <i class="fa fa-language mr-5"></i> {{e2($d)}}
</a> </a>
<?php } ?> <?php } ?>
@@ -86,24 +86,28 @@
<!-- Notifications --> <!-- Notifications -->
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button type="button" class="btn btn-rounded btn-dual-secondary" id="notification-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="loadNotifications()"> <button type="button" class="btn btn-rounded btn-dual-secondary" id="notification-dropdown"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="loadNotifications()">
<i class="fa fa-bell"></i> <i class="fa fa-bell"></i>
<span class="badge badge-primary badge-pill" id="notification-count" style="display:none;">0</span> <span class="badge badge-primary badge-pill" id="notification-count" style="display:none;">0</span>
</button> </button>
<div class="dropdown-menu dropdown-menu-right" style="width: 380px; padding: 0;" aria-labelledby="notification-dropdown"> <div class="dropdown-menu dropdown-menu-right" style="width: 380px; padding: 0;"
aria-labelledby="notification-dropdown">
<div class="block block-rounded block-bordered mb-0" style="border: none; border-radius: 0.375rem;"> <div class="block block-rounded block-bordered mb-0" style="border: none; border-radius: 0.375rem;">
<div class="block-header block-header-default"> <div class="block-header block-header-default">
<h3 class="block-title"> <h3 class="block-title">
<i class="fa fa-bell mr-5"></i> {{ e2("Notifications") }} <i class="fa fa-bell mr-5"></i> {{ e2("Notifications") }}
<span class="badge badge-primary ml-5" id="notification-unread-indicator">{{ e2("Loading") }}</span> <span class="badge badge-primary ml-5"
id="notification-unread-indicator">{{ e2("Loading") }}</span>
</h3> </h3>
<div class="block-options"> <div class="block-options">
<button type="button" class="btn-block-option" onclick="markAllAsRead(); return false;" title="{{e2('Mark All Read')}}"> <button type="button" class="btn-block-option" onclick="markAllAsRead(); return false;"
title="{{e2('Mark All Read')}}">
<i class="si si-check"></i> <i class="si si-check"></i>
</button> </button>
</div> </div>
</div> </div>
<div class="block-content p-0"> <div class="block-content p-0">
<div id="notification-scroll-area" style="max-height: 400px; overflow-y: auto;"> <div id="notification-scroll-area" style="max-height: 400px; overflow-y: auto;">
<ul id="notification-list" class="list-unstyled mb-0"> <ul id="notification-list" class="list-unstyled mb-0">
@@ -114,7 +118,7 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="block-content block-content-full block-content-sm bg-body-light text-center"> <div class="block-content block-content-full block-content-sm bg-body-light text-center">
<a class="btn btn-sm btn-alt-primary" href="{{url('/admin/types/my-notifications')}}"> <a class="btn btn-sm btn-alt-primary" href="{{url('/admin/types/my-notifications')}}">
<i class="fa fa-list mr-5"></i> {{e2("View All")}} <i class="fa fa-list mr-5"></i> {{e2("View All")}}
@@ -126,14 +130,18 @@
<!-- User Dropdown --> <!-- User Dropdown -->
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button type="button" class="btn btn-rounded btn-dual-secondary" id="page-header-user-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-rounded btn-dual-secondary" id="page-header-user-dropdown"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user d-sm-none"></i> <i class="fa fa-user d-sm-none"></i>
<span class="d-none d-sm-inline-block ml-5">{{ Auth::user()->name }} {{ Auth::user()->surname }}</span> <span class="d-none d-sm-inline-block ml-5">{{ Auth::user()->name }}
{{ Auth::user()->surname }}</span>
<i class="fa fa-angle-down ml-5"></i> <i class="fa fa-angle-down ml-5"></i>
</button> </button>
<div class="dropdown-menu dropdown-menu-right min-width-200" aria-labelledby="page-header-user-dropdown"> <div class="dropdown-menu dropdown-menu-right min-width-200"
aria-labelledby="page-header-user-dropdown">
<h5 class="h6 text-center py-10 mb-5 border-b text-uppercase">User</h5> <h5 class="h6 text-center py-10 mb-5 border-b text-uppercase">User</h5>
<a class="dropdown-item" href="javascript:void(0)" data-toggle="layout" data-action="side_overlay_toggle"> <a class="dropdown-item" href="javascript:void(0)" data-toggle="layout"
data-action="side_overlay_toggle">
<i class="si si-wrench mr-5"></i> {{e2("Account Settings")}} <i class="si si-wrench mr-5"></i> {{e2("Account Settings")}}
</a> </a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
@@ -153,7 +161,8 @@
<form action="{{url('admin/search')}}" method="get"> <form action="{{url('admin/search')}}" method="get">
<div class="input-group"> <div class="input-group">
<div class="input-group-prepend"> <div class="input-group-prepend">
<button type="button" class="btn btn-secondary" data-toggle="layout" data-action="header_search_off"> <button type="button" class="btn btn-secondary" data-toggle="layout"
data-action="header_search_off">
<i class="fas fa-times"></i> <i class="fas fa-times"></i>
</button> </button>
</div> </div>
@@ -189,36 +198,41 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 5px; /* Image ve title arası mesafe */ gap: 5px;
/* Image ve title arası mesafe */
transition: all 0.3s ease; transition: all 0.3s ease;
/* Hem mobilde hem desktopta akışı bozmaması için absolute */ /* Hem mobilde hem desktopta akışı bozmaması için absolute */
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1000; /* En üstte */ z-index: 1000;
pointer-events: none; /* Arkadaki butonlara tıklanabilsin */ /* En üstte */
pointer-events: none;
color: white !important; /* Her durumda beyaz */ /* Arkadaki butonlara tıklanabilsin */
color: white !important;
/* Her durumda beyaz */
} }
.mini-header img { .mini-header img {
height: 33px; height: 33px;
width: auto; width: auto;
display: block; display: block;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
} }
/* Geniş Ekran (Desktop) Ayarları */ /* Geniş Ekran (Desktop) Ayarları */
@media (min-width: 992px) { @media (min-width: 992px) {
.mini-header { .mini-header {
font-size: 20px; font-size: 20px;
top: 3px; /* Özel istek */ top: 3px;
/* Özel istek */
height: auto; height: auto;
} }
.mini-header img { .mini-header img {
height: 33px; height: 33px;
} }
@@ -230,18 +244,31 @@
font-size: 16px; font-size: 16px;
/* Mobilde tam ortada kalsın */ /* Mobilde tam ortada kalsın */
} }
.mini-header img { .mini-header img {
height: 28px; height: 28px;
} }
} }
/* Print Styles */ /* Print Styles */
.yesprint { display:none; } .yesprint {
display: none;
}
@media print { @media print {
.sidebar, .noprint { display:none; }
body { background:white; } .sidebar,
.yesprint { display:block; } .noprint {
display: none;
}
body {
background: white;
}
.yesprint {
display: block;
}
} }
/* Notification Item Styles */ /* Notification Item Styles */
@@ -254,24 +281,24 @@
cursor: pointer; cursor: pointer;
position: relative; position: relative;
} }
.notification-item:last-child { .notification-item:last-child {
border-bottom: none; border-bottom: none;
} }
.notification-item:hover { .notification-item:hover {
background-color: #f8f9fa; background-color: #f8f9fa;
} }
.notification-item.unread { .notification-item.unread {
background-color: #f0f8ff; background-color: #f0f8ff;
border-left: 3px solid #42a5f5; border-left: 3px solid #42a5f5;
} }
.notification-item.unread:hover { .notification-item.unread:hover {
background-color: #e3f2fd; background-color: #e3f2fd;
} }
.notification-item .icon { .notification-item .icon {
width: 40px; width: 40px;
height: 40px; height: 40px;
@@ -285,16 +312,16 @@
flex-shrink: 0; flex-shrink: 0;
font-size: 16px; font-size: 16px;
} }
.notification-item.unread .icon { .notification-item.unread .icon {
background: linear-gradient(135deg, #42a5f5 0%, #2196f3 100%); background: linear-gradient(135deg, #42a5f5 0%, #2196f3 100%);
} }
.notification-item .content { .notification-item .content {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
} }
.notification-item .content .title { .notification-item .content .title {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
@@ -302,7 +329,7 @@
margin-bottom: 4px; margin-bottom: 4px;
line-height: 1.4; line-height: 1.4;
} }
.notification-item .content .message { .notification-item .content .message {
font-size: 13px; font-size: 13px;
color: #6c757d; color: #6c757d;
@@ -310,55 +337,55 @@
margin-bottom: 6px; margin-bottom: 6px;
word-wrap: break-word; word-wrap: break-word;
} }
.notification-item .content .meta { .notification-item .content .meta {
font-size: 11px; font-size: 11px;
color: #adb5bd; color: #adb5bd;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.notification-item .content .meta i { .notification-item .content .meta i {
margin-right: 4px; margin-right: 4px;
font-size: 10px; font-size: 10px;
} }
.notification-placeholder { .notification-placeholder {
text-align: center; text-align: center;
padding: 40px 20px; padding: 40px 20px;
color: #6c757d; color: #6c757d;
} }
.notification-placeholder i { .notification-placeholder i {
font-size: 48px; font-size: 48px;
margin-bottom: 15px; margin-bottom: 15px;
opacity: 0.5; opacity: 0.5;
} }
.notification-placeholder .font-weight-bold { .notification-placeholder .font-weight-bold {
font-size: 16px; font-size: 16px;
color: #495057; color: #495057;
margin-bottom: 8px; margin-bottom: 8px;
} }
.notification-placeholder .small { .notification-placeholder .small {
font-size: 13px; font-size: 13px;
} }
/* Scrollbar Styling */ /* Scrollbar Styling */
#notification-scroll-area::-webkit-scrollbar { #notification-scroll-area::-webkit-scrollbar {
width: 6px; width: 6px;
} }
#notification-scroll-area::-webkit-scrollbar-track { #notification-scroll-area::-webkit-scrollbar-track {
background: #f1f1f1; background: #f1f1f1;
} }
#notification-scroll-area::-webkit-scrollbar-thumb { #notification-scroll-area::-webkit-scrollbar-thumb {
background: #c1c1c1; background: #c1c1c1;
border-radius: 3px; border-radius: 3px;
} }
#notification-scroll-area::-webkit-scrollbar-thumb:hover { #notification-scroll-area::-webkit-scrollbar-thumb:hover {
background: #a8a8a8; background: #a8a8a8;
} }