refactor: improve responsive layout and styling for class session cards in index and show views
This commit is contained in:
Yoga Pangestu
parent
7607e8070c
commit
20a9728115
@ -1,152 +1,129 @@
|
||||
<x-filament-panels::page>
|
||||
<!-- Search Section -->
|
||||
<x-filament::section>
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<div class="w-full max-w-xl">
|
||||
{{ $this->form }}
|
||||
</div>
|
||||
<div class="w-full max-w-xl">
|
||||
{{ $this->form }}
|
||||
</div>
|
||||
</x-filament::section>
|
||||
|
||||
<!-- Today's Sessions Section -->
|
||||
<x-filament::section icon="heroicon-o-bolt" icon-color="primary">
|
||||
<x-slot name="heading">
|
||||
Sesi Hari Ini
|
||||
</x-slot>
|
||||
<x-slot name="description">
|
||||
Sesi yang dijadwalkan pada {{ $this->today_date }}
|
||||
</x-slot>
|
||||
<x-slot name="heading">Sesi Hari Ini</x-slot>
|
||||
<x-slot name="description">Sesi yang dijadwalkan pada {{ $this->today_date }}</x-slot>
|
||||
|
||||
<div class="space-y-4">
|
||||
@forelse ($this->todaySessions as $session)
|
||||
<a href="{{ $session->url }}" class="{{ $session->card_classes }}">
|
||||
<div class="flex flex-1 items-start gap-4 p-5">
|
||||
<div class="{{ $session->session_badge_classes }}">
|
||||
<a href="{{ $session->url }}" class="{{ $session->card_classes }} flex-col sm:flex-row">
|
||||
|
||||
<div class="flex flex-1 items-start gap-4 p-4 sm:p-5 min-w-0">
|
||||
<div class="{{ $session->session_badge_classes }} shrink-0">
|
||||
<span class="text-[9px] uppercase leading-none opacity-60 mb-0.5 font-bold">Sesi</span>
|
||||
<span class="text-sm font-bold italic">Ke-{{ $session->session_number }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-start justify-between gap-3 flex-wrap">
|
||||
<div>
|
||||
<h3 class="{{ $session->title_classes }}">
|
||||
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2">
|
||||
<div class="min-w-0">
|
||||
<h3 class="{{ $session->title_classes }} truncate">
|
||||
{{ $session->course_name }}
|
||||
</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5 font-medium">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5 font-medium truncate">
|
||||
{{ $session->course_code }} • {{ $session->lecturer }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="{{ $session->status_badge_classes }}">
|
||||
|
||||
<div class="{{ $session->status_badge_classes }} shrink-0 self-start">
|
||||
<x-heroicon-s-clock class="w-3.5 h-3.5" />
|
||||
{{ $session->time_range }}
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="flex items-center gap-1.5 px-2 py-0.5 rounded-lg hover:bg-amber-50 dark:hover:bg-amber-900/10 cursor-pointer transition-colors"
|
||||
wire:click="mountAction('viewMaterials', { session: {{ $session->id }} })"
|
||||
onclick="event.stopPropagation()">
|
||||
<x-heroicon-o-document-text class="w-4 h-4 text-amber-500" />
|
||||
<span class="text-xs font-bold text-gray-600 dark:text-gray-400">
|
||||
{{ $session->materials_count }}<span
|
||||
class="ml-1 font-medium text-gray-400">Materi</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 px-2 py-0.5 rounded-lg hover:bg-primary-50 dark:hover:bg-primary-900/10 cursor-pointer transition-colors"
|
||||
wire:click="mountAction('viewAssignments', { session: {{ $session->id }} })"
|
||||
onclick="event.stopPropagation()">
|
||||
<x-heroicon-o-pencil-square class="w-4 h-4 text-primary-500" />
|
||||
<span class="text-xs font-bold text-gray-600 dark:text-gray-400">
|
||||
{{ $session->assignments_count }}<span
|
||||
class="ml-1 font-medium text-gray-400">Tugas</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2 mt-3">
|
||||
<div class="flex items-center gap-1.5 px-2 py-0.5 rounded-lg hover:bg-amber-50 dark:hover:bg-amber-900/10 cursor-pointer transition-colors"
|
||||
wire:click="mountAction('viewMaterials', { session: {{ $session->id }} })"
|
||||
onclick="event.stopPropagation()">
|
||||
<x-heroicon-o-document-text class="w-4 h-4 text-amber-500 shrink-0" />
|
||||
<span class="text-xs font-bold text-gray-600 dark:text-gray-400">
|
||||
{{ $session->materials_count }}<span class="ml-1 font-medium text-gray-400">Materi</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 px-2 py-0.5 rounded-lg hover:bg-primary-50 dark:hover:bg-primary-900/10 cursor-pointer transition-colors"
|
||||
wire:click="mountAction('viewAssignments', { session: {{ $session->id }} })"
|
||||
onclick="event.stopPropagation()">
|
||||
<x-heroicon-o-pencil-square class="w-4 h-4 text-primary-500 shrink-0" />
|
||||
<span class="text-xs font-bold text-gray-600 dark:text-gray-400">
|
||||
{{ $session->assignments_count }}<span class="ml-1 font-medium text-gray-400">Tugas</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@if ($session->is_pending)
|
||||
<div
|
||||
class="mt-2 flex items-center gap-1.5 text-[10px] text-gray-400 dark:text-gray-500 font-medium italic">
|
||||
<x-heroicon-m-calendar-days class="w-3.5 h-3.5" />
|
||||
<div class="flex items-center gap-1.5 text-[10px] text-gray-400 dark:text-gray-500 font-medium italic">
|
||||
<x-heroicon-m-calendar-days class="w-3.5 h-3.5 shrink-0" />
|
||||
Sesuai Jadwal Hari Ini
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="{{ $session->attendance_section_classes }}">
|
||||
@if ($session->is_pending)
|
||||
<div
|
||||
class="flex items-center gap-2 text-gray-400 dark:text-gray-500 p-2 opacity-50">
|
||||
<x-heroicon-m-clock class="w-5 h-5" />
|
||||
</div>
|
||||
@else
|
||||
<div class="flex flex-col items-center justify-center min-w-[80px] p-2 hover:bg-white/50 dark:hover:bg-white/5 rounded-lg transition-colors cursor-pointer"
|
||||
onclick="event.preventDefault(); event.stopPropagation();"
|
||||
wire:click="mountAction('viewAttendance', { session: {{ $session->id }} })">
|
||||
<div class="flex flex-col items-center">
|
||||
<span
|
||||
class="text-lg font-bold text-primary-600 dark:text-primary-400 leading-none">
|
||||
{{ $session->attendances_count }}<span
|
||||
class="text-[10px] text-gray-400 font-normal ml-0.5">/{{ $session->total_students }}</span>
|
||||
</span>
|
||||
<div
|
||||
class="mt-1.5 w-12 h-1 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary-500 rounded-full transition-all duration-500"
|
||||
style="width: {{ $session->attendance_percentage }}%"></div>
|
||||
</div>
|
||||
<span
|
||||
class="text-[9px] uppercase font-bold text-gray-500 mt-1 leading-none tracking-wider">
|
||||
{{ $session->attendance_percentage }}% Hadir
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="{{ $session->attendance_section_classes }} border-t border-gray-100 dark:border-gray-700 sm:border-t-0 sm:border-l">
|
||||
@if ($session->is_pending)
|
||||
<div class="flex items-center gap-2 text-gray-400 dark:text-gray-500 p-3 opacity-50">
|
||||
<x-heroicon-m-clock class="w-5 h-5" />
|
||||
</div>
|
||||
@else
|
||||
<div class="flex flex-col items-center justify-center min-w-[80px] p-3 hover:bg-white/50 dark:hover:bg-white/5 rounded-lg transition-colors cursor-pointer"
|
||||
onclick="event.preventDefault(); event.stopPropagation();"
|
||||
wire:click="mountAction('viewAttendance', { session: {{ $session->id }} })">
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-lg font-bold text-primary-600 dark:text-primary-400 leading-none">
|
||||
{{ $session->attendances_count }}<span class="text-[10px] text-gray-400 font-normal ml-0.5">/{{ $session->total_students }}</span>
|
||||
</span>
|
||||
<div class="mt-1.5 w-12 h-1 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary-500 rounded-full transition-all duration-500" style="width: {{ $session->attendance_percentage }}%"></div>
|
||||
</div>
|
||||
<span class="text-[9px] uppercase font-bold text-gray-500 mt-1 leading-none tracking-wider">
|
||||
{{ $session->attendance_percentage }}% Hadir
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</a>
|
||||
@empty
|
||||
<x-filament::empty-state icon="heroicon-o-calendar-days" heading="Tidak ada data yang ditemukan"
|
||||
description="Tidak ada sesi perkuliahan yang dijadwalkan untuk hari ini." iconColor="gray">
|
||||
<x-filament::empty-state icon="heroicon-o-calendar-days"
|
||||
heading="Tidak ada data yang ditemukan"
|
||||
description="Tidak ada sesi perkuliahan yang dijadwalkan untuk hari ini."
|
||||
iconColor="gray">
|
||||
</x-filament::empty-state>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-filament::section>
|
||||
|
||||
<!-- All Courses Section -->
|
||||
<x-filament::section icon="heroicon-o-academic-cap" icon-color="gray">
|
||||
<x-slot name="heading">
|
||||
Daftar Mata Kuliah Semester Ini
|
||||
</x-slot>
|
||||
<x-slot name="description">
|
||||
Pilih mata kuliah untuk melihat dan mengelola semua riwayat sesi.
|
||||
</x-slot>
|
||||
<x-slot name="heading">Daftar Mata Kuliah Semester Ini</x-slot>
|
||||
<x-slot name="description">Pilih mata kuliah untuk melihat dan mengelola semua riwayat sesi.</x-slot>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
|
||||
@forelse ($this->courses as $course)
|
||||
<a href="{{ $course->url }}"
|
||||
class="fi-card rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm overflow-hidden transition hover:shadow-md h-fit block group">
|
||||
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="p-4 sm:p-5 space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<span
|
||||
class="inline-flex items-center rounded-md bg-primary-50 dark:bg-primary-500/10 px-2 py-1 text-xs font-semibold text-primary-700 dark:text-primary-300 ring-1 ring-inset ring-primary-600/20">
|
||||
<span class="inline-flex items-center rounded-md bg-primary-50 dark:bg-primary-500/10 px-2 py-1 text-xs font-semibold text-primary-700 dark:text-primary-300 ring-1 ring-inset ring-primary-600/20">
|
||||
{{ $course->code }}
|
||||
</span>
|
||||
|
||||
<div class="flex items-center gap-2 text-gray-400 dark:text-gray-500">
|
||||
<span class="text-xs font-medium">
|
||||
{{ $course->sessions_count }} Sesi
|
||||
</span>
|
||||
<x-heroicon-m-chevron-right
|
||||
class="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
<span class="text-xs font-medium">{{ $course->sessions_count }} Sesi</span>
|
||||
<x-heroicon-m-chevron-right class="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<h3
|
||||
class="text-base font-bold text-gray-950 dark:text-white leading-tight group-hover:text-primary-600 dark:group-hover:text-primary-400 transition">
|
||||
<h3 class="text-base font-bold text-gray-950 dark:text-white leading-tight group-hover:text-primary-600 dark:group-hover:text-primary-400 transition">
|
||||
{{ $course->name }}
|
||||
</h3>
|
||||
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
|
||||
<x-heroicon-m-user class="w-4 h-4 mr-1.5 opacity-70" />
|
||||
<x-heroicon-m-user class="w-4 h-4 mr-1.5 opacity-70 shrink-0" />
|
||||
<span class="truncate">{{ $course->lecturer }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -154,8 +131,10 @@ class="text-base font-bold text-gray-950 dark:text-white leading-tight group-hov
|
||||
</a>
|
||||
@empty
|
||||
<div class="col-span-full text-center">
|
||||
<x-filament::empty-state icon="heroicon-o-academic-cap" heading="Mata Kuliah Belum Terdaftar"
|
||||
description="Belum ada mata kuliah yang terdaftar untuk semester aktif ini." iconColor="gray">
|
||||
<x-filament::empty-state icon="heroicon-o-academic-cap"
|
||||
heading="Mata Kuliah Belum Terdaftar"
|
||||
description="Belum ada mata kuliah yang terdaftar untuk semester aktif ini."
|
||||
iconColor="gray">
|
||||
</x-filament::empty-state>
|
||||
</div>
|
||||
@endforelse
|
||||
|
||||
@ -2,54 +2,58 @@
|
||||
<x-filament::section>
|
||||
<div class="space-y-4">
|
||||
@forelse ($this->sessions as $session)
|
||||
<div
|
||||
class="fi-card p-5 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm flex items-center justify-between hover:shadow-md transition">
|
||||
<div class="flex items-start gap-4">
|
||||
<div
|
||||
class="flex flex-col items-center justify-center w-12 h-12 rounded-lg bg-primary-100 dark:bg-primary-500/10 text-primary-700 dark:text-primary-300 font-bold border border-primary-200 dark:border-primary-500/20">
|
||||
<div class="fi-card rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm hover:shadow-md transition flex flex-col">
|
||||
|
||||
<div class="flex flex-1 items-center gap-4 p-4 sm:p-5 min-w-0">
|
||||
<div class="flex flex-col items-center justify-center w-12 h-12 rounded-lg bg-primary-100 dark:bg-primary-500/10 text-primary-700 dark:text-primary-300 font-bold border border-primary-200 dark:border-primary-500/20 shrink-0">
|
||||
<span class="text-[10px] uppercase leading-none opacity-60 mb-0.5 mt-1">Sesi</span>
|
||||
<span class="text-sm leading-none mb-1 text-primary-600 dark:text-primary-400 font-bold">Ke-{{ $session->session_number }}</span>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-gray-500 dark:text-gray-400">
|
||||
|
||||
<div class="flex flex-1 flex-wrap items-center justify-between gap-x-4 gap-y-2 min-w-0">
|
||||
<div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-gray-500 dark:text-gray-400">
|
||||
<div class="flex items-center gap-1.5 font-bold text-gray-900 dark:text-white">
|
||||
<x-heroicon-o-calendar class="w-4 h-4 text-primary-500" />
|
||||
<x-heroicon-o-calendar class="w-4 h-4 text-primary-500 shrink-0" />
|
||||
{{ $session->date_formatted }}
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 font-medium">
|
||||
<x-heroicon-o-clock class="w-4 h-4 text-primary-500" />
|
||||
<x-heroicon-o-clock class="w-4 h-4 text-primary-500 shrink-0" />
|
||||
{{ $session->time_range }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<div
|
||||
class="flex items-center gap-1.5 font-bold text-success-600 dark:text-success-400 hover:bg-success-50 dark:hover:bg-success-900/10 px-2 py-0.5 rounded-lg transition-colors cursor-pointer"
|
||||
<div class="flex items-center gap-1.5 font-bold text-success-600 dark:text-success-400 hover:bg-success-50 dark:hover:bg-success-900/10 px-2 py-0.5 rounded-lg transition-colors cursor-pointer"
|
||||
wire:click="mountAction('viewAttendance', { session: {{ $session->id }} })">
|
||||
<x-heroicon-o-user-group class="w-4 h-4" />
|
||||
<x-heroicon-o-user-group class="w-4 h-4 shrink-0" />
|
||||
{{ $session->attendances_count }}<span class="text-[10px] opacity-60 ml-0.5">/{{ $session->total_students }}</span> Presensi
|
||||
</div>
|
||||
<div class="flex items-center gap-2 px-2">
|
||||
<div class="flex-1 h-1 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
|
||||
<div class="w-20 h-1 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-success-500 rounded-full transition-all duration-500" style="width: {{ $session->attendance_percentage }}%"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold text-gray-500">{{ $session->attendance_percentage }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-1.5 font-bold text-amber-600 dark:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-900/10 px-2 py-0.5 rounded-lg transition-colors cursor-pointer"
|
||||
wire:click="mountAction('viewMaterials', { session: {{ $session->id }} })">
|
||||
<x-heroicon-o-document-text class="w-4 h-4" />
|
||||
wire:click="mountAction('viewMaterials', { session: {{ $session->id }} })">
|
||||
<x-heroicon-o-document-text class="w-4 h-4 shrink-0" />
|
||||
{{ $session->materials_count }} Materi
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-1.5 font-bold text-primary-600 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/10 px-2 py-0.5 rounded-lg transition-colors cursor-pointer"
|
||||
wire:click="mountAction('viewAssignments', { session: {{ $session->id }} })">
|
||||
<x-heroicon-o-pencil-square class="w-4 h-4" />
|
||||
wire:click="mountAction('viewAssignments', { session: {{ $session->id }} })">
|
||||
<x-heroicon-o-pencil-square class="w-4 h-4 shrink-0" />
|
||||
{{ $session->assignments_count }} Tugas
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
|
||||
<div class="flex flex-wrap items-center gap-3 px-4 py-3 border-t border-gray-100 dark:border-gray-700">
|
||||
{{ ($this->viewAttendanceAction)(['session' => $session->id]) }}
|
||||
{{ ($this->viewMaterialsAction)(['session' => $session->id]) }}
|
||||
{{ ($this->viewAssignmentsAction)(['session' => $session->id]) }}
|
||||
@ -58,8 +62,10 @@ class="flex items-center gap-1.5 font-bold text-success-600 dark:text-success-40
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<x-filament::empty-state icon="heroicon-o-presentation-chart-bar" heading="Tidak ada data yang ditemukan"
|
||||
description="Belum ada sesi perkuliahan yang dibuat untuk mata kuliah ini." iconColor="gray">
|
||||
<x-filament::empty-state icon="heroicon-o-presentation-chart-bar"
|
||||
heading="Tidak ada data yang ditemukan"
|
||||
description="Belum ada sesi perkuliahan yang dibuat untuk mata kuliah ini."
|
||||
iconColor="gray">
|
||||
</x-filament::empty-state>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user