From 296d31b90c981039b79be2c1e526397701c59167 Mon Sep 17 00:00:00 2001 From: Saufi Date: Tue, 16 Jun 2026 20:31:07 +0800 Subject: [PATCH] table responsive --- public/css/app.css | 93 +++++++ resources/views/layouts/app.blade.php | 3 +- resources/views/pengurus/senarai.blade.php | 292 ++++++++++++++------- 3 files changed, 298 insertions(+), 90 deletions(-) diff --git a/public/css/app.css b/public/css/app.css index f73dbd1..3ca8833 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -269,13 +269,106 @@ table.jadual tbody tr:nth-child(even) { background: #f8f9fb; } .ralat-medan { color: var(--merah); font-size: 0.88rem; margin: -0.5rem 0 0.9rem; } +/* ===== Jadual: kepala (tajuk + carian), badan, kaki (info + paging) ===== */ +.jadual-kepala { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.75rem; + flex-wrap: wrap; + padding: 1rem 1.25rem; +} + +.tajuk-jadual { + margin: 0; + font-size: 1.05rem; + border-left: 4px solid var(--biru); + padding-left: 0.6rem; +} +.tajuk-jadual.hijau { border-color: var(--hijau); color: var(--hijau); } +.tajuk-jadual.merah { border-color: var(--merah); color: var(--merah); } + +.jadual-kepala .cari-input { + width: auto; + flex: 1 1 220px; + max-width: 360px; + margin: 0; + padding: 0.5rem 0.75rem; + font-size: 0.95rem; +} + +.jadual-bekas { overflow-x: auto; } + +.jadual-kaki { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.75rem; + flex-wrap: wrap; + padding: 0.75rem 1.25rem; + border-top: 1px solid var(--kelabu-border); +} + +.paging { display: flex; gap: 0.3rem; flex-wrap: wrap; } + +.paging-btn { + min-width: 2.2rem; + padding: 0.35rem 0.6rem; + border: 1px solid var(--kelabu-border); + background: #fff; + color: var(--teks); + border-radius: 6px; + font-size: 0.9rem; + font-weight: 600; + cursor: pointer; +} +.paging-btn:hover:not(:disabled) { background: var(--kelabu); } +.paging-btn.aktif { background: var(--biru); border-color: var(--biru); color: #fff; } +.paging-btn:disabled { opacity: 0.45; cursor: default; } + @media print { .topbar, .tiada-cetak { display: none !important; } body { background: #fff; } .kad { border: none; } + /* Cetak semua baris tanpa mengira halaman semasa */ + tr.baris-data { display: table-row !important; } } @media (max-width: 640px) { .slip-nombor { font-size: 3.5rem; } table.jadual { font-size: 0.85rem; } + + .jadual-kepala, .jadual-kaki { padding: 0.8rem; } + .jadual-kepala .cari-input { max-width: none; } + + /* Jadual responsif: setiap baris jadi kad bertindan dgn label */ + .jadual-responsif thead { display: none; } + .jadual-responsif tbody tr { + display: block; + border: 1px solid var(--kelabu-border); + border-radius: 8px; + margin: 0.6rem; + padding: 0.3rem 0.6rem; + background: #fff !important; + } + .jadual-responsif tbody td { + display: flex; + justify-content: space-between; + align-items: baseline; + gap: 1rem; + border: none; + padding: 0.35rem 0; + text-align: right; + } + .jadual-responsif tbody td::before { + content: attr(data-label); + font-weight: 600; + color: #5a6172; + text-align: left; + flex: 0 0 auto; + } + .jadual-responsif tbody td:last-child { padding-bottom: 0.1rem; } + .jadual-responsif .baris-tindakan { justify-content: flex-end; } + .jadual-responsif .baris-tiada td { justify-content: center; text-align: center; } + .jadual-responsif .baris-tiada td::before { content: ""; } } diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 0165006..d0e526d 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -4,7 +4,8 @@ @yield('tajuk', config('app.name')) - + @php $cssVer = @filemtime(public_path('css/app.css')) ?: null; @endphp +
diff --git a/resources/views/pengurus/senarai.blade.php b/resources/views/pengurus/senarai.blade.php index 5e80f89..2b6638b 100644 --- a/resources/views/pengurus/senarai.blade.php +++ b/resources/views/pengurus/senarai.blade.php @@ -26,105 +26,219 @@ -
- - - - - - - - - - - - - - - - - - @forelse ($hadir as $p) - @php - $penempatan = $p->butiranPenempatan(); - $rekod = $kehadiran->get($p->id); - @endphp + {{-- ===================== HADIR ===================== --}} +
+
+

HADIR ({{ $hadir->count() }})

+ +
+
+
HADIR ({{ $hadir->count() }})
SiriNamaNo. TelefonEmelPusat MengundiSaluranJawatanBorang
+ - - - - - - - - + + + + + + + + - @empty - - @endforelse - -
{{ $rekod?->nombor_siri_papar }}{{ $p->nama_ic }}{{ $p->no_telefon ?? '-' }}{{ $p->emel ?? '-' }}{{ $penempatan['pusat_mengundi'] }}{{ $penempatan['saluran'] }}{{ $penempatan['jawatan'] }} - @if ($rekod?->borang_diambil) - Diambil - @else - Belum - @endif - SiriNamaNo. TelefonEmelPusat MengundiSaluranJawatanBorang
Tiada petugas hadir lagi.
+ + + @forelse ($hadir as $p) + @php + $penempatan = $p->butiranPenempatan(); + $rekod = $kehadiran->get($p->id); + @endphp + + {{ $rekod?->nombor_siri_papar }} + {{ $p->nama_ic }} + {{ $p->no_telefon ?? '-' }} + {{ $p->emel ?? '-' }} + {{ $penempatan['pusat_mengundi'] }} + {{ $penempatan['saluran'] }} + {{ $penempatan['jawatan'] }} + + @if ($rekod?->borang_diambil) + Diambil + @else + Belum + @endif + + + @empty + Tiada petugas hadir lagi. + @endforelse + + +
+
+ +
+
-
- - - - - - - - - - - - - - - - - @forelse ($tidakHadir as $p) - @php - $penempatan = $p->butiranPenempatan(); - $telefon = preg_replace('/[^0-9]/', '', $p->no_telefon ?? ''); - $waNombor = $telefon !== '' ? (str_starts_with($telefon, '60') ? $telefon : '6' . $telefon) : ''; - @endphp + {{-- ================ TIDAK / BELUM HADIR ================ --}} +
+
+

TIDAK / BELUM HADIR ({{ $tidakHadir->count() }})

+ +
+
+
TIDAK / BELUM HADIR ({{ $tidakHadir->count() }})
NamaNo. TelefonEmelPusat MengundiSaluranJawatanHubungi
+ - - - - - - - + + + + + + + - @empty - - @endforelse - -
{{ $p->nama_ic }}{{ $p->no_telefon ?? '-' }}{{ $p->emel ?? '-' }}{{ $penempatan['pusat_mengundi'] }}{{ $penempatan['saluran'] }}{{ $penempatan['jawatan'] }} - @if ($telefon !== '') -
- - WhatsApp - - Call -
- @else - Tiada no. telefon - @endif - 		NamaNo. TelefonEmelPusat MengundiSaluranJawatanHubungi
Semua petugas telah hadir.
+ + + @forelse ($tidakHadir as $p) + @php + $penempatan = $p->butiranPenempatan(); + $telefon = preg_replace('/[^0-9]/', '', $p->no_telefon ?? ''); + $waNombor = $telefon !== '' ? (str_starts_with($telefon, '60') ? $telefon : '6' . $telefon) : ''; + @endphp + + {{ $p->nama_ic }} + {{ $p->no_telefon ?? '-' }} + {{ $p->emel ?? '-' }} + {{ $penempatan['pusat_mengundi'] }} + {{ $penempatan['saluran'] }} + {{ $penempatan['jawatan'] }} + + @if ($telefon !== '') +
+ + WhatsApp + + Call +
+ @else + Tiada no. telefon + @endif + + + @empty + Semua petugas telah hadir. + @endforelse + + +
+
+ +
+
Kembali ke Sesi
+ + @endsection