updated planned dots visibility

This commit is contained in:
2026-02-07 10:12:22 +01:00
parent 6a633fa867
commit 498c5caf71
+5 -5
View File
@@ -81,13 +81,13 @@
.cal-day-num { font-size: var(--calendar-size); font-weight: 400; color: #5C524A; text-align: right; padding-right: 2px; display: block; } .cal-day-num { font-size: var(--calendar-size); font-weight: 400; color: #5C524A; text-align: right; padding-right: 2px; display: block; }
.cal-day.today .cal-day-num { font-weight: 700; color: #C17F59; } .cal-day.today .cal-day-num { font-weight: 700; color: #C17F59; }
.cal-day-dots { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; } .cal-day-dots { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dot.planned { opacity: 0.5; border: 1.5px dashed; background: transparent !important; } .dot.planned { opacity: 1; border: 2px dashed; background: transparent !important; }
/* Legend */ /* Legend */
.legend { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 14px; padding: 8px 0; } .legend { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 14px; padding: 8px 0; }
.legend-item { display: flex; align-items: center; gap: 5px; font-size: calc(var(--font-size) - 2px); color: #5C524A; } .legend-item { display: flex; align-items: center; gap: 5px; font-size: calc(var(--font-size) - 2px); color: #5C524A; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; } .legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.legend-row { width: 100%; display: flex; justify-content: center; gap: 16px; margin-top: 2px; } .legend-row { width: 100%; display: flex; justify-content: center; gap: 16px; margin-top: 2px; }
.legend-row span { font-size: calc(var(--font-size) - 3px); color: #B0A89E; } .legend-row span { font-size: calc(var(--font-size) - 3px); color: #B0A89E; }
@@ -414,7 +414,7 @@ async function init() {
`<div class="legend-item"><div class="legend-dot" style="background:${m.color}"></div>${m.name}</div>` `<div class="legend-item"><div class="legend-dot" style="background:${m.color}"></div>${m.name}</div>`
).join('') + ` ).join('') + `
<div class="legend-row"> <div class="legend-row">
<div class="legend-item"><div class="legend-dot" style="background:#999;opacity:0.5;border:1.5px dashed #999;box-sizing:border-box;"></div><span>tervezett</span></div> <div class="legend-item"><div class="legend-dot" style="background:transparent;border:2px dashed #999;box-sizing:border-box;"></div><span>tervezett</span></div>
<div class="legend-item"><div class="legend-dot" style="background:#999"></div><span>megerősített</span></div> <div class="legend-item"><div class="legend-dot" style="background:#999"></div><span>megerősített</span></div>
</div>`; </div>`;
@@ -551,7 +551,7 @@ function renderBookings() {
const end = new Date(b.end_date); const end = new Date(b.end_date);
const nights = Math.round((end - start) / 86400000); const nights = Math.round((end - start) / 86400000);
return `<div class="booking-item" style="border-left:3px solid ${color}"> return `<div class="booking-item" style="border-left:3px solid ${color}">
<div class="booking-dot" style="background:${color};opacity:${b.status==='planned'?0.5:1}"></div> <div class="booking-dot" style="background:${b.status==='planned'?'transparent':color};border:${b.status==='planned'?'2px dashed '+color:'none'};box-sizing:border-box;"></div>
<div class="booking-info"> <div class="booking-info">
<div class="booking-name">${m?.name || b.member_id} <div class="booking-name">${m?.name || b.member_id}
<span class="booking-badge ${b.status}">${b.status === 'confirmed' ? '✓ megerősített' : '○ tervezett'}</span> <span class="booking-badge ${b.status}">${b.status === 'confirmed' ? '✓ megerősített' : '○ tervezett'}</span>