[feat] mobile version of tutorial

Author: dummdidumm

src/lib/components/SplitPane.svelte

@@ -19,8 +19,9 @@
 	let dragging = false;
 	let w = 0;
 	let h = 0;
+	let position = pos;
 
-	// constrain pos
+	// constrain position
 	$: if (container) {
 		const size = type === 'horizontal' ? w : h;
 
@@ -40,7 +41,7 @@
 				? Math.max(min_px, Math.min(max_px, pos_px))
 				: Math.min(max_px, Math.max(min_px, pos_px));
 
-		pos = pos.endsWith('%') ? `${(100 * pos_px) / size}%` : `${pos_px}px`;
+		position = pos.endsWith('%') ? (size ? `${(100 * pos_px) / size}%` : '0%') : `${pos_px}px`;
 	}
 
 	/**
@@ -55,7 +56,7 @@
 		const pos_px = type === 'horizontal' ? x - left : y - top;
 		const size = type === 'horizontal' ? w : h;
 
-		pos = pos.endsWith('%') ? `${(100 * pos_px) / size}%` : `${pos_px}px`;
+		position = pos.endsWith('%') ? `${(100 * pos_px) / size}%` : `${pos_px}px`;
 
 		dispatch('change');
 	}
@@ -132,7 +133,7 @@
 	bind:this={container}
 	bind:clientWidth={w}
 	bind:clientHeight={h}
-	style="--pos: {pos}"
+	style="--pos: {position}"
 >
 	<div class="pane">
 		<slot name="a" />
@@ -142,12 +143,14 @@
 		<slot name="b" />
 	</div>
 
-	<div
-		class="{type} divider"
-		class:disabled
-		use:drag={(e) => update(e.clientX, e.clientY)}
-		use:touchDrag={(e) => update(e.touches[0].clientX, e.touches[0].clientY)}
-	/>
+	{#if pos !== '0%' && pos !== '100%'}
+		<div
+			class="{type} divider"
+			class:disabled
+			use:drag={(e) => update(e.clientX, e.clientY)}
+			use:touchDrag={(e) => update(e.touches[0].clientX, e.touches[0].clientY)}
+		/>
+	{/if}
 </div>
 
 {#if dragging}

src/routes/tutorial/[slug]/+page.svelte

@@ -5,14 +5,15 @@
 	import SplitPane from '$lib/components/SplitPane.svelte';
 	import Editor from './Editor.svelte';
 	import Folder from './Folder.svelte';
-	import { dev } from '$app/environment';
+	import { browser, dev } from '$app/environment';
 	import ImageViewer from './ImageViewer.svelte';
 	import Sidebar from './Sidebar.svelte';
 	import Chrome from './Chrome.svelte';
 	import { Icon } from '@sveltejs/site-kit';
 	import Loading from './Loading.svelte';
 	import { PUBLIC_USE_FILESYSTEM } from '$env/static/public';
 	import ContextMenu from './ContextMenu.svelte';
+	import ScreenToggle from './ScreenToggle.svelte';
 
 	/** @type {import('./$types').PageData} */
 	export let data;
@@ -42,6 +43,10 @@
 
 	let path = '/';
 
+	let width = browser ? window.innerWidth : 1000;
+	let selected_view = 0;
+	$: mobile = width < 768;
+
 	/** @type {Record<string, import('$lib/types').Stub>} */
 	let b;
 	$: {
@@ -303,17 +308,22 @@
 	const hidden = new Set(['__client.js', 'node_modules']);
 </script>
 
-<svelte:window on:message={handle_message} />
+<svelte:window on:message={handle_message} bind:innerWidth={width} />
 
 <svelte:head>
 	<title>{data.section.chapter.title} / {data.section.title} • Svelte Tutorial</title>
 </svelte:head>
 
 <ContextMenu />
 
-<div class="container">
-	<SplitPane type="horizontal" min="360px" max="50%" pos="33%">
-		<section class="content" slot="a">
+<div class="container" style="--toggle-height: {mobile ? '4.6rem' : '0px'}">
+	<SplitPane
+		type="horizontal"
+		min={mobile ? '0px' : '360px'}
+		max={mobile ? '100%' : '50%'}
+		pos={mobile ? (selected_view === 0 ? '100%' : '0%') : '33%'}
+	>
+		<section slot="a" class="content">
 			<Sidebar
 				index={data.index}
 				section={data.section}
@@ -323,8 +333,13 @@
 			/>
 		</section>
 
-		<section slot="b">
-			<SplitPane type="vertical" min="100px" max="-100px" pos="50%">
+		<section slot="b" class:hidden={mobile && selected_view === 0}>
+			<SplitPane
+				type="vertical"
+				min={mobile ? '0px' : '100px'}
+				max={mobile ? '100%' : '50%'}
+				pos={mobile ? (selected_view === 1 ? '100%' : '0%') : '50%'}
+			>
 				<section slot="a">
 					<SplitPane type="horizontal" min="80px" max="300px" pos="200px">
 						<section class="navigator" slot="a">
@@ -333,6 +348,7 @@
 									{...data.section.scope}
 									files={current_stubs.filter((stub) => !hidden.has(stub.basename))}
 									expanded
+									read_only={mobile}
 								/>
 							</div>
 
@@ -353,13 +369,18 @@
 						</section>
 
 						<section class="editor-container" slot="b">
-							<Editor stubs={current_stubs} selected={$selected} on:change={update_stub} />
+							<Editor
+								stubs={current_stubs}
+								selected={$selected}
+								read_only={mobile}
+								on:change={update_stub}
+							/>
 							<ImageViewer selected={$selected} />
 						</section>
 					</SplitPane>
 				</section>
 
-				<section class="preview" slot="b">
+				<section slot="b" class="preview">
 					<Chrome
 						{path}
 						{loading}
@@ -395,12 +416,15 @@
 			</SplitPane>
 		</section>
 	</SplitPane>
+	{#if mobile}
+		<ScreenToggle labels={['Tutorial', 'Input', 'Output']} bind:selected={selected_view} />
+	{/if}
 </div>
 
 <style>
 	.container {
 		--border-color: hsl(206, 44%, 90%);
-		height: 100%;
+		height: calc(100% - var(--toggle-height));
 		max-height: 100%;
 	}
 
@@ -485,4 +509,8 @@
 		position: relative;
 		background-color: var(--light-blue);
 	}
+
+	.hidden {
+		display: none;
+	}
 </style>

src/routes/tutorial/[slug]/Editor.svelte

@@ -22,6 +22,7 @@
 	export let stubs;
 	/** @type {import('$lib/types').Stub | null} */
 	export let selected = null;
+	export let read_only = false;
 
 	const dispatch = createEventDispatcher();
 
@@ -179,6 +180,10 @@
 		instance.update_files(stubs);
 	}
 
