move responsive REPL behaviour into ReplWidget

site/package-lock.json

@@ -1140,12 +1140,13 @@
       "integrity": "sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw=="
     },
     "@sveltejs/svelte-repl": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/@sveltejs/svelte-repl/-/svelte-repl-0.0.7.tgz",
-      "integrity": "sha512-gA1UD7ZKbvdLoKsRUPg+yceHmn0vOB4HUBmhV8H0wWr8VyU0nqxM0dlBPvqZUMVVjC9cNyGF3bqHKtBiJHRyhA==",
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/@sveltejs/svelte-repl/-/svelte-repl-0.0.8.tgz",
+      "integrity": "sha512-beswkzUBn/J7/k23KQHedMFchrK/NUdB6RwLYaPIkgFahK8i2d+J9Bv9TLDf2ILEdgd6opzoNth9PNJZ15f1og==",
       "dev": true,
       "requires": {
         "codemirror": "^5.45.0",
+        "sourcemap-codec": "^1.4.4",
         "yootils": "0.0.15"
       },
       "dependencies": {

site/package.json

@@ -39,7 +39,7 @@
     "@babel/plugin-transform-runtime": "^7.2.0",
     "@babel/preset-env": "^7.3.1",
     "@babel/runtime": "^7.3.1",
-    "@sveltejs/svelte-repl": "0.0.7",
+    "@sveltejs/svelte-repl": "0.0.8",
     "chokidar": "^2.1.2",
     "degit": "^2.1.3",
     "eslint-plugin-svelte3": "^0.4.4",

site/src/components/Repl/InputOutputToggle.svelte

@@ -0,0 +1,35 @@
+<script>
+	export let checked;
+</script>
+
+<style>
+	.input-output-toggle {
+		display: grid;
+		position: absolute;
+		user-select: none;
+		grid-template-columns: 1fr 40px 1fr;
+		grid-gap: 0.5em;
+		align-items: center;
+		width: 100%;
+		height: 42px;
+		border-top: 1px solid var(--second);
+	}
+
+	input {
+		display: block;
+	}
+
+	span {
+		color: #ccc;
+	}
+
+	.active {
+		color: #555;
+	}
+</style>
+
+<label class="input-output-toggle">
+	<span class:active={!checked} style="text-align: right">input</span>
+	<input type="checkbox" bind:checked>
+	<span class:active={checked}>output</span>
+</label>

site/src/components/Repl/ReplWidget.svelte

@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import { process_example } from './process_example.js';
 	import Repl from '@sveltejs/svelte-repl';
+	import InputOutputToggle from './InputOutputToggle.svelte';
 
 	export let version = 'beta';
 	export let gist = null;
@@ -10,6 +11,11 @@
 
 	let repl;
 	let name = 'loading...';
+	let width = process.browser
+		? window.innerWidth - 32
+		: 1000;
+
+	let checked = false;
 
 	onMount(() => {
 		if (version !== 'local') {
@@ -71,6 +77,8 @@
 		`https://unpkg.com/svelte@${version}`;
 
 	const rollupUrl = `https://unpkg.com/rollup@1/dist/rollup.browser.js`;
+
+	$: mobile = width < 560;
 </script>
 
 <style>
@@ -85,10 +93,38 @@
 		box-sizing: border-box;
 		--pane-controls-h: 4.2rem;
 	}
+
+	.viewport {
+		width: 100%;
+		height: 100%;
+	}
+
+	.mobile .viewport {
+		width: 200%;
+		height: calc(100% - 42px);
+		transition: transform 0.3s;
+	}
+
+	.mobile .offset {
+		transform: translate(-50%, 0);
+	}
 </style>
 
-<div class="repl-outer">
-	{#if process.browser}
-		<Repl bind:this={repl} {svelteUrl} {rollupUrl} embedded={true} relaxed/>
+<div class="repl-outer" bind:clientWidth={width} class:mobile>
+	<div class="viewport" class:offset={checked}>
+		{#if process.browser}
+			<Repl
+				bind:this={repl}
+				fixed={mobile}
+				{svelteUrl}
+				{rollupUrl}
+				embedded
+				relaxed
+			/>
+		{/if}
+	</div>
+
+	{#if mobile}
+		<InputOutputToggle bind:checked/>
 	{/if}
-</div>
+</div>