add input/output toggle

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

@@ -0,0 +1,77 @@
+<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: 4.2rem;
+		border-top: 1px solid var(--second);
+	}
+
+	input {
+		display: block;
+		position: relative;
+		height: 1em;
+		width: calc(100% - 0.6em);
+		top: -2px;
+		border-radius: 0.5em;
+		-webkit-appearance: none;
+		outline: none;
+		margin: 0 0.6em 0 0;
+	}
+
+	input::before {
+		content: "";
+		position: absolute;
+		display: block;
+		height: 100%;
+		width: 100%;
+		border-radius: 1em;
+		top: 0px;
+		left: 0px;
+		background: var(--second);
+		box-sizing: border-box;
+		-webkit-transition: .25s ease-out;
+		padding: 2px;
+		box-sizing: content-box;
+	}
+
+	input:checked::before {
+		background: var(--prime);
+	}
+
+	input::after {
+		content: "";
+		position: absolute;
+		display: block;
+		height: 1em;
+		width: 1em;
+		top: 2px;
+		left: 2px;
+		border-radius: 1em;
+		background: white;
+		box-shadow: 0 0px 1px rgba(0,0,0,.4), 0 4px 2px rgba(0,0,0,.1);
+		-webkit-transition: .2s ease-out;
+	}
+
+	input:checked::after {
+		left: calc(100% - 9px);
+	}
+
+	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/routes/repl/_components/Repl.html

@@ -6,6 +6,7 @@
 	import CodeMirror from './CodeMirror.html';
 	import Input from './Input/index.html';
 	import Output from './Output/index.html';
+	import InputOutputToggle from './InputOutputToggle.html';
 
 	export let version = 'alpha'; // TODO change this to latest when the time comes
 	export let app;
@@ -172,9 +173,15 @@
 </script>
 
 <style>
+	.container {
+		position: relative;
+		width: 100%;
+		height: calc(100% - 4.2rem);
+	}
+
 	.repl-inner {
 		width: 200%;
-		height: calc(100% - 4.2rem);
+		height: 100%;
 		transition: transform 0.3s;
 	}
 
@@ -239,18 +246,17 @@
 		cursor: pointer;
 	}
 
-	.input-output-toggle {
-		position: absolute;
-	}
-
 	.offset {
 		transform: translate(-50%,0);
 	}
 
 	@media (min-width: 768px) {
+		.container {
+			height: 100%;
+		}
+
 		.repl-inner {
 			width: 100%;
-			height: 100%;
 		}
 
 		.input-output-toggle {
@@ -264,8 +270,9 @@
 	}
 </style>
 
-<div class="repl-inner" class:offset="{show_output}" bind:clientWidth={width}>
+<div class="container" bind:clientWidth={width}>
-	<SplitPane type="horizontal" fixed="{768 > width}" pos={60} fixed_pos={60}>
+	<div class="repl-inner" class:offset="{show_output}">
+		<SplitPane type="horizontal" fixed="{768 > width}" pos={60} fixed_pos={50}>
 			<section slot=a>
 				<Input
 					{component_store}
@@ -296,9 +303,6 @@
 			</section>
 		</SplitPane>
 	</div>
+</div>
 
-<label class="input-output-toggle">
+<InputOutputToggle bind:checked={show_output}/>
-	<span>input</span>
-	<input type="checkbox" bind:checked={show_output}>
-	<span>output</span>
-</label>

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

@@ -12,8 +12,6 @@
 	// export let min1 = min;
 	// export let min2 = min;
 
-	console.log({ fixed, pos, fixed_pos });
-
 	const refs = {};
 	const side = type === 'horizontal' ? 'left' : 'top';
 	const dimension = type === 'horizontal' ? 'width' : 'height';