Skip to content

Commit

Permalink
Make table cells fully clickable
Browse files Browse the repository at this point in the history
See #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.
  • Loading branch information
vmcj committed Oct 18, 2023
1 parent 74535eb commit b9eec15
Show file tree
Hide file tree
Showing 5 changed files with 45 additions and 10 deletions.
38 changes: 37 additions & 1 deletion webapp/public/style_jury.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

2 changes: 1 addition & 1 deletion webapp/templates/jury/check_judgings.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 1 addition & 2 deletions webapp/templates/jury/jury_macros.twig
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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 %}
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
10 changes: 5 additions & 5 deletions webapp/templates/jury/partials/submission_list.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand All @@ -69,16 +69,16 @@
<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 %}

<th scope="col">old result</th>
{%- 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>
Expand Down Expand Up @@ -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 %}
Expand Down

0 comments on commit b9eec15

Please sign in to comment.