From 65c3f0caccadb954dad31186bb8523a74b00723d Mon Sep 17 00:00:00 2001
From: hodasemi <michaelh.95@t-online.de>
Date: Thu, 15 Nov 2018 15:38:02 +0100
Subject: [PATCH] Update table column wrapping

---
 aufgabe2/css/main.css | 49 +++++++++++++++++++------------------------
 aufgabe2/js/table.js  | 13 +++++-------
 2 files changed, 26 insertions(+), 36 deletions(-)

diff --git a/aufgabe2/css/main.css b/aufgabe2/css/main.css
index 7ab0063..5968bbb 100644
--- a/aufgabe2/css/main.css
+++ b/aufgabe2/css/main.css
@@ -164,6 +164,10 @@ h1 {
     white-space: nowrap; /* kein umbruch bei schmaler ansicht */
 }
 
+.world_table th:hover {
+    cursor: pointer;
+}
+
 .world_table th i {
     font-size: 0.6em;
     color: lightgreen;
@@ -175,47 +179,36 @@ h1 {
     font-size: 14px; /* same as section */
 }
 
+@media only screen and (max-width: 700px) {
+    .world_table>tbody>tr>td,
+    .world_table>tbody>tr>th,
+    .world_table>thead>tr>td,
+    .world_table>thead>tr>th {
+      display: block;
+      min-width: 100%!important;
+    }
+    .world_table>thead>tr>th {
+      display: none;
+    }
+}
+
 /*
-table#t01 {
-    width: 100%;
-}
-
-table#t01 tr:nth-child(odd) {
-    background-color: lightgrey;
-}
-
-table#t01 th {
-    background-color: #fff;
-    white-space: nowrap; // kein umbruch bei schmaler ansicht 
-}
-// die sort up sort down icons neben den Spaltennamen  
-table#t01 th i {
-    font-size: 0.6em;
-    color: lightgreen;
-}
-
-table#t01 th, table#t01 td {
-    line-height: 1em;
-    padding: 11px 0;
-    font-size: 14px; // same as section 
-}
-*/
-
 @media only screen and (max-width: 1200px) {
-    table#t01 th:nth-child(n+7), table#t01 td:nth-child(n+7) {
+    .world_table th:nth-child(n+7), .world_table td:nth-child(n+7) {
         display: none;
     }
 }
 @media only screen and (max-width: 900px) {
-    table#t01 th:nth-child(n+5), table#t01 td:nth-child(n+5) {
+    .world_table th:nth-child(n+5), .world_table td:nth-child(n+5) {
         display: none;
     }
 }
 @media only screen and (max-width: 600px) {
-    table#t01 th:nth-child(n+4), table#t01 td:nth-child(n+4) {
+    .world_table th:nth-child(n+4), .world_table td:nth-child(n+4) {
         display: none;
     }
 }
+*/
 
 .boxed {
     border: 1px solid green;
diff --git a/aufgabe2/js/table.js b/aufgabe2/js/table.js
index 4c7f118..bc5de62 100644
--- a/aufgabe2/js/table.js
+++ b/aufgabe2/js/table.js
@@ -135,7 +135,7 @@ function updateTable(csv, columns) {
     var allTextLines = csv.split(/\r\n|\n/);
 
     // create table header
-    table += "<tr>";
+    table += "<thead><tr>";
 
     var data = allTextLines[0].split(",");
     var discarded_indices = [];
@@ -152,7 +152,7 @@ function updateTable(csv, columns) {
     }
 
     // checkbox += "</ul>";
-    table += "</tr>";
+    table += "</thead></tr><tbody>";
 
     // create table content
     for (var i = 1; i < allTextLines.length; i++) {
@@ -171,6 +171,8 @@ function updateTable(csv, columns) {
         table += "</tr>";
     }
 
+    table += "</tbody>";
+
     document.querySelector('#t01').innerHTML = table;
 }
 
@@ -178,12 +180,7 @@ function sortTable(n) {
     var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
     switching = true;
 
-    table = document.getElementById("t01");
-    
-    // xslt table workaround
-    if (table === null) {
-        table = document.getElementById("t02");
-    }
+    table = document.getElementsByClassName("world_table")[0];
 
     // Set the sorting direction to ascending:
     dir = "asc";