Amélioration des différents rendus

src/agenda_culturel/static/style.scss

@@ -27,6 +27,11 @@ $primary-700: #008080;
     p {
         --typography-spacing-vertical: 0.6rem;
     }
+    --transition: 0.1s ease-in-out;
+
+    // Modal (<dialog>)
+    --modal-overlay-backdrop-filter: blur(0.05rem);
+  
 }
 
 
@@ -151,7 +156,7 @@ footer {
 .infos-and-buttons {
     display: flex;
     flex-direction: row;
-    align-items: stretch
+    align-items: stretch;
 }
 
 .infos-and-buttons .infos {
@@ -164,11 +169,16 @@ footer {
 
 article.day {
     margin: 0;
-    padding: 0.3em;
+    padding: 0 0 0.3em 0;
+}
+
+article.day>header {
+    margin: 0;
+    padding: 0.3em 0.3em 0 0.3em;
 }
 
 article.day>ul {
-    margin: 0;
+    margin: 0 0.2em .8em 0.2em;
     padding: 0;
 
     >li {
@@ -182,4 +192,28 @@ article.day>ul {
 }
 .navigation {
     margin: 1em 0;
+    padding: 0;
+    display: flex;
+    flex-direction: row;
+    div {
+        flex: auto;
+    }
+}
+
+
+.day.today>header {
+    background: rgba(255, 0, 140, 0.15);
+}
+
+.day.past {
+    opacity: 0.5;
+}
+
+.day.other_month {
+    opacity: 0.2;
+}
+
+.day.past:hover,
+.day.other_month:hover {
+    opacity: 1;
 }

src/agenda_culturel/templates/agenda_culturel/day-inc.html

@@ -1,12 +1,15 @@
 
 {% load cat_extra %}
+{% load utils_extra %}
 {% load static %}
 
 {% with day.date|date:"Y-m-d" as daytag %}
 {% with "date-"|add:daytag as daytag %}
 
-<article class="day" id="{{ daytag }}">
+<article class="day{{ day|calendar_classes:fixed_style }}" id="{{ daytag }}">
+    <header>
     <h2><a href="{% url 'day_view' day.date.year day.date.month day.date.day %}">{{ day.date | date:"l j" }}</a></h2>
+    </header>
     {% if day.events %}
     {% if resume %}
         <ul>

src/agenda_culturel/templates/agenda_culturel/page-day.html

@@ -29,17 +29,17 @@
 
 
 <article>
-        <div class="grid navigation">
+        <div class="navigation">
             <div>
             {% with day|shift_day:-1 as pred_day %}
             <a role="button" href="{% url 'day_view' pred_day.year pred_day.month pred_day.day %}"><svg width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <use href="{% static 'images/feather-sprite.svg' %}#chevron-left" />
-            </svg> Jour précédent</a>
+            </svg> précédent</a>
             {% endwith %}
             </div>
             <div class="right">
             {% with day|shift_day:1 as next_day %}
-                <a role="button" href="{% url 'day_view' next_day.year next_day.month next_day.day %}">Jour suivant <svg width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <a role="button" href="{% url 'day_view' next_day.year next_day.month next_day.day %}">suivant <svg width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <use href="{% static 'images/feather-sprite.svg' %}#chevron-right" />
             </svg></a>
             {% endwith %}

src/agenda_culturel/templates/agenda_culturel/page-month.html

@@ -27,14 +27,14 @@
 
  <article>
     <header>
-        <div class="grid navigation">
+        <div class="navigation">
             <div>
             <a role="button" href="{% url 'month_view' calendar.previous_month.year calendar.previous_month.month %}"><svg width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <use href="{% static 'images/feather-sprite.svg' %}#chevron-left" />
-            </svg> Mois précédent</a>
+            </svg> précédent</a>
             </div>
             <div class="right">
-            <a role="button" href="{% url 'month_view' calendar.next_month.year calendar.next_month.month %}">Mois suivant <svg width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <a role="button" href="{% url 'month_view' calendar.next_month.year calendar.next_month.month %}">suivant <svg width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <use href="{% static 'images/feather-sprite.svg' %}#chevron-right" />
             </svg></a>
             </div>
@@ -44,7 +44,7 @@
         <div class="grid">
         {% for d in calendar.calendar_days_list %}
         {% if forloop.counter0|divisibleby:7 and not forloop.first %}</div><div class="grid">{% endif %}
-        {% include "agenda_culturel/day-inc.html" with day=d resume=1 %}
+        {% include "agenda_culturel/day-inc.html" with day=d resume=1 fixed_style=calendar.all_in_past %}
         {% endfor %}
         </div>
     </div>

src/agenda_culturel/templates/agenda_culturel/page-week.html

@@ -34,14 +34,14 @@
 
 <article>
     <header>
-        <div class="grid navigation">
+        <div class="navigation">
             <div>
             <a role="button" href="{% url 'week_view' calendar.previous_week.year calendar.previous_week|week %}"><svg width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <use href="{% static 'images/feather-sprite.svg' %}#chevron-left" />
-            </svg> Semaine précédente</a>
+            </svg> précédente</a>
             </div>
             <div class="right">
-            <a role="button" href="{% url 'week_view' calendar.next_week.year calendar.next_week|week %}">Semaine suivante <svg width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <a role="button" href="{% url 'week_view' calendar.next_week.year calendar.next_week|week %}">suivante <svg width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <use href="{% static 'images/feather-sprite.svg' %}#chevron-right" />
             </svg></a>
             </div>
@@ -49,7 +49,7 @@
     </header>
     <div class="grid" id="calendar">
     {% for d in calendar.calendar_days_list %}
-    {% include "agenda_culturel/day-inc.html" with day=d %}
+    {% include "agenda_culturel/day-inc.html" with day=d fixed_style=calendar.all_in_past %}
     {% endfor %}
     </div>
 

src/agenda_culturel/templatetags/utils_extra.py

@@ -32,3 +32,15 @@ def first_day_of_this_week(d):
 @register.filter
 def last_day_of_this_week(d):
     return date.fromisocalendar(d.year, week(d), 7)    
+
+@register.filter
+def calendar_classes(d, fixed_style):
+    result = ""
+    if not fixed_style:
+        if d.is_in_past():
+            result += " past"
+        if d.is_today():
+            result += " today"
+    if not d.on_requested_interval:
+        result += " other_month"
+    return result

src/agenda_culturel/views.py

@@ -39,12 +39,16 @@ class CalendarDay:
         self.date = d
         now = date.today()
         self.in_past = d < now
+        self.today = d == now
         self.events = []
+        self.on_requested_interval = on_requested_interval
 
         self.events_by_category = {}
 
     def is_in_past(self):
-        return in_past
+        return self.in_past
+    def is_today(self):
+        return self.today
 
     def add_event(self, event):
         self.events.append(event)
@@ -72,6 +76,12 @@ class CalendarList:
         self.fill_calendar_days()
 
 
+    def all_in_past(self):
+        for d in self.calendar_days.values():
+            if not d.is_in_past():
+                return False
+        return True
+
     def fill_calendar_days(self):
         self.events = Event.objects.filter(start_day__lte=self.c_lastdate, start_day__gte=self.c_firstdate).order_by("start_day", "start_time")