From 5bf2df563b7245e6a603458e47d679a6617b691c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jon=C3=A1=C5=A1=20Havelka?= <jonas.havelka@volny.cz>
Date: Wed, 14 Feb 2024 10:58:21 +0100
Subject: [PATCH] =?UTF-8?q?Rozd=C4=9Blen=C3=AD=20stylu=20tabulky=20do?=
 =?UTF-8?q?=C5=A1l=C3=BDch=20=C5=99e=C5=A1en=C3=AD=20na=20jednotliv=C3=A9?=
 =?UTF-8?q?=20=C4=8D=C3=A1sti=20a=20pou=C5=BEit=C3=AD=20jinde?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mamweb/static/css/modules.css                 | 60 +++++++++++--------
 .../templates/odevzdavatko/detail.html        | 12 ++--
 .../templates/odevzdavatko/tabulka.html       |  2 +-
 .../templates/sifrovacka/odpovedi_list.html   |  7 ++-
 vyroci/templates/vyroci/vyroci_list.html      |  7 ++-
 .../vysledkovky/vysledkovka_cisla.html        |  2 +-
 .../vysledkovky/vysledkovka_rocnik.html       |  2 +-
 7 files changed, 57 insertions(+), 35 deletions(-)

diff --git a/mamweb/static/css/modules.css b/mamweb/static/css/modules.css
index fc0b703b..035d9434 100644
--- a/mamweb/static/css/modules.css
+++ b/mamweb/static/css/modules.css
@@ -5,6 +5,9 @@
 
 .horizonatlni_scrollovani { overflow-x: auto; }
 
