playground auto layout on size, icon changes

playground/src/main.ts

@@ -16,6 +16,10 @@ import { deflate } from "./deflate.ts";
 import { inflate } from "./inflate.ts";
 import { IPC } from "./ipc.ts";
 import helpText from "./help.md?raw";
+import share from "./share.svg"
+import share_light from "./share_light.svg"
+import play from "./play.svg"
+import play_light from "./play_light.svg"
 
 let topData: undefined | TopData;
 
@@ -357,13 +361,7 @@ preload.then(() => {
   }
 });
 
-function EditWrap({
+function EditWrap() {
-  vertical,
-  toggle,
-}: {
-  vertical: boolean;
-  toggle: () => void;
-}) {
   const options = state.files.value.map((value) =>
     h("option", { value }, value)
   );
@@ -376,14 +374,6 @@ function EditWrap({
     }
   };
 
-  const char = vertical ? "↕" : "↔"
-
-  // let d = vertical
-  //   ? "M0 0 h20 v20 h-20 z M0 10 h20"
-  //   : "M0 0 h20 v20 h-20 z M10 0 v20";
-  // let play = "M0 0 L20 10 L0 20 z";
-  // let svg = (d: string) =>
-  //   h("svg", { width: 20, height: 20, className: "icon" }, h("path", { d }));
   return h(
     "div",
     { className: "tabPanel left" },
@@ -397,10 +387,10 @@ function EditWrap({
         options
       ),
       h("div", { style: { flex: "1 1" } }),
-      h("button", { onClick: copyToClipboard, title: "copy url" }, "📋"),
+      h("div", {},
-      h("button", { onClick: runOutput, title: "run program" }, "▶"),
+        h("button", { onClick: copyToClipboard, title: "copy url" }, h('img', {src: state.dark.value ? share : share_light})),
-      h("button", { onClick: toggle, title: "change layout" }, char),
+        h("button", { onClick: runOutput, title: "run program" }, h('img', {src: state.dark.value ? play : play_light})),
-      // h("button", { onClick: toggle }, svg(d))
+      )
     ),
     h("div", { className: "tabBody" }, h(Editor, { initialValue: value }))
   );
@@ -416,12 +406,12 @@ function App() {
   if (state.toast.value) {
     toast = h("p", { className: "toast" }, h("div", {}, state.toast.value));
   }
-  let className = `wrapper ${vertical ? "vertical" : "horizontal"}`;
+  let className = `wrapper`;
   return h(
     "div",
     { className },
     toast,
-    h(EditWrap, { vertical, toggle }),
+    h(EditWrap, {}),
     h(Tabs, {})
   );
 }

playground/src/play.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z"/></svg>

playground/src/play_light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z"/></svg>

playground/src/share.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h120v80H240v400h480v-400H600v-80h120q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm200-240v-447l-64 64-56-57 160-160 160 160-56 57-64-64v447h-80Z"/></svg>

playground/src/share_light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h120v80H240v400h480v-400H600v-80h120q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm200-240v-447l-64 64-56-57 160-160 160 160-56 57-64-64v447h-80Z"/></svg>

playground/style.css

@@ -53,29 +53,34 @@ svg.icon path {
 #editor {
   height: 100%;
 }
-.wrapper.horizontal {
+
+.wrapper {
   display: flex;
   flex-direction: row;
   height: 100%;
 }
-.wrapper.horizontal > div {
+@media (width >= 1024px) {
-  flex: 1 1;
+  .wrapper > div {
-  /* allow smaller than natural */
+    flex: 1 1;
-  width: 100px;
+    /* allow smaller than natural */
+    width: 100px;
+  }
 }
-.wrapper.vertical {
+
-  display: flex;
+@media (width <=1024px) {
-  flex-direction: column;
+  .wrapper {
-  height: 100%;
+    flex-direction: column;
-}
+  }
-.wrapper.vertical .tabPanel.left {
+  .wrapper .tabPanel.left {
-  /* designed to go down to the keyboard on my phone */
+    /* designed to go down to the keyboard on my phone */
-  flex: .65 .65;
+    flex: .65 .65;
-  height: 100px;
+    height: 100px;
-}
+  }
-.wrapper.vertical .tabPanel.right {
+
-  flex: .35 .35;
+  .wrapper .tabPanel.right {
-  height: 100px;
+    flex: .35 .35;
+    height: 100px;
+  }
 }
 .tabBar button {
   border: none;