puzzle-scoreboard/app/views/contests/scoreboard.html.slim
sto 1b34d10dee
All checks were successful
CI / scan_ruby (push) Successful in 19s
CI / scan_js (push) Successful in 13s
CI / lint (push) Successful in 13s
CI / test (push) Successful in 43s
Improve public scoreboard UI + make it responsive
2025-06-26 10:53:21 +02:00

122 lines
4.4 KiB
Plaintext

javascript:
function refresh() {
const el = document.querySelector('input[type="checkbox"]');
if (el.checked) location.replace("/public/#{@contest.friendly_id}?refresh=1")
setTimeout(refresh, 5000);
}
/ const params = new URL(document.location.toString()).searchParams;
/ if (params.get("refresh") == "1") {
/ const el = document.querySelector('input[type="checkbox"]');
/ el.checked = true;
/ }
/ setTimeout(refresh, 5000);
css:
@media (max-width: 800px) {
a.btn { display: none; }
.col-5 { display: none; }
.col-6 { width: 100% !important; display: block !important; }
.small-screen-image { display: block !important; }
.container { margin-top: 2rem !important; }
}
- if @contest.puzzles.size <= 1
.row.small-screen-image style="display: none"
- @contest.puzzles.each do |puzzle|
.d-flex.flex-column.justify-content-center.mb-5
= image_tag(puzzle.image, style: "max-height: 200px; object-fit: contain") if puzzle.image.attached?
.mt-2.fs-6 style="text-align: center"
=> "#{puzzle.name} -"
= puzzle.brand
.row
.col-6.d-flex.flex-column style="height: calc(100vh - 180px)"
/ = form_with model: Contest do |form|
/ .row.mb-3
/ .col
/ .form-check.form-switch
/ = form.check_box :refresh, class: "form-check-input"
/ = form.label t("contests.scoreboard.refresh")
.d-flex.flex-column style="overflow-y: auto"
table.table.table-striped.table-hover
thead
tr
th
= t("helpers.rank")
th
= t("activerecord.attributes.contestant.name")
- if @contest.puzzles.size > 1
th
= t("activerecord.attributes.contestant.completions")
th style="width: 170px"
= t("activerecord.attributes.contestant.display_time")
tbody
- @contestants.each_with_index do |contestant, index|
tr scope="row"
td
= index + 1
td
= contestant.name
- if @contest.puzzles.size > 1
td
= contestant.completions.length
td style="position: relative"
- if index > 0 && contestant.time_seconds > 0
.relative-time style="position:absolute; margin: 1px 0 0 64px; font-size: 14px; color: grey"
|> +
= display_time(contestant.time_seconds - @contestants[index - 1].time_seconds)
= contestant.display_time
.col-1
.col-5
- @contest.puzzles.each do |puzzle|
= image_tag(puzzle.image, class: "img-fluid ms-3 me-3") if puzzle.image.attached?
.mt-3.fs-4 style="margin-left: 15px"
= puzzle.name
.fs-6 style="margin-left: 15px"
b
= puzzle.brand
- else
.d-flex.flex-column style="height: calc(100vh - 180px)"
.d-flex.flex-row.justify-content-center.mb-5
- @contest.puzzles.each do |puzzle|
= image_tag(puzzle.image, class: "img-fluid ms-3 me-3", style: "max-height: 220px") if puzzle.image.attached?
.mb-3 style="display: inline-flex"
a.btn.btn-primary href="/public/#{@contest.friendly_id}"
= t("helpers.buttons.refresh")
/ = form_with model: Contest do |form|
/ .row.mb-3
/ .col
/ .form-check.form-switch
/ = form.check_box :refresh, class: "form-check-input"
/ = form.label t("contests.scoreboard.refresh")
.d-flex.flex-column style="overflow-y: auto"
table.table.table-striped.table-hover
thead
tr
th scope="col"
= t("helpers.rank")
th scope="col"
= t("activerecord.attributes.contestant.name")
- if @contest.puzzles.size > 1
th scope="col"
= t("activerecord.attributes.contestant.completions")
th scope="col"
= t("activerecord.attributes.contestant.display_time")
tbody
- @contestants.each_with_index do |contestant, index|
tr scope="row"
td
= index + 1
td
= contestant.name
- if @contest.puzzles.size > 1
td
= contestant.completions.length
td
= contestant.display_time