diff --git a/index.html b/index.html index 10c006a..73b51e2 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@ +
@@ -24,6 +25,7 @@ +
@@ -33,6 +35,7 @@ +
@@ -42,6 +45,7 @@ +
@@ -51,6 +55,7 @@ +
@@ -60,6 +65,7 @@ +
@@ -69,6 +75,7 @@ +
@@ -78,6 +85,7 @@ +
diff --git a/src/main.js b/src/main.js index 277029c..a388436 100644 --- a/src/main.js +++ b/src/main.js @@ -79,6 +79,11 @@ const createEditor = (doc) => { doc.session.on(`change-target:${doc.id}`, () => { targetEl.value = doc.target; }); + + const runButton = document.querySelector(`#slot-${doc.id} .run`); + runButton.addEventListener("click", () => { + doc.evaluate(doc.content); + }); }; const handleEvalHydra = (msg) => { diff --git a/src/style.css b/src/style.css index 6cfa14c..596f66c 100644 --- a/src/style.css +++ b/src/style.css @@ -62,15 +62,17 @@ body { .slot header { background-color: black; - padding: 3px; - padding-top: 6px; + padding: 6px 0px; + padding-right: 6px; + display: flex; + gap: 6px; } select { width: fit-content; background-color: #111; border: none; color: white; - font-size: 18px; + font-size: 16px; outline: 2px solid white; outline-offset: -2px; padding: 4px; @@ -83,7 +85,24 @@ select:hover { background-color: #333; border-right: 5px solid #333; } -select:focus { +select:focus, +button:focus { outline: 3px solid rgb(0, 100, 255); border-radius: 4px; } +/* same as select basically */ +button { + background-color: #111; + border: none; + color: white; + font-size: 16px; + border: 2px solid white; + padding: 4px; + cursor: pointer; + height: 30px; + flex-shrink: 0; +} + +button:hover { + background-color: #333; +}