Merge pull request #18 from Jalle19/pure

Add Pure.css
Jalle19 · Oct 15, 2023 · 1b231d7 · 1b231d7
2 parents d8d90c9 + 793cd98
commit 1b231d7
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 106 deletions.
diff --git a/webif/package-lock.json b/webif/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -3,19 +3,23 @@
 </script>
 
 <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}
+<table class="pure-table pure-table-striped">
+  <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
@@ -3,21 +3,25 @@
 </script>
 
 <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}
+<table class="pure-table pure-table-striped">
+  <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>