From 82ea32a7a9e4ea880db327b6ad75de43ae3bbff8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Moritz=20H=C3=B6lting?=
 <87192362+moritz-hoelting@users.noreply.github.com>
Date: Sat, 24 Aug 2024 00:14:33 +0200
Subject: [PATCH] add mobile design to playground

---
 src/components/playground/Header.tsx | 10 ++-------
 src/styles/playground.scss           | 33 ++++++++++++++++++++++++----
 src/wasm/webcompiler/Cargo.toml      |  2 +-
 src/wasm/webcompiler/src/util.rs     |  2 +-
 4 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/components/playground/Header.tsx b/src/components/playground/Header.tsx
index e084744..9207f44 100644
--- a/src/components/playground/Header.tsx
+++ b/src/components/playground/Header.tsx
@@ -15,17 +15,11 @@ export default function Header({
     onZip: () => void;
 }) {
     return (
-        <header
-            style={{
-                display: "flex",
-                justifyContent: "space-between",
-                marginBottom: "0.5cm",
-            }}
-        >
+        <header>
             <h1 id="_top">{lang.title}</h1>
             <div className="buttons" style={{ height: "100%" }}>
                 <DropdownButton
-                    style={{ height: "100%", marginRight: "0.5cm"}}
+                    style={{ height: "100%", marginRight: "0.5cm" }}
                     visible={[[lang.buttons.save, onSave]]}
                     options={[[lang.buttons.reset, onReset]]}
                 />
diff --git a/src/styles/playground.scss b/src/styles/playground.scss
index 2ecb2cb..5749370 100644
--- a/src/styles/playground.scss
+++ b/src/styles/playground.scss
@@ -1,22 +1,43 @@
 .playground {
     display: grid;
-    grid-template-columns: clamp(200px, 15%, 500px) auto;
+    grid-template-columns: 1fr;
     grid-template-areas:
-        "header header"
-        "files editor";
+        "header"
+        "files"
+        "editor";
+
+    @media only screen and (min-width: 640px) {
+        grid-template-columns: clamp(200px, 15%, 500px) auto;
+        grid-template-areas:
+            "header header"
+            "files editor";
+    }
 
     > header {
         grid-area: header;
+        display: flex;
+        margin-bottom: 0.5cm;
+        flex-direction: column;
+        max-width: 95dvw;
+
+        @media only screen and (min-width: 450px) {
+            justify-content: space-between;
+            flex-direction: row;
+        }
     }
+
     > .file-view {
         grid-area: files;
         display: flex;
         flex-direction: column;
-        margin-right: 0.5cm;
         overflow-x: hidden;
         overflow-y: hidden;
         max-height: 70vh;
 
+        @media only screen and (min-width: 640px) {
+            margin-right: 0.5cm;
+        }
+
         > h3 {
             cursor: pointer;
         }
@@ -47,6 +68,10 @@
     > .editor {
         grid-area: editor;
 
+        @media only screen and (max-width: 640px) {
+            max-width: 100%;
+        }
+
         .monaco-editor {
             padding-block: 10px;
         }
diff --git a/src/wasm/webcompiler/Cargo.toml b/src/wasm/webcompiler/Cargo.toml
index 428d9b6..f46619f 100644
--- a/src/wasm/webcompiler/Cargo.toml
+++ b/src/wasm/webcompiler/Cargo.toml
@@ -13,7 +13,7 @@ opt-level = "s"
 
 [dependencies]
 wasm-bindgen = "0.2.92"
-shulkerscript = { git = "https://github.com/moritz-hoelting/shulkerscript-lang.git", default-features = false, features = ["serde", "shulkerbox"], rev = "a0a27cda96e1922b019b216961c39f7ef7991d22" }
+shulkerscript = { git = "https://github.com/moritz-hoelting/shulkerscript-lang.git", default-features = false, features = ["serde", "shulkerbox"], rev = "8953b347c562615fef3a8d500b0bb86f7f717a08" }
 serde = "1.0"
 serde-wasm-bindgen = "0.6.5"
 anyhow = "1.0.86"
diff --git a/src/wasm/webcompiler/src/util.rs b/src/wasm/webcompiler/src/util.rs
index 89df55d..2095c49 100644
--- a/src/wasm/webcompiler/src/util.rs
+++ b/src/wasm/webcompiler/src/util.rs
@@ -6,7 +6,7 @@ use shulkerscript::{
     lexical::token_stream::TokenStream,
     shulkerbox::{datapack::Datapack, util::compile::CompileOptions, virtual_fs::VFolder},
     syntax::{parser::Parser, syntax_tree::program::ProgramFile},
-    transpile::transpiler::Transpiler,
+    transpile::Transpiler,
 };
 
 use crate::Printer;