From b9eec15be38a8992835e0aee19b247bcf30d41b2 Mon Sep 17 00:00:00 2001
From: Michael Vasseur <14887731+vmcj@users.noreply.github.com>
Date: Mon, 31 Jul 2023 20:45:15 +0200
Subject: [PATCH] Make table cells fully clickable

See https://github.com/DOMjudge/domjudge/issues/1273 for the full
explaination.

This needs some hacks in CSS for firefox & chromium (or the other way around is also
possible) given that most major browsers are now chromium based it makes
sense to use that as default.

The selector `td:not(.testcase-results)` is to make sure that we are reasonable
specific to be applied on the tables, it does actually target everything
because the testcase-results class doesn't have anchors in the cells.

All the anchor tags are now stretched to us the full space inside the
TD.

Based partly on logic in:
https://stackoverflow.com/questions/18488148/how-to-get-div-height-100-inside-td-of-100#comment120502212_18488334

This has as disadvantage that we need the extra classes to keep the rounded buttons (a + border) aligned but as we only have this once it should be accepted.
---
 webapp/public/style_jury.css                  | 38 ++++++++++++++++++-
 .../templates/jury/check_judgings.html.twig   |  2 +-
 webapp/templates/jury/jury_macros.twig        |  3 +-
 .../partials/clarification_list.html.twig     |  2 +-
 .../jury/partials/submission_list.html.twig   | 10 ++---
 5 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/webapp/public/style_jury.css b/webapp/public/style_jury.css
index fe8e845e58..67974df544 100644
--- a/webapp/public/style_jury.css
+++ b/webapp/public/style_jury.css
@@ -198,7 +198,43 @@ table.submissions-table {
     color: white;
 }
 
+.table-full-clickable-cell {
+    border-collapse: separate; /* Because we need to set display:table for <a> we need to override this */
+    border-spacing: 0px 0px;
+}
+
+.table-full-clickable-cell tbody td:not(.testcase-results) {
+    padding: 0;
+}
+
+.table-full-clickable-cell tbody tr td:not(.testcase-results) a:not(.btn-sm), .table-full-clickable-cell tbody tr td:not(.testcase-results) a:hover:not(.btn-sm) {
+    display: table;
+}
+
+.table-full-clickable-cell tbody td:not(.testcase-results) a {
+    width: 100%;
+    height: 100%;
+    padding: 1px .25rem;
+    display: block; /* This is needed to make cells with .showlink fully clickable */
+}
+
+.table-full-clickable-cell tbody td:not(.testcase-results) a.btn-sm {
+    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
+}
+
+/* Below is to re-align the `claim` button on the submission list overview */
+table.table-full-clickable-cell thead.thead-light tr th.table-button-head-right {
+    padding-left: 0;
+}
+
+table.table-full-clickable-cell thead.thead-light tr th.table-button-head-left {
+    padding-right: 0.5rem;
+}
+
+table.table-full-clickable-cell tr .table-button-head-right-right{
+    padding-left: 0.5rem;
+}
+
 .execid {
     font-family: monospace;
 }
-
diff --git a/webapp/templates/jury/check_judgings.html.twig b/webapp/templates/jury/check_judgings.html.twig
index 7f9f9e4a82..be2acb68e1 100644
--- a/webapp/templates/jury/check_judgings.html.twig
+++ b/webapp/templates/jury/check_judgings.html.twig
@@ -31,7 +31,7 @@
     {% macro verifyResults(id, header, results, collapse) %}
         {% if results is not empty %}
             <h2><a class="collapse-link" href="javascript:collapse('#detail{{ id }}')">{{ header }}</a></h2>
-            <table id="detail{{ id }}" class="{% if collapse | default(false) %}d-none{% endif %} data-table table table-hover table-striped table-sm submissions-table">
+            <table id="detail{{ id }}" class="{% if collapse | default(false) %}d-none{% endif %} data-table table table-hover table-striped table-sm submissions-table table-full-clickable-cell">
                 <tr>
                     <th></th><th>problem</th><th>file(s)</th>
                     <th>actual</th>
diff --git a/webapp/templates/jury/jury_macros.twig b/webapp/templates/jury/jury_macros.twig
index b1460ac498..9148308845 100644
--- a/webapp/templates/jury/jury_macros.twig
+++ b/webapp/templates/jury/jury_macros.twig
@@ -60,7 +60,6 @@
     <script src="{{ asset('js/dataTables.bootstrap5.min.js') }}"></script>
     <style>
         .data-table td a:not(.showlink), .data-table td a:hover:not(.showlink) {
-            display: block;
             text-decoration: none;
             color: inherit;
         }
@@ -88,7 +87,7 @@
 {% macro table(data, fields, options) %}
 
     <div class="table-wrapper">
-        <table class="data-table table table-sm table-striped" style="width:auto">
+        <table class="data-table table table-sm table-striped table-full-clickable-cell" style="width:auto">
             <thead class="">
             <tr>
                 {%- set num_actions = data | numTableActions %}
diff --git a/webapp/templates/jury/partials/clarification_list.html.twig b/webapp/templates/jury/partials/clarification_list.html.twig
index 6471f55206..6c0688e4f7 100644
--- a/webapp/templates/jury/partials/clarification_list.html.twig
+++ b/webapp/templates/jury/partials/clarification_list.html.twig
@@ -1,5 +1,5 @@
 <div class="table-wrapper">
-<table class="data-table table table-striped table-hover table-sm" style="width:auto">
+<table class="data-table table table-striped table-hover table-sm table-full-clickable-cell" style="width:auto">
     <thead>
     <tr>
         <th scope="col">ID</th>
diff --git a/webapp/templates/jury/partials/submission_list.html.twig b/webapp/templates/jury/partials/submission_list.html.twig
index f2019fa828..e565aba612 100644
--- a/webapp/templates/jury/partials/submission_list.html.twig
+++ b/webapp/templates/jury/partials/submission_list.html.twig
@@ -43,7 +43,7 @@
         {% endif %}
     </div>
 
-    <table class="data-table table table-hover table{% if showExternalResult and showExternalTestcases %}-3{% endif %}-striped table-sm submissions-table">
+    <table class="data-table table table-hover table{% if showExternalResult and showExternalTestcases %}-3{% endif %}-striped table-sm submissions-table table-full-clickable-cell">
         <thead class="thead-light">
         <tr>
             {% if showExternalResult and showExternalTestcases %}
@@ -69,8 +69,8 @@
                 <th scope="col">external result</th>
             {% endif %}
             {% if not showExternalResult or not showExternalTestcases %}
-                <th scope="col">verified</th>
-                <th scope="col">by</th>
+                <th scope="col" class="table-button-head-left">verified</th>
+                <th scope="col" class="table-button-head-right">by</th>
             {% endif %}
             {%- if rejudging is defined %}
 
@@ -78,7 +78,7 @@
             {%- endif %}
             {%- if showTestcases is defined and showTestcases %}
 
-                <th scope="col" class="not-sortable not-searchable">test results</th>
+                <th scope="col" class="not-sortable not-searchable table-button-head-right-right">test results</th>
             {%- endif %}
 
         </tr>
@@ -219,7 +219,7 @@
                 {%- endif %}
                 {%- if showTestcases is defined and showTestcases %}
 
-                    <td class="testcase-results{{ tdExtraClass }}">
+                    <td class="testcase-results{{ tdExtraClass }} table-button-head-right-right">
                         {{- submission | testcaseResults -}}
                     </td>
                 {%- endif %}