E41220418
/
TIF_NGANJUK_E41220418
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor time-slot layout in detail-foto view for improved responsiveness and readability

This commit is contained in:
LailaWulandarii 2026-01-19 17:20:19 +07:00
parent 1c6a4d136c
commit d6c1204f57
2 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
public/css/user/main.css
View File

@ -1195,18 +1195,36 @@ .date-item.disabled {
}
/* --- BAGIAN KANAN: JAM --- */
.time-slot-container {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 280px;
overflow-y: auto;
padding-right: 5px;
display: grid;
grid-template-rows: repeat(3, auto);
grid-auto-flow: column;
gap: 10px 8px;
overflow-x: auto;
padding-bottom: 12px;
-webkit-overflow-scrolling: touch;
}
@media (min-width: 768px) {
.time-slot-container {
display: flex;
flex-direction: column;
grid-template-rows: none;
grid-auto-flow: row;
max-height: 350px;
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 0;
}
.btn-time {
width: 100%;
}
}
.time-slot-container::-webkit-scrollbar {
width: 3px;
height: 3px;
}
.time-slot-container::-webkit-scrollbar-thumb {
@ -1215,6 +1233,7 @@ .time-slot-container::-webkit-scrollbar-thumb {
}
.btn-time {
flex: 0 0 auto;
width: 90px;
padding: 8px 4px;
font-size: var(--body-font);

5
resources/views/user/detail-foto.blade.php
View File

@ -97,15 +97,12 @@ class="detailfoto-thumb rounded-4">
<div class="col-md-3">
<h6 class="mb-3 small">Jam Tersedia</h6>
<div class="time-slot-container row g-2">
<div class="time-slot-container">
@for ($hour = 9; $hour <= 20; $hour++)
{{-- Slot Jam Genap (contoh: 09:00) --}}
<button type="button" class="btn-time"
data-time="{{ sprintf('%02d:00', $hour) }}">
{{ sprintf('%02d:00', $hour) }} WIB
</button>
{{-- Slot Jam Setengah (contoh: 09:30) --}}
<button type="button" class="btn-time"
data-time="{{ sprintf('%02d:30', $hour) }}">
{{ sprintf('%02d:30', $hour) }} WIB