Added header/footer and improved UI

scores/migrations/0006_club_footer_club_header.py

@@ -0,0 +1,23 @@
+# Generated by Django 4.1.1 on 2023-02-24 08:37
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('scores', '0005_match_team5'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='club',
+            name='footer',
+            field=models.CharField(blank=True, max_length=200),
+        ),
+        migrations.AddField(
+            model_name='club',
+            name='header',
+            field=models.CharField(blank=True, max_length=200),
+        ),
+    ]

scores/models.py

@@ -3,6 +3,8 @@ from django.utils import timezone
 
 class Club(models.Model):
     name = models.CharField(max_length=200)
+    header = models.CharField(max_length=200, blank=True)
+    footer = models.CharField(max_length=200, blank=True)
 
     def __str__(self):
         return self.name

scores/static/scores/style.css

@@ -1,11 +1,36 @@
 
-html {
+html, body {
   /* font-size: 30px; /* px signifie 'pixels': la taille de base pour la police est désormais 10 pixels de haut  */
   /* font-family: 'Open Sans', sans-serif; /* cela devrait être le reste du résultat obtenu à partir de Google fonts */
 
   font-family: Helvetica, sans-serif;
   background-color: #3878D8;
   color: white;
+
+
+box-sizing: border-box;
+height: 100%;
+padding: 0;
+margin: 0;
+}
+
+header, footer {
+  padding: 15px;
+}
+
+header {
+  font-size: 30px;
+}
+
+.page-body {
+    flex-grow: 1;
+}
+
+.wrapper {
+    box-sizing: border-box;
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
 a {
@@ -13,7 +38,7 @@ a {
 }
 
 table {
-  font-size: 30px; /* px signifie 'pixels': la taille de base pour la police est désormais 10 pixels de haut  */
+  font-size: 30px;
   font-weight: 600;
 }
 
@@ -31,6 +56,10 @@ td {
   padding: 10px;
 }
 
+.big {
+  font-size: 30px;
+}
+
 .score {
   width: 60px;
   text-align: center;
@@ -50,7 +79,7 @@ td {
 
 }
 .smatch {
-  padding-top: 100px;
+  padding-top: 50px;
   width: 800px;
   margin: 0 auto;
 
@@ -67,7 +96,10 @@ td {
   align-items: center;
 }
 
-
+.page-footer {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
 .container {
   /* width: 100%; */
       /* text-align:center; */

scores/templates/scores/index.html

@@ -9,41 +9,48 @@ var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();
 // Update the count down every 1 second
 var x = setInterval(function() {
 
-  // Get today's date and time
-  var now = new Date().getTime();
-
-  // Find the distance between now and the count down date
-  var distance = {{ match.seconds }} * -1;
-
-  // Time calculations for days, hours, minutes and seconds
-  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
-  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
-  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
-
-  // Display the result in the element with id="demo"
-  document.getElementById("demo").innerHTML = hours + "h "
-  + minutes + "m " + seconds + "s ";
-
-  // If the count down is finished, write some text
-  if (distance < 0) {
-    clearInterval(x);
-    document.getElementById("demo").innerHTML = "Démarrage en cours...";
-  }
+// Get today's date and time
+var now = new Date().getTime();
+
+// Find the distance between now and the count down date
+var distance = {{ match.seconds }} * -1;
+
+// Time calculations for days, hours, minutes and seconds
+var days = Math.floor(distance / (1000 * 60 * 60 * 24));
+var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+var seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+// Display the result in the element with id="demo"
+document.getElementById("demo").innerHTML = hours + "h "
++ minutes + "m " + seconds + "s ";
+
+// If the count down is finished, write some text
+if (distance < 0) {
+clearInterval(x);
+document.getElementById("demo").innerHTML = "Démarrage en cours...";
+}
 }, 1000);
 </script> -->
 
 <head>
   <link rel="stylesheet" href="{% static 'scores/style.css' %}">
   <title>Padel</title>
-  <!-- <meta http-equiv="refresh" content="5" > -->
+  <meta http-equiv="refresh" content="15"/>
 </head>
 
+<div class="wrapper">
 
-<div class="container">
-{% if matches %}
-{% for match in matches %}
-    <div class="match">
+  {% if club.header %}
+  <header class="center">{{ club.header }}</header>
+  {% endif %}
+
+  <main class="page-body">
+
+    <div class="container">
+      {% if matches %}
+      {% for match in matches %}
+      <div class="match">
 
         <p><a href="/match/{{ match.id }}/">COURS #{{ match.court }}</a></p>
 
@@ -94,15 +101,22 @@ var x = setInterval(function() {
 
         <!-- <p id="demo"></p> -->
 
-        <p>{{ match.duration }}</p>
+        <p class="big">{{ match.duration }}</p>
+
+      </div>
+      {% endfor %}
 
+      {% else %}
+      <p class="center">Pas de matchs en cours...</p>
+      {% endif %}
     </div>
-    {% endfor %}
 
-{% else %}
-    <p class="center">Pas de matchs en cours...</p>
-{% endif %}
-</div>
+  </main>
+
+  {% if club.footer %}
+  <footer class="page-footer, center">{{ club.footer }}</footer>
+  {% endif %}
 
+</div>
 
 </html>

scores/templates/scores/match.html

@@ -9,96 +9,110 @@ var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();
 // Update the count down every 1 second
 var x = setInterval(function() {
 
-  // Get today's date and time
-  var now = new Date().getTime();
-
-  // Find the distance between now and the count down date
-  var distance = countDownDate - now;
-
-  // Time calculations for days, hours, minutes and seconds
-  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
-  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
-  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
-
-  // Display the result in the element with id="demo"
-  document.getElementById("demo").innerHTML = hours + "h "
-  + minutes + "m " + seconds + "s ";
-
-  // If the count down is finished, write some text
-  if (distance < 0) {
-    clearInterval(x);
-    document.getElementById("demo").innerHTML = "EXPIRED";
-  }
+// Get today's date and time
+var now = new Date().getTime();
+
+// Find the distance between now and the count down date
+var distance = countDownDate - now;
+
+// Time calculations for days, hours, minutes and seconds
+var days = Math.floor(distance / (1000 * 60 * 60 * 24));
+var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+var seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+// Display the result in the element with id="demo"
+document.getElementById("demo").innerHTML = hours + "h "
++ minutes + "m " + seconds + "s ";
+
+// If the count down is finished, write some text
+if (distance < 0) {
+clearInterval(x);
+document.getElementById("demo").innerHTML = "EXPIRED";
+}
 }, 1000);
 </script> -->
 
 <head>
   <link rel="stylesheet" href="{% static 'scores/style.css' %}">
   <title>Padel - {{ match.title }} - COURS {{ match.court }}</title>
-  <!-- <meta http-equiv="refresh" content="5" > -->
+  <meta http-equiv="refresh" content="15"/>
 </head>
 
 <!-- <p id="demo"></p> -->
 
-<div class="scontainer">
-{% if match %}
-    <div class="smatch">
-
-      <p>COURS {{ match.court }}</p>
-
-      <h1>{{ match.title }}</h1>
-
-      {% if match.team3 %}
-
-      <table>
-        <tr><td>{{ match.team1 }}</td>
-          {% if match.team1scorecolumn1 %}<td class="score">{{ match.team1scorecolumn1 }}</td>{% endif %}
-        </tr>
-        <tr><td>{{ match.team2 }}</td>
-          {% if match.team1scorecolumn2 %}<td class="score">{{ match.team1scorecolumn2 }}</td>{% endif %}
-        </tr>
-        <tr><td>{{ match.team3 }}</td>
-          {% if match.team1scorecolumn3 %}<td class="score">{{ match.team1scorecolumn3 }}</td>{% endif %}
-        </tr>
-        <tr><td>{{ match.team4 }}</td>
-          {% if match.team1scorecolumn4 %}<td class="score">{{ match.team1scorecolumn4 }}</td>{% endif %}
-        </tr>
-
-        <tr><td>{{ match.team5 }}</td>
-          {% if match.team1scorecolumn5 %}<td class="score">{{ match.team1scorecolumn5 }}</td>{% endif %}
-        </tr>
-      </table>
+<div class="wrapper">
+
+  {% if match.club.header %}
+  <header class="center">{{ match.club.header }}</header>
+  {% endif %}
+
+  <main class="page-body">
+
+    <div class="scontainer">
+      {% if match %}
+      <div class="smatch">
+
+        <p>COURS {{ match.court }}</p>
+
+        <h1>{{ match.title }}</h1>
+
+        {% if match.team3 %}
+
+        <table>
+          <tr><td>{{ match.team1 }}</td>
+            {% if match.team1scorecolumn1 %}<td class="score">{{ match.team1scorecolumn1 }}</td>{% endif %}
+          </tr>
+          <tr><td>{{ match.team2 }}</td>
+            {% if match.team1scorecolumn2 %}<td class="score">{{ match.team1scorecolumn2 }}</td>{% endif %}
+          </tr>
+          <tr><td>{{ match.team3 }}</td>
+            {% if match.team1scorecolumn3 %}<td class="score">{{ match.team1scorecolumn3 }}</td>{% endif %}
+          </tr>
+          <tr><td>{{ match.team4 }}</td>
+            {% if match.team1scorecolumn4 %}<td class="score">{{ match.team1scorecolumn4 }}</td>{% endif %}
+          </tr>
+
+          <tr><td>{{ match.team5 }}</td>
+            {% if match.team1scorecolumn5 %}<td class="score">{{ match.team1scorecolumn5 }}</td>{% endif %}
+          </tr>
+        </table>
+        {% else %}
+
+        <table>
+          <tr>
+            <td>{{ match.team1 }}</td>
+            {% if match.team1scorecolumn1 %}<td class="score">{{ match.team1scorecolumn1 }}</td>{% endif %}
+            {% if match.team1scorecolumn2 %}<td class="score">{{ match.team1scorecolumn2 }}</td>{% endif %}
+            {% if match.team1scorecolumn3 %}<td class="score">{{ match.team1scorecolumn3 }}</td>{% endif %}
+            {% if match.team1scorecolumn4 %}<td class="score">{{ match.team1scorecolumn4 }}</td>{% endif %}
+            {% if match.team1scorecolumn5 %}<td class="score">{{ match.team1scorecolumn5 }}</td>{% endif %}
+          </tr>
+          <tr>
+            <td>{{ match.team2 }}</td>
+            {% if match.team2scorecolumn1 %}<td class="score">{{ match.team2scorecolumn1 }}</td>{% endif %}
+            {% if match.team2scorecolumn2 %}<td class="score">{{ match.team2scorecolumn2 }}</td>{% endif %}
+            {% if match.team2scorecolumn3 %}<td class="score">{{ match.team2scorecolumn3 }}</td>{% endif %}
+            {% if match.team2scorecolumn4 %}<td class="score">{{ match.team2scorecolumn4 }}</td>{% endif %}
+            {% if match.team2scorecolumn5 %}<td class="score">{{ match.team2scorecolumn5 }}</td>{% endif %}
+          </tr>
+        </table>
+
+        {% endif %}
+
+        <p class="big">{{ match.duration }}</p>
+
+      </div>
       {% else %}
-
-      <table>
-        <tr>
-          <td>{{ match.team1 }}</td>
-          {% if match.team1scorecolumn1 %}<td class="score">{{ match.team1scorecolumn1 }}</td>{% endif %}
-          {% if match.team1scorecolumn2 %}<td class="score">{{ match.team1scorecolumn2 }}</td>{% endif %}
-          {% if match.team1scorecolumn3 %}<td class="score">{{ match.team1scorecolumn3 }}</td>{% endif %}
-          {% if match.team1scorecolumn4 %}<td class="score">{{ match.team1scorecolumn4 }}</td>{% endif %}
-          {% if match.team1scorecolumn5 %}<td class="score">{{ match.team1scorecolumn5 }}</td>{% endif %}
-        </tr>
-        <tr>
-          <td>{{ match.team2 }}</td>
-          {% if match.team2scorecolumn1 %}<td class="score">{{ match.team2scorecolumn1 }}</td>{% endif %}
-          {% if match.team2scorecolumn2 %}<td class="score">{{ match.team2scorecolumn2 }}</td>{% endif %}
-          {% if match.team2scorecolumn3 %}<td class="score">{{ match.team2scorecolumn3 }}</td>{% endif %}
-          {% if match.team2scorecolumn4 %}<td class="score">{{ match.team2scorecolumn4 }}</td>{% endif %}
-          {% if match.team2scorecolumn5 %}<td class="score">{{ match.team2scorecolumn5 }}</td>{% endif %}
-        </tr>
-      </table>
-
+      <p class="center">No matches at the moment...</p>
       {% endif %}
+    </div>
 
-        <p>{{ match.duration }}</p>
+  </main>
 
-    </div>
-{% else %}
-    <p class="center">No matches at the moment...</p>
-{% endif %}
-</div>
+  {% if match.club.footer %}
+  <footer class="page-footer, center">{{ match.club.footer }}</footer>
+  {% endif %}
 
 
-</html>
+  </html>

scores/views.py

@@ -2,15 +2,17 @@ from django.shortcuts import render, get_object_or_404
 from django.http import HttpResponse
 from django.template import loader
 from django.contrib.auth.models import User
-from .models import Match
+from .models import Match, Club
 from .serializers import UserSerializer, MatchSerializer
 from rest_framework import viewsets
 from rest_framework import permissions
 
 def index(request):
+    club = Club.objects.first()
     matches = Match.objects.order_by('court')
     template = loader.get_template('scores/index.html')
     context = {
+        'club': club,
         'matches': matches,
     }
     return HttpResponse(template.render(context, request))