manager: add css for partial bookings with only start or end checking (#80047)
gitea/chrono/pipeline/head This commit looks good Details

This commit is contained in:
Thomas Jund 2023-11-22 10:37:56 +01:00 committed by Valentin Deniaud
parent 08bd4538f5
commit e176e8e968
2 changed files with 44 additions and 11 deletions

View File

@ -684,33 +684,66 @@ div#main-content.partial-booking-dayview {
margin: 0.33rem 0;
}
&--bar {
--color: white;
box-sizing: border-box;
display: inline-block;
margin: 0;
position: relative;
padding: 0.33em 0.66em;
background-color: var(--background);
color: var(--color);
background-color: var(--bar-color);
color: white;
border: none;
&:not(:first-child) {
position: absolute;
top: 0;
}
.start-time, .end-time {
display: inline-block;
padding: 0.33em 0.66em;
}
.end-time {
float: right;
margin-left: .66em;
}
&.booking {
--background: #1066bc;
--bar-color: #1066bc;
}
&.check.present, &.computed.present {
--background: var(--green);
--bar-color: var(--green);
}
&.check.absent, &.computed.absent {
--background: var(--red);
--bar-color: var(--red);
}
&.computed {
opacity: 0.6;
}
&.end-only, &.start-only {
background-color: transparent;
.end-time, .start-time {
background-color: var(--bar-color);
position: relative;
&::before {
content:"?";
color: var(--bar-color);
font-weight: 800;
line-height: 0;
position: absolute;
border: 0.75em solid transparent;
width: 0;
height: 0;
top: 0;
bottom: 0;
margin: auto;
}
}
.start-time::before {
left: 100%;
border-left-color: var(--bar-color);
text-indent: 0.25em;
}
.end-time::before {
right: 100%;
border-right-color: var(--bar-color);
text-indent: -0.75em;
}
}
}
}
}

View File

@ -98,7 +98,7 @@
{% for booking in user.bookings %}
{% if booking.start_time %}
<a
class="registrant--bar clearfix booking"
class="registrant--bar booking"
title="{% trans "Booked period" %}"
style="left: {{ booking.css_left }}%; width: {{ booking.css_width }}%;"
{% if allow_check and not booking.user_check %}
@ -117,7 +117,7 @@
<div class="registrant--bar-container">
{% for check in user.booking_checks %}
<a
class="registrant--bar clearfix check {{ check.css_class }}"
class="registrant--bar check {{ check.css_class }}"
title="{% trans "Checked period" %}"
style="left: {{ check.css_left }}%;{% if check.css_width %} width: {{ check.css_width }}%;{% endif %}"
{% if allow_check %}
@ -140,7 +140,7 @@
{% for check in user.booking_checks %}
{% if check.computed_start_time and check.computed_end_time %}
<p
class="registrant--bar clearfix computed {{ check.css_class }}"
class="registrant--bar computed {{ check.css_class }}"
title="{% trans "Computed period" %}"
style="left: {{ check.computed_css_left }}%; width: {{ check.computed_css_width }}%;"
>