From f7945fcf3b6cbaf8c3a733d0445c41b4be2b8af9 Mon Sep 17 00:00:00 2001 From: Ken Knudsen Date: Fri, 13 Aug 2021 00:22:15 +0000 Subject: [PATCH 1/5] Added responsive design elements and separated the scores from the team names to reduce overlap. Use side-by-side view on large screens. --- theme/basic.css | 95 +++++++++++++++++++++++++++++++++++++++++++++ theme/scoreboard.js | 8 +++- 2 files changed, 102 insertions(+), 1 deletion(-) diff --git a/theme/basic.css b/theme/basic.css index 14a5a1e..9a802a3 100644 --- a/theme/basic.css +++ b/theme/basic.css @@ -78,7 +78,34 @@ input:invalid { opacity: 0.8; position: absolute; right: 0.2em; + background-color: #292929; + background-blend-mode: darken; + padding: 0em 0.2em; + border-top-left-radius: 0.5em; + border-bottom-left-radius: 0.5em; + margin:0em; + height: 1.5em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + transition-property: max-width; + transition-duration: 2s; + transition-delay: 0s; } + +#rankings span.teamname:hover { + max-width: 100%; +} + +#rankings span.teampoints { + font-size:100%; + height:1.2em; + margin:0em; + padding:0em; + width:99%; +} + + #rankings div * {white-space: nowrap;} .cat0, .cat8, .cat16 {background-color: #a6cee3; color: black;} .cat1, .cat9, .cat17 {background-color: #1f78b4; color: white;} @@ -90,6 +117,74 @@ input:invalid { .cat7, .cat15, .cat23 {background-color: #ff7f00; color: black;} +/* Responsive design */ +/* Defaults */ + #rankings span.teampoints { + max-width:89%; + } + #rankings span.teamname { + max-width:10%; + } + + +/* Monitors with large enough screens to do side by side */ +@media only screen and (min-width: 170em) { + #chart, #rankings { + width: 49%; + display:inline-block; + vertical-align:middle; + } + +} + +/* Monitor +@media only screen and (max-width: 130em) { + #chart, #rankings { + width: 49%; + display:inline-block; + vertical-align: middle; + } + + #rankings span.teampoints { + max-width:89%; + } + #rankings span.teamname { + max-width:10%; + } +} + +/* Laptop size screen */ +@media only screen and (max-width: 100em) { + #rankings span.teampoints { + max-width:84%; + } + #rankings span.teamname { + max-width:15%; + } +} + +/* Roughly Tablet size */ +@media only screen and (max-width: 70em) { + #rankings span.teampoints { + max-width:79%; + } + #rankings span.teamname { + max-width:20%; + } +} + +/* Small screens phone size */ +@media only screen and (max-width: 40em) { + #rankings span.teampoints { + max-width:65%; + } + #rankings span.teamname { + max-width:34%; + } +} + + + #devel { background-color: #eee; color: black; diff --git a/theme/scoreboard.js b/theme/scoreboard.js index 104efcb..040cf7a 100644 --- a/theme/scoreboard.js +++ b/theme/scoreboard.js @@ -125,6 +125,10 @@ function scoreboardInit() { for (let team of winners) { let row = document.createElement("div") let ncat = 0 + + let teamPoints=document.createElement("span") + teamPoints.classList.add("teampoints") + for (let category in highestCategoryScore) { let catHigh = highestCategoryScore[category] let catTeam = team.categoryScore[category] || 0 @@ -138,9 +142,11 @@ function scoreboardInit() { bar.textContent = category + ": " + catTeam bar.title = bar.textContent - row.appendChild(bar) + teamPoints.appendChild(bar) ncat += 1 } + + row.appendChild(teamPoints) let te = document.createElement("span") te.classList.add("teamname") From b293a9f0e9383353eeea7f32d44fca52da95f7be Mon Sep 17 00:00:00 2001 From: Neale Pickett Date: Wed, 27 Sep 2023 17:15:51 -0600 Subject: [PATCH 2/5] Add merged scoreboard.css --- theme/scoreboard.css | 110 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 110 insertions(+) diff --git a/theme/scoreboard.css b/theme/scoreboard.css index a3f55d1..fccb15d 100644 --- a/theme/scoreboard.css +++ b/theme/scoreboard.css @@ -5,6 +5,116 @@ } } +#rankings span { + font-size: 75%; + display: inline-block; + overflow: hidden; + height: 1.7em; +} +#rankings span.teamname { + font-size: inherit; + color: white; + text-shadow: 0 0 3px black; + opacity: 0.8; + position: absolute; + right: 0.2em; + background-color: #292929; + background-blend-mode: darken; + padding: 0em 0.2em; + border-top-left-radius: 0.5em; + border-bottom-left-radius: 0.5em; + margin:0em; + height: 1.5em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + transition-property: max-width; + transition-duration: 2s; + transition-delay: 0s; +} + +#rankings span.teamname:hover { + max-width: 100%; +} + +#rankings span.teampoints { + font-size:100%; + height:1.2em; + margin:0em; + padding:0em; + width:99%; +} + +/* Responsive design */ +/* Defaults */ + #rankings span.teampoints { + max-width:89%; + } + #rankings span.teamname { + max-width:10%; + } + + +/* Monitors with large enough screens to do side by side */ +@media only screen and (min-width: 170em) { + #chart, #rankings { + width: 49%; + display:inline-block; + vertical-align:middle; + } + +} + +/* Monitor +@media only screen and (max-width: 130em) { + #chart, #rankings { + width: 49%; + display:inline-block; + vertical-align: middle; + } + + #rankings span.teampoints { + max-width:89%; + } + #rankings span.teamname { + max-width:10%; + } +} + +/* Laptop size screen */ +@media only screen and (max-width: 100em) { + #rankings span.teampoints { + max-width:84%; + } + #rankings span.teamname { + max-width:15%; + } +} + +/* Roughly Tablet size */ +@media only screen and (max-width: 70em) { + #rankings span.teampoints { + max-width:79%; + } + #rankings span.teamname { + max-width:20%; + } +} + +/* Small screens phone size */ +@media only screen and (max-width: 40em) { + #rankings span.teampoints { + max-width:65%; + } + #rankings span.teamname { + max-width:34%; + } +} + + + + + #chart { background-color: rgba(0, 0, 0, 0.8); } From b863955fdce5d6eef983b9cdfefa7521dae53399 Mon Sep 17 00:00:00 2001 From: Neale Pickett Date: Wed, 27 Sep 2023 17:56:40 -0600 Subject: [PATCH 3/5] Fully integrated --- theme/scoreboard.css | 194 ++++++------------------------------------- theme/scoreboard.mjs | 13 +-- 2 files changed, 34 insertions(+), 173 deletions(-) diff --git a/theme/scoreboard.css b/theme/scoreboard.css index fccb15d..2d8a48d 100644 --- a/theme/scoreboard.css +++ b/theme/scoreboard.css @@ -5,158 +5,9 @@ } } -#rankings span { - font-size: 75%; - display: inline-block; - overflow: hidden; - height: 1.7em; -} -#rankings span.teamname { - font-size: inherit; - color: white; - text-shadow: 0 0 3px black; - opacity: 0.8; - position: absolute; - right: 0.2em; - background-color: #292929; - background-blend-mode: darken; - padding: 0em 0.2em; - border-top-left-radius: 0.5em; - border-bottom-left-radius: 0.5em; - margin:0em; - height: 1.5em; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - transition-property: max-width; - transition-duration: 2s; - transition-delay: 0s; -} - -#rankings span.teamname:hover { - max-width: 100%; -} - -#rankings span.teampoints { - font-size:100%; - height:1.2em; - margin:0em; - padding:0em; - width:99%; -} - -/* Responsive design */ -/* Defaults */ - #rankings span.teampoints { - max-width:89%; - } - #rankings span.teamname { - max-width:10%; - } - - -/* Monitors with large enough screens to do side by side */ -@media only screen and (min-width: 170em) { - #chart, #rankings { - width: 49%; - display:inline-block; - vertical-align:middle; - } - -} - -/* Monitor -@media only screen and (max-width: 130em) { - #chart, #rankings { - width: 49%; - display:inline-block; - vertical-align: middle; - } - - #rankings span.teampoints { - max-width:89%; - } - #rankings span.teamname { - max-width:10%; - } -} - -/* Laptop size screen */ -@media only screen and (max-width: 100em) { - #rankings span.teampoints { - max-width:84%; - } - #rankings span.teamname { - max-width:15%; - } -} - -/* Roughly Tablet size */ -@media only screen and (max-width: 70em) { - #rankings span.teampoints { - max-width:79%; - } - #rankings span.teamname { - max-width:20%; - } -} - -/* Small screens phone size */ -@media only screen and (max-width: 40em) { - #rankings span.teampoints { - max-width:65%; - } - #rankings span.teamname { - max-width:34%; - } -} - - -#chart { - background-color: rgba(0, 0, 0, 0.8); -} -.logo { - text-align: center; - background-color: rgba(255, 255, 255, 0.2); - font-family: Montserrat, sans-serif; - font-weight: 500; - border-radius: 10px; - font-size: 1.2em; -} -.cyber { - color: black; -} -.fire { - color: #d94a1f; -} -.announcement.floating { - position: fixed; - bottom: 0; - width: 100hw; - max-width: inherit; -} -.announcement { - background-color: rgba(255,255,255,0.5); - color: black; - padding: 0.25em; - border-radius: 5px; - max-width: 20em; - text-align: center; - display: flex; - align-items: flex-end; - justify-content: space-around; - font-size: 1.3em; - flex-wrap: wrap; -} -.announcement div { - margin: 1em; - max-width: 45vw; - text-align: center; - -} .location { color: #acf; background-color: #0008; @@ -169,18 +20,6 @@ font-weight:bold; text-decoration: underline; } -.qrcode { - width: 30vw; -} -.examples { - display: flex; - flex-wrap: wrap; - justify-content: space-between; -} -.examples > div { - margin: 0.5em; - max-width: 40%; -} /** Scoreboard */ #rankings { @@ -189,20 +28,23 @@ background-color: #000c; } #rankings div { - height: 1.4rem; + height: 1.2rem; + display: flex; + align-items: center; } #rankings div:nth-child(6n){ - background-color: #ccc1; + background-color: #ccc3; } #rankings div:nth-child(6n+3) { - background-color: #0f01; + background-color: #0f03; } #rankings span { - font-size: 75%; - display: inline-block; - overflow: hidden; - height: 1.4em; + display: inline-block; + overflow: hidden; +} +#rankings span.category { + font-size: 80%; } #rankings span.teamname { height: auto; @@ -213,6 +55,22 @@ position: absolute; right: 0.2em; } +#rankings span.teamname:hover, +#rankings span.category:hover { + width: inherit; + max-width: 100%; +} + +@media only screen and (max-width: 450px) { + #rankings span.teamname { + max-width: 6em; + text-overflow: ellipsis; + } + span.teampoints { + max-width: 80%; + } +} + #rankings div * {white-space: nowrap;} .cat0, .cat8, .cat16 {background-color: #a6cee3; color: black;} .cat1, .cat9, .cat17 {background-color: #1f78b4; color: white;} diff --git a/theme/scoreboard.mjs b/theme/scoreboard.mjs index e600292..5eaf0d3 100644 --- a/theme/scoreboard.mjs +++ b/theme/scoreboard.mjs @@ -61,25 +61,28 @@ async function update() { let row = rankingsElement.appendChild(document.createElement("div")) - let heading = row.appendChild(document.createElement("span")) - heading.textContent = teamName - heading.classList.add("teamname") + let teamname = row.appendChild(document.createElement("span")) + teamname.textContent = teamName + teamname.classList.add("teamname") let categoryNumber = 0 + let teampoints = row.appendChild(document.createElement("span")) + teampoints.classList.add("teampoints") for (let category of scores.Categories) { let score = scores.CyFiCategoryScore(category, teamID) if (!score) { continue } - let block = row.appendChild(document.createElement("span")) + let block = teampoints.appendChild(document.createElement("span")) let points = scores.GetPoints(category, teamID) let width = MaxScoreWidth * score / topScore block.textContent = category block.title = `${points} points` block.style.width = `${width}%` - block.classList.add(`cat${categoryNumber}`) + block.classList.add("category", `cat${categoryNumber}`) + categoryNumber += 1 } } From 43aec24d638c6df85f73dcad89770016fc118000 Mon Sep 17 00:00:00 2001 From: Neale Pickett Date: Wed, 27 Sep 2023 17:57:30 -0600 Subject: [PATCH 4/5] more cleanup --- theme/scoreboard.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/theme/scoreboard.css b/theme/scoreboard.css index 2d8a48d..7381764 100644 --- a/theme/scoreboard.css +++ b/theme/scoreboard.css @@ -5,9 +5,6 @@ } } - - - .location { color: #acf; background-color: #0008; From 90716313530cb1636a91b928f9594b6ce5cff156 Mon Sep 17 00:00:00 2001 From: Neale Pickett Date: Wed, 27 Sep 2023 17:58:29 -0600 Subject: [PATCH 5/5] more cleanup --- theme/basic.css | 1 - 1 file changed, 1 deletion(-) diff --git a/theme/basic.css b/theme/basic.css index 43cbf70..667e99d 100644 --- a/theme/basic.css +++ b/theme/basic.css @@ -113,7 +113,6 @@ input:invalid { cursor: help; } - /** Development mode information */ .debug { overflow: auto;