+/* Používá se pro podproblémy ve výsledkovkách -- zesvětlí se daný sloupec */
+.zesvetleni { color: gray; }
+
 
 /**** OZNAČENÍ NE-PUBLIC ČÁSTÍ ****/
 .mam-org-only {
@@ -144,7 +147,10 @@ div.cislo_odkazy ul {
 
 
 /**** TABULKY ****/
-/** Výsledkovky **/
+
+/** Tabulka s čárami mezi sloupci **/
+/* Např. výsledkovky */
+
 .tabulka_oramovane_sloupce {
 	border: solid 2px;
 }
@@ -157,51 +163,57 @@ div.cislo_odkazy ul {
 .tabulka_oramovane_sloupce thead tr {
 	border-bottom: solid 1px;
 }
+/***********************************/
 
-/* Používá se pro podproblémy ve výsledkovkách -- zesvětlí se daný sloupec */
-.zesvetleni {
-	color: gray;
-}
-/*****************/
 
+/** Tabulka se střídajícími se barvami řádků **/
+/* Skoro jakákoliv tabulka kromě výsledkovek */
 
-/** Tabulka odevzdaných a došlých řešení **/
-.dosla_reseni tr th, .dosla_reseni tr td {
+.barevna_tabulka {
 	padding: 1px 10px 1px 10px;
 	border-collapse: collapse;
-	min-width: 8em; /*Nastřeleno, aby se řádky s řešeními nezalamovaly. Teoreticky není potřeba pro th, ale whatever.*/
 }
 
-.dosla_reseni tr:nth-child(even) {
+.barevna_tabulka tbody tr:nth-child(even) {
 	background: var(--svetlounka-oranzova);
 }
 
-/*Přichycování prvního sloupce a řádku*/
-.dosla_reseni {
+.barevna_tabulka tbody tr:nth-child(odd) {
+	background: var(--barva-pozadi);
+}
+/**********************************************/
+
+
+/** Tabulka, kde první řádek a sloupec je pořád vidět **/
+/* Např. tabulka odevzdaných řešení, nebo výsledkovky */
+
+/* Omezí výšku a šířku, aby bylo příjemné na scrollování a zapne scrollování */
+.tabulka_s_uchycenym_radkem_a_sloupcem {
 	display: block;
-	max-height: 90vh;
+	max-height: 80vh;
 	max-width: 90vw;
 	overflow: auto;
-	margin-left: 5vw;
+	margin-left: 5vw; /* Vystředování (FIXME není potřeba u tabulek, co nejsou na celou obrazovku) */
 }
 
-.dosla_reseni thead tr {
+/* Uchytí první řádek */
+.tabulka_s_uchycenym_radkem_a_sloupcem thead tr {
 	position: sticky;
 	top: 0;
 	z-index: 1;
 }
 
-.dosla_reseni tr:nth-child(even) td:first-child, .dosla_reseni thead tr, .dosla_reseni thead tr:first-child td:first-child {
-	background: var(--svetlounka-oranzova);
-}
-
-.dosla_reseni tr:nth-child(odd) td:first-child {
-	background: var(--barva-pozadi);
-}
-
-.dosla_reseni tr td:first-child {
+/* Uchytí první sloupec */
+.tabulka_s_uchycenym_radkem_a_sloupcem td:first-child, .tabulka_s_uchycenym_radkem_a_sloupcem th:first-child {
 	position: sticky;
 	left: 0;
+	background: inherit; /* (Snad) zneprůhlední první sloupec */
+}
+/** Tabulka, kde první řádek a sloupec je pořád vidět **/
+
+/** Tabulka odevzdaných a došlých řešení **/
+.tabulka_doslych_reseni td {
+	min-width: 8em; /* Nastřeleno, aby se řádky s řešeními nezalamovaly. */
 }
 /******************************************/
 
diff --git a/odevzdavatko/templates/odevzdavatko/detail.html b/odevzdavatko/templates/odevzdavatko/detail.html
index 5a43c4b5..6ea9acc6 100644
--- a/odevzdavatko/templates/odevzdavatko/detail.html
+++ b/odevzdavatko/templates/odevzdavatko/detail.html
@@ -55,8 +55,9 @@
 {# Soubory: #}
 <h3>Přílohy:</h3>
 {% if object.prilohy.all %}
-<table class="dosla_reseni">
-<tr><th>Soubor</th><th>Řešitelova poznámka</th><th>Datum</th></tr>
+<table class="barevna_tabulka">
+<thead><tr><th>Soubor</th><th>Řešitelova poznámka</th><th>Datum</th></tr></thead>
+<tbody>
 {% for priloha in object.prilohy.all %}
 <tr>
   <td><a class='reseni-ke-stazeni' 
@@ -67,6 +68,7 @@
 	<td>{{ priloha.res_poznamka }}</td>
 	<td>{{ priloha.vytvoreno }}</td></tr>
 {% endfor %}
+</tbody>
 </table>
 {% if edit %} {# FIXME: tohle nesouvisí s editací, ale s tím, jestli je člověk org… #}
   <br>
@@ -142,8 +144,9 @@
 
   {% else %}
 <h3>Hodnocení:</h3>
-<table class="dosla_reseni">
-<tr><th>Problém</th><th>{# 📖 #}🧍</th><th>{# 🔵 #}🧍∑</th><th class="teamovaCast">{# 💪 #}🧑‍🤝‍🧑</th><th class="teamovaCast">{# ❤ #}🧑‍🤝‍🧑∑</th><th>Zpětná vazba od opravovatele</th></tr>
+<table class="barevna_tabulka">
+<thead><tr><th>Problém</th><th>{# 📖 #}🧍</th><th>{# 🔵 #}🧍∑</th><th class="teamovaCast">{# 💪 #}🧑‍🤝‍🧑</th><th class="teamovaCast">{# ❤ #}🧑‍🤝‍🧑∑</th><th>Zpětná vazba od opravovatele</th></tr></thead>
+<tbody>
 {% for h in hodnoceni %}
 	<tr class="hodnoceni">
 		<td>{{ h.problem }}</td>
@@ -154,6 +157,7 @@
 		<td>{{ h.feedback | linebreaks }}</td>
 	</tr>
 {% endfor %}
+</tbody>
 </table>
   {% endif %}
 
diff --git a/odevzdavatko/templates/odevzdavatko/tabulka.html b/odevzdavatko/templates/odevzdavatko/tabulka.html
index 7ee90ea9..8b79b2f7 100644
--- a/odevzdavatko/templates/odevzdavatko/tabulka.html
+++ b/odevzdavatko/templates/odevzdavatko/tabulka.html
@@ -21,7 +21,7 @@ Do data (včetně): {{ filtr.reseni_do }}
 	<input type=submit value="Změň ročník">
 </form>
 
-<table class="dosla_reseni">
+<table class="tabulka_doslych_reseni barevna_tabulka tabulka_s_uchycenym_radkem_a_sloupcem">
   <thead>
 	<tr>
 		<td></td> {# Prázdná buňka v levém horním rohu #}
diff --git a/sifrovacka/templates/sifrovacka/odpovedi_list.html b/sifrovacka/templates/sifrovacka/odpovedi_list.html
index 0024a7c1..9a3ef08f 100644
--- a/sifrovacka/templates/sifrovacka/odpovedi_list.html
+++ b/sifrovacka/templates/sifrovacka/odpovedi_list.html
@@ -4,14 +4,16 @@
 
   <h1>{% block nadpis1a %}Šifrovačka odpovědi{% endblock nadpis1a %}</h1>
 
-  <table class="dosla_reseni">
+  <table class="barevna_tabulka tabulka_s_uchycenym_radkem_a_sloupcem">
+  <thead>
     <tr>
       <th>Timestamp</th>
       <th>Řešitel</th>
       <th>Šifra</th>
       <th>Odpověď</th>
     </tr>
-
+  </thead>
+  <tbody>
     {% for u in object_list %}
       <tr>
         <td>{{ u.timestamp }}</td>
@@ -20,6 +22,7 @@
         <td style="color: {% if u.uspech %}green{% else %}red{% endif %};">{{ u.odpoved }}</td>
       </tr>
     {% endfor %}
+  </tbody>
   </table>
 
 {% endblock content %}
diff --git a/vyroci/templates/vyroci/vyroci_list.html b/vyroci/templates/vyroci/vyroci_list.html
index efab5b0b..9135f0f8 100644
--- a/vyroci/templates/vyroci/vyroci_list.html
+++ b/vyroci/templates/vyroci/vyroci_list.html
@@ -4,7 +4,8 @@
 
   <h1>{% block nadpis1a %}M&Mí 30! odpovědi{% endblock nadpis1a %}</h1>
 
-  <table class="dosla_reseni">
+  <table class="barevna_tabulka tabulka_s_uchycenym_radkem_a_sloupcem">
+  <thead>
     <tr>
       <th>Jméno</th>
       <th>Přezdívka</th>
@@ -14,7 +15,8 @@
       <th>Co znamená číslo?</th>
       <th>Něco dodat?</th>
     </tr>
-
+  </thead>
+  <tbody>
     {% for u in object_list %}
       <tr>
         <td>{{ u.jmeno }}</td>
@@ -26,6 +28,7 @@
         <td style="word-break: break-all">{{ u.dodat }}</td>
       </tr>
     {% endfor %}
+  </tbody>
   </table>
 
 {% endblock content %}
diff --git a/vysledkovky/templates/vysledkovky/vysledkovka_cisla.html b/vysledkovky/templates/vysledkovky/vysledkovka_cisla.html
index 6263d420..bc1d48c5 100644
--- a/vysledkovky/templates/vysledkovky/vysledkovka_cisla.html
+++ b/vysledkovky/templates/vysledkovky/vysledkovka_cisla.html
@@ -1,4 +1,4 @@
-<table class='tabulka_oramovane_sloupce horizonatlni_scrollovani'>
+<table class='tabulka_oramovane_sloupce tabulka_s_uchycenym_radkem_a_sloupcem'>
 <thead>
     <tr>
         <th>#</th>
diff --git a/vysledkovky/templates/vysledkovky/vysledkovka_rocnik.html b/vysledkovky/templates/vysledkovky/vysledkovka_rocnik.html
index 5d7db775..612b436a 100644
--- a/vysledkovky/templates/vysledkovky/vysledkovka_rocnik.html
+++ b/vysledkovky/templates/vysledkovky/vysledkovka_rocnik.html
@@ -1,4 +1,4 @@
-<table class='tabulka_oramovane_sloupce'>
+<table class='tabulka_oramovane_sloupce tabulka_s_uchycenym_radkem_a_sloupcem'>
 <thead>
   <tr>
     <th>#</th>