better admin calendar
This commit is contained in:
@@ -33,11 +33,26 @@
|
|||||||
#cal .cal-day-2 { display: table-cell; }
|
#cal .cal-day-2 { display: table-cell; }
|
||||||
#cal.cal-js .cal-day { display: none; }
|
#cal.cal-js .cal-day { display: none; }
|
||||||
#cal.cal-js .cal-day.cal-day-on { display: table-cell; }
|
#cal.cal-js .cal-day.cal-day-on { display: table-cell; }
|
||||||
|
/* Slim the hour column to its compact label so bookings get the width. */
|
||||||
|
#cal tbody td:first-child {
|
||||||
|
width: 1%;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 0.3rem 0.4rem;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
line-height: 1.15;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
{% if is_admin %}
|
{% if is_admin %}
|
||||||
<style>
|
<style>
|
||||||
/* Admin calendar — detailed-view toggle. The public calendar is unaffected. */
|
/* Admin calendar — strict, content-independent column widths. A long
|
||||||
|
booking can never widen its column; it grows taller instead. (The public
|
||||||
|
calendar has merged free rows with a colspan, so it keeps auto layout.) */
|
||||||
|
#cal { table-layout: fixed; }
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
#cal tbody td:first-child { width: 3.25rem; }
|
||||||
|
}
|
||||||
|
/* Detailed-view toggle. */
|
||||||
.cal-detail { display: none; }
|
.cal-detail { display: none; }
|
||||||
#cal.cal--detailed .cal-chip {
|
#cal.cal--detailed .cal-chip {
|
||||||
position: static;
|
position: static;
|
||||||
@@ -48,10 +63,7 @@
|
|||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
#cal.cal--detailed .cal-name {
|
#cal.cal--detailed .cal-name { font-weight: 600; }
|
||||||
white-space: normal;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
#cal.cal--detailed .cal-detail {
|
#cal.cal--detailed .cal-detail {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -59,8 +71,21 @@
|
|||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1.25;
|
line-height: 1.25;
|
||||||
|
}
|
||||||
|
/* Detailed fields wrap to as many lines as needed — the full booking info
|
||||||
|
shows and the cell just grows taller, never wider. */
|
||||||
|
#cal.cal--detailed .cal-name,
|
||||||
|
#cal.cal--detailed .cal-detail > span {
|
||||||
|
white-space: normal;
|
||||||
overflow-wrap: anywhere;
|
overflow-wrap: anywhere;
|
||||||
}
|
}
|
||||||
|
/* A long note is capped with an ellipsis so one booking can't run away. */
|
||||||
|
#cal.cal--detailed .cal-note {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 6;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endblock head %}
|
{% endblock head %}
|
||||||
@@ -185,7 +210,7 @@
|
|||||||
<span class="cal-detail">
|
<span class="cal-detail">
|
||||||
{%- if cell.title %}<span class="truncate opacity-95">{{ cell.title }}</span>{% endif -%}
|
{%- if cell.title %}<span class="truncate opacity-95">{{ cell.title }}</span>{% endif -%}
|
||||||
{%- if cell.contact %}<span class="truncate opacity-80">{{ cell.contact }}</span>{% endif -%}
|
{%- if cell.contact %}<span class="truncate opacity-80">{{ cell.contact }}</span>{% endif -%}
|
||||||
{%- if cell.note %}<span class="opacity-80">{{ cell.note }}</span>{% endif -%}
|
{%- if cell.note %}<span class="cal-note opacity-80">{{ cell.note }}</span>{% endif -%}
|
||||||
</span>
|
</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -145,7 +145,7 @@ fn flush_free_run(run: &mut Vec<Row>, out: &mut Vec<Row>) {
|
|||||||
let first = run.first().map_or(FIRST_HOUR, hour_of);
|
let first = run.first().map_or(FIRST_HOUR, hour_of);
|
||||||
let last = run.last().map_or(first, hour_of);
|
let last = run.last().map_or(first, hour_of);
|
||||||
let hour_label = if run.len() > 1 {
|
let hour_label = if run.len() > 1 {
|
||||||
format!("{first:02}:00 – {:02}:00", last + 1)
|
format!("{first:02}:00–{:02}:00", last + 1)
|
||||||
} else {
|
} else {
|
||||||
format!("{first:02}:00")
|
format!("{first:02}:00")
|
||||||
};
|
};
|
||||||
@@ -196,8 +196,13 @@ pub async fn build_calendar(
|
|||||||
let min_monday = monday_of(Utc::now().date_naive()) - Duration::weeks(2);
|
let min_monday = monday_of(Utc::now().date_naive()) - Duration::weeks(2);
|
||||||
let monday = if is_admin { monday } else { monday.max(min_monday) };
|
let monday = if is_admin { monday } else { monday.max(min_monday) };
|
||||||
let can_prev = is_admin || monday > min_monday;
|
let can_prev = is_admin || monday > min_monday;
|
||||||
// Mobile single-day view opens on today when it falls in the shown week.
|
// The mobile day-window opens on the requested day when a week was given
|
||||||
let day_offset = (Utc::now().date_naive() - monday).num_days();
|
// (so returning from the booking editor lands back on it), else on today.
|
||||||
|
let pivot = q_week
|
||||||
|
.as_deref()
|
||||||
|
.and_then(|w| NaiveDate::parse_from_str(w, "%Y-%m-%d").ok())
|
||||||
|
.unwrap_or_else(|| Utc::now().date_naive());
|
||||||
|
let day_offset = (pivot - monday).num_days();
|
||||||
let mobile_day = if (0..7).contains(&day_offset) { day_offset } else { 0 };
|
let mobile_day = if (0..7).contains(&day_offset) { day_offset } else { 0 };
|
||||||
let sunday = monday + Duration::days(6);
|
let sunday = monday + Duration::days(6);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user