start work on mobile layout

site/src/routes/repl/_components/Repl.html

@@ -54,6 +54,9 @@
 	let sourceErrorLoc;
 	let runtimeErrorLoc;
 
+	let width = typeof window !== 'undefined' ? window.innerWidth : 300;
+	let show_output = false;
+
 	onMount(async () => {
 		workers = {
 			compiler: new Worker('/workers/compiler.js'),
@@ -168,7 +171,11 @@
 </script>
 
 <style>
-	.repl-inner { height: 100% }
+	.repl-inner {
+		width: 200%;
+		height: calc(100% - 4.2rem);
+		transition: transform 0.3s;
+	}
 
 	.repl-inner :global(section) {
 		position: relative;
@@ -231,13 +238,32 @@
 		cursor: pointer;
 	}
 
+	.input-output-toggle {
+		position: absolute;
+	}
+
+	.offset {
+		transform: translate(-50%,0);
+	}
+
 	@media (min-width: 768px) {
-		section { height: 100% }
+		.repl-inner {
+			height: 100%;
+		}
+
+		.input-output-toggle {
+			display: none;
+		}
+
+		.offset {
+			transition: none;
+			transform: none;
+		}
 	}
 </style>
 
-<div class="repl-inner">
-	<SplitPane type="horizontal" pos={60}>
+<div class="repl-inner" class:offset="{show_output}" bind:offsetWidth={width}>
+	<SplitPane type="horizontal" fixed="{768 > width}" pos={60} fixed_pos={60}>
 		<section slot=a>
 			<Input
 				{component_store}
@@ -267,4 +293,10 @@
 			/>
 		</section>
 	</SplitPane>
-</div>
+</div>
+
+<label class="input-output-toggle">
+	<span>input</span>
+	<input type="checkbox" bind:checked={show_output}>
+	<span>output</span>
+</label>

site/src/routes/repl/_components/SplitPane.html

@@ -5,10 +5,14 @@
 	const dispatch = createEventDispatcher();
 
 	export let type;
-	export let min = 50;
-	export let min1 = min;
-	export let min2 = min;
 	export let pos = 50;
+	export let fixed = false;
+	export let fixed_pos = pos;
+	export let min = 50;
+	// export let min1 = min;
+	// export let min2 = min;
+
+	console.log({ fixed, pos, fixed_pos });
 
 	const refs = {};
 	const side = type === 'horizontal' ? 'left' : 'top';
@@ -124,15 +128,15 @@
 		height: 1px;
 	}
 
-	@media (max-width: 767px) {
+	/* @media (max-width: 767px) {
 		.pane {
-			/* override divider-set dimensions */
+			override divider-set dimensions
 			width: 100% !important;
 			height: auto !important;
 		}
-	}
+	} */
 
-	@media (min-width: 768px) {
+	/* @media (min-width: 768px) { */
 		.left, .right, .divider {
 			display: block;
 
@@ -150,19 +154,21 @@
 
 		.top { top: 0; }
 		.bottom { bottom: 0; }
-	}
+	/* } */
 </style>
 
 <div class="container" bind:this={refs.container}>
-	<div class="pane" style="{dimension}: {pos}%;">
+	<div class="pane" style="{dimension}: {fixed ? fixed_pos : pos}%;">
 		<slot name="a"></slot>
 	</div>
 
-	<div class="pane" style="{dimension}: {100 - pos}%;">
+	<div class="pane" style="{dimension}: {100 - (fixed ? fixed_pos : pos)}%;">
 		<slot name="b"></slot>
 	</div>
 
-	<div class="{type} divider" style="{side}: calc({pos}% - 8px)" use:drag={setPos}></div>
+	{#if !fixed}
+		<div class="{type} divider" style="{side}: calc({pos}% - 8px)" use:drag={setPos}></div>
+	{/if}
 </div>
 
 {#if dragging}

site/src/routes/repl/embed.html

@@ -87,13 +87,13 @@
 		--pane-controls-h: 4.2rem;
 	}
 
-	@media (min-width: 768px) {
+	/* @media (min-width: 768px) { */
 		.repl-outer {
 			background-color: var(--back);
 			overflow: hidden;
 			box-sizing: border-box;
 		}
-	}
+	/* } */
 </style>
 
 <svelte:head>

site/src/routes/repl/index.html

@@ -143,7 +143,7 @@
 
 	.pane       { width: 100%; height: 100% }
 
-	@media (min-width: 768px) {
+	/* @media (min-width: 768px) { */
 		.repl-outer {
 			margin: 0 -4.8rem; /* can't do calc(0 - var(--side-nav)) */
 			height: calc(100vh - var(--nav-h));
@@ -161,7 +161,7 @@
 			top: 0;
 			z-index: 11;
 		}
-	}
+	/* } */
 
 	.loading {
 		text-align: center;