Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make certain parts of the scoreboard sticky, relevant when having many problems/very wide scoreboard #2216

Open
wants to merge 20 commits into
base: main
Choose a base branch
from
Open

Make certain parts of the scoreboard sticky, relevant when having many problems/very wide scoreboard #2216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
b12ef66
Use more than 1 width of problems
vmcj Nov 11, 2023
24c5110
Disable refreshing
vmcj Nov 12, 2023
b717f4c
Set certain pages to have more width than the horizontal viewport
vmcj Nov 12, 2023
39a0d78
Pin warning on scoreboards with many problems
vmcj Nov 12, 2023
b8f1174
Fixate banner on contests with many problems
vmcj Nov 12, 2023
8d962a9
Fixate the frozen warning + contest info section for scoreboard
vmcj Nov 12, 2023
aea2c6d
Fixate filter button
vmcj Nov 12, 2023
d280366
Fixate the legend
vmcj Nov 12, 2023
1c5a7cd
Fixate the last updated info for the scoreboard
vmcj Nov 12, 2023
cb0e918
Revert "Use more than 1 width of problems"
vmcj Nov 12, 2023
2340f1e
Revert "Disable refreshing"
vmcj Nov 12, 2023
d53d218
Update webstandard.sh
vmcj Nov 12, 2023
5bccf82
Find the file to set the CSS constant for
vmcj Nov 13, 2023
d2a67ae
Update webstandard.sh
vmcj Nov 13, 2023
2705f81
We need this as bootstrap uses it
vmcj Nov 13, 2023
466e59c
Loads of problems
vmcj Nov 13, 2023
b79f5cb
Testing
vmcj Nov 13, 2023
515789d
Almost working
vmcj Nov 14, 2023
5ba693e
Revert "Almost working"
vmcj Nov 14, 2023
56185ca
This works when we're not in static mode
vmcj Nov 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
148 changes: 142 additions & 6 deletions example_problems/problems.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,151 @@
- id: hello
label: A
- id: hello0-
label: A0-
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

need to revert this file

ordinal: 1
rgb: '#9486EA'
time_limit: 5
- id: fltcmp
label: B
- id: fltcmp0-
label: B0-
ordinal: 2
rgb: '#E93603'
time_limit: 5
- id: boolfind
label: C
- id: boolfind0-
label: C0-
ordinal: 3
rgb: '#9B630C'
time_limit: 5
- id: hello1-
label: A1-
ordinal: 1
rgb: '#9486EA'
time_limit: 5
- id: fltcmp1-
label: B1-
ordinal: 2
rgb: '#E93603'
time_limit: 5
- id: boolfind1-
label: C1-
ordinal: 3
rgb: '#9B630C'
time_limit: 5
- id: hello2-
label: A2-
ordinal: 1
rgb: '#9486EA'
time_limit: 5
- id: fltcmp2-
label: B2-
ordinal: 2
rgb: '#E93603'
time_limit: 5
- id: boolfind2-
label: C2-
ordinal: 3
rgb: '#9B630C'
time_limit: 5
- id: hello3-
label: A3-
ordinal: 1
rgb: '#9486EA'
time_limit: 5
- id: fltcmp3-
label: B3-
ordinal: 2
rgb: '#E93603'
time_limit: 5
- id: boolfind3-
label: C3-
ordinal: 3
rgb: '#9B630C'
time_limit: 5
- id: hello4-
label: A4-
ordinal: 1
rgb: '#9486EA'
time_limit: 5
- id: fltcmp4-
label: B4-
ordinal: 2
rgb: '#E93603'
time_limit: 5
- id: boolfind4-
label: C4-
ordinal: 3
rgb: '#9B630C'
time_limit: 5
- id: hello5-
label: A5-
ordinal: 1
rgb: '#9486EA'
time_limit: 5
- id: fltcmp5-
label: B5-
ordinal: 2
rgb: '#E93603'
time_limit: 5
- id: boolfind5-
label: C5-
ordinal: 3
rgb: '#9B630C'
time_limit: 5
- id: hello6-
label: A6-
ordinal: 1
rgb: '#9486EA'
time_limit: 5
- id: fltcmp6-
label: B6-
ordinal: 2
rgb: '#E93603'
time_limit: 5
- id: boolfind6-
label: C6-
ordinal: 3
rgb: '#9B630C'
time_limit: 5
- id: hello7-
label: A7-
ordinal: 1
rgb: '#9486EA'
time_limit: 5
- id: fltcmp7-
label: B7-
ordinal: 2
rgb: '#E93603'
time_limit: 5
- id: boolfind7-
label: C7-
ordinal: 3
rgb: '#9B630C'
time_limit: 5
- id: hello8-
label: A8-
ordinal: 1
rgb: '#9486EA'
time_limit: 5
- id: fltcmp8-
label: B8-
ordinal: 2
rgb: '#E93603'
time_limit: 5
- id: boolfind8-
label: C8-
ordinal: 3
rgb: '#9B630C'
time_limit: 5
- id: hello9-
label: A9-
ordinal: 1
rgb: '#9486EA'
time_limit: 5
- id: fltcmp9-
label: B9-
ordinal: 2
rgb: '#E93603'
time_limit: 5
- id: boolfind9-
label: C9-
ordinal: 3
rgb: '#9B630C'
time_limit: 5

