From 1fa96e6b953f944737a63ad22665cf8cc13a4923 Mon Sep 17 00:00:00 2001
From: Sam Stenvall <sam.stenvall@nitor.com>
Date: Fri, 13 Oct 2023 22:34:56 +0300
Subject: [PATCH 1/2] Add <thead> and <tbody>

---
 webif/src/routes/Characteristics.svelte | 28 ++++++++++++----------
 webif/src/routes/Circuits.svelte        | 32 ++++++++++++++-----------
 2 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/webif/src/routes/Characteristics.svelte b/webif/src/routes/Characteristics.svelte
index 2209060..afa6535 100644
--- a/webif/src/routes/Characteristics.svelte
+++ b/webif/src/routes/Characteristics.svelte
@@ -4,18 +4,22 @@
 
 <h2>Characteristics</h2>
 <table>
-  <tr>
-    <th>Name</th>
-    <th>Phase</th>
-    <th class="cell-right-align">Voltage</th>
-    <th class="cell-right-align">Frequency</th>
-  </tr>
-  {#each sensorData as data}
+  <thead>
     <tr>
-      <td>{data.characteristics.name}</td>
-      <td>{data.characteristics.phase}</td>
-      <td class="cell-right-align">{data.voltage}V</td>
-      <td class="cell-right-align">{data.frequency}Hz</td>
+      <th>Name</th>
+      <th>Phase</th>
+      <th class="cell-right-align">Voltage</th>
+      <th class="cell-right-align">Frequency</th>
     </tr>
-  {/each}
+  </thead>
+  <tbody>
+    {#each sensorData as data}
+      <tr>
+        <td>{data.characteristics.name}</td>
+        <td>{data.characteristics.phase}</td>
+        <td class="cell-right-align">{data.voltage}V</td>
+        <td class="cell-right-align">{data.frequency}Hz</td>
+      </tr>
+    {/each}
+  </tbody>
 </table>
diff --git a/webif/src/routes/Circuits.svelte b/webif/src/routes/Circuits.svelte
index e6c5bed..2302597 100644
--- a/webif/src/routes/Circuits.svelte
+++ b/webif/src/routes/Circuits.svelte
@@ -4,20 +4,24 @@
 
 <h2>All circuits</h2>
 <table>
-  <tr>
-    <th>Circuit</th>
-    <th>Group</th>
-    <th>Circuit type</th>
-    <th>Sensor type</th>
-    <th class="cell-right-align">Power</th>
-  </tr>
-  {#each sensorData as data}
+  <thead>
     <tr>
-      <td>{data.circuit.name}</td>
-      <td>{data.circuit.group ?? ''}</td>
-      <td>{data.circuit.type}</td>
-      <td>{data.circuit.sensor.type}</td>
-      <td class="cell-right-align">{data.watts}W</td>
+      <th>Circuit</th>
+      <th>Group</th>
+      <th>Circuit type</th>
+      <th>Sensor type</th>
+      <th class="cell-right-align">Power</th>
     </tr>
-  {/each}
+  </thead>
+  <tbody>
+    {#each sensorData as data}
+      <tr>
+        <td>{data.circuit.name}</td>
+        <td>{data.circuit.group ?? ''}</td>
+        <td>{data.circuit.type}</td>
+        <td>{data.circuit.sensor.type}</td>
+        <td class="cell-right-align">{data.watts}W</td>
+      </tr>
+    {/each}
+  </tbody>
 </table>

From 793cd985e0d1318a52e1790ac19452d7bbf9af6f Mon Sep 17 00:00:00 2001
From: Sam Stenvall <sam.stenvall@nitor.com>
Date: Fri, 13 Oct 2023 22:35:43 +0300
Subject: [PATCH 2/2] Add Pure.css, remove some boilerplate

Better base to build on now
---
 webif/package-lock.json                 |  7 +++
 webif/package.json                      |  1 +
 webif/src/routes/+layout.svelte         | 75 +++++++++----------------
 webif/src/routes/+page.svelte           | 50 +++++++----------
 webif/src/routes/Characteristics.svelte |  2 +-
 webif/src/routes/Circuits.svelte        |  2 +-
 6 files changed, 57 insertions(+), 80 deletions(-)

diff --git a/webif/package-lock.json b/webif/package-lock.json
index aa4e815..f283877 100644
--- a/webif/package-lock.json
+++ b/webif/package-lock.json
@@ -16,6 +16,7 @@
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-svelte": "^2.30.0",
         "prettier": "^2.8.0",
+        "purecss": "^3.0.0",
         "svelte": "^4.0.5",
         "svelte-check": "^3.4.3",
         "tslib": "^2.4.1",
@@ -2417,6 +2418,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/purecss": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/purecss/-/purecss-3.0.0.tgz",
+      "integrity": "sha512-IdYbGwbmuA7Hy9ACIO1q7ks4xGLcJSVHxJT2BXIz2c4Ve1aSrNU5bAzA1ILT4Gmdy5K59ruWoRPf9WvJZU5fbA==",
+      "dev": true
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
diff --git a/webif/package.json b/webif/package.json
index cec9fa9..1b9f539 100644
--- a/webif/package.json
+++ b/webif/package.json
@@ -21,6 +21,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte": "^2.30.0",
     "prettier": "^2.8.0",
+    "purecss": "^3.0.0",
     "svelte": "^4.0.5",
     "svelte-check": "^3.4.3",
     "tslib": "^2.4.1",
diff --git a/webif/src/routes/+layout.svelte b/webif/src/routes/+layout.svelte
index 35ee54f..7546cd9 100644
--- a/webif/src/routes/+layout.svelte
+++ b/webif/src/routes/+layout.svelte
@@ -1,57 +1,34 @@
+<script>
+    import 'purecss/build/pure.css'
+</script>
 <svelte:head>
   <title>EachWatt</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 </svelte:head>
-<div class="container">
+<div class="pure-g container">
   <slot />
 </div>
 
 <style>
-  :global(*),
-  :global(html) {
-    margin: 0;
-    padding: 0;
-    border: 0;
-  }
-
-  :global(html) {
-    width: 100%;
-    height: 100%;
-  }
-
-  :global(body) {
-    width: 100%;
-    height: 100%;
-    position: relative;
-  }
-
-  :global(h1),
-  :global(h2),
-  :global(p),
-  :global(table) {
-    margin-bottom: 1em;
-  }
-
-  :global(table) {
-    width: 100%;
-  }
-
-  :global(th),
-  :global(td) {
-    text-align: left;
-    padding: 0 0.4em 0.4em 0;
-  }
-
-  :global(th) {
-    border-bottom: 1px solid #000;
-  }
-
-  .container {
-    max-width: 1200px;
-    margin: 0 auto;
-    clear: both;
-  }
-
-  :global(.cell-right-align) {
-    text-align: right;
-  }
+    .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        clear: both;
+    }
+
+    :global(table) {
+        width: 100%;
+    }
+
+    :global(.cell-right-align) {
+        text-align: right;
+    }
+
+    :global(.pure-g > div) {
+        box-sizing: border-box;
+    }
+
+    :global(.l-box) {
+        padding: 1em;
+    }
 </style>
diff --git a/webif/src/routes/+page.svelte b/webif/src/routes/+page.svelte
index a397278..e3fb110 100644
--- a/webif/src/routes/+page.svelte
+++ b/webif/src/routes/+page.svelte
@@ -66,33 +66,25 @@
   })
 </script>
 
-<div class="container-left">
-  <Logo />
-  <Configuration {configuration} />
-</div>
-<div class="container-right">
-  {#if webSocketUrl === undefined}
-    <p>Please add ?ws=ws://x.x.x.x:yyyy to your URL to connect to a server</p>
-  {:else}
+{#if webSocketUrl === undefined}
+  <p>Please add ?ws=ws://x.x.x.x:yyyy to your URL to connect to a server</p>
+{:else}
+  <div class="pure-u-1-1 l-box">
     <LastUpdate {lastUpdateTimestamp} {webSocketUrl} />
-    <Characteristics sensorData={characteristicsSensorData} />
-    <MainsPower sensorData={mainsSensorData} />
-    <Circuits sensorData={circuitSensorData} />
-  {/if}
-</div>
-
-<style>
-  .container-left {
-    width: 30%;
-    float: left;
-    padding: 0.8em;
-    box-sizing: border-box;
-  }
-
-  .container-right {
-    width: 70%;
-    float: right;
-    padding: 0.8em;
-    box-sizing: border-box;
-  }
-</style>
+  </div>
+  <div class="pure-u-1-4 l-box">
+    <Logo />
+    <Configuration {configuration} />
+  </div>
+  <div class="pure-u-3-4">
+    <div class="pure-u-1-1 l-box">
+      <Characteristics sensorData={characteristicsSensorData} />
+    </div>
+    <div class="pure-u-1-1 l-box">
+      <MainsPower sensorData={mainsSensorData} />
+    </div>
+    <div class="pure-u-1-1 l-box">
+      <Circuits sensorData={circuitSensorData} />
+    </div>
+  </div>
+{/if}
diff --git a/webif/src/routes/Characteristics.svelte b/webif/src/routes/Characteristics.svelte
index afa6535..7fbf4bd 100644
--- a/webif/src/routes/Characteristics.svelte
+++ b/webif/src/routes/Characteristics.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <h2>Characteristics</h2>
-<table>
+<table class="pure-table pure-table-striped">
   <thead>
     <tr>
       <th>Name</th>
diff --git a/webif/src/routes/Circuits.svelte b/webif/src/routes/Circuits.svelte
index 2302597..d2c62fe 100644
--- a/webif/src/routes/Circuits.svelte
+++ b/webif/src/routes/Circuits.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <h2>All circuits</h2>
-<table>
+<table class="pure-table pure-table-striped">
   <thead>
     <tr>
       <th>Circuit</th>