From 42565021a41d14162714082c239fcf54e97ffae1 Mon Sep 17 00:00:00 2001
From: Razmig Sarkissian <razmig@staxriver.com>
Date: Tue, 25 Jul 2023 16:56:24 +0200
Subject: [PATCH] update html

---
 scores/static/scores/style.css          | 28 +++++++-
 scores/templates/scores/index.html      |  8 +--
 scores/templates/scores/match.html      | 87 ++++++++++---------------
 scores/templates/scores/tournament.html | 22 ++++---
 4 files changed, 74 insertions(+), 71 deletions(-)
diff --git a/scores/static/scores/style.css b/scores/static/scores/style.css
index 111f1b5..74be8a1 100644
--- a/scores/static/scores/style.css
+++ b/scores/static/scores/style.css
@@ -7,7 +7,7 @@ html, body {
   /*font-family: Helvetica, sans-serif;*/
   background-color: white;
   color: black;
-
+  font-size: 100%;
 
   box-sizing: border-box;
   height: 100%;
@@ -53,12 +53,17 @@ table, th, td {
    border-collapse: collapse;
 }
 
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
 tr {
-  height: 60px;
+  height: 80px;
 }
 
 td {
-  padding: 0px 10px;
+  padding: 8px 16px;
 }
 
 .big {
@@ -66,8 +71,13 @@ td {
   font-weight: 600;
 }
 
+.sbig {
+  font-size: 30px;
+  font-weight: 600;
+}
 .score {
   width: 60px;
+  font-size: 150%;
   text-align: center;
   vertical-align: middle;
 }
@@ -77,6 +87,12 @@ td {
   margin: 0 auto;
 }
 
+.scenter {
+  text-align: center;
+  font-size: 200%;
+  margin: 0 auto;
+}
+
 .match {
   /* display: inline-block; */
   display:inline-block;
@@ -103,6 +119,12 @@ td {
 }
 .teamname {
   width: 100%;
+  font-size: 120%;
+}
+
+.steamname {
+  width: 100%;
+  font-size: 200%;
 }
 
 .smatch {
diff --git a/scores/templates/scores/index.html b/scores/templates/scores/index.html
index d72a672..bfcc549 100644
--- a/scores/templates/scores/index.html
+++ b/scores/templates/scores/index.html
@@ -85,8 +85,8 @@
 
         <!-- <p id="demo"></p> -->
         <p class="duration">
-          <div class="alignleft">{{ match.durationPrefix }}</div>
-          <div class="big alignright">{{ match.duration }}</div>
+          <div class="small"> {{ match.durationPrefix }}</div>
+          <div class="big">{{ match.duration }}</div>
         </p>
 
       </div>
@@ -154,8 +154,8 @@
 
         <!-- <p id="demo"></p> -->
         <p class="duration">
-          <div class="alignleft">{{ match.durationPrefix }}</div>
-          <div class="big alignright">{{ match.duration }}</div>
+          <div class="small"> {{ match.durationPrefix }}</div>
+          <div class="big">{{ match.duration }}</div>
         </p>
         <div class="clear" />
 
diff --git a/scores/templates/scores/match.html b/scores/templates/scores/match.html
index 10ea699..9ed2a7e 100644
--- a/scores/templates/scores/match.html
+++ b/scores/templates/scores/match.html
@@ -2,80 +2,56 @@
 
 {% load static %}
 
-<!-- <script>
-// Set the date we're counting down to
-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";
-}
-}, 1000);
-</script> -->
-
 <head>
   <link rel="stylesheet" href="{% static 'scores/style.css' %}">
-  <title>Padel - {{ match.title }} - COURS {{ match.court }}</title>
+  <title>Padel</title>
   <meta http-equiv="refresh" content="15"/>
 </head>
 
-<!-- <p id="demo"></p> -->
-
 <div class="wrapper">
 
   {% if match.tournament.club.header %}
-  <header class="center">{{ match.tournament.club.header }}</header>
+  <header class="scenter">{{ match.tournament.club.header }}</header>
   {% endif %}
 
   <main class="page-body">
+      {% autoescape off %}
 
     <div class="scontainer">
-      {% if match %}
       <div class="smatch">
 
-        <p>COURS {{ match.court }}</p>
 
-        <h1>{{ match.title }}</h1>
+        <h1 class="scenter" style="padding-bottom:20px">{{ match.title }}</h1>
+
+        <!-- <p class="duration">
+          <div class="alignleft"><h1>{{ match.title }}</h1></div>
+          <div class="big alignright"><a href="/match/{{ match.id }}/">TERRAIN #{{ match.court }}</a></div>
+        </p>       -->
 
         {% if match.team3 %}
 
         <table>
-          <tr><td class="teamname">{{ match.team1|linebreaksbr }}</td>
+          <tr><td class="steamname">{{ match.team1|linebreaksbr }}</td>
             {% if match.team1scorecolumn1 %}<td class="score">{{ match.team1scorecolumn1 }}</td>{% endif %}
+            {% if match.team2scorecolumn1 %}<td class="score">{{ match.team2scorecolumn1 }}</td>{% endif %}
           </tr>
-          <tr><td class="teamname">{{ match.team2|linebreaksbr }}</td>
+          <tr><td class="steamname">{{ match.team2|linebreaksbr }}</td>
             {% if match.team1scorecolumn2 %}<td class="score">{{ match.team1scorecolumn2 }}</td>{% endif %}
+            {% if match.team2scorecolumn2 %}<td class="score">{{ match.team2scorecolumn2 }}</td>{% endif %}
           </tr>
-          <tr><td class="teamname">{{ match.team3|linebreaksbr }}</td>
+          <tr><td class="steamname">{{ match.team3|linebreaksbr }}</td>
             {% if match.team1scorecolumn3 %}<td class="score">{{ match.team1scorecolumn3 }}</td>{% endif %}
+            {% if match.team2scorecolumn3 %}<td class="score">{{ match.team2scorecolumn3 }}</td>{% endif %}
           </tr>
-          <tr><td class="teamname">{{ match.team4|linebreaksbr }}</td>
+          <tr><td class="steamname">{{ match.team4|linebreaksbr }}</td>
             {% if match.team1scorecolumn4 %}<td class="score">{{ match.team1scorecolumn4 }}</td>{% endif %}
+            {% if match.team2scorecolumn4 %}<td class="score">{{ match.team2scorecolumn4 }}</td>{% endif %}
           </tr>
-          
           {% if match.team5 %}
-          <tr><td class="teamname">{{ match.team5|linebreaksbr }}</td>
+
+          <tr><td class="steamname">{{ match.team5|linebreaksbr }}</td>
             {% if match.team1scorecolumn5 %}<td class="score">{{ match.team1scorecolumn5 }}</td>{% endif %}
+            {% if match.team2scorecolumn5 %}<td class="score">{{ match.team2scorecolumn5 }}</td>{% endif %}
           </tr>
           {% endif %}
 
@@ -84,7 +60,7 @@ document.getElementById("demo").innerHTML = "EXPIRED";
 
         <table>
           <tr>
-            <td class="teamname">{{ match.team1|linebreaksbr }}</td>
+            <td class="steamname">{{ match.team1|linebreaksbr }}</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 %}
@@ -92,7 +68,7 @@ document.getElementById("demo").innerHTML = "EXPIRED";
             {% if match.team1scorecolumn5 %}<td class="score">{{ match.team1scorecolumn5 }}</td>{% endif %}
           </tr>
           <tr>