4 changes: 4 additions & 0 deletions gitlab/webstandard.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,10 @@ if [ "$TEST" = "w3cval" ]; then
rm -f localhost/domjudge/css/select2-bootstrap*.css*
rm -f localhost/domjudge/css/dataTables*.css*
rm -f localhost/domjudge/jury/config/check/phpinfo*
# We need any value for bs-gutter-x to calculate with in CSS
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand what is happening here. Do you remove this from the CSS file to avoid it being flagged as non-standard? Is there a risk that this doesn't work in "all" browsers then?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given that there are at this point only 2 browsers and it works there I think we're fine, also bootstrap already uses CSS variables so we would have problems somewhere else also.

The main problem is that W3C has the CSS standard where this is a very strong candidate (not sure how this works for them to make this final) but the validator doesn't detect this properly. There are a lot of threads about this that this is more an issue with the W3C validator than with support for this feature.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you test this also in the mobile view?

for f in $(find ./ -name "style_domjudge.css*"); do
sed -i 's/var(--bs-gutter-x)/1em/g' $f
done
section_end upstream_problems

section_start_collap test_suite "Install testsuite"
Expand Down
27 changes: 27 additions & 0 deletions webapp/public/style_domjudge.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -635,3 +635,30 @@ blockquote {
margin-right: 2em;
font-weight: normal;
}

.row-scoreboard {
width: fit-content;
}

.alert-danger {
position: sticky;
width: calc(100vw - var(--bs-gutter-x) * 1.75);
left: calc(var(--bs-gutter-x) * .5);
}

.banner-fixed {
position: sticky;
width: calc(100vw - var(--bs-gutter-x) * 1.75);
left: calc(var(--bs-gutter-x) * .5);
}

.card-contest-frozen-info {
position: sticky;
width: calc(100vw - var(--bs-gutter-x) * 1.75);
left: calc(var(--bs-gutter-x) * .5);
}

.progress-bar {
position: sticky;
left: 0;
}
1 change: 1 addition & 0 deletions webapp/src/Controller/Jury/ScoreboardController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ public function scoreboardAction(Request $request): Response
$data = $this->scoreboardService->getScoreboardTwigData(
$request, $response, $refreshUrl, $this->isGranted('ROLE_JURY'), false, false, $contest
);
$data['scroll_width'] = true;

