changed table layout

src/App.css

@@ -1,33 +1,97 @@
+body{
+  background-image: url("./bg.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
 #wrapper{
-  width: 30%;
   max-height: 80vh;
   overflow: hidden;
+  position: relative;
+  top: 30px;
+  left: 30px;
+}
+
+@media (max-device-width: 1100px) { 
+  #wrapper{
+    width: 100%;
+  }
 }
+
+.header{
+  background-color: #222;
+  color: #fff;
+}
+
+.header p{
+  margin: 0px;
+  text-align: center;
+  font-size: 20px;
+  font-weight: bold;
+}
+
 .person {
-  background-color: #ddd;
-  color: #444;
+  background-color: #222;
+  color: #fff;
   cursor: pointer;
-  padding: 18px;
+  padding: 8px;
   width: 100%;
   border: none;
   text-align: left;
   outline: none;
   font-size: 15px;
   transition: 0.4s;
+  font-weight: bold;
+}
+
+
+#online {
+  margin-bottom: 3px;
 }
 
 #offline .person{
-  background-color: #eee;
+  opacity: 0.8;
 }
 
 #offline .person:hover, #online .person:hover {
   background-color: #bbb;
 }
 
-.extend {
+.rank{
+  background-color: #fff;
+  float: left;
+  padding: 2px 5px;
+  margin-right: 7px;
+  color: #000;
+  border-radius: 1px;
+}
+
+.color{
+  float: left;
+  margin-right: 7px;
+  font-size: 12px;
+  margin-top: 3px;
+}
+
+.name{
+  font-weight: bold;
+  float: left;
+}
+
+.speed{
+  opacity: 0.7;
+  float: right;
+  margin-right: 30px;
+  font-weight: normal;
+}
+
+
+.extend{
   padding: 0 18px;
   display: none;
   overflow: hidden;
+  font-weight: normal;
+  min-width: 300px;
 }
 
 img{

src/App.js

@@ -21,7 +21,7 @@ class App extends Component {
   }
   
   render (){
-    let timer = setTimeout(this.change, 5000)
+    setTimeout(this.change, 5000)
 
     return (
       <div id="wrapper">

src/Tables.js

@@ -5,7 +5,7 @@ function Tables({persons}) {
   function addEventlistener(name){
     return function(event){
       var personDiv = document.getElementById(name);
-      var extend = personDiv.children[0];
+      var extend = personDiv.lastChild;
       if (extend.style.display === "block") {
           extend.style.display = "none";
       } else {
@@ -18,11 +18,21 @@ function Tables({persons}) {
   
   return (
     <div>
+      <div className="header">
+        <p>RACE</p>
+        <p>09.12.19</p>
+      </div>
       <div id="online">
-        {sortedpersons.filter(person => person.speed>0).map(person => {
+        {sortedpersons.filter(person => person.speed>0).map((person, index) => {
           return (
               <div key={person.name} className="person" id={person.name} data-status={person.speed>0 ? "online" : "offline"} onClick={addEventlistener(person.name)}>
-                  {person.name} ({person.speed} - {person.speed>0 ? "online" : "offline"})
+                  
+                  <div className='rank'>{index + 1}</div>
+                  <div className='color' style={{backgroundColor: person.color}}>&nbsp;</div>
+                  {person.shortName}
+                  
+                  <div className='speed'>{person.speed}</div>
+                 
                   <div className='extend'> 
                     <img src='foto.png' alt={person.fullName}/>
                     <p>{person.fullName}</p>
@@ -37,7 +47,9 @@ function Tables({persons}) {
         {sortedpersons.filter(person => person.speed<1).map(person => {
           return (
               <div key={person.name} className="person" id={person.name} data-status={person.speed>0 ? "online" : "offline"} onClick={addEventlistener(person.name)}>
-                  {person.name} ({person.speed>0 ? "online" : "offline"})
+                  <div className='color' style={{backgroundColor: person.color}}>&nbsp;</div>
+                  {person.shortName}
+                  <div className='speed'>OUT</div>
                   <div className='extend'> 
                     <img src='foto.png' alt={person.fullName}/>
                     <p>{person.fullName}</p>

src/persons.js

@@ -2,31 +2,43 @@ export default [
   {
     name: "Martin",
     fullName: "Martin Venzl",
-    speed: 2
+    shortName: "VEN",
+    speed: 2,
+    color: "#229900"
   },
   {
     name: "Simon", 
     fullName: "Simon Ellinger",  
-    speed: 4
+    shortName: "ELL",
+    speed: 4,
+    color: "#ffff00"
   },
   {
     name: "Lukas", 
     fullName: "Lukas Wagner", 
-    speed: -9
+    shortName: "WAG",
+    speed: -9,
+    color: "#00ff00"
   },
   {
     name: "Bernie", 
     fullName: "Bernadette Hammerle", 
-    speed: 3
+    shortName: "HAM",
+    speed: 3,
+    color: "#888822"
   },
   {
     name: "tester1", 
     fullName: "Testperson 1", 
-    speed: -30
+    shortName: "TE1",
+    speed: -30,
+    color: "#0000ff"
   },
   {
     name: "tester2", 
     fullName: "Testperson 2", 
-    speed: -20
+    shortName: "TE2",
+    speed: -20,
+    color: "#ff0000"
   }
 ];