From b96715f812febc015a257162bb5bca96f730c28d Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Tue, 9 Apr 2019 09:14:54 -0400
Subject: [PATCH] make tutorial mobile-friendly

---
 .../[slug]/_components/ScreenToggle.svelte    | 37 +++++++
 site/src/routes/tutorial/[slug]/index.svelte  | 97 ++++++++++++-------
 2 files changed, 101 insertions(+), 33 deletions(-)
 create mode 100644 site/src/routes/tutorial/[slug]/_components/ScreenToggle.svelte

diff --git a/site/src/routes/tutorial/[slug]/_components/ScreenToggle.svelte b/site/src/routes/tutorial/[slug]/_components/ScreenToggle.svelte
new file mode 100644
index 0000000000..d777f345e9
--- /dev/null
+++ b/site/src/routes/tutorial/[slug]/_components/ScreenToggle.svelte
@@ -0,0 +1,37 @@
+<script>
+	export let offset = 0;
+</script>
+
+<style>
+	.toggle {
+		width: 100%;
+		height: 42px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-top: 1px solid var(--second);
+	}
+
+	button {
+		padding: 0.3em 0.6em;
+		border-radius: 1em;
+		line-height: 1;
+		height: 1em;
+		box-sizing: content-box;
+		color: #999;
+		border: 1px solid #f4f4f4;
+		width: 4em;
+		margin: 0 0.15em;
+	}
+
+	.selected {
+		background-color: var(--prime);
+		color: white;
+	}
+</style>
+
+<div class="toggle">
+	<button class:selected={offset === 0} on:click={() => offset = 0}>tutorial</button>
+	<button class:selected={offset === 1} on:click={() => offset = 1}>input</button>
+	<button class:selected={offset === 2} on:click={() => offset = 2}>output</button>
+</div>
\ No newline at end of file
diff --git a/site/src/routes/tutorial/[slug]/index.svelte b/site/src/routes/tutorial/[slug]/index.svelte
index 2bb812e1f3..4c8f0ab049 100644
--- a/site/src/routes/tutorial/[slug]/index.svelte
+++ b/site/src/routes/tutorial/[slug]/index.svelte
@@ -15,6 +15,7 @@
 
 <script>
 	import TableOfContents from './_components/TableOfContents.svelte';
+	import ScreenToggle from './_components/ScreenToggle.svelte';
 	import Icon from '../../../components/Icon.svelte';
 	import Repl from '@sveltejs/svelte-repl';
 	import { getContext } from 'svelte';
@@ -29,6 +30,9 @@
 	let scrollable;
 	const lookup = new Map();
 
+	let width = process.browser ? window.innerWidth : 1000;
+	let offset = 0;
+
 	sections.forEach(section => {
 		section.chapters.forEach(chapter => {
 			const obj = {
@@ -70,6 +74,8 @@
 		});
 	}
 
+	$: mobile = width < 768;
+
 	function reset() {
 		repl.update({
 			components: chapter.app_a.map(clone)
@@ -110,11 +116,27 @@
 		padding: 0;
 		/* margin: 0 calc(var(--side-nav) * -1); */
 		box-sizing: border-box;
+
+	}
+
+	.viewport {
+		width: 100%;
+		height: 100%;
 		display: grid;
 		grid-template-columns: minmax(33.333%, 480px) auto;
 		grid-auto-rows: 100%;
 	}
 
+	.mobile .viewport {
+		width: 300%;
+		height: calc(100% - 42px);
+		grid-template-columns: 33.333% 66.666%;
+		transition: transform 0.3s;
+	}
+
+	.mobile .offset-1 { transform: translate(-33.333%, 0); }
+	.mobile .offset-2 { transform: translate(-66.666%, 0); }
+
 	.tutorial-text {
 		display: flex;
 		flex-direction: column;
@@ -215,44 +237,53 @@
 	<title>{selected.section.title} / {selected.chapter.title} • Svelte Tutorial</title>
 </svelte:head>
 
-<div class="tutorial-outer">
-	<div class="tutorial-text">
-		<div class="table-of-contents">
-			<TableOfContents {sections} {slug} {selected}/>
-		</div>
+<svelte:window bind:innerWidth={width}/>
 
-		<div class="chapter-markup" bind:this={scrollable}>
-			{@html chapter.html}
-
-			<div class="controls">
-				{#if chapter.app_b}
-					<!-- TODO disable this button when the contents of the REPL
-						matches the expected end result -->
-					<button class="show" on:click="{() => completed ? reset() : complete()}">
-						{completed ? 'Reset' : 'Show me'}
-					</button>
-				{/if}
-
-				{#if selected.next}
-					<a class="next" href="tutorial/{selected.next.slug}">Next <Icon name="arrow-right" /></a>
-				{/if}
+<div class="tutorial-outer" class:mobile>
+	<div class="viewport offset-{offset}">
+		<div class="tutorial-text">
+			<div class="table-of-contents">
+				<TableOfContents {sections} {slug} {selected}/>
 			</div>
 
-			<div class="improve-chapter">
-				<a href={improve_link}><Icon name="edit" size={14}/> Edit this chapter</a>
+			<div class="chapter-markup" bind:this={scrollable}>
+				{@html chapter.html}
+
+				<div class="controls">
+					{#if chapter.app_b}
+						<!-- TODO disable this button when the contents of the REPL
+							matches the expected end result -->
+						<button class="show" on:click="{() => completed ? reset() : complete()}">
+							{completed ? 'Reset' : 'Show me'}
+						</button>
+					{/if}
+
+					{#if selected.next}
+						<a class="next" href="tutorial/{selected.next.slug}">Next <Icon name="arrow-right" /></a>
+					{/if}
+				</div>
+
+				<div class="improve-chapter">
+					<a href={improve_link}><Icon name="edit" size={14}/> Edit this chapter</a>
+				</div>
 			</div>
 		</div>
-	</div>
 
-	<div class="tutorial-repl">
-		<Repl
-			bind:this={repl}
-			{svelteUrl}
-			{rollupUrl}
-			orientation="rows"
-			on:change={handle_change}
-			setup={mapbox_setup}
-			relaxed
-		/>
+		<div class="tutorial-repl">
+			<Repl
+				bind:this={repl}
+				{svelteUrl}
+				{rollupUrl}
+				orientation={mobile ? 'columns' : 'rows'}
+				fixed={mobile}
+				on:change={handle_change}
+				setup={mapbox_setup}
+				relaxed
+			/>
+		</div>
 	</div>
+
+	{#if mobile}
+		<ScreenToggle bind:offset/>
+	{/if}
 </div>