entrouvert
/
chrono
14
1
Fork 0
Code Issues Pull Requests 4 Releases Wiki Activity

manager: improve html & CSS of partial booking month view (#79863)
gitea/chrono/pipeline/head There was a failure building this commit Details

This commit is contained in:
Thomas Jund 2024-03-12 17:01:18 +01:00
parent 0ea056dcd5
commit df02ae1d1e
2 changed files with 82 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
chrono/manager/static/css/style.scss
View File

@ -870,20 +870,62 @@ div#main-content.partial-booking-dayview {
background-color: var(--red);
z-index: 3;
}
}
.agenda-table.partial-bookings .booking {
height: 70%;
width: 100%;
position: absolute;
right: 0;
top: 15%;
background: #1066bc;
&.present {
background: hsl(120, 57%, 35%);
}
&.absent {
background: hsl(355, 80%, 45%);
// Month view, table element
&-month {
width: 100%;
border-spacing: 0;
& col.we {
background-color: var(--zebra-color);
}
&--day {
padding: .33em;
a {
color: var(--font-color);
font-weight: normal;
text-decoration: none;
}
}
& .registrant {
&--name {
box-sizing: border-box;
text-align: right;
padding: .66rem;
font-size: 130%;
color: #505050;
font-weight: normal;
width: var(--registrant-name-width);
}
&--day-cell {
border-left: var(--separator-size) solid var(--separator-color);
text-align: center;
vertical-align: middle;
padding: .33em;
& .booking {
display: inline-block;
width: Min(100%, 1.5em);
height: 1.5em;
--booking-color: #1066bc;
background-color: var(--booking-color);
&.present {
background: var(--green);
}
&.absent {
background: var(--red);
}
}
}
}
&--registrant:nth-child(odd) {
& th, & td {
background-color: var(--zebra-color);
}
}
&--registrant:nth-child(even) {
& th, & td {
--separator-color: var(--zebra-color);
}
}
}
}

36
chrono/manager/templates/chrono/manager_partial_bookings_month_view.html
View File

@ -3,27 +3,44 @@
{% block content %}
<table class="agenda-table partial-bookings">
<div class="pk-table-wrapper">
<table class="partial-booking partial-booking-month">
<colgroup>
<col class="name" />
{% for day in days %}
{% if day|date:"w" == "0" or day|date:"w" == "6" %}
<col class="we" />
{% else %}
<col />
{% endif %}
{% endfor %}
</colgroup>
<thead>
<tr>
<tr class="partial-booking-month--day-list">
<td></td>
{% for day in days %}
<th>
<a href="{% url 'chrono-manager-agenda-day-view' pk=agenda.pk year=day.date|date:"Y" month=day.date|date:"m" day=day.date|date:"d" %}">{{ day|date:"d" }}</a>
<th scope="col" class="partial-booking-month--day {% if day.today %}today{% endif %}">
<a href="{% url 'chrono-manager-agenda-day-view' pk=agenda.pk year=day.date|date:"Y" month=day.date|date:"m" day=day.date|date:"d" %}">
<time datetime="{{ day|date:"Y-m-d" }}">{{ day|date:"d" }}</time>
</a>
</th>
{% endfor %}
</tr>
</thead>
<tbody>
<tbody class="partial-booking-month--registrant-items">
{% for booking_info in user_booking_info %}
<tr class="{% cycle 'odd' 'even' %}">
<th>{{ booking_info.user_name }}</th>
<tr class="partial-booking-month--registrant">
<th class="registrant--name" scope="row">
{{ booking_info.user_name }}
</th>
{% for booking in booking_info.bookings %}
<td class="day-cell">
<td class="registrant--day-cell">
{% if booking %}
<span class="booking {{ booking.check_css_class }}"></span>
<span class="booking {{ booking.check_css_class }}">
<!-- Il faut retourner une info textuelle ici et via title attribut -->
</span>
{% endif %}
</td>
{% endfor %}
@ -32,4 +49,5 @@
</tbody>
</table>
</div>
{% endblock %}