1 files changed, 34 insertions, 28 deletions

diff --git a/templates/index.html b/templates/index.html
index b2dc6b0..18ca5f0 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -14,6 +14,10 @@
   display: flex;
 }
 
+.dir-column {
+  flex-direction: column;
+}
+
 .flex-grow {
   flex-grow: 1;
 }
@@ -22,26 +26,39 @@
   justify-content: flex-start;
 }
 
-.week-bar {
+.just-space-between {
+  justify-content: space-between;
+}
+
+#task-bar {
   margin-left: 10px;
   border: 1px solid black;
 }
 
+.short {
+  max-width: 50px;
+}
+
 .status-started {
-  border-color: green;
+  background-color: lightgreen;
 }
 
 .status-stopped {
-  border-color: red;
+  background-color: lightblue;
 }
+
 .status-detached {
-  border-color: blue;
+  background-color: lightyellow;
 }
 
 #entry-bar {
-  border-width: 3px;
-  border-style: solid;
+  border: 1px solid black;
+  padding-top: 10px;
+}
+
+#entry-form {
   padding: 10px;
+  margin-buttom: 10px;
 }
 
 .entry-box {
@@ -50,6 +67,12 @@
 #controls-bar {
   margin-bottom: 10px;
 }
+
+#taskForm {
+  background-color: lightblue;
+  padding: 10px;
+  max-width: 500px;
+}
     </style>
 
   </head>
@@ -60,7 +83,7 @@
       <button hx-get="/" hx-replace-url="true" hx-params="date" hx-vals='{"date": "{{.DateInfo.Tomorrow}}"}' hx-target="body">I morgen</button>
     </div>
     <div class="flex">
-      <div>
+      <div id="entry-bar">
         {{template "entry.html" .Entry}}
         <div>
           <div>
@@ -80,8 +103,8 @@
           </div>
         </div>
       </div>
-      <div class="flex-grow week-bar">
-        <form>
+      <div id="task-bar">
+        <form autocomplete="off">
           <label for="timeRangeSelect">Vis fra: </label>
           <select id="timeRangeSelect">
             <option value="week">Uge</option>
@@ -96,25 +119,8 @@
             <option value="m30">30 min</option>
           </select>
         </form>
-        <table>
-          <tbody>
-            <tr>
-              <td>Trifork</td>
-              <td />
-              <td />
-            </tr>
-            <tr>
-              <td />
-              <td>SVT-112: fdsa Dsa ds wqw fdsf fds</td>
-              <td />
-            </tr>
-            <tr>
-              <td />
-              <td>Helligdag</td>
-              <td />
-            </tr>
-          </tbody>
-        </table>
+        {{ template "task.html" .Task }}
+        {{ template "taskRows.html" . }}
       </div>
     </div>
   </body>