if ($request->isXmlHttpRequest()) {
$data['current_contest'] = $contest;
Expand Down
1 change: 1 addition & 0 deletions webapp/src/Controller/PublicController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ public function scoreboardAction(
}

$data['current_contest'] = $contest;
$data['scroll_width'] = true;

if ($request->isXmlHttpRequest()) {
return $this->render('partials/scoreboard.html.twig', $data, $response);
Expand Down
1 change: 1 addition & 0 deletions webapp/src/Controller/Team/ScoreboardController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ public function scoreboardAction(Request $request): Response
$request, $response, $refreshUrl, false, false, false, $contest
);
$data['myTeamId'] = $user->getTeam()->getTeamid();
$data['scroll_width'] = true;

if ($request->isXmlHttpRequest()) {
$data['current_contest'] = $contest;
Expand Down
2 changes: 1 addition & 1 deletion webapp/templates/base.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
{% block menu %}{% endblock %}
{% block body %}
<div class="container-fluid">
<div class="row">
<div class="row {% if scroll_width is defined and scroll_width %}row-scoreboard{% endif %}">
<div class="col-12">
{% block messages %}
{% include 'partials/messages.html.twig' %}
Expand Down
8 changes: 5 additions & 3 deletions webapp/templates/partials/scoreboard.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
</div>
{% endif %}

<div class="card" {% if refreshstop is defined %}data-ajax-refresh-stop="1"{% endif %}>
<div class="card card-contest-frozen-info" {% if refreshstop is defined %}data-ajax-refresh-stop="1"{% endif %}>
<div class="card-header" style="font-family: Roboto, sans-serif; display: flex;">
<span style="font-weight: bold;">{{ current_contest.name }}</span>
<span id="contesttimer" style="color: DimGray; margin-left: auto;">
Expand Down Expand Up @@ -94,7 +94,7 @@
{% endif %}

{% if scoreboard.freezeData.showFrozen(false) %}
<div class="alert alert-warning" role="alert" style="font-size: 80%;">
<div class="alert alert-warning card-contest-frozen-info" role="alert" style="font-size: 80%;">
{% if jury %}
<a href="{{ path('public_index') }}">The public scoreboard</a>
was frozen with {{ current_contest.minutesRemaining }} minutes remaining
Expand All @@ -109,7 +109,7 @@
(filterValues.affiliations | length > 1 or
filterValues.countries | length > 1 or
filterValues.categories | length > 1) %}
<div class="dropdown">
<div class="dropdown card-contest-frozen-info">
<button class="btn btn-outline-secondary btn-sm m-2 dropdown-toggle" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" id="filter-toggle">
<i class="fas fa-filter"></i>
Expand Down Expand Up @@ -174,8 +174,10 @@

{% endif %} {# not scoreboard is null and not jury #}

<div class="card-contest-frozen-info">
<p id="lastmod">
Last Update: {{ null | printtime('D d M Y H:i:s T') }}<br/>
using <a href="https://www.domjudge.org/" target="_top">DOMjudge</a>
</p>
</div>
{% endif %}
8 changes: 5 additions & 3 deletions webapp/templates/partials/scoreboard_progress_bar.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
{% if contest and contest.freezeData.started and not contest.freezeData.stopped %}
{% set percentage = contest.freezeData.progress %}
<div class="progress" style="margin-top:{{ margin|default(0) }}px; height: 10px;" data-progress-bar>
<div class="progress-bar" role="progressbar" style="width: {{ percentage }}%;"
aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
<div style="position: fixed; width: 100vw; z-index: 1050; height: 20px; margin-top: -19px; background-color: white;">
<div class="progress" style="margin-top:9px; height: 10px;" data-progress-bar>
<div class="progress-bar" role="progressbar" style="width: {{ percentage }}%;"
aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
{% endif %}
6 changes: 4 additions & 2 deletions webapp/templates/partials/scoreboard_table.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,7 @@

{# only print legend when there's more than one category #}
{% if limitToTeamIds is null and usedCategories | length > 1 and hasDifferentCategoryColors %}
<table id="categ_legend" class="scoreboard scorelegend {% if jury %}scoreboard_jury{% endif %}">
<table id="categ_legend" class="scoreboard scorelegend card-contest-frozen-info {% if jury %}scoreboard_jury{% endif %}">
<thead>
<tr>
<th scope="col">
Expand Down Expand Up @@ -350,6 +350,7 @@
{% else %}
{% set cellColors = {first: 'Solved first', correct: 'Solved', incorrect: 'Tried, incorrect', pending: 'Tried, pending', neutral: 'Untried'} %}
{% endif %}
<div class="card-contest-frozen-info">
<table id="cell_legend" class="scoreboard scorelegend {% if jury %}scoreboard_jury{% endif %}">
<thead>
<tr>
Expand All @@ -366,10 +367,11 @@
{% endfor %}
</tbody>
</table>
</div>
{% endif %}

{% if medalsEnabled %}
<table class="scoreboard scorelegend {% if jury %}scoreboard_jury{% endif %}">
<table class="scoreboard scorelegend card-contest-frozen-info {% if jury %}scoreboard_jury{% endif %}">
<thead>
<tr>
<th scope="col">Medals {% if not scoreboard.freezeData.showFinal %}(tentative){% endif %}</th>
Expand Down
4 changes: 3 additions & 1 deletion webapp/templates/public/scoreboard.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@
{% set bannerImage = globalBannerAssetPath() %}
{% endif %}
{% if bannerImage %}
<img class="banner" src="{{ asset(bannerImage) }}" alt="Banner">
<div class="banner-fixed">
<img class="banner" src="{{ asset(bannerImage) }}" alt="Banner">
</div>
{% endif %}

<div data-ajax-refresh-target data-ajax-refresh-after="initializeScoreboard" class="mt-3">
Expand Down
Loading