Skip to content

Commit 50037a8

Browse files
Rich-HarrisRich-Harris
authored
Double decker nav (#235)
* double decker nav * WIP * tweak * fix theme toggle glitch * finesse * tweaks * unused
1 parent d054838 commit 50037a8

File tree

17 files changed

+301
-217
lines changed

17 files changed

+301
-217
lines changed

‎apps/svelte.dev/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181
"satori-html": "^0.3.2",
8282
"shiki": "^1.6.4",
8383
"shiki-twoslash": "^3.1.2",
84-
"svelte": "5.0.0-next.243",
84+
"svelte": "5.0.0-next.260",
8585
"svelte-check": "^4.0.0",
8686
"svelte-preprocess": "^5.1.4",
8787
"tiny-glob": "^0.2.9",

‎apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
position: relative;
107107
height: calc(100% - var(--sk-nav-height) - var(--sk-banner-bottom-height));
108108
height: calc(100dvh - var(--sk-nav-height) - var(--sk-banner-bottom-height));
109-
--app-controls-h: 5.6rem;
109+
--app-controls-h: 5rem;
110110
--pane-controls-h: 4.2rem;
111111
overflow: hidden;
112112
background-color: var(--sk-back-1);
@@ -115,6 +115,10 @@
115115
box-sizing: border-box;
116116
display: flex;
117117
flex-direction: column;
118+
119+
@media (min-width: 800px) {
120+
--app-controls-h: 4rem;
121+
}
118122
}
119123
120124
/* temp fix for #2499 and #2550 while waiting for a fix for https://github.com/sveltejs/svelte-repl/issues/8 */

‎apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -268,10 +268,27 @@ export default app;`
268268
align-items: center;
269269
justify-content: space-between;
270270
padding: 0.6rem var(--sk-page-padding-side);
271-
background-color: var(--sk-back-4);
271+
background-color: var(--sk-back-2);
272272
color: var(--sk-text-1);
273273
white-space: nowrap;
274274
flex: 0;
275+
gap: 2rem;
276+
277+
&::after {
278+
content: '';
279+
position: absolute;
280+
left: 0;
281+
bottom: -4px;
282+
width: 100%;
283+
height: 4px;
284+
z-index: 2;
285+
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), transparent);
286+
}
287+
288+
@media (min-width: 800px) {
289+
padding-top: 0;
290+
padding-bottom: 1rem;
291+
}
275292
}
276293
277294
.buttons {
@@ -311,24 +328,12 @@ export default app;`
311328
border: none;
312329
color: currentColor;
313330
font-family: var(--sk-font-ui);
314-
opacity: 0.7;
315-
outline: none;
316331
flex: 1;
317-
margin: 0 0.2em 0 0.4rem;
318-
padding-top: 0.2em;
319-
border-bottom: 1px solid transparent;
332+
margin: 0 0.2em 0 0rem;
333+
padding: 0.2rem;
320334
font-size: var(--sk-font-size-ui-medium);
321335
}
322336
323-
input:hover {
324-
border-bottom: 1px solid currentColor;
325-
opacity: 1;
326-
}
327-
input:focus {
328-
border-bottom: 1px solid currentColor;
329-
opacity: 1;
330-
}
331-
332337
button span {
333338
display: none;
334339
}

‎apps/svelte.dev/src/routes/+layout.svelte

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,11 @@
2323

2424
<Shell nav_visible={$page.route.id !== '/(authed)/playground/[id]/embed'}>
2525
{#snippet top_nav()}
26-
<Nav title={data.nav_title} links={data.nav_links}>
26+
<Nav
27+
title={data.nav_title}
28+
links={data.nav_links}
29+
shadow={!$page.route.id?.startsWith('/(authed)/playground')}
30+
>
2731
{#snippet search()}
2832
<Search />
2933
{/snippet}

‎apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
ul {
6666
margin: 0;
6767
list-style: none;
68+
font-size: var(--sk-font-size-body-small);
6869
}
6970
7071
/* Only show the title link if it's in the sidebar */

‎packages/repl/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080
"esrap": "^1.2.2",
8181
"marked": "^14.1.2",
8282
"resolve.exports": "^2.0.2",
83-
"svelte": "^5.0.0-next.243",
83+
"svelte": "5.0.0-next.260",
8484
"zimmerframe": "^1.1.2"
8585
}
8686
}

