From b3da48ab6d3fd960fb90bbacff74e65ff5bfe84f Mon Sep 17 00:00:00 2001 From: Trygve Date: Fri, 12 Feb 2021 16:14:49 +0100 Subject: [PATCH] Added dropdown for choosing theme. Did some refactoring and bug fixing. --- common/main.css | 114 ++++++++++++++++++++++++++++++++++++------------ index.php | 8 ++++ liveresults.js | 52 +++++++++++++++++----- 3 files changed, 135 insertions(+), 39 deletions(-) diff --git a/common/main.css b/common/main.css index cc9e0c8..dab40c0 100644 --- a/common/main.css +++ b/common/main.css @@ -2,17 +2,14 @@ --accent-color-dark: #045d56; --button-color-dark: #045d56; --text-accent-color-dark: #1eb980; - --table-border-dark: #00000000; + --table-border-dark: #1b1b1b; --tr-color-dark: #1b1b1b; --tr-nth-color-dark: #121212; --table-highlight-dark: #616161; --dark-background-color: #121212; --dark-text-color: #eeeeee; } -body.theme-dark { - --background-color: var(--dark-background-color); - --text-color: var(dark-text-color); -} + body{ --accent-color:#303f9f; @@ -29,9 +26,18 @@ body{ background-color: var(--background-color); color: var(--text-color); font-size: 1.1rem; - min-height: 100vw; } - +body.theme-dark { + --background-color: var(--dark-background-color); + --text-color: var(--dark-text-color); + --tr-nth-color: var(--tr-nth-color-dark); + --table-border: var(--table-border-dark); + --table-highlight: var(--table-highlight-dark); + --accent-color: var(--accent-color-dark); + --text-accent-color: var(--text-accent-color-dark); + --tr-color: var(--tr-color-dark); + --button-color: var(--button-color-dark); +} header { display: flex; justify-content: space-between; @@ -64,6 +70,9 @@ table { font-weight: 410; margin: 0.8rem; border-radius: 0.4rem; + outline-style: solid; + outline-width: thin; + outline-color: var(--table-border); } td, th { @@ -78,7 +87,7 @@ tr { tr:nth-child(even){background-color: var(--tr-nth-color);} tr:hover { - background-color: var(--table-highlight); + background-color: var(--table-highlight) !important; } tr:visited { background-color:var(--table-highlight); @@ -96,6 +105,7 @@ th { background-color: #4CAF50; color: white; } + h4 { font-size: 20px; margin-bottom: auto; @@ -116,12 +126,15 @@ h4 { .all-result{ + margin-left: auto; + margin-right: auto; display: flex; flex-flow: column wrap; - align-content: space-between; + align-content: center; + gap: 1rem; /* Your container needs a fixed height, and it * needs to be taller than your tallest column. */ - height: 700rem; + height: 400rem; } .all-result::before, .all-result::after { @@ -131,7 +144,6 @@ h4 { order: 2; } .all-result-div{ - width: 32%; margin-bottom: 2%; /* Optional */ } .all-result-div:nth-child(3n+1) { order: 1; } @@ -162,10 +174,48 @@ h4 { body{ font-size: 1rem; } +} +@media only screen and (max-width:1920px){ + .all-result{ + display: flex; + flex-flow: column wrap; + /* Your container needs a fixed height, and it + * needs to be taller than your tallest column. */ + height: 700rem; + } + .all-result::before, + .all-result::after { + content: ""; + flex-basis: 100%; + width: 0; + order: 2; + } + .all-result-div{ + margin-bottom: 2%; /* Optional */ + } .all-result-div:nth-child(2n+1) { order: 1; } .all-result-div:nth-child(2n) { order: 2; } } -.hiddendiv { +.theme-select { + margin-left: 2rem; +} +@media only screen and (max-width:1200px){ + .all-result{ + flex-direction: column; + width: fit-content; + align-content: unset; + height: max-content; + margin: auto; + } + .all-result-div{ + max-width: 100%; + } + .all-result-div:nth-child(n) { order: 1; } + .theme-select { + margin-left: unset; + } +} + .hiddendiv { display:none; } .nav-link { @@ -191,6 +241,11 @@ h4 { color: #fff; background-color: var(--button-color); } +.nav-link:focus{ + transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; + outline: none; + box-shadow: 0 0 2px 2px var(--text-accent-color), 0 .5rem 1rem rgba(0,0,0,.15) !important; +} .result-div{ width: max-content; margin: auto; @@ -231,7 +286,7 @@ h4 { border: thin solid #3c4043; font-weight: 700; border-radius: 0.25rem; - transition: all 0.2s ease 0s;; + transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; margin: 0.4rem; padding-top: 0.2rem; padding-bottom: 0.2rem; @@ -245,19 +300,21 @@ h4 { background-color: var(--button-color); border: thin solid var(--button-color); font-weight: 700; - box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; + box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); transition: all 0.4s ease 0s; } } .fancy-button:active{ background-color: var(--accent-color); - box-shadow:0px 10px 13px -6px rgba(0, 0, 0, 0.2),0px 20px 31px 3px rgba(0, 0, 0, 0.14),0px 8px 38px 7px rgba(0,0,0,.12); - transform: translateY(3px); color: var(--dark-text-color); + transition: 0.1s ease-out; + } .fancy-button:focus{ + transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; outline: none; + box-shadow: 0 0 2px 2px var(--button-color), 0 .5rem 1rem rgba(0,0,0,.15); } @@ -267,7 +324,10 @@ h4 { flex-wrap: wrap; padding-left: 0.2rem; padding-right: 0.2rem; - max-height: 5rem; + max-height: 7rem; + } + header select{ + margin-left: auto; } .header-column{ display: flex; @@ -287,6 +347,8 @@ h4 { .ResultTable{ width: 100%; margin: 0px; + margin-bottom: 0.1rem; + margin-top: 0.1rem; border-radius: .4rem; } .result-div{ @@ -298,18 +360,6 @@ h4 { margin: 0px; width: 100%; } - .all-result{ - flex-direction: column; - width: 100vw; - align-content: unset; - } - .all-result-div{ - width: 100vh; - max-width: 100%; - padding: 0px; - margin-left: 0; - margin-right: 0; - } .club-collum{ display: none; } @@ -323,6 +373,12 @@ h4 { width: 100%; min-width: 0; } + .all-result{ + width: 100%; + } + .all-result-div { + width: 100%; + } } @media (prefers-color-scheme: dark) { body.theme-auto { diff --git a/index.php b/index.php index b82a69b..96ca1da 100755 --- a/index.php +++ b/index.php @@ -23,6 +23,14 @@
status
status
+
+ Farger: + +
diff --git a/liveresults.js b/liveresults.js index 4502ed8..d216eac 100644 --- a/liveresults.js +++ b/liveresults.js @@ -24,7 +24,6 @@ function TimeFormater(stamp) { else{ hourString = ''; } - return hourString +("0" + minutes).slice(-2) + ":" + ("0" + seconds).slice(-2); } @@ -89,7 +88,7 @@ function loadresults() { //create tables for (let i = 0; i < xmlObj.ClassResult.length; i++) { let resultTable = ""; - let splitTimes = '' + ''; + let splitTimes = `
`; let winnerTime; let controlArray = []; @@ -97,7 +96,7 @@ function loadresults() { splitTimes += '' controlArray = Array.from(xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime); for (let s = 0; s < xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime.length; s++){ - splitTimes += ''; + splitTimes += ``; } } @@ -167,7 +166,7 @@ function loadresults() { let controlTimeDelta = 0; for (let t = 0; t < controlArray.length; t++) { - if (typeof(xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime[t].Time)!=='undefined'){ + if (typeof(xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime && typeof(xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime[t].Time)!=='undefined')!== 'undefined'){ controlTime = parseInt(xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime[t].Time, 10)-controlTimeDelta controlTimeDelta += controlTime; splitTimes += '' @@ -184,9 +183,15 @@ function loadresults() { splitTimes += "
' + (s+1) + '-' + xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime[s].ControlCode +'${(s+1)}-${xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime[s].ControlCode}'+ TimeFormater(controlTime) +'
'+ TimeFormater(xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime[t].Time)+'
" let pClassName = classesArray[i].replace(/ |\//g, "_"); - - resultTableA = '

'+xmlObj.ClassResult[i].Class.Name+'

'+''+resultTable; - let resultTableB = '

'+xmlObj.ClassResult[i].Class.Name+'

LøperKlubbTidDiff
'+''+resultTable; + let classTitle; + if(typeof(xmlObj.ClassResult[i].Course)!=="undefined"){ + classTitle = '

'+xmlObj.ClassResult[i].Class.Name+' ('+xmlObj.ClassResult[i].Course.Length+'m)

' + } + else{ + classTitle = '

'+xmlObj.ClassResult[i].Class.Name+'

' + } + resultTableA = '
'+'

'+xmlObj.ClassResult[i].Class.Name+'

'+'
LøperKlubbTidDiff
'+''+resultTable; + let resultTableB = '
'+classTitle+'
LøperKlubbTidDiff
'+''+resultTable; splitTimes = '
'+splitTimes; document.getElementById(pClassName).innerHTML = resultTableB+splitTimes; @@ -273,12 +278,39 @@ function showHideSplits(className) { let x = document.getElementById(className+'-table'); let y = document.getElementById(className+'-splits'); if (x.style.display === "none") { - x.style.display = "block"; + x.style.display = "table"; y.style.display = "none"; } else { x.style.display = "none"; - y.style.display = "block"; + y.style.display = "table"; } } -var interval = setInterval(checkConnection, 10000); \ No newline at end of file +var interval = setInterval(checkConnection, 10000); + +//theme +function applyTheme(theme) { + document.body.classList.remove("theme-auto", "theme-light", "theme-dark"); + document.body.classList.add(`theme-${theme}`); +} + +document.addEventListener("DOMContentLoaded", () => { + document.querySelector("#theme").addEventListener("change", function() { + applyTheme(this.value); + }); +}); + +document.addEventListener("DOMContentLoaded", () => { + const savedTheme = localStorage.getItem("theme") || "auto"; + + applyTheme(savedTheme); + + for (const optionElement of document.querySelectorAll("#theme option")) { + optionElement.selected = savedTheme === optionElement.value; + } + + document.querySelector("#theme").addEventListener("change", function () { + localStorage.setItem("theme", this.value); + applyTheme(this.value); + }); +});
LøperKlubbTidDiff