More design tweaks (sveltejs#62)

* some WIP tweaks

* selected file indicator

* better fix

Author: Rich-Harris

content/tutorial/03-advanced-svelte/05-bindings/06-component-bindings/README.md

@@ -5,7 +5,10 @@ title: Component bindings
 Just as you can bind to properties of DOM elements, you can bind to component props. For example, we can bind to the `value` prop of this `<Keypad>` component as though it were a form element:
 
 ```svelte
-<Keypad bind:value={pin} on:submit={handleSubmit}/>
+<Keypad
+	+++bind:value={pin}+++
+	on:submit={handleSubmit}
+/>
 ```
 
 Now, when the user interacts with the keypad, the value of `pin` in the parent component is immediately updated.

src/app.css

@@ -6,6 +6,19 @@ body {
 	/* --font-mono: Menlo, Monaco, 'Courier New', monospace; */
 	--font-mono: 'Roboto Mono', monospace;
 	--h4: 1.6rem;
+
+	--light-blue: #f4f8fb;
+}
+
+input,
+button {
+	border: 2px solid transparent;
+}
+
+input:focus-visible,
+button:focus-visible {
+	outline: none;
+	border: 2px solid var(--flash);
 }
 
 /* this is duplicated with kit.svelte.dev */

src/lib/components/SplitPane.svelte

@@ -35,9 +35,10 @@
 		if (min_px < 0) min_px += size;
 		if (max_px < 0) max_px += size;
 
-		pos_px = priority === 'min'
-			? Math.max(min_px, Math.min(max_px, pos_px))
-			: Math.min(max_px, Math.max(min_px, pos_px));
+		pos_px =
+			priority === 'min'
+				? 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`;
 	}
@@ -156,7 +157,8 @@
 <style>
 	.container {
 		--sp-thickness: var(--thickness, 8px);
-		--sp-color: var(--color, #eee);
+		/* --sp-color: var(--color, #eee); */
+		--sp-color: transparent;
 		display: grid;
 		position: relative;
 		width: 100%;

src/routes/tutorial/[slug]/_/Chrome.svelte

@@ -27,13 +27,14 @@
 		width: 100%;
 		height: 4rem;
 		display: flex;
-		gap: 0.5rem;
-		padding: 0.4rem;
 		background: #f9f9f9;
+		border-top: 1px solid var(--border-color);
 	}
 
 	.chrome button {
-		padding: 0.5rem;
+		padding: 0.8rem;
+		box-sizing: border-box;
+		background: #f3f3f3;
 	}
 
 	.chrome button img {
@@ -51,10 +52,19 @@
 	.chrome input {
 		flex: 1;
 		padding: 0.5rem 1rem 0.4rem 1rem;
-		border-radius: 0.5rem;
-		border: 1px solid rgba(0, 0, 0, 0.1);
-		box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
+		background-color: #fbfbfb;
 		font-family: inherit;
 		font-size: 1.6rem;
 	}
+
+	.chrome button,
+	.chrome input {
+		border: 2px solid transparent;
+	}
+
+	.chrome button:focus-visible,
+	.chrome input:focus-visible {
+		outline: none;
+		border: 2px solid var(--flash);
+	}
 </style>

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

@@ -43,6 +43,7 @@
 					{ token: 'keyword', foreground: '0b69a8' }
 				],
 				colors: {
+					'editor.background': '#f4f8fb',
 					'token.keyword': '#ff0000'
 				}
 			});

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

@@ -13,13 +13,33 @@
 
 <style>
 	button {
+		position: relative;
 		padding: 0 0 0 0.2em;
 		font-size: 1.6rem;
 		font-family: inherit;
 		color: var(--text);
+		width: 100%;
+		text-align: left;
+		border: 2px solid transparent;
 	}
 
 	button.selected {
 		color: var(--prime);
 	}
+
+	button.selected::after {
+		content: '';
+		position: absolute;
+		width: 1rem;
+		height: 1rem;
+		right: calc(-2.6rem - 2px);
+		background-color: var(--light-blue);
+		border: 1px solid var(--border-color);
+		transform: translate(0, 0.2rem) rotate(45deg);
+	}
+
+	button:focus-visible {
+		outline: none;
+		border: 2px solid var(--flash);
+	}
 </style>

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

@@ -60,21 +60,29 @@
 		font-family: inherit;
 		color: var(--text);
 		padding: 0 0 0 1.2em;
-		background: url(/tutorial/icons/folder.svg) 0 0.25rem no-repeat;
+		width: 100%;
+		text-align: left;
+		background: url(./folder.svg) 0 45% no-repeat;
 		background-size: 1.4rem 1.4rem;
 		user-select: none;
 		cursor: pointer;
+		border: 2px solid transparent;
+	}
+
+	button:focus-visible {
+		outline: none;
+		border: 2px solid var(--flash);
 	}
 
 	.expanded {
-		background-image: url(/tutorial/icons/folder-open.svg);
+		background-image: url(./folder-open.svg);
 	}
 
 	ul {
-		padding: 0 0 0 0.2em;
-		margin: 0 0 0 0.2em;
+		padding: 0 0 0 0.3em;
+		margin: 0 0 0 0.5em;
 		list-style: none;
-		border-left: 1px solid #eee;
+		/* border-left: 1px solid #eee; */
 		line-height: 1.3;
 	}
 

src/routes/tutorial/[slug]/_/Menu/Menu.svelte

@@ -131,7 +131,7 @@
 		height: 100%;
 		transition: transform 0.2s;
 		transform: translate(calc(var(--menu-width) - 100%), 0);
-		background: var(--back-api);
+		background: var(--light-blue);
 		z-index: 2;
 		/* filter: drop-shadow(2px 0 2px rgba(0, 0, 0, 0.1)); */
 		border-right: 1px solid var(--border-color);
@@ -180,7 +180,7 @@
 	.menu-toggle {
 		width: 100%;
 		height: 100%;
-		background: var(--back-api);
+		background: var(--light-blue);
 		border: 2px solid transparent;
 		box-sizing: border-box;
 	}

src/routes/tutorial/[slug]/_/Sidebar.svelte

@@ -215,7 +215,7 @@
 		justify-content: center;
 		border: 1.5px solid var(--flash);
 		background: var(--flash);
-		color: var(--back-api);
+		color: var(--light-blue);
 		border-radius: 50%;
 		text-align: center;
 		font-size: 1.2rem;

static/tutorial/icons/folder-open.svg renamed to src/routes/tutorial/[slug]/_/folder-open.svg

@@ -21,6 +21,7 @@
 	import ImageViewer from './_/ImageViewer.svelte';
 	import Sidebar from './_/Sidebar.svelte';
 	import Chrome from './_/Chrome.svelte';
+	import { Icon } from '@sveltejs/site-kit';
 
 	/** @type {import('$lib/types').PartStub[]} */
 	export let index;
@@ -283,6 +284,14 @@
 				<section slot="a">
 					<SplitPane type="horizontal" min="80px" max="300px" pos="200px">
 						<section class="navigator" slot="a">
+							<div class="filetree">
+								<Folder
+									{...section.scope}
+									files={Object.values(section.a).filter((stub) => !hidden.has(stub.basename))}
+									expanded
+								/>
+							</div>
+
 							<button
 								class:completed
 								disabled={Object.keys(section.b).length === 0}
@@ -326,16 +335,12 @@
 									completing = false;
 								}}
 							>
-								{completed && Object.keys(section.b).length > 0 ? 'reset' : 'solve'}
+								{#if completed && Object.keys(section.b).length > 0}
+									reset
+								{:else}
+									solve <Icon name="arrow-right" />
+								{/if}
 							</button>
-
-							<div class="filetree">
-								<Folder
-									{...section.scope}
-									files={Object.values(section.a).filter((stub) => !hidden.has(stub.basename))}
-									expanded
-								/>
-							</div>
 						</section>
 
 						<section class="editor-container" slot="b">
@@ -358,27 +363,6 @@
 							set_iframe_src(adapter.base + path);
 						}}
 					/>
-					<!-- <div class="chrome">
-						<button
-							on:click={() => {
-								set_iframe_src('/loading.html');
-								set_iframe_src(adapter.base + path);
-							}}
-							aria-label="reload"
-						>
-							<img src={refresh} alt="Reload icon" />
-						</button>
-
-						<input
-							aria-label="URL"
-							value={path}
-							on:change={(e) => {
-								const url = new URL(e.currentTarget.value, adapter.base);
-								path = url.pathname + url.search + url.hash;
-								set_iframe_src(adapter.base + path);
-							}}
-						/>
-					</div> -->
 
 					<iframe bind:this={iframe} title="Output" src="/loading.html" />
 				</section>
@@ -389,7 +373,7 @@
 
 <style>
 	.container {
-		--border-color: hsl(206, 44%, 85%);
+		--border-color: hsl(206, 44%, 90%);
 		height: 100%;
 		max-height: 100%;
 	}
@@ -400,23 +384,23 @@
 		min-height: 0;
 		height: 100%;
 		max-height: 100%;
-		background: var(--back-api);
+		background: var(--light-blue);
 		--menu-width: 5.4rem;
 	}
 
 	.navigator {
 		background: white;
 		display: flex;
 		flex-direction: column;
-		padding: 1rem;
-		gap: 1rem;
 	}
 
 	.navigator button {
+		position: relative;
 		background: #ddd;
 		padding: 0.5rem;
-		border-radius: 0.5rem;
-		width: 100%;
+		width: calc(100% + 1px);
+		height: 4rem;
+		opacity: 1;
 	}
 
 	.navigator button:not(:disabled) {
@@ -431,6 +415,18 @@
 	.filetree {
 		flex: 1;
 		overflow-y: auto;
+		overflow-x: hidden;
+		padding: 2rem;
+	}
+
+	.filetree::before {
+		content: '';
+		position: absolute;
+		width: 0;
+		height: 100%;
+		top: 0;
+		right: 0;
+		border-right: 1px solid var(--border-color);
 	}
 
 	.preview {
@@ -449,5 +445,6 @@
 
 	.editor-container {
 		padding: 0.5rem;
+		background-color: var(--light-blue);
 	}
 </style>