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 += '' + (s+1) + '-' + xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime[s].ControlCode +' | ';
+ splitTimes += `${(s+1)}-${xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime[s].ControlCode} | `;
}
}
@@ -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 += ''+ TimeFormater(controlTime) +' '+ TimeFormater(xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime[t].Time)+' | '
@@ -184,9 +183,15 @@ function loadresults() {
splitTimes += "
"
let pClassName = classesArray[i].replace(/ |\//g, "_");
-
- resultTableA = ''+xmlObj.ClassResult[i].Class.Name+'
'+' | Løper | Klubb | Tid | Diff |
'+resultTable;
- let resultTableB = ''+' | Løper | Klubb | Tid | Diff |
'+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øper | Klubb | Tid | Diff |
'+resultTable;
+ let resultTableB = ''+' | Løper | Klubb | Tid | Diff |
'+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);
+ });
+});