-            <td class="teamname">{{ match.team2|linebreaksbr }}</td>
+            <td class="steamname">{{ match.team2|linebreaksbr }}</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 %}
@@ -103,19 +79,22 @@ document.getElementById("demo").innerHTML = "EXPIRED";
 
         {% endif %}
 
-        <p class="big">{{ match.duration }}</p>
+        <!-- <p id="demo"></p> -->
+        <p class="duration">
+          <div class="small"> {{ match.durationPrefix }}</div>
+          <div class="sbig">{{ match.duration }}</div>
+        </p>
 
       </div>
-      {% else %}
-      <p class="center">No matches at the moment...</p>
-      {% endif %}
-    </div>
 
+    </div>
+    {% endautoescape %}
   </main>
 
-  {% if match.club.footer %}
-  <footer class="page-footer, center">{{ match.club.footer }}</footer>
+  {% if club.footer %}
+  <footer class="page-footer, center">{{ club.footer }}</footer>
   {% endif %}
 
+</div>
 
-  </html>
+</html>
diff --git a/scores/templates/scores/tournament.html b/scores/templates/scores/tournament.html
index ba94022..ccf75bb 100644
--- a/scores/templates/scores/tournament.html
+++ b/scores/templates/scores/tournament.html
@@ -21,11 +21,14 @@
 
       {% for match in live_matches %}
       <div class="match">
-
-        <p><a href="/match/{{ match.id }}/">TERRAIN #{{ match.court }}</a></p>
-
-        <h1>{{ match.title }}</h1>
-
+          <div style="width: 100%;">
+              <div style="float: left;">
+                  <h1>{{ match.title }}</h1>
+              </div>
+              <div style="float: right;">
+                  <h1><a href="/match/{{ match.id }}/">TERRAIN #{{ match.court }}</a><h1>
+              </div>
+          </div>
         {% if match.team3 %}
 
         <table>
@@ -80,10 +83,9 @@
 
         <!-- <p id="demo"></p> -->
         <p class="duration">
-          <div class="alignleft">{{ match.durationPrefix }}</div>
-          <div class="big alignright">{{ match.duration }}</div>
+          <div class="small"> {{ match.durationPrefix }}</div>
+          <div class="big">{{ match.duration }}</div>
         </p>
-
       </div>
       {% endfor %}
 
@@ -146,8 +148,8 @@
 
         <!-- <p id="demo"></p> -->
         <p class="duration">
-          <div class="alignleft">{{ match.durationPrefix }}</div>
-          <div class="big alignright">{{ match.duration }}</div>
+          <div class="small"> {{ match.durationPrefix }}</div>
+          <div class="big">{{ match.duration }}</div>
         </p>
 
       </div>

{{ match.team1\|linebreaksbr }}
{{ match.team1\|linebreaksbr }}	{{ match.team1scorecolumn1 }}	{{ match.team2scorecolumn1 }}
{{ match.team2\|linebreaksbr }}
{{ match.team2\|linebreaksbr }}	{{ match.team1scorecolumn2 }}	{{ match.team2scorecolumn2 }}
{{ match.team3\|linebreaksbr }}
{{ match.team3\|linebreaksbr }}	{{ match.team1scorecolumn3 }}	{{ match.team2scorecolumn3 }}
{{ match.team4\|linebreaksbr }}
{{ match.team4\|linebreaksbr }}	{{ match.team1scorecolumn4 }}	{{ match.team2scorecolumn4 }}
{{ match.team5\|linebreaksbr }}
{{ match.team5\|linebreaksbr }}	{{ match.team1scorecolumn5 }}	{{ match.team2scorecolumn5 }}