‎packages/repl/src/lib/Input/ComponentSelector.svelte

Lines changed: 63 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,7 @@
217217
on:drop|preventDefault={dragEnd}
218218
>
219219
<i class="drag-handle"></i>
220+
220221
{#if file.name === 'App' && filename !== editing_name}
221222
<div class="uneditable">
222223
App.svelte{#if show_modified && file.modified}*{/if}
@@ -226,7 +227,9 @@
226227

227228
{#if editing_file}
228229
<span class="input-sizer">
229-
{input_value + (/\./.test(input_value) ? '' : `.${editing_file.type}`)}
230+
<span style="color: transparent">{input_value}</span>
231+
{#if !/\./.test(input_value)}.{editing_file.type}{/if}
232+
<!-- {input_value + (/\./.test(input_value) ? '' : `.${editing_file.type}`)} -->
230233
</span>
231234

232235
<!-- svelte-ignore a11y_autofocus -->
@@ -272,12 +275,12 @@
272275
{/each}
273276
</div>
274277

275-
<button class="add-new" on:click={add_new} title="add new component">
276-
<svg width="12" height="12" viewBox="0 0 24 24">
277-
<line stroke="#999" x1="12" y1="5" x2="12" y2="19" />
278-
<line stroke="#999" x1="5" y1="12" x2="19" y2="12" />
279-
</svg>
280-
</button>
278+
<button
279+
class="add-new"
280+
on:click={add_new}
281+
aria-label="add new component"
282+
title="add new component"
283+
></button>
281284

282285
<div class="runes-info"><RunesInfo {runes} /></div>
283286

@@ -287,9 +290,19 @@
287290
<style>
288291
.component-selector {
289292
position: relative;
290-
border-bottom: 1px solid var(--sk-text-4);
291-
/* overflow: hidden; */
292293
display: flex;
294+
padding: 0 1rem 0 0;
295+
296+
/* fake border (allows tab borders to appear above it) */
297+
&::before {
298+
content: '';
299+
position: absolute;
300+
width: 100%;
301+
height: 1px;
302+
bottom: 0px;
303+
left: 0;
304+
background-color: var(--sk-back-4);
305+
}
293306
}
294307
295308
.file-tabs {
@@ -303,22 +316,43 @@
303316
.file-tabs .button,
304317
.add-new {
305318
position: relative;
306-
display: inline-block;
319+
display: inline-flex;
320+
align-items: center;
321+
justify-content: center;
307322
font: var(--sk-font-size-ui-small) / 1.8rem var(--sk-font-ui);
308-
background: var(--sk-back-1);
309323
border: none;
310-
border-bottom: 3px solid transparent;
311-
padding: 12px 14px 8px 16px;
324+
padding: 0 1rem;
325+
height: 100%;
326+
aspect-ratio: 1;
312327
margin: 0;
313328
color: var(--sk-text-3);
314329
border-radius: 0;
315330
cursor: pointer;
316331
}
317332
318-
.file-tabs .button.active {
319-
/* color: var(--second); */
320-
color: var(--sk-text-2, #333);
321-
border-bottom: 3px solid var(--sk-theme-1);
333+
.add-new {
334+
background: url(./file-new.svg) 50% 50% no-repeat;
335+
background-size: 1em;
336+
}
337+
338+
.file-tabs .button {
339+
padding: 0 1rem 0 2em;
340+
341+
.drag-handle {
342+
cursor: move;
343+
width: 2em;
344+
height: 100%;
345+
position: absolute;
346+
left: 0em;
347+
top: 0;
348+
background: url(./file.svg) 50% 50% no-repeat;
349+
background-size: 1em;
350+
}
351+
352+
&.active {
353+
color: var(--sk-text-2, #333);
354+
border-bottom: 1px solid var(--sk-theme-1);
355+
}
322356
}
323357
324358
.editable,
@@ -331,19 +365,27 @@
331365
}
332366
333367
.input-sizer {
368+
display: flex;
334369
color: var(--sk-text-3, #ccc);
335370
}
336371
337372
input {
338373
position: absolute;
339374
width: 100%;
340-
left: 16px;
341-
top: 12px;
342-
font: 400 12px/1.5 var(--sk-font-body);
343375
border: none;
344-
color: var(--sk-theme-3);
376+
color: var(--sk-theme-1);
345377
outline: none;
346378
background-color: transparent;
379+
top: 0;
380+
left: 0;
381+
height: 100%;
382+
display: flex;
383+
align-items: center;
384+
justify-content: center;
385+
font-family: var(--sk-font-ui);
386+
font-size: var(--sk-font-size-ui-small);
387+
padding: 0 1rem 1px 2em;
388+
box-sizing: border-box;
347389
}
348390
349391
.duplicate {
@@ -406,27 +448,6 @@
406448
justify-content: flex-end;
407449
}
408450
409-
.drag-handle {
410-
cursor: move;
411-
width: 5px;
412-
height: 25px;
413-
position: absolute;
414-
left: 5px;
415-
top: 9px;
416-
--drag-handle-color: #dedede;
417-
background: linear-gradient(
418-
to right,
419-
var(--sk-back-4, --drag-handle-color) 1px,
420-
var(--sk-back-1, white) 1px,
421-
var(--sk-back-1, white) 2px,
422-
var(--sk-back-4, --drag-handle-color) 2px,
423-
var(--sk-back-4, --drag-handle-color) 3px,
424-
var(--sk-back-1, white) 3px,
425-
var(--sk-back-1, white) 4px,
426-
var(--sk-back-4, --drag-handle-color) 4px
427-
);
428-
}
429-
430451
svg {
431452
position: relative;
432453
overflow: hidden;

‎packages/repl/src/lib/Input/file-new.svg

Lines changed: 3 additions & 0 deletions
Loading

‎packages/repl/src/lib/Input/file.svg

Lines changed: 3 additions & 0 deletions
Loading

‎packages/repl/src/lib/InputOutputToggle.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
align-items: center;
2525
justify-content: center;
2626
width: 100%;
27-
height: 42px;
27+
height: var(--pane-controls-h);
2828
border-top: 1px solid var(--sk-theme-2);
2929
z-index: 2;
3030
}

‎packages/repl/src/lib/Output/Output.svelte

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -106,28 +106,38 @@
106106

107107
<style>
108108
.view-toggle {
109-
height: 4.2rem;
110-
border-bottom: 1px solid var(--sk-text-4);
109+
height: var(--pane-controls-h);
110+
overflow: hidden;
111111
white-space: nowrap;
112112
box-sizing: border-box;
113+
114+
/* fake border (allows tab borders to appear above it) */
115+
&::before {
116+
content: '';
117+
position: absolute;
118+
width: 100%;
119+
height: 1px;
120+
bottom: 0px;
121+
left: 0;
122+
background-color: var(--sk-back-4);
123+
}
113124
}
114125
115126
button {
116-
/* width: 50%;
117-
height: 100%; */
118-
background: var(--sk-back-1, white);
127+
height: 100%;
128+
background: transparent;
119129
text-align: left;
120130
position: relative;
121131
font: var(--sk-font-size-ui-small) / 1.8rem var(--sk-font-ui);
122132
border: none;
123-
border-bottom: 3px solid transparent;
124-
padding: 12px 12px 8px 12px;
133+
border-bottom: 1px solid transparent;
134+
padding: 0 1rem;
125135
color: var(--sk-text-2, #999);
126136
border-radius: 0;
127137
}
128138
129139
button.active {
130-
border-bottom: 3px solid var(--sk-theme-1, --prime);
140+
border-bottom: 1px solid var(--sk-theme-1, --prime);
131141
color: var(--sk-text-1, #333);
132142
}
133143
@@ -138,7 +148,7 @@
138148
.tab-content {
139149
position: absolute;
140150
width: 100%;
141-
height: calc(100% - 42px) !important;
151+
height: calc(100% - var(--pane-controls-h)) !important;
142152
visibility: hidden;
143153
pointer-events: none;
144154
}
@@ -147,6 +157,7 @@
147157
visibility: visible;
148158
pointer-events: all;
149159
}
160+
150161
iframe {
151162
width: 100%;
152163
height: 100%;

‎packages/repl/src/lib/Output/PaneWithPanel.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656

5757
<style>
5858
.panel-header {
59-
height: 42px;
59+
height: var(--pane-controls-h);
6060
display: flex;
6161
justify-content: space-between;
6262
align-items: center;

0 commit comments

Comments
 (0)