commit 281af4495ee90c62a20c4830a54f14c0245d24e7
author swissChili <swisschili@fastmail.com> Thu Nov 14 23:30:29 2024 -0500
committer swissChili <swisschili@fastmail.com> Thu Nov 14 23:30:29 2024 -0500
tree f1392acfd55d2b0761692dbb745814a34cbef715
parent 4f0a0a8b5e3036cecbe6b84848adf9ff5fe5dcc7

New stuff

frontend-impl.js

diff --git a/frontend-impl.js b/frontend-impl.js
index 9c7b07c..737a92f 100644
--- a/frontend-impl.js
+++ b/frontend-impl.js
@@ -24,14 +24,20 @@
     setTo('');
   }
 
+  function afterEquals(str) {
+    let parts = str.split('=');
+    return parts[parts.length - 1];
+  }
+
   return (
     <>
-      <form class="query-row" onSubmit={doConversion}>
+      <form class="query-row noselect" onSubmit={doConversion}>
         <input
           type="text"
           id="query"
           value={query}
           placeholder="From"
+          class="noselect"
           onChange={(val) => setQuery(val.target.value)}
         ></input>
         <input
@@ -39,6 +45,7 @@
           id="to"
           value={to}
           placeholder="To"
+          class="noselect"
           onChange={(val) => setTo(val.target.value)}
         ></input>
 
@@ -46,18 +53,26 @@
       </form>
 
       <div class="table-container">
-        <table>
-          <thead>
-            <tr><td style="width: 30%">From</td><td style="width: 15%">To</td><td style="width: 55%">Result</td></tr>
-          </thead>
+        <div class="table-title">
+          <span>Calculation</span>
+          <span>Result</span>
+        </div>
+        <div class="history">
           {hist.map((entry) => (
-            <tr>{entry.map(t => <td>{t}</td>)}</tr>
-          ))}
-          <tr><td></td></tr>
-        </table>
+              <div class="entry">
+                <span class="from">{entry[0]}</span>
+                { entry[1] !== "" ? <span class="to"> {entry[1]}</span> : <span />}
+                <span class="filler">
+                <span class="equals noselect">=</span>
+                <span class="res">{afterEquals(entry[2])}</span>
+                </span>
+              </div>
+            ))
+          }
+        </div>
       </div>
 
-      <div class="bottom-menu">
+      <div class="bottom-menu noselect">
         <span>
           Units: &nbsp;
           <select onChange={val => setUnitSystem(val.target.value)}>