+	$: if (instance) {
+		instance.editor.updateOptions({ readOnly: read_only });
+	}
+
 	$: if (instance && stubs /* to retrigger on stubs change */) {
 		const model = selected && models.get(selected.name);
 		instance.editor.setModel(model ?? null);
@@ -219,4 +224,12 @@
 	div :global(.monaco-editor .view-overlays .current-line) {
 		border: none;
 	}
+
+	/* reposition overlay message that appears when trying to edit in readonly mode */
+	div :global(.monaco-editor-overlaymessage) {
+		margin-top: 6rem;
+	}
+	div :global(.monaco-editor-overlaymessage .anchor.below) {
+		display: none;
+	}
 </style>

src/routes/tutorial/[slug]/File.svelte

@@ -4,6 +4,7 @@
 
 	/** @type {import('$lib/types').FileStub} */
 	export let file;
+	export let read_only = false;
 
 	/** @type {import('$lib/types').FileTreeContext} */
 	const { select, selected, edit, remove } = getContext('filetree');
@@ -21,7 +22,7 @@
 
 	/** @param {MouseEvent} e */
 	function open_menu(e) {
-		if (restricted.has(file.basename)) return;
+		if (restricted.has(file.basename) || read_only) return;
 		open(e.clientX, e.clientY, [
 			{
 				name: 'Rename',

src/routes/tutorial/[slug]/Folder.svelte

@@ -18,6 +18,8 @@
 	/** @type {Array<import('$lib/types').Stub>} */
 	export let files;
 
+	export let read_only = false;
+
 	/** @type {'idle' | 'add_file' | 'add_folder' | 'edit_folder'} */
 	let state = 'idle';
 	let new_name = '';
@@ -43,7 +45,7 @@
 
 	/** @param {MouseEvent} e */
 	function open_menu(e) {
-		if (depth === 0) return;
+		if (depth === 0 || read_only) return;
 
 		open(e.clientX, e.clientY, [
 			{
@@ -154,13 +156,14 @@
 					prefix={directory.name + '/'}
 					depth={depth + 1}
 					files={children}
+					{read_only}
 				/>
 			</li>
 		{/each}
 
 		{#each child_files as file}
 			<li>
-				<File {file} />
+				<File {file} {read_only} />
 			</li>
 		{/each}
 	</ul>

src/routes/tutorial/[slug]/ScreenToggle.svelte

@@ -0,0 +1,42 @@
+<script>
+	/** @type {string[]} */
+	export let labels;
+	export let selected = 0;
+</script>
+
+<div class="toggle">
+	{#each labels as label, index}
+		<button class:selected={selected === index} on:click={() => (selected = index)}>
+			{label}
+		</button>
+	{/each}
+</div>
+
+<style>
+	.toggle {
+		position: fixed;
+		bottom: 0;
+		width: 100%;
+		height: var(--toggle-height);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-top: 1px solid var(--second);
+		background-color: white;
+	}
+	button {
+		margin: 0 0.15em;
+		width: 4em;
+		height: 1em;
+		padding: 0.3em 0.4em;
+		border-radius: var(--border-r);
+		line-height: 1em;
+		box-sizing: content-box;
+		color: #888;
+		border: 1px solid var(--back-light);
+	}
+	.selected {
+		background-color: var(--prime);
+		color: white;
+	}
+</style>