Many improvements

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;

index.php

@@ -35,7 +35,7 @@
 
   <ul class="tab-list" id="classes-tabs" role="tablist" style="margin-bottom: 1rem; margin-top: 1rem;">
     <li class="tab" role="presentation">
-      <a class="tab-button active" id="alle-tab" data-toggle="tab" href="#alle" onclick="changeTab('alle')" role="tab" aria-controls="alle" aria-selected="true">Alle klasser</a>
+      <a class="tab-button active" id="alle-tab" data-toggle="tab" href="#tab-alle" onclick="changeTab('alle')" role="tab" aria-controls="alle" aria-selected="true">Alle klasser</a>
     </li>
 
   </ul>
@@ -50,10 +50,8 @@
     </div>
   </div>
 
-  <div id="liveresults" class="container"></div>
+  <footer><p>Denne sida er fri programmvare under <a href="http://www.gnu.org/licenses/agpl-3.0.html">AGPL 3.0</a>. Kildekoden er tilgjengelig <a href="https://gitlab.com/Trygve/simple-liveresults">her</a>. </p></footer>
-
-
-  <script src="liveresults.js"></script>
   <script src="ui.js"></script>
+  <script src="liveresults.js"></script>
 </body>
 </html>

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 = `<li class="tab" role="presentation"><a class="tab-button" role="tab" data-toggle="tab" onclick="changeTab('${tabArray[i]}')" id="${tabArray[i]}-tab" href="#${tabArray[i]}" aria-controls="${tabArray[i]}" aria-selected="false">${tabNameArray[i].Class.Name}</a></li>`;
+    let StrTab = `<li class="tab" role="presentation"><a class="tab-button" role="tab" data-toggle="tab" onclick="changeTab('${tabArray[i]}')" id="${tabArray[i]}-tab" href="#tab-${tabArray[i]}" aria-controls="${tabArray[i]}" aria-selected="false">${tabNameArray[i].Class.Name}</a></li>`;
     let StrCont = '<div class="tab-content" id="' + tabArray[i]+'" role="tabpanel" aria-labelledby="' + tabArray[i] + '-tab"></div>'
     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

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