Improve styles
diff --git a/.gitignore b/.gitignore
index 52159d8..5d3f314 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,4 +8,5 @@
webview-frontend
*.o
bundle-*.js
-bundle.js
\ No newline at end of file
+bundle.js
+styles.css.txt
diff --git a/Makefile b/Makefile
index 7fcb8d4..37b594f 100644
--- a/Makefile
+++ b/Makefile
@@ -6,11 +6,9 @@
WEBCFLAGS = -Os -framework WebKit -std=c++11
-webview-frontend: webview-frontend.cpp units.o getopt.o getopt1.o parse.tab.o strfunc.o
+webview-frontend: webview-frontend.cpp units.o getopt.o getopt1.o parse.tab.o strfunc.o | bundle-webview-js.h
g++ $^ -o webview-frontend $(WEBCFLAGS) -I json/include
-webview-frontend.cpp: bundle-webview-js.h
-
units.wasm: units.c
emcc -o units.lib.js *.c $(CFLAGS) --preload-file definitions.units --preload-file elements.units --preload-file currency.units --preload-file cpi.units
@@ -26,10 +24,11 @@
bundle-webview-js.h: bundle-webview.js
xxd -i $^ > $@
-bundle-webview.js: webview-frontend.js frontend-impl.js
+bundle-webview.js: webview-frontend.js frontend-impl.js styles.css
+ cp styles.css styles.css.txt
yarn esbuild webview-frontend.js $(ESFLAGS) --outfile=bundle-webview.js
watch:
yarn esbuild frontend.js $(ESFLAGS) --watch --outfile=bundle.js
-.PHONY: watch
+.PHONY: watch webview-frontend
diff --git a/frontend-impl.js b/frontend-impl.js
index 2ae5726..95ca17f 100644
--- a/frontend-impl.js
+++ b/frontend-impl.js
@@ -13,12 +13,12 @@
setTo('');
convert(query, to).then(res => {
- setHist([...hist, query + " -> " + to + " " + res]);
+ setHist([...hist, [query, to, res]]);
})
}
return (
- <div>
+ <>
<form class="query-row" onSubmit={doConversion}>
<input
type="text"
@@ -35,14 +35,20 @@
onChange={(val) => setTo(val.target.value)}
></input>
- <input type="submit"></input>
+ <input value="Convert" type="submit"></input>
</form>
- <ul>
+ <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>
{hist.map((entry) => (
- <li>{entry}</li>
+ <tr>{entry.map(t => <td>{t}</td>)}</tr>
))}
- </ul>
- </div>
+ <tr><td></td></tr>
+ </table>
+ </div>
+ </>
);
};
diff --git a/index.html b/index.html
index fb19254..1892d74 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,9 @@
<!DOCTYPE html>
<html>
+<head>
<title>Units</title>
+<link rel="stylesheet" href="styles.css">
+</head>
<body>
<div id="app">
</div>
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..87743a3
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,58 @@
+.query-row {
+ display: grid;
+ grid-template-columns: 3fr 2fr min-content;
+ width: 100%;
+ grid-gap: 8px;
+ margin-bottom: 0;
+}
+
+html {
+ overflow: hidden;
+}
+
+body {
+ font-family: system-ui;
+ overflow: hidden;
+ position: fixed;
+ width: 100vw;
+ height: 100vh;
+ margin: 0;
+ padding: 8px;
+ box-sizing: border-box;
+}
+
+#app {
+ display: grid;
+ grid-template-rows: min-content 1fr;
+ width: 100%;
+ height: 100%;
+}
+
+.table-container {
+ overflow-y: scroll;
+ margin-top: 8px;
+/* border: 1px solid gray;*/
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 0;
+ background: white;
+ font-size: 0.85rem!important;
+ table-layout: fixed;
+}
+td {
+ padding: 2px 4px;
+}
+
+thead {
+ background: rgb(242,242,247);
+ color: rgb(72,72,74);
+ position: sticky;
+ top: 0;
+}
+
+td:last-child {
+ text-align: right;
+}
\ No newline at end of file
diff --git a/webview-frontend.cpp b/webview-frontend.cpp
index c9c008a..e3a2ed6 100644
--- a/webview-frontend.cpp
+++ b/webview-frontend.cpp
@@ -23,7 +23,7 @@
std::cout << from << ' ' << to << std::endl;
- do_a_conversion((char *)from.data(), (char *)to.data());
+ do_a_conversion((char *)from.data(), to.size() > 0 ? (char *)to.data() : nullptr);
std::string res = json(std::string(log_buffer, log_buffer_ptr - log_buffer)).dump();
log_buffer_ptr = log_buffer;
std::cout << res << std::endl;
diff --git a/webview-frontend.js b/webview-frontend.js
index 9a53b21..895ba34 100644
--- a/webview-frontend.js
+++ b/webview-frontend.js
@@ -1,4 +1,10 @@
const {UnitsApp} = require("./frontend-impl.js");
const React = require("preact");
+const stylesheet = require("./styles.css.txt");
+
+const style = document.createElement("style");
+style.innerText = stylesheet;
+
+document.body.appendChild(style);
React.render(<UnitsApp />, document.getElementById("app"));