diff --git a/common/main.css b/common/main.css index e545544..1bbac42 100644 --- a/common/main.css +++ b/common/main.css @@ -9,7 +9,7 @@ --dark-background-color: #121212; --dark-text-color: #eeeeee; } - +html{ height: 100% } body{ --accent-color:#303f9f; @@ -27,6 +27,14 @@ body{ color: var(--text-color); font-size: 1.1rem; margin: 0; + height: 100%; + display: grid; + grid-template-areas: + 'header' + 'menu' + 'main' + 'footer'; + grid-template-rows: auto auto 1fr auto; } body.theme-dark { --background-color: var(--dark-background-color); @@ -40,6 +48,7 @@ body.theme-dark { --button-color: var(--button-color-dark); } header { + grid-area: header; display: flex; justify-content: space-between; align-items: center; @@ -64,7 +73,24 @@ header div{ margin-left: auto; align-items: center; } +footer { + grid-area: footer; + border-radius: 0.4rem; + outline-style: solid; + outline-width: thin; + outline-color: var(--table-border); + margin: auto; +} + +footer p{ + margin: 0.5rem; + line-height: 1.5; + +} +.tab-container{ + grid-area: main; +} table { border-collapse: collapse; line-height: 1.1rem; @@ -135,7 +161,7 @@ h4 { gap: 1rem; /* Your container needs a fixed height, and it * needs to be taller than your tallest column. */ - height: 400rem; + height: 200rem; } .all-result::before, .all-result::after { @@ -215,6 +241,10 @@ h4 { .theme-select { margin-left: unset; } + .splits-table{ + margin-left: 0; + margin-right: 0; + } } .hiddendiv { display:none; @@ -238,6 +268,7 @@ h4 { } .splits-table{ display: none; + max-width: 100vw; } .splits-table td:first-child{ position: sticky; @@ -255,7 +286,23 @@ h4 { min-width: 600px; margin: auto; } +a{ + color: var(--text-accent-color); + border-bottom: 1px solid var(--text-accent-color); + border-bottom-style: inset; + text-decoration: none; + padding: 0 1px 0; + margin: 0 -1px 0; +} +a:hover{ + border-bottom-width: 3px; + margin-bottom: -2px; +} +select{ + cursor: pointer; +} .fancy-button { + cursor: pointer; background-color: transparent; color: var(--text-accent-color); text-align: center; @@ -294,6 +341,7 @@ h4 { box-shadow: 0 0 2px 2px var(--button-color), 0 .5rem 1rem rgba(0,0,0,.15); } .tab-list{ + grid-area: menu; list-style: none; display: flex; flex-wrap: wrap; @@ -306,12 +354,13 @@ h4 { margin: 0.2rem; } .tab-button{ + all: revert; display: block; padding: 0.5rem 1rem; border-radius: .25rem; text-decoration: none; font-weight: 600; - transition: 0.3s; + transition: 0.15s; color: var(--text-accent-color); } .tab-button.active{ @@ -325,7 +374,7 @@ h4 { box-shadow: 0 0 2px 2px var(--text-accent-color), 0 .5rem 1rem rgba(0,0,0,.15) !important; } .tab-button:hover { - box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; + box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); } .tab-content{ display: none; @@ -352,6 +401,7 @@ h4 { flex: 1; width: fit-content; justify-items: left; + max-width: 50vw; } .status-div{ margin-left: auto; @@ -360,6 +410,9 @@ h4 { align-self: flex-start; width: 100%; } + footer{ + width: 100%; + } .tab-list{ padding: 0; justify-content: space-around; diff --git a/index.php b/index.php index ec65050..61ebf88 100755 --- a/index.php +++ b/index.php @@ -35,7 +35,7 @@ @@ -50,10 +50,8 @@ -
- - - + + diff --git a/liveresults.js b/liveresults.js index ce91372..7e1aed1 100644 --- a/liveresults.js +++ b/liveresults.js @@ -1,8 +1,10 @@ +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3 + var tabsCreated = false; function createTabs(tabArray, tabNameArray) { for (let i = 0; i < tabArray.length; i++) { - let StrTab = ``; + let StrTab = ``; let StrCont = '
' document.getElementById("classes-tabs").innerHTML += StrTab; document.getElementById("classes-tab-content").innerHTML += StrCont; @@ -232,7 +234,7 @@ if (typeof(EventSource) !== "undefined") { lastMessage = parseInt(statusArray[3], 10); //console.log(statusArray); document.getElementById("lastUpdate").innerHTML = "Siste oppdatering: " + mkDateStr(statusArray[1]); - document.getElementById("lastMessage").innerHTML = "Siste sjekket: " + mkDateStr(statusArray[2]); + document.getElementById("lastMessage").innerHTML = "Sist sjekket: " + mkDateStr(statusArray[2]); updateInt = parseInt(statusArray[0], 10); //console.log(updateInt); //check if update has accured @@ -285,3 +287,8 @@ function showHideSplits(className) { } var interval = setInterval(checkConnection, 10000); + +if (window.location.hash) { + changeTab(window.location.hash.replace(/#tab-/g,'')); +} +// @license-end diff --git a/ui.js b/ui.js index b08c409..a40be57 100644 --- a/ui.js +++ b/ui.js @@ -1,3 +1,4 @@ +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3 function changeTab(selected){ let selectElement = document.getElementById(selected); if (!selectElement.classList.contains('active')) { @@ -40,4 +41,4 @@ document.addEventListener("DOMContentLoaded", () => { applyTheme(this.value); }); }); - +// @license-end