updated planned dots visibility
This commit is contained in:
+5
-5
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user