Improve hearts on scoreboard by using separate column

Author: nickygerritsen

webapp/public/js/domjudge.js

@@ -318,9 +318,6 @@ function getHeartCol(row) {
         td = tds[1];
     }
     if (td !== null) {
-        if (td.children.length) {
-            return td.children[0];
-        }
         return td;
     }
 
@@ -397,11 +394,10 @@ function toggle(id, show, mobile)
     });
 }
 
-function addHeart(rank, row, id, isFav, mobile)
+function getHeartTd(rank, row, id, isFav, mobile)
 {
-    var heartCol = getHeartCol(row);
     var iconClass = isFav ? "fas fa-heart" : "far fa-heart";
-    return heartCol.innerHTML + "<span class=\"heart " + iconClass + "\" onclick=\"toggle(" + id + "," + (isFav ? "false" : "true") + "," + mobile + ")\"></span>";
+    return "<td class=\"scoreaf heart\"><span class=\"heart " + iconClass + "\" onclick=\"toggle(" + id + "," + (isFav ? "false" : "true") + "," + mobile + ")\"></span></td>";
 }
 
 function initFavouriteTeams()
@@ -432,7 +428,9 @@ function initFavouriteTeams()
             for (var i = 0; i < favTeams.length; i++) {
                 if (teamname === favTeams[i]) {
                     found = true;
-                    heartCol.innerHTML = addHeart(rank, scoreboard[j], teamIndex, found, mobile);
+                    let heartTd = getHeartTd(rank, scoreboard[j], teamIndex, found, mobile);
+                    // Insert td after heartCol
+                    heartCol.insertAdjacentHTML('afterend', heartTd);
                     toAdd[cntFound] = scoreboard[j].cloneNode(true);
                     if (mobile) {
                         toAddMobile[cntFound] = scoreboard[j + 1].cloneNode(true);
@@ -455,7 +453,8 @@ function initFavouriteTeams()
                 }
             }
             if (!found) {
-                heartCol.innerHTML = addHeart(rank, scoreboard[j], teamIndex, found, mobile);
+                let heartTd = getHeartTd(rank, scoreboard[j], teamIndex, found, mobile);
+                heartCol.insertAdjacentHTML('afterend', heartTd);
             }
             if (rank !== "") {
                 lastRank = rank;

webapp/public/style_domjudge.css

@@ -198,6 +198,10 @@ del {
 .scoreboard td.no-border, .scoreboard th.no-border {
     border: none;
 }
+.scoreboard td.heart {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
 .scoreboard td.rank {
     padding-left: 0.3em;
     padding-right: 0.3em;

webapp/templates/partials/scoreboard_table.html.twig

@@ -30,7 +30,7 @@
 
 <table class="d-none d-md-table scoreboard desktop-scoreboard center {% if jury %}scoreboard_jury{% endif %}">
 
-    {% set teamColspan = 2 %}
+    {% set teamColspan = 3 %}
     {% if showAffiliationLogos %}
         {% set teamColspan = teamColspan + 1 %}
     {% endif %}