Experiments

src/public/style/experiments.css

+.experiments-list {
+    display: flex;
+    flex-direction: column;
+}
+
+.experiment {
+    width: 750px;
+    margin: 10px;
+    align-self: center;
+    list-style: none;
+    border-radius: 10px;
+    background-color: var(--main-color);
+}
+.experiment:hover {
+    background-color: var(--secondary-color);
+}
+
+.experiment a {
+    text-decoration: none;
+    color: #ffffff;
+}
+
+.experiment-header {
+    font-size: 25px;
+    font-weight: bold;
+    padding: 2px;
+}
+
+.experiment-information {
+    border-top: 1px solid var(--secondary-color)
+}
+.experiment-information span:first-of-type {
+    padding-left: 15px;
+    padding-right: 15px;
+}
\ No newline at end of file

src/public/style/login.css

 .content {
-    height: 100vh;
+    min-height: 100vh;
     display: flex;
     justify-content: center;
     background-color: var(--main-color)

src/public/style/main.css

@@ -13,21 +13,24 @@ body {
 }
 
 .main {
-    height: 100vh;
+    min-height: 100vh;
 }
 
 .content {
     padding: 40px;
-    padding-top: 25vh;
-    height: 100vh;
+    min-height: 100vh;
     text-align: center;
 }
 
+h1 {
+    font-size: 50px;
+}
+
 .information {
+    margin-top: 25vh;
     margin-bottom: 50px;
 }
-.information h1 {
-    font-size: 50px;
+.information  {
     margin-bottom: 10px;
 }
 .information p {

src/views/experiments.hbs

 <h1>Eksperimenter</h1>
-
-<table>
-    <thead>
-        <tr>
-            <th>Navn</th>
-            <th>Lærer</th>
-            <th>Start tidspunkt</th>
-            <th>Slut tidspunkt</th>
-        </tr>
-    </thead>
-    <tbody>
+{{#if experiments}}
+    <ul class="experiments-list">
         {{#each experiments}}
-        <tr>
-            <td><a href="/experiments/{{this.id}}">{{this.name}}</a></td>
-            <td>{{this.user_name}}</td>
-            <td>{{this.start_time}}</td>
-            <td>{{this.end_time}}</td>
-        </tr>
+            <li class="experiment">
+                <a href="/experiments/{{this.id}}">
+                    <div class="experiment-header">
+                        <span>{{this.name}}</span>
+                    </div>
+                    <div class="experiment-information">
+                        <span>Lærer: {{this.user_name}}</span>
+                        <span>Tidspunkt: {{this.start_time}}</span>
+                    </div>
+                </a>
+            </li>
         {{/each}}
-    </tbody>
-</table>
\ No newline at end of file
+    </ul>
+{{else}}
+    <p>Det ser desværre ud til at der ikke er nogen eksperimenter at vise.</p>
+{{/if}}
\ No newline at end of file