From d05c32cb6be1a509ebf1236ad7d72a86c1072c76 Mon Sep 17 00:00:00 2001 From: zhadaarsita Date: Sat, 8 Nov 2025 03:29:50 +0700 Subject: [PATCH] Fixing: Bug responsive guest,sidebar,login and adjust color pallete --- public/images/assets/bg-login.svg | 912 +++++++++--------- public/js/dashboard-charts.js | 4 +- resources/scss/_custom.scss | 203 ++-- resources/scss/_variables.scss | 6 +- resources/views/admin/dashboard.blade.php | 4 +- .../views/admin/peminjaman/index.blade.php | 39 +- resources/views/auth/login.blade.php | 1 + resources/views/dashboard.blade.php | 2 +- resources/views/layouts/app.blade.php | 8 +- resources/views/layouts/guest.blade.php | 26 +- resources/views/layouts/sidebar.blade.php | 4 +- 11 files changed, 612 insertions(+), 597 deletions(-) diff --git a/public/images/assets/bg-login.svg b/public/images/assets/bg-login.svg index b3effb1..5758f99 100644 --- a/public/images/assets/bg-login.svg +++ b/public/images/assets/bg-login.svg @@ -1,457 +1,457 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/js/dashboard-charts.js b/public/js/dashboard-charts.js index de8410e..767e7bb 100644 --- a/public/js/dashboard-charts.js +++ b/public/js/dashboard-charts.js @@ -11,7 +11,7 @@ document.addEventListener('DOMContentLoaded', function () { labels: statistikData.labels, datasets: [{ label: 'Buku Dibaca', - backgroundColor: '#5A81FA', + backgroundColor: '#0C5495', data: statistikData.data, borderRadius: 8 }] @@ -63,7 +63,7 @@ document.addEventListener('DOMContentLoaded', function () { labels: ['Telah Dibaca', 'Belum Dibaca'], datasets: [{ data: [progressData.selesai, progressData.sisa], - backgroundColor: ['#5A81FA', '#e9ecef'], + backgroundColor: ['#0C5495', '#fbb716'], borderColor: ['#ffffff'], borderWidth: 3, }] diff --git a/resources/scss/_custom.scss b/resources/scss/_custom.scss index 7f6a17e..d3304ac 100644 --- a/resources/scss/_custom.scss +++ b/resources/scss/_custom.scss @@ -4,14 +4,17 @@ // UTILITIES (GENERATED FROM MAPS) // =================================== // Generator otomatis untuk variant warna (background light, soft, alert) -@each $color, $value in $theme-colors { +@each $color, +$value in $theme-colors { .bg-#{$color}-light { background-color: rgba($value, 0.25) !important; } + .bg-#{$color}-soft { background-color: rgba($value, 0.25); color: $value; } + .alert-#{$color} { background-color: rgba($value, 0.2); color: color.adjust($value, $lightness: -25%); @@ -35,43 +38,44 @@ html { .navbar-brand { font-size: 1.25rem; - + i { font-size: 1.5rem; } - + @media (max-width: 575.98px) { font-size: 1.1rem; - + i { font-size: 1.25rem; } } } - + .navbar-toggler { padding: 0.25rem 0.5rem; - + &:focus { box-shadow: none; } } - + .navbar-nav { .nav-link { padding: 0.5rem 1rem; - color: #49769F; - - &:hover, &.active { - color: #0A4174; + color: #49769F; + + &:hover, + &.active { + color: #0C5495; } - + @media (max-width: 991.98px) { padding: 0.5rem 0; } } } - + @media (max-width: 991.98px) { .navbar-collapse { margin-top: 1rem; @@ -79,19 +83,19 @@ html { border-top: 1px solid rgba(0, 0, 0, 0.1); .navbar-nav { - text-align: left !important; - width: 100%; + text-align: left !important; + width: 100%; } .nav-item { margin: 0 !important; - text-align: left !important; + text-align: left !important; } - + .nav-link { - width: 100%; + width: 100%; justify-content: start; - padding-left: 0.75rem; + padding-left: 0.75rem; padding-right: 0.75rem; } } @@ -100,13 +104,11 @@ html { // Hero Section .landing-hero-section { - background: linear-gradient( - 135deg, - #0A4174 0%, - color.adjust(#0A4174, $lightness: 10%) 100% - ); + background: linear-gradient(135deg, + #0C5495 0%, + color.adjust(#0C5495, $lightness: 10%) 100%); padding: 60px 0; - + @media (min-width: 992px) { padding: 100px 0; } @@ -114,10 +116,12 @@ html { .btn-hero-solid { background-color: #fff !important; border-color: #fff !important; - color: $primary !important; /* Menggunakan warna primary Anda #0A4174 */ - + color: $primary !important; + /* Menggunakan warna primary Anda #0C5495 */ + &:hover { - background-color: lighten($primary, 70%) !important; /* Sedikit keabu-abuan saat hover */ + background-color: lighten($primary, 70%) !important; + /* Sedikit keabu-abuan saat hover */ border-color: lighten($primary, 70%) !important; color: $primary !important; } @@ -132,23 +136,21 @@ html { display: flex; align-items: center; justify-content: center; - + i { font-size: 5rem; } - + @media (min-width: 1200px) { width: 220px; height: 220px; - + i { font-size: 6rem; } } } - - .card-img-top { height: 200px; object-fit: cover; @@ -162,26 +164,25 @@ html { line-height: 1.4; min-height: 2.8rem; font-size: 0.9rem; - + @media (max-width: 575.98px) { font-size: 0.85rem; min-height: 2.4rem; } } - // Stat Card .landing-stat-card { transition: all 0.3s ease; - + &:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12) !important; } - + h2 { font-size: 2rem; - + @media (min-width: 768px) { font-size: 2.5rem; } @@ -190,13 +191,11 @@ html { // CTA Section .landing-cta-section { - background: linear-gradient( - 135deg, - #0A4174 0%, - color.adjust(#0A4174, $lightness: 10%) 100% - ); + background: linear-gradient(135deg, + #0C5495 0%, + color.adjust(#0C5495, $lightness: 10%) 100%); border-radius: 1rem; - + @media (min-width: 768px) { border-radius: 1.5rem; } @@ -210,6 +209,7 @@ html { .card { box-shadow: $card-box-shadow; + .card-header { background-color: #fff; border-bottom: 1px solid rgba(map-get($grays, "dark"), 0.1); @@ -219,6 +219,7 @@ html { .alert { border-radius: $border-radius; box-shadow: $shadow-sm; + .alert-icon { width: 24px; display: flex; @@ -232,11 +233,13 @@ html { border: none; border-radius: $border-radius-lg; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); + .modal-header, .modal-footer { border-color: rgba(map-get($grays, "dark"), 0.1); padding: 1.5rem; } + .modal-title { color: map-get($grays, "dark"); font-weight: 700; @@ -378,10 +381,13 @@ body { .sidebar.bg-primary { .nav-link { color: rgba(255, 255, 255, 0.85); - i { color: rgba(255, 255, 255, 0.85); } + + i { + color: rgba(255, 255, 255, 0.85); + } &.py-1 { - color: rgba(255, 255, 255, 0.7); + color: rgba(255, 255, 255, 0.7); } } @@ -389,14 +395,20 @@ body { .nav-link.py-1:hover { background: rgba(255, 255, 255, 0.05); color: #fff; - i { color: #fff; } + + i { + color: #fff; + } } .nav-link.active { - background: rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.1); color: #fff; font-weight: 600; - i { color: #fff; } + + i { + color: #fff; + } } } @@ -610,6 +622,7 @@ nav { width: 40px; height: 40px; border-radius: 10px; + i { font-size: 1.2rem; } @@ -624,12 +637,11 @@ nav { .book-cover { transition: $transition; border-radius: $border-radius-sm; + &-container { - background: linear-gradient( - 135deg, - rgba(map-get($grays, "light"), 0.5) 0%, - rgba(map-get($grays, "light"), 0.8) 100% - ); + background: linear-gradient(135deg, + rgba(map-get($grays, "light"), 0.5) 0%, + rgba(map-get($grays, "light"), 0.8) 100%); border-radius: $border-radius-sm 0 0 $border-radius-sm; } } @@ -638,6 +650,7 @@ nav { .section-header { padding-bottom: 15px; border-bottom: 2px solid map-get($grays, "light"); + h5 { color: map-get($grays, "dark"); font-weight: 700; @@ -648,12 +661,14 @@ nav { .empty-state { text-align: center; padding: 3rem 1rem; + i { font-size: 4rem; color: map-get($grays, "dark"); margin-bottom: 1rem; opacity: 0.25; } + p { color: map-get($grays, "dark"); opacity: 0.7; @@ -669,13 +684,17 @@ nav { --bs-btn-border-color: #{map-get($theme-colors, "primary")}; --bs-btn-hover-color: #{map-get($grays, "dark")}; --bs-btn-hover-bg: #{color.adjust( - map-get($theme-colors, "primary"), - $lightness: -5% - )}; - --bs-btn-hover-border-color: #{color.adjust( - map-get($theme-colors, "primary"), - $lightness: -7.5% - )}; + map-get($theme-colors, "primary"), + $lightness: -5%) +} + +; +--bs-btn-hover-border-color: #{color.adjust( + map-get($theme-colors, "primary"), +$lightness: -7.5%) +} + +; } // Text clamp untuk truncate multi line @@ -686,9 +705,11 @@ nav { overflow: hidden; line-height: 1.4; } + .line-clamp-2 { -webkit-line-clamp: 2; } + .line-clamp-3 { -webkit-line-clamp: 3; } @@ -697,13 +718,16 @@ nav { ::-webkit-scrollbar { width: 6px; } + ::-webkit-scrollbar-track { background: map-get($grays, "light"); border-radius: 3px; } + ::-webkit-scrollbar-thumb { background: rgba(map-get($grays, "dark"), 0.25); border-radius: 3px; + &:hover { background: rgba(map-get($grays, "dark"), 0.4); } @@ -777,6 +801,7 @@ nav { transform: translateY(-2px); border-color: map-get($theme-colors, "primary"); box-shadow: $shadow-md; + .book-cover { transform: scale(1.03); } @@ -809,11 +834,9 @@ nav { // Background gradient hero section .hero-gradient { - background: linear-gradient( - 135deg, - map-get($theme-colors, "primary") 0%, - color.adjust(map-get($theme-colors, "primary"), $lightness: 10%) 100% - ); + background: linear-gradient(135deg, + map-get($theme-colors, "primary") 0%, + color.adjust(map-get($theme-colors, "primary"), $lightness: 10%) 100%); } // Card untuk pilih role (admin/user) @@ -833,11 +856,9 @@ nav { // Panel info di halaman auth .info-panel { - background: linear-gradient( - 135deg, - map-get($theme-colors, "primary") 0%, - color.adjust(map-get($theme-colors, "primary"), $lightness: 10%) 100% - ); + background: linear-gradient(135deg, + map-get($theme-colors, "primary") 0%, + color.adjust(map-get($theme-colors, "primary"), $lightness: 10%) 100%); } // Panel kiri auth (logo dan branding) @@ -849,21 +870,13 @@ nav { } .auth-branding { - max-width: 500px; + max-width: 450px; .auth-logo { display: flex; align-items: center; gap: 1rem; - margin-bottom: 1.5rem; - - h1 { - font-size: 3rem; - font-weight: 700; - color: #fff; - margin: 0; - padding-bottom: 5px; - } + margin-bottom: 1rem; } } @@ -888,21 +901,17 @@ nav { // Responsive auth pages @media (max-width: 991.98px) { + + // Panel Kiri Auth (Di Mobile) .auth-left-panel { background-image: none !important; - background-color: #5a81fa; + background-color: map-get($theme-colors, "primary") !important; + position: absolute !important; + min-height: 40vh; } - .auth-branding { - .auth-logo { - .icon-circle { - width: 80px !important; - height: 80px !important; - border-radius: 20px !important; - } - h1 { - font-size: 2.5rem; - } - } + + .d-lg-none { + padding-top: 20vh !important; } } @@ -912,6 +921,7 @@ nav { // Override styling DataTables .dataTables_wrapper { + .dataTables_length, .dataTables_filter, .dataTables_info, @@ -928,8 +938,7 @@ nav { &:focus { outline: none; border-color: map-get($theme-colors, "primary"); - box-shadow: 0 0 0 0.2rem - rgba(map-get($theme-colors, "primary"), 0.25); + box-shadow: 0 0 0 0.2rem rgba(map-get($theme-colors, "primary"), 0.25); } } @@ -944,6 +953,7 @@ nav { // Responsive DataTables untuk mobile @media screen and (max-width: 576px) { .dataTables_wrapper { + .dataTables_length, .dataTables_filter { text-align: center; @@ -956,6 +966,7 @@ nav { margin-top: 1rem; } } + table.dataTable td { white-space: normal !important; } @@ -1014,4 +1025,4 @@ nav { gap: 0.25rem; } } -} \ No newline at end of file +} diff --git a/resources/scss/_variables.scss b/resources/scss/_variables.scss index 5f19277..7804a69 100644 --- a/resources/scss/_variables.scss +++ b/resources/scss/_variables.scss @@ -6,10 +6,10 @@ // Theme Colors Map $theme-colors: ( - "primary": #0A4174, - "secondary": #49769F, + "primary": #0C5495, + "secondary": #92D0F0, "success": #14b8a6, - "info": #0c88db, + "info": #7BBDE8, "warning": #fbb716, "danger": #f43f5e, ); diff --git a/resources/views/admin/dashboard.blade.php b/resources/views/admin/dashboard.blade.php index c190f66..042b85e 100644 --- a/resources/views/admin/dashboard.blade.php +++ b/resources/views/admin/dashboard.blade.php @@ -149,8 +149,8 @@ datasets: [{ label: 'Jumlah Peminjaman', data: barData.data, - backgroundColor: 'rgba(67, 94, 190, 0.7)', - borderColor: 'rgba(67, 94, 190, 1)', + backgroundColor: '#0C5495', + borderColor: '#0C5495', borderWidth: 1, borderRadius: 5 }] diff --git a/resources/views/admin/peminjaman/index.blade.php b/resources/views/admin/peminjaman/index.blade.php index fc3aa3f..280c01a 100644 --- a/resources/views/admin/peminjaman/index.blade.php +++ b/resources/views/admin/peminjaman/index.blade.php @@ -7,19 +7,19 @@

Daftar ini hanya menampilkan buku yang masih berstatus "Dipinjam".

- Buat Peminjaman Manual + Buat Peminjaman Manual
- +
- + @@ -38,11 +38,11 @@ $isTerlambat = $now->startOfDay()->isAfter($tenggat->startOfDay()); $isHariIni = $now->startOfDay()->isSameDay($tenggat->startOfDay()); $selisihHari = $now->startOfDay()->diffInDays($tenggat->startOfDay(), false); - + $statusKeterlambatan = ''; $dendaKeterlambatan = 0; $statusClass = ''; - + if ($isTerlambat) { $hariTerlambat = $tenggat->startOfDay()->diffInDays($now->startOfDay()); $statusKeterlambatan = "Terlambat $hariTerlambat hari"; @@ -75,7 +75,7 @@ class="badge bg-primary-light text-primary fw-semibold">{{ $transaksi['id_peminj @@ -96,12 +96,14 @@ class="badge bg-primary-light text-primary fw-semibold">{{ $transaksi['id_peminj
Informasi Peminjaman
- +
- +
@@ -140,9 +142,8 @@ class="badge bg-primary-light text-primary fw-semibold">{{ $transaksi['id_peminj
- +
@@ -167,7 +168,8 @@ class="form-control denda-keterlambatan-display"
+ (Opsional) +
@@ -183,14 +185,15 @@ class="form-label small text-muted">Catatan Petugas
Total Denda Diterima

- Rp {{ number_format($dendaKeterlambatan, 0, ',', '.') }} + Rp + {{ number_format($dendaKeterlambatan, 0, ',', '.') }}

- @@ -222,11 +225,9 @@ class="form-label small text-muted">Catatan Petugas $('#peminjamanTable').DataTable({ pageLength: 10, order: [ - [0, 'asc'] + [0, 'asc'] ], - "language": { - "url": "//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json" - } + }); }); @@ -277,4 +278,4 @@ function hitungTotalDenda(modal) { @endpush - \ No newline at end of file + diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php index 99d4d41..edef6cb 100644 --- a/resources/views/auth/login.blade.php +++ b/resources/views/auth/login.blade.php @@ -28,6 +28,7 @@ +
@else
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php index 07d5df8..7be4bcf 100644 --- a/resources/views/dashboard.blade.php +++ b/resources/views/dashboard.blade.php @@ -192,7 +192,7 @@ class="badge bg-{{ $item['type'] }}-soft text-{{ $item['type'] }} rounded-pill p @forelse($bukuPinjamOffline as $buku)
-
+
Sisa: {{ $buku['sisa_hari'] }} hari
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index da80987..ffc3678 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -95,10 +95,10 @@ class="notification-item d-flex my-1 rounded-3 text-body text-decoration-none @i - - - - + + + + diff --git a/resources/views/layouts/guest.blade.php b/resources/views/layouts/guest.blade.php index 1c9e5e7..12fc492 100644 --- a/resources/views/layouts/guest.blade.php +++ b/resources/views/layouts/guest.blade.php @@ -7,7 +7,7 @@ {{ config('app.name', 'DIGIPUS') }} - {{-- Fonts & Icons --}} + {{-- Fonts & Icons (Tetap) --}} @@ -18,20 +18,20 @@ {{-- Container Utama --}} -
+
{{-- Branding Content --}} -

Gerbang Anda menuju dunia pengetahuan. Jelajahi ribuan koleksi buku digital, pinjam dengan mudah, @@ -42,13 +42,13 @@ {{-- FORM LOGIN --}}

+ style="right: 7%; z-index: 10; width: 400px; max-width: 90%;">
{{ $slot }}
-
+
{{ $slot }} @@ -63,12 +63,16 @@ const password = document.querySelector('#password'); if (togglePassword && password) { + // Tambahkan ikon awal jika belum ada + const initialIcon = togglePassword.querySelector('i'); + if (!initialIcon.classList.contains('bi-eye-fill') && !initialIcon.classList.contains('bi-eye-slash-fill')) { + initialIcon.classList.add('bi-eye-slash-fill'); + } + togglePassword.addEventListener('click', function(e) { - // Toggle tipe input const type = password.getAttribute('type') === 'password' ? 'text' : 'password'; password.setAttribute('type', type); - // Toggle ikon mata const icon = this.querySelector('i'); if (type === 'password') { icon.classList.remove('bi-eye-fill'); @@ -83,4 +87,4 @@ - + \ No newline at end of file diff --git a/resources/views/layouts/sidebar.blade.php b/resources/views/layouts/sidebar.blade.php index a9c3380..88f31cc 100644 --- a/resources/views/layouts/sidebar.blade.php +++ b/resources/views/layouts/sidebar.blade.php @@ -131,8 +131,6 @@ class="nav-link py-1 {{ request()->routeIs('riwayat.online') ? 'active' : '' }}" @endif - - {{-- Aksi User (Hanya Muncul di Mobile) --}}
@@ -146,7 +144,7 @@ class="nav-link py-1 {{ request()->routeIs('riwayat.online') ? 'active' : '' }}"
  • @csrf -
    • NO ID PEMINJAMANNAMA PEMINJAMNAMA JUDUL BUKU TGL. PINJAM TENGGAT KEMBALI