Rozdělení stylu tabulky došlých řešení na jednotlivé části a použití jinde

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í **/
+.barevna_tabulka {
-.dosla_reseni tr th, .dosla_reseni tr td {
 	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*/
+.barevna_tabulka tbody tr:nth-child(odd) {
-.dosla_reseni {
+	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 {
+/* Uchytí první sloupec */
-	background: var(--svetlounka-oranzova);
+.tabulka_s_uchycenym_radkem_a_sloupcem td:first-child, .tabulka_s_uchycenym_radkem_a_sloupcem th:first-child {
-}
-
-.dosla_reseni tr:nth-child(odd) td:first-child {
-	background: var(--barva-pozadi);
-}
-
-.dosla_reseni tr td: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. */
 }
 /******************************************/
 

odevzdavatko/templates/odevzdavatko/detail.html

@@ -55,8 +55,9 @@
 {# Soubory: #}
 <h3>Přílohy:</h3>
 {% if object.prilohy.all %}
-<table class="dosla_reseni">
+<table class="barevna_tabulka">
-<tr><th>Soubor</th><th>Řešitelova poznámka</th><th>Datum</th></tr>
+<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">
+<table class="barevna_tabulka">
-<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><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 %}
 

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 #}

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 %}

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 %}

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>

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>