Make the summary footer sticky on desktop

This bundles some of the inlince CSS and adds a z-index per sortorder to
make the sliding natural.

In case of the same z-index the order of creation in the DOM is picked
as how to stack. Given that creating the DOM from bottom to top is
unmaintable the less worse option is introducing a lot of z-indexes.

Perfect solution would be to put this in a class to remove the inline
styles but that is left for another time.

Unrelated to this PR, it seems in chromium based browser the
border/shadow of the sticky elements gets lost.

The misalignment of the `tbody` is because we check for the sortorder,
when there are multiple we close and open a new one which looks
misaligned due to the twig `if` condition.

Author: vmcj

webapp/public/style_domjudge.css

@@ -612,6 +612,18 @@ tr.ignore td, td.ignore, span.ignore {
     background-color: #05264c;
 }
 
+.scoreboard .problem-summary {
+    text-align: left;
+}
+
+.scoreboard .summaryline {
+    border-top: 2px solid black;
+}
+
+.summaryline .problem-summary-title {
+    font-size:90%;
+}
+
 .select_readonly {
     background-color: #e9ecef !important;
     opacity: 1;
@@ -649,4 +661,23 @@ blockquote {
 
 .right {
     text-align: right;
+
+/* Disable the sticky footer on mobile */
+@media only screen and (min-width: 600px) {
+    .scoreheader th {
+	z-index: 100;
+    }
+
+    .summaryline td {
+        position: sticky;
+        bottom: 0;
+        box-shadow: 0 -1px 0 0 black,
+                    0  1px 0 0 black;
+        background: var(--background-color);
+    }
+
+    tbody.scoreboard-sortorder-body {
+        position: relative;
+        z-index: 50;
+    }
 }

webapp/templates/partials/scoreboard_summary.html.twig

@@ -1,6 +1,6 @@
 {% if limitToTeamIds is null %}
     {% if showTeamSubmissions or jury %}
-        <tr style="border-top: 2px solid black;">
+        <tr class="summaryline">
             {% set summaryColspan = 3 %}
             {% if showAffiliationLogos %}
                 {% set summaryColspan = summaryColspan + 1 %}
@@ -16,32 +16,32 @@
             <td></td>
             {% for problem in scoreboard.problems %}
                 {% set summary = scoreboard.summary.problem(problem.probid) %}
-                <td style="text-align: left;">
+                <td class="problem-summary">
                     {% set link = null %}
                     {% if jury %}
                         {% set link = path('jury_problem', {'probId': problem.probid}) %}
                     {% endif %}
                     <a {% if link %}href="{{ link }}"{% endif %}>
                         <i class="fas fa-thumbs-up fa-fw"></i>
-                        <span class="submcorrect" style="font-size:90%;" title="number of accepted submissions">
+                        <span class="submcorrect problem-summary-title" title="number of accepted submissions">
                                 {{ summary.numSubmissionsCorrect[sortOrder] ?? 0 }}
                             </span>
                         <br/>
 
                         <i class="fas fa-thumbs-down fa-fw"></i>
-                        <span class="submreject" style="font-size:90%;" title="number of rejected submissions">
+                        <span class="submreject problem-summary-title" title="number of rejected submissions">
                                 {{ summary.numSubmissions[sortOrder] ?? 0 - summary.numSubmissionsCorrect[sortOrder] ?? 0 }}
                             </span>
                         <br/>
 
                         <i class="fas fa-question-circle fa-fw"></i>
-                        <span class="submpend" style="font-size:90%;" title="number of pending submissions">
+                        <span class="submpend problem-summary-title" title="number of pending submissions">
                                 {{ summary.numSubmissionsPending[sortOrder] ?? 0 }}
                             </span>
                         <br/>
 
                         <i class="fas fa-clock fa-fw"></i>
-                        <span style="font-size:90%;" title="first solved">
+                        <span class="problem-summary-title" title="first solved">
                             {% if summary.bestTimeInMinutes(sortOrder) is not null %}
                                 {{ summary.bestTimeInMinutes(sortOrder) }}min
                             {% else %}

webapp/templates/partials/scoreboard_table.html.twig

@@ -96,7 +96,7 @@
         {% endif %}
     </tr>
     </thead>
-    <tbody>
+    <tbody class="scoreboard-sortorder-body">
     {% set previousSortOrder = -1 %}
     {% set previousTeam = null %}
     {% set backgroundColors = {"#FFFFFF": 1} %}
@@ -107,6 +107,8 @@
             {% if previousSortOrder != -1 %}
                 {# Output summary of previous sort order #}
                 {% include 'partials/scoreboard_summary.html.twig' with {sortOrder: previousSortOrder} %}
+                </tbody>
+                <tbody class="scoreboard-sortorder-body" style="z-index: {{ 100-score.team.category.sortorder }};">
             {% endif %}
             {% set classes = classes | merge(['sortorderswitch']) %}
             {% set previousSortOrder = score.team.category.sortorder %}
@@ -392,6 +394,7 @@
 
         .cl{{ colorClass }} {
             background-color: {{ color }};
+            background-clip: content-box;
         }
 
         {% set cMin = color|hexColorToRGBA(0) %}