Sync commit

juggl-server/css/style.css

@@ -23,7 +23,6 @@ header {
     background: linear-gradient(137deg, rgba(10, 133, 168, 1) 0%, rgba(136, 0, 0, 1) 100%); */
     /* background: rgb(10, 133, 168);
     background: linear-gradient(137deg, rgba(10, 133, 168, 1) 0%, rgba(255, 255, 255, 1) 48%, rgba(136, 0, 0, 1) 100%); */
-
     /* offset-x | offset-y | blur-radius | spread-radius | color */
     box-shadow: 0px 0px 2rem 1rem #000D;
 }
@@ -55,14 +54,11 @@ main {
     display: inline-block;
 }
 
-textarea:focus,
-input:focus,
-button:focus {
+textarea:focus, input:focus, button:focus {
     outline: none;
 }
 
-input,
-button {
+input, button {
     border-radius: 2px;
     border: solid red 1px;
     background-color: #0000;
@@ -74,6 +70,7 @@ button {
 button:hover {
     color: white;
     background-color: #F007;
+    cursor: pointer;
 }
 
 button:active {
@@ -89,3 +86,40 @@ thead * {
     color: #AAA;
     text-align: left;
 }
+
+#project-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-content: flex-start;
+    padding: 5px;
+}
+
+#project-list>* {
+    margin: 5px;
+    border: 1px dashed #AAA;
+    border-radius: 5px;
+    color: white;
+    padding: 10px;
+}
+
+#project-list>*:hover {
+    color: red;
+    border-color: red;
+    cursor: pointer;
+}
+
+#project-list h1 {
+    font-weight: bold;
+    font-size: 24pt;
+    margin: 0px;
+    padding: 0px;
+}
+
+#project-list p {
+    font-size: 10pt;
+    color: #AAA;
+    margin: 0px;
+    padding: 0px;
+}

juggl-server/index.html

@@ -43,18 +43,13 @@
         </ul>
     </header>
     <main>
-        <table class="not-public hidden">
-            <thead>
-                <th>Project</th>
-                <th>Start date</th>
-                <th>Duration</th>
-                <th>Records</th>
-                <th>Average record</th>
-            </thead>
-            <tbody id="project-list">
-
-            </tbody>
-        </table>
+        <div class="idle hidden">
+            <h1>
+                Select project to track
+            </h1>
+            <div id="project-list">
+            </div>
+        </div>
     </main>
 </body>
 

juggl-server/js/helper.js

@@ -1,42 +1,33 @@
-const TABLE_ROW = "tr";
-const TABLE_DATA = "td";
+const PROJECT_OBJECT = "div";
+const PROJECT_TITLE = "h1";
+const PROJECT_META = "p";
 
 function loadProjectList() {
   api.getProjects().then((projects) => {
-    var table = u(u("#project-list").first());
+    var container = u(u("#project-list").first());
     Object.values(projects).forEach((project) => {
-      var row = createNode(TABLE_ROW);
+      var obj = createNode(PROJECT_OBJECT);
       var data = undefined;
 
-      data = createNode(TABLE_DATA);
-      append(row, data);
+      data = createNode(PROJECT_TITLE);
+      append(obj, data);
       u(data).text(project["name"]);
 
-      data = createNode(TABLE_DATA);
-      append(row, data);
-      u(data).text(new Date(project["start_date"]).toDateString());
-
       var duration = parseFloat(project["duration"]) / 60 / 60;
       var unit = "hours";
-      data = createNode(TABLE_DATA);
-      append(row, data);
+      data = createNode(PROJECT_META);
+      append(obj, data);
       u(data).text(duration + " " + unit);
 
-      data = createNode(TABLE_DATA);
-      append(row, data);
-      u(data).text(project["record_count"]);
+      data = createNode(PROJECT_META);
+      append(obj, data);
+      u(data).text(project["record_count"] + " records");
 
-      data = createNode(TABLE_DATA);
-      append(row, data);
-      u(data).text(
-        duration / parseInt(project["record_count"]) + " " + unit + "/record"
-      );
+      obj = u(obj);
+      obj.data("project-id", project["project_id"]);
+      obj.on("click", projectClicked);
 
-      row = u(row);
-      row.data("project-id", project["project_id"]);
-      row.on("click", projectClicked);
-
-      table.append(row);
+      container.append(obj);
     });
   });
 }