improve calendar layout (#884)

ephios/core/calendar.py

@@ -2,6 +2,7 @@
 from datetime import date, datetime
 from itertools import groupby
 
+from django.template.loader import render_to_string
 from django.utils.formats import date_format
 from django.utils.translation import gettext as _
 
@@ -24,23 +25,20 @@ def formatmonthname(self, theyear, themonth, withyear=True):
         return f'<tr><th colspan="7" class="month">{date_format(dt, format="b Y")}</th></tr>'
 
     def formatweekday(self, day):
-        return f'<th class="{self.cssclasses[day]}">{_(day_abbr[day])}</th>'
+        return f'<th class="text-center {self.cssclasses[day]}">{_(day_abbr[day])}</th>'
 
     def formatday(self, day, weekday):
         if day != 0:
             cssclass = self.cssclasses[weekday]
-            if date.today() == date(self.year, self.month, day):
-                cssclass += " calendar-today"
+            today = date.today() == date(self.year, self.month, day)
             if day in self.shifts:
                 cssclass += " filled"
-                body = ["<br />"]
-                for shift in self.shifts[day]:
-                    body.append(f'<a href="{shift.event.get_absolute_url()}">')
-                    body.append(shift.event.title)
-                    body.append("</a><br />")
-                return self.day_cell(cssclass, f"{day} {''.join(body)}")
-            return self.day_cell(cssclass, day)
+            content = render_to_string(
+                "core/fragments/calendar_day.html",
+                {"day": day, "shifts": self.shifts.get(day, None), "today": today},
+            )
+            return self.day_cell(cssclass, content)
         return self.day_cell("noday", "&nbsp;")
 
     def day_cell(self, cssclass, body):
-        return f'<td class="calendar-row-height p-1 break-word {cssclass}">{body}</td>'
+        return f'<td class="calendar-row-height p-0 pe-1 p-lg-1 {cssclass}">{body}</td>'

ephios/core/templates/core/event_detail.html

@@ -92,7 +92,7 @@ <h1 class="card-title fw-bold fs-1">
                 {{ event.title }}
             </h1>
             <h5 class="card-subtitle mb-2 text-muted fw-bolder lh-base">
-                <span class="me-1 badge badge-{{ event.type.pk }}-color">{{ event.type }}</span>
+                <span class="me-1 badge eventtype-{{ event.type.pk }}-color">{{ event.type }}</span>
                 <span class="text-muted me-1 d-inline-block">
                     <i class="fas fa-map-marker-alt"></i>
                                 {{ event.location }}

ephios/core/templates/core/event_list.html

@@ -11,6 +11,12 @@
 {% endblock %}
 
 {% block content %}
+    <style nonce="{{ request.csp_nonce }}">
+                    {% cache 900 "eventtype_colors" %}
+                        {% eventtype_colors %}
+                    {% endcache %}
+                </style>
+
     <div class="page-header">
         <h1>{% translate "Events" %}
             <small class="float-end">
@@ -67,11 +73,28 @@ <h1>{% translate "Events" %}
             </div>
         </form>
         {% if mode == "calendar" %}
-            <div class="d-flex justify-content-between order-1 gap-3 mb-3">
+            <div class="d-flex order-1 gap-3 mb-3">
                 <a class="btn btn-secondary"
                    href="?{% param_replace date=prev_month_first|date:"Y-m-d" %}"
                 ><i class="fas fa-arrow-left"></i> {{ prev_month_first|date:"F Y" }}</a>
-                <a class="btn btn-secondary"
+                {% if perms.core.add_event %}
+                    <div class="dropdown">
+                        <button class="btn btn-primary dropdown-toggle d-none d-md-inline-block" type="button" id="eventCreateButton"
+                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <span class="fa fa-plus"></span>
+                            {% translate "Add event" %}
+                        </button>
+                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="eventCreateButton">
+                            {% for eventtype in eventtypes %}
+                                <a class="dropdown-item" href="{% url "core:event_create" eventtype.pk %}">
+                                    {% blocktranslate with title=eventtype.title trimmed %}
+                                        Add {{ title }}
+                                    {% endblocktranslate %}</a>
+                            {% endfor %}
+                        </div>
+                    </div>
+                {% endif %}
+                <a class="btn btn-secondary ms-auto"
                    href="?{% param_replace date=next_month_first|date:"Y-m-d" %}"
                 >{{ next_month_first|date:"F Y" }} <i class="fas fa-arrow-right"></i></a>
             </div>
@@ -110,11 +133,6 @@ <h1>{% translate "Events" %}
             {% endif %}
 
             {% if event_list %}
-                <style nonce="{{ request.csp_nonce }}">
-                    {% cache 900 "eventtype_colors" %}
-                        {% eventtype_colors %}
-                    {% endcache %}
-                </style>
                 <div class="list-group mb-3">
                     {% if perms.core.add_event %}
                         <div class="list-group-item px-0">
@@ -164,7 +182,7 @@ <h5 class="mb-0 text-break">
                                         </span>
                                         </div>
                                         <div class="grid-batch"><span
-                                                class="badge badge-{{ event.type.pk }}-color">{{ event.type }}</span>
+                                                class="badge eventtype-{{ event.type.pk }}-color">{{ event.type }}</span>
                                         </div>
                                         <div class="grid-signup d-flex flex-column align-items-end align-items-lg-center justify-content-center">
                                             <div class="position-relative">

ephios/core/templates/core/fragments/calendar_day.html

@@ -0,0 +1,13 @@
+<div class="text-center p-1">
+    <span {% if today %}class="badge bg-primary rounded-circle fs-6"{% endif %}>{{ day }}</span>
+</div>
+<div>
+    {% for shift in shifts %}
+        <a href="{{ shift.event.get_absolute_url }}" class="text-decoration-none p-0" title="{{ shift.event.type }}: {{ shift.event.title }}">
+            <div class="w-100 d-inline-block calendar-truncate calendar-shift eventtype-{{ shift.event.type.pk }}-color rounded">
+                <span class="eventtype-indicator eventtype-{{ shift.event.type.pk }}-color"></span>
+                <small class="d-none d-lg-inline-block">{{ shift.start_time|time }}</small> <span class="ps-1 ps-lg-0">{{ shift.event.title }}</span>
+            </div>
+        </a>
+    {% endfor %}
+</div>

ephios/core/templates/core/home.html

@@ -44,7 +44,7 @@ <h5 class="card-title mb-0">{% trans "Your upcoming events" %}</h5>
                                             {{ participation.shift.event.title }}
                                         </span>
                                     <span class="col-auto col-lg-2">
-                                            <span class="badge badge-{{ participation.shift.event.type.pk }}-color">{{ participation.shift.event.type }}</span>
+                                            <span class="badge eventtype-{{ participation.shift.event.type.pk }}-color">{{ participation.shift.event.type }}</span>
                                         </span>
                                     <span class="col-lg-4">
                                               {{ participation.start_time|date:"D" }}, {{ participation.start_time|date:"SHORT_DATE_FORMAT" }}, {{ participation.get_time_display }}

ephios/extra/colors.py

@@ -27,4 +27,6 @@ def get_eventtype_color_style(eventtype: EventType):
         )
     )
     text_color = get_text_color_for_background(luminance)
-    return f".badge-{eventtype.pk}-color{{background-color:{eventtype.color};color:{text_color}}}"
+    return (
+        f".eventtype-{eventtype.pk}-color{{background-color:{eventtype.color};color:{text_color}}}"
+    )

ephios/static/ephios/scss/ephios_custom.scss

@@ -193,10 +193,6 @@ This hack fixes that. Inspired by https://github.com/select2/select2/issues/4220
   height: 100px;
 }
 
-.calendar-today {
-  background-color: #cbcbcb;
-}
-
 // disable link badges underlining
 a.badge {
   text-decoration: none;
@@ -210,3 +206,29 @@ a.badge {
 .whitespace-nowrap {
   white-space: nowrap;
 }
+
+.calendar-shift {
+  overflow: hidden;
+  text-overflow: clip;
+  white-space: nowrap
+}
+
+@media (min-width: 992px) {
+  //calendar eventtype indicator
+  .eventtype-indicator {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    background-clip: padding-box;
+    border-radius: 50%;
+  }
+
+  .calendar-shift {
+    background-color: $gray-200 !important;
+    color: $gray-900 !important;
+  }
+
+  .calendar-truncate {
+    text-overflow: ellipsis;
+  }
+}