add text info corresponding to color

chrono/manager/static/css/style.scss

@@ -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);
+			}
+		}
 	}
 }
 

chrono/manager/templates/chrono/manager_partial_bookings_month_view.html

@@ -3,33 +3,55 @@
 
 {% block content %}
 
-  <table class="agenda-table partial-bookings">
-
-    <thead>
-      <tr>
-        <td></td>
+  <div class="pk-table-wrapper">
+    <table class="partial-booking partial-booking-month">
+      <colgroup>
+        <col class="name" />
         {% 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>
+          {% if day|date:"w" == "0" or day|date:"w" == "6" %}
+            <col class="we" />
+          {% else %}
+            <col />
+          {% endif %}
         {% endfor %}
-      </tr>
-    </thead>
+      </colgroup>
 
-    <tbody>
-      {% for booking_info in user_booking_info %}
-        <tr class="{% cycle 'odd' 'even' %}">
-          <th>{{ booking_info.user_name }}</th>
-          {% for booking in booking_info.bookings %}
-            <td class="day-cell">
-              {% if booking %}
-                <span class="booking {{ booking.check_css_class }}"></span>
-              {% endif %}
-            </td>
+      <thead>
+        <tr class="partial-booking-month--day-list">
+          <td></td>
+          {% for day in days %}
+            <th scope="col" class="partial-booking-month--day {% if view.date.date == day.date %}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>
-      {% endfor %}
-    </tbody>
+      </thead>
 
-  </table>
+      <tbody class="partial-booking-month--registrant-items">
+        {% for booking_info in user_booking_info %}
+          <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="registrant--day-cell">
+                {% if booking %}
+                  <span class="booking {{ booking.check_css_class }}">
+                    {% if booking.check_css_class == 'present' %}
+                      {% trans "Present" %}
+                    {% elif booking.check_css_class == 'absent' %}
+                      {% trans "Absent" %}
+                    {% else %}
+                      {% trans "Not checked" %}
+                    {% endif %}
+                  </span>
+                {% endif %}
+              </td>
+            {% endfor %}
+          </tr>
+        {% endfor %}
+      </tbody>
+
+    </table>
+  </div>
 {% endblock %}

tests/manager/test_partial_bookings.py

@@ -1138,7 +1138,7 @@ def test_manager_partial_bookings_month_view(app, admin_user, freezer):
     today = start_datetime.date()
     resp = app.get('/manage/agendas/%s/month/%d/%d/%d/' % (agenda.pk, today.year, today.month, today.day))
 
-    assert [int(x.text) for x in resp.pyquery('thead th a')] == list(range(1, 32))
+    assert [int(x.text) for x in resp.pyquery('thead th time')] == list(range(1, 32))
 
     assert [x.text for x in resp.pyquery('tbody tr th')] == [
         'User Absent',
@@ -1153,6 +1153,7 @@ def test_manager_partial_bookings_month_view(app, admin_user, freezer):
     assert len(resp.pyquery(user_absent_row)('td')) == 31
     assert len(resp.pyquery(user_absent_row)('td span')) == 1
     assert len(resp.pyquery(user_absent_row)('td span.booking.absent')) == 1
+    assert resp.pyquery(user_absent_row)('td span.booking.absent').text() == 'Absent'
 
     subscription_not_booked_row = resp.pyquery('tbody tr')[1]
     assert len(resp.pyquery(subscription_not_booked_row)('td')) == 31
@@ -1161,11 +1162,13 @@ def test_manager_partial_bookings_month_view(app, admin_user, freezer):
     user_not_checked_row = resp.pyquery('tbody tr')[2]
     assert len(resp.pyquery(user_not_checked_row)('td')) == 31
     assert len(resp.pyquery(user_not_checked_row)('td span.booking')) == 2
+    assert resp.pyquery(user_not_checked_row)('td span.booking').text() == 'Not checked Not checked'
 
     user_present_row = resp.pyquery('tbody tr')[3]
     assert len(resp.pyquery(user_present_row)('td')) == 31
     assert len(resp.pyquery(user_present_row)('td span')) == 1
     assert len(resp.pyquery(user_present_row)('td span.booking.present')) == 1
+    assert resp.pyquery(user_present_row)('td span.booking.present').text() == 'Present'
 
     user_present_mixed_row = resp.pyquery('tbody tr')[4]
     assert len(resp.pyquery(user_present_mixed_row)('td')) == 31
@@ -1178,7 +1181,7 @@ def test_manager_partial_bookings_month_view(app, admin_user, freezer):
     assert len(resp.pyquery(user_present_incomplete_row)('td span.booking.present')) == 0
 
     resp = resp.click('Next month')
-    assert [int(x.text) for x in resp.pyquery('thead th a')] == list(range(1, 31))
+    assert [int(x.text) for x in resp.pyquery('thead th time')] == list(range(1, 31))
     assert [x.text for x in resp.pyquery('tbody tr th')] == ['Subscription Next Month']
     assert len(resp.pyquery('tbody tr td')) == 30