Add CSS

colloscope/models.py

@@ -149,7 +149,7 @@ class Term(models.Model):
                 .annotate(swap_plus=Count("swap", filter=Q(swap__enroll=1), distinct=True))
                 .annotate(swap_minus=Count("swap", filter=Q(swap__enroll=0), distinct=True))
                 .annotate(volume=F("base_vol") + F("swap_plus") - F("swap_minus"))
-                .order_by())
+                .order_by("date", "slot__time"))
 
     def query_colles_of_student(self, student) -> QuerySet:
         has_student = ((Q(groups__student=student)
@@ -224,7 +224,7 @@ class Group(models.Model):
 
         return [
             (sem, lundi,
-             colles_flat.filter(date__gte=lundi, date__lt=lundi + timedelta(weeks=1)))
+             colles_fla.filter(date__gte=lundi, date__lt=lundi + timedelta(weeks=1)))
             for sem, lundi in semaines
         ]"""
 

colloscope/templates/dashboard.html

@@ -1,5 +1,8 @@
 {% extends "base.html" %}
 
+{% load static %}
+{% load extras %}
+
 {% block title %}Tableau de bord{% endblock title %}
 
 {% block main %}
@@ -14,38 +17,38 @@ Bienvenue {{ student }}. Votre lycée est {{ term.cls.school.description }}, et
 
 <h2>Mes colles</h2>
     
-    <p><a href="{{ calendar_link }}">Exporter en .ics (ceci est un permalien public)</a></p>
+    <p><a href="{{ calendar_link }}"><i class="fa-regular fa-calendar"></i> Exporter en .ics (ceci est un permalien public)</a></p>
     
     <p><a href="{% url "colloscope.marketplace" %}">Accéder au marketplace</a></p>
-<ul>
+
+
 {% for n, lundi, colles in colles_per_sem %}
-    <li>Semaine {{n}} ({{lundi}})</li>
+
-    <ul>
 {% if colles %}
+<h3 class="week">Semaine {{n}} ({{lundi}})</h3>
+    <div class="colle-wrapper">
     {% for colle in colles %}
-                <li>{{ colle.slot.subject }} ({{ colle.slot.colleur }})</li>
+        <div class="colle">
+        <span class="summary">{{ colle.slot.subject }} ({{ colle.slot.colleur }})</span>
         <ul>
-                    <li>Le {{ colle.date }} à {{ colle.slot.time }}</li>
+            <li><i class="fa-solid fa-clock"></i> Le {{ colle.date }} à {{ colle.slot.time }}</li>
-                    <li>Groupes&nbsp;: {{ colle.groups.all | join:"+" }}</li>
+            <li><i class="fa-solid fa-users"></i> {{ colle.groups.all | print_manager | safe }} ({{ colle.volume }} / {{ colle.slot.capacity }})</li>
-                    <li>Salle&nbsp;: {{ colle.slot.room }}</li>
+            <li><i class="fa-solid fa-earth-americas"></i> {{ colle.slot.room }}</li>
-                    <li>Capacité : {{ colle.volume }} / {{ colle.slot.capacity }}</li>
+            <li><i class="fa-solid fa-circle-exclamation"></i>
-                    <li>Absent ?
                 <form
                         action="{% url "colloscope.withdraw" %}"
                         method="POST"
                         onsubmit="return confirm('Êtes-vous sûr de vouloir vous désinscrire de la colle {{ colle }} ');">
                     {% csrf_token %}
                     <input type="hidden" name="colle_id" value="{{ colle.id }}">
-                            <input type="submit" value="Rendre disponible">
+                    <button type="submit">Rendre disponible</button>
                 </form>
             </li>
         </ul>
+        </div>
     {% endfor %}
-        {% else %}
+    </div>
-            Pas de colles à venir cette semaine.
 {% endif %}
-    </ul>
 {% endfor %}
-</ul>
 
 {% endblock main %}

colloscope/templates/marketplace.html

@@ -1,5 +1,8 @@
 {% extends "base.html" %}
 
+{% load static %}
+{% load extras %}
+
 {% block title %}Marketplace{% endblock title %}
 
 {% block main %}
@@ -10,25 +13,28 @@
     Bienvenue sur le marketplace.
     
     {% if colles %}
-        <ul>
         Les colles libres sont&nbsp;:
+        <div class="colle-wrapper">
         {% for colle in colles %}
-            <li>Colle !</li>
+            <div class="colle">
+                <span class="summary">{{ colle.slot.subject }} ({{ colle.slot.colleur }})</span>
                 <ul>
-                <li>{{ colle }}</li>
+                    <li><i class="fa-solid fa-clock"></i> Le {{ colle.date }} à {{ colle.slot.time }}</li>
-                <li>Places occupées&nbsp;: {{ colle.volume }} / {{ colle.slot.capacity }}</li>
+                    <li><i class="fa-solid fa-users"></i> {{ colle.groups.all | print_manager | safe }} ({{ colle.volume }} / {{ colle.slot.capacity }})</li>
-                <li>
+                    <li><i class="fa-solid fa-earth-americas"></i> {{ colle.slot.room }}</li>
+                    <li><i class="fa-solid fa-circle-exclamation"></i>
                         <form action="{% url "colloscope.enroll" %}"
                               method="POST"
                               onsubmit="return confirm('Êtes-vous sûr de vouloir vous inscrire à la colle {{ colle }} ');">
                             {% csrf_token %}
                             <input type="hidden" name="colle_id" value="{{ colle.id }}">
-                        <input type="submit" value="Réserver">
+                            <button type="submit">Réserver</button>
                         </form>
                     </li>
                 </ul>
+            </div>
         {% endfor %}
-        </ul>
+        </div>
     {% else %}
         Aucune colle n'est disponible
     {% endif %}

colloscope/templatetags/extras.py

@@ -4,14 +4,25 @@ from colloscope.models import *
 
 register = template.Library()
 
+
 @register.filter(name="strftime")
 def strftime(value, arg):
     return value.strftime(arg)
 
+
 @register.filter(name="getitem")
 def getitem(indexable, i):
     return indexable[i]
 
+
+@register.filter(name="print_manager")
+def print_manager(value):
+    if value.exists():
+        return "+".join(str(v) for v in value)
+    else:
+        return "∅"
+
+
 """
 @register.filter(name="exists")
 def exists(queryset):

static/main.css

@@ -75,3 +75,63 @@ p.programme {
 footer {
     text-align: center;
 }
+
+
+.week {
+    background-color: dodgerblue;
+    color: white;
+    padding: 5px;
+}
+
+.week.empty {
+    background-color: gray;
+}
+
+.colle-wrapper {
+    display: grid;
+    gap: 10px;
+}
+
+@media screen and (min-width: 400px)
+{
+    .colle-wrapper {
+        grid-template-columns: repeat(3, minmax(100px, 1fr));
+    }
+}
+
+.colle {
+    border: 1px solid black;
+    padding: 10px;
+}
+
+.colle span {
+    text-align: center;
+}
+
+.colle ul {
+    padding: 0;
+}
+
+.colle li {
+    list-style-type: none;
+}
+
+.colle form {
+    display: inline;
+}
+
+.colle button {
+    padding: 5px;
+    border: none;
+    background-color: #c0392b;
+    color: white;
+    border-radius: 5px;
+}
+
+.colle button:hover {
+    background-color: #a93226;
+}
+
+.colle button:active {
+    background-color: #922b21;
+}

templates/base.html

@@ -6,6 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>{% block title %}{% endblock title %}</title>
         <link href="{% static 'main.css' %}" rel="stylesheet" type="text/css">
+        <script src="https://kit.fontawesome.com/0fd87250ec.js" crossorigin="anonymous"></script>
         {% block head %}{% endblock head %}
     </head>
     <body>