filipriec/Kurt_kalendar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile resolution

Browse Source
This commit is contained in:
Priec
2026-05-16 18:17:27 +02:00
parent 08884536d7
commit 8e99e53d8a
5 changed files with 165 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
ht_booking/assets/views/calendar/week.html
View File

@@ -20,6 +20,20 @@
#cal thead .opacity-50 { opacity: 0.8; }
#cal td .opacity-30 { opacity: 0.7; }
#cal td a.opacity-30:hover { opacity: 1; }
/* Mobile: show a small window of days (2 on a narrow phone, 3 otherwise)
instead of the full week. JS marks the visible columns with .cal-day-on
and the day navigator slides the window; before JS runs, the first three
days stand in. Wider screens keep the full 7-day grid. */
@media (max-width: 767px) {
#cal thead { display: none; }
#cal .cal-day { display: none; }
#cal .cal-day-0,
#cal .cal-day-1,
#cal .cal-day-2 { display: table-cell; }
#cal.cal-js .cal-day { display: none; }
#cal.cal-js .cal-day.cal-day-on { display: table-cell; }
}
</style>
{% if is_admin %}
<style>
@@ -75,14 +89,15 @@
<div class="join">
{% if can_prev %}
<a href="{{ base_path }}?court={{ court_id }}&week={{ prev_week }}"
class="btn btn-sm join-item">« {{ t(key="prev-week", lang=lang) }}</a>
class="btn btn-sm join-item">«<span class="ml-1 hidden sm:inline">{{ t(key="prev-week", lang=lang) }}</span></a>
{% else %}
<span class="btn btn-sm join-item btn-disabled" aria-disabled="true">« {{ t(key="prev-week", lang=lang) }}</span>
<span class="btn btn-sm join-item btn-disabled" aria-disabled="true">«<span
class="ml-1 hidden sm:inline">{{ t(key="prev-week", lang=lang) }}</span></span>
{% endif %}
<a href="{{ base_path }}?court={{ court_id }}&week={{ this_week }}"
class="btn btn-sm join-item">{{ t(key="this-week", lang=lang) }}</a>
<a href="{{ base_path }}?court={{ court_id }}&week={{ next_week }}"
class="btn btn-sm join-item">{{ t(key="next-week", lang=lang) }} »</a>
class="btn btn-sm join-item"><span class="mr-1 hidden sm:inline">{{ t(key="next-week", lang=lang) }}</span>»</a>
</div>
{% if is_admin %}
<button type="button" id="cal-detail-toggle" class="btn btn-sm gap-1" aria-pressed="false"
@@ -92,7 +107,7 @@
<path stroke-linecap="round" stroke-linejoin="round"
d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
</svg>
{{ t(key="view-details", lang=lang) }}
<span class="hidden sm:inline">{{ t(key="view-details", lang=lang) }}</span>
</button>
<form method="get" action="{{ base_path }}" class="relative inline-flex">
<input type="hidden" name="court" value="{{ court_id }}">
@@ -103,7 +118,7 @@
<path stroke-linecap="round" stroke-linejoin="round"
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" />
</svg>
{{ t(key="pick-week", lang=lang) }}
<span class="hidden sm:inline">{{ t(key="pick-week", lang=lang) }}</span>
</button>
<input type="date" name="week" id="cal-jump" value="{{ week }}"
onchange="this.form.submit()" tabindex="-1" aria-hidden="true"
@@ -114,13 +129,32 @@
<div class="text-sm font-medium opacity-60">{{ court_name }} · {{ week_label }}</div>
</div>
<div id="cal-daynav" class="mb-3 flex items-center gap-2 md:hidden">
<button type="button" id="cal-day-prev" class="btn btn-square"
aria-label="{{ t(key='prev-day', lang=lang) }}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" class="h-5 w-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
</svg>
</button>
<div id="cal-daynav-label" class="flex-1 text-center text-base font-semibold"></div>
<button type="button" id="cal-day-next" class="btn btn-square"
aria-label="{{ t(key='next-day', lang=lang) }}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" class="h-5 w-5">
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
</button>
</div>
<div class="overflow-x-auto border border-base-300 bg-base-100 shadow-sm">
<table id="cal" class="w-full border-collapse text-sm">
<table id="cal" data-day="{{ mobile_day }}" class="w-full border-collapse text-sm">
<thead>
<tr class="bg-base-200">
<th class="w-16 border border-base-300 p-2"></th>
{% for d in days %}
<th class="border border-base-300 p-2 text-center">
<th class="cal-day cal-day-{{ loop.index0 }} border border-base-300 p-2 text-center"
data-d="{{ t(key=d.key, lang=lang) }} {{ d.num }}">
<div class="font-semibold">{{ t(key=d.key, lang=lang) }}</div>
<div class="text-xs font-normal opacity-50">{{ d.num }}</div>
</th>
@@ -140,7 +174,7 @@
<tr>
<td class="border border-base-300 bg-base-200 p-2 text-center font-medium opacity-70">{{ row.hour_label }}</td>
{% for cell in row.cells %}
<td class="relative h-14 border border-base-300">
<td class="cal-day cal-day-{{ loop.index0 }} relative h-14 border border-base-300">
{% if cell.booked %}
{% if is_admin %}
<a href="/admin/booking/{{ cell.booking_id }}"
@@ -187,6 +221,64 @@
{% endblock content %}
{% block js %}
<script>
// Mobile: show a sliding window of days (2 on a narrow phone, 3 otherwise)
// rather than the whole week. The navigator buttons and a horizontal swipe
// slide the window; a resize re-fits it. Public and admin calendars alike.
(function () {
var cal = document.getElementById('cal');
var nav = document.getElementById('cal-daynav');
if (!cal || !nav) return;
var label = document.getElementById('cal-daynav-label');
var prevBtn = document.getElementById('cal-day-prev');
var nextBtn = document.getElementById('cal-day-next');
var dayLabels = [].slice.call(cal.querySelectorAll('thead th[data-d]'))
.map(function (th) { return th.getAttribute('data-d'); });
var start = parseInt(cal.getAttribute('data-day'), 10) || 0;
cal.classList.add('cal-js');
function windowSize() {
return window.innerWidth < 480 ? 2 : 3;
}
function apply() {
var size = windowSize();
var maxStart = 7 - size;
if (start > maxStart) start = maxStart;
if (start < 0) start = 0;
for (var d = 0; d < 7; d++) {
var on = d >= start && d < start + size;
var cells = cal.querySelectorAll('.cal-day-' + d);
for (var i = 0; i < cells.length; i++) {
cells[i].classList.toggle('cal-day-on', on);
}
}
var last = start + size - 1;
label.textContent = (dayLabels[start] || '') + ' – ' + (dayLabels[last] || '');
prevBtn.disabled = start <= 0;
nextBtn.disabled = start >= maxStart;
}
function slide(delta) { start += delta; apply(); }
prevBtn.addEventListener('click', function () { slide(-1); });
nextBtn.addEventListener('click', function () { slide(1); });
window.addEventListener('resize', apply);
var x0 = null, y0 = null;
cal.addEventListener('touchstart', function (e) {
x0 = e.touches[0].clientX;
y0 = e.touches[0].clientY;
}, { passive: true });
cal.addEventListener('touchend', function (e) {
if (x0 === null) return;
var dx = e.changedTouches[0].clientX - x0;
var dy = e.changedTouches[0].clientY - y0;
if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy)) slide(dx < 0 ? 1 : -1);
x0 = y0 = null;
}, { passive: true });
apply();
})();
</script>
{% if is_admin %}
<script>
// Detailed-view toggle for the admin calendar. The choice is remembered