Skip to content

Double decker nav #235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Oct 4, 2024
Merged

Double decker nav #235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c8e3b31
double decker nav
Rich-Harris Oct 4, 2024
6ac4a6c
WIP
Rich-Harris Oct 4, 2024
63b49af
Merge branch 'main' into double-decker-nav
Rich-Harris Oct 4, 2024
b121ab8
Merge branch 'main' into double-decker-nav
Rich-Harris Oct 4, 2024
f282cff
tweak
Rich-Harris Oct 4, 2024
cd5a930
fix theme toggle glitch
Rich-Harris Oct 4, 2024
f0ea6e4
finesse
Rich-Harris Oct 4, 2024
4bec139
tweaks
Rich-Harris Oct 4, 2024
6114c39
unused
Rich-Harris Oct 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/svelte.dev/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@
"satori-html": "^0.3.2",
"shiki": "^1.6.4",
"shiki-twoslash": "^3.1.2",
"svelte": "5.0.0-next.243",
"svelte": "5.0.0-next.260",
"svelte-check": "^4.0.0",
"svelte-preprocess": "^5.1.4",
"tiny-glob": "^0.2.9",
Expand Down
6 changes: 5 additions & 1 deletion apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@
position: relative;
height: calc(100% - var(--sk-nav-height) - var(--sk-banner-bottom-height));
height: calc(100dvh - var(--sk-nav-height) - var(--sk-banner-bottom-height));
--app-controls-h: 5.6rem;
--app-controls-h: 5rem;
--pane-controls-h: 4.2rem;
overflow: hidden;
background-color: var(--sk-back-1);
Expand All @@ -115,6 +115,10 @@
box-sizing: border-box;
display: flex;
flex-direction: column;

@media (min-width: 800px) {
--app-controls-h: 4rem;
}
}

/* temp fix for #2499 and #2550 while waiting for a fix for https://github.com/sveltejs/svelte-repl/issues/8 */
Expand Down
35 changes: 20 additions & 15 deletions apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,10 +268,27 @@ export default app;`
align-items: center;
justify-content: space-between;
padding: 0.6rem var(--sk-page-padding-side);
background-color: var(--sk-back-4);
background-color: var(--sk-back-2);
color: var(--sk-text-1);
white-space: nowrap;
flex: 0;
gap: 2rem;

&::after {
content: '';
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 4px;
z-index: 2;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), transparent);
}

@media (min-width: 800px) {
padding-top: 0;
padding-bottom: 1rem;
}
}

.buttons {
Expand Down Expand Up @@ -311,24 +328,12 @@ export default app;`
border: none;
color: currentColor;
font-family: var(--sk-font-ui);
opacity: 0.7;
outline: none;
flex: 1;
margin: 0 0.2em 0 0.4rem;
padding-top: 0.2em;
border-bottom: 1px solid transparent;
margin: 0 0.2em 0 0rem;
padding: 0.2rem;
font-size: var(--sk-font-size-ui-medium);
}

input:hover {
border-bottom: 1px solid currentColor;
opacity: 1;
}
input:focus {
border-bottom: 1px solid currentColor;
opacity: 1;
}

button span {
display: none;
}
Expand Down
6 changes: 5 additions & 1 deletion apps/svelte.dev/src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,11 @@

<Shell nav_visible={$page.route.id !== '/(authed)/playground/[id]/embed'}>
{#snippet top_nav()}
<Nav title={data.nav_title} links={data.nav_links}>
<Nav
title={data.nav_title}
links={data.nav_links}
shadow={!$page.route.id?.startsWith('/(authed)/playground')}
>
{#snippet search()}
<Search />
{/snippet}
Expand Down
1 change: 1 addition & 0 deletions apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
ul {
margin: 0;
list-style: none;
font-size: var(--sk-font-size-body-small);
}

/* Only show the title link if it's in the sidebar */
Expand Down
2 changes: 1 addition & 1 deletion packages/repl/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
"esrap": "^1.2.2",
"marked": "^14.1.2",
"resolve.exports": "^2.0.2",
"svelte": "^5.0.0-next.243",
"svelte": "5.0.0-next.260",
"zimmerframe": "^1.1.2"
}
}
105 changes: 63 additions & 42 deletions packages/repl/src/lib/Input/ComponentSelector.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,7 @@
on:drop|preventDefault={dragEnd}
>
<i class="drag-handle"></i>

{#if file.name === 'App' && filename !== editing_name}
<div class="uneditable">
App.svelte{#if show_modified && file.modified}*{/if}
Expand All @@ -226,7 +227,9 @@

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

<!-- svelte-ignore a11y_autofocus -->
Expand Down Expand Up @@ -272,12 +275,12 @@
{/each}
</div>

<button class="add-new" on:click={add_new} title="add new component">
<svg width="12" height="12" viewBox="0 0 24 24">
<line stroke="#999" x1="12" y1="5" x2="12" y2="19" />
<line stroke="#999" x1="5" y1="12" x2="19" y2="12" />
</svg>
</button>
<button
class="add-new"
on:click={add_new}
aria-label="add new component"
title="add new component"
></button>

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

Expand All @@ -287,9 +290,19 @@
<style>
.component-selector {
position: relative;
border-bottom: 1px solid var(--sk-text-4);
/* overflow: hidden; */
display: flex;
padding: 0 1rem 0 0;

/* fake border (allows tab borders to appear above it) */
&::before {
content: '';
position: absolute;
width: 100%;
height: 1px;
bottom: 0px;
left: 0;
background-color: var(--sk-back-4);
}
}

.file-tabs {
Expand All @@ -303,22 +316,43 @@
.file-tabs .button,
.add-new {
position: relative;
display: inline-block;
display: inline-flex;
align-items: center;
justify-content: center;
font: var(--sk-font-size-ui-small) / 1.8rem var(--sk-font-ui);
background: var(--sk-back-1);
border: none;
border-bottom: 3px solid transparent;
padding: 12px 14px 8px 16px;
padding: 0 1rem;
height: 100%;
aspect-ratio: 1;
margin: 0;
color: var(--sk-text-3);
border-radius: 0;
cursor: pointer;
}

.file-tabs .button.active {
/* color: var(--second); */
color: var(--sk-text-2, #333);
border-bottom: 3px solid var(--sk-theme-1);
.add-new {
background: url(./file-new.svg) 50% 50% no-repeat;
background-size: 1em;
}

.file-tabs .button {
padding: 0 1rem 0 2em;

.drag-handle {
cursor: move;
width: 2em;
height: 100%;
position: absolute;
left: 0em;
top: 0;
background: url(./file.svg) 50% 50% no-repeat;
background-size: 1em;
}

&.active {
color: var(--sk-text-2, #333);
border-bottom: 1px solid var(--sk-theme-1);
}
}

.editable,
Expand All @@ -331,19 +365,27 @@
}

.input-sizer {
display: flex;
color: var(--sk-text-3, #ccc);
}

input {
position: absolute;
width: 100%;
left: 16px;
top: 12px;
font: 400 12px/1.5 var(--sk-font-body);
border: none;
color: var(--sk-theme-3);
color: var(--sk-theme-1);
outline: none;
background-color: transparent;
top: 0;
left: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--sk-font-ui);
font-size: var(--sk-font-size-ui-small);
padding: 0 1rem 1px 2em;
box-sizing: border-box;
}

.duplicate {
Expand Down Expand Up @@ -406,27 +448,6 @@
justify-content: flex-end;
}

.drag-handle {
cursor: move;
width: 5px;
height: 25px;
position: absolute;
left: 5px;
top: 9px;
--drag-handle-color: #dedede;
background: linear-gradient(
to right,
var(--sk-back-4, --drag-handle-color) 1px,
var(--sk-back-1, white) 1px,
var(--sk-back-1, white) 2px,
var(--sk-back-4, --drag-handle-color) 2px,
var(--sk-back-4, --drag-handle-color) 3px,
var(--sk-back-1, white) 3px,
var(--sk-back-1, white) 4px,
var(--sk-back-4, --drag-handle-color) 4px
);
}

svg {
position: relative;
overflow: hidden;
Expand Down
3 changes: 3 additions & 0 deletions packages/repl/src/lib/Input/file-new.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/repl/src/lib/Input/file.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion packages/repl/src/lib/InputOutputToggle.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
align-items: center;
justify-content: center;
width: 100%;
height: 42px;
height: var(--pane-controls-h);
border-top: 1px solid var(--sk-theme-2);
z-index: 2;
}
Expand Down
29 changes: 20 additions & 9 deletions packages/repl/src/lib/Output/Output.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,28 +106,38 @@

<style>
.view-toggle {
height: 4.2rem;
border-bottom: 1px solid var(--sk-text-4);
height: var(--pane-controls-h);
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;

/* fake border (allows tab borders to appear above it) */
&::before {
content: '';
position: absolute;
width: 100%;
height: 1px;
bottom: 0px;
left: 0;
background-color: var(--sk-back-4);
}
}

button {
/* width: 50%;
height: 100%; */
background: var(--sk-back-1, white);
height: 100%;
background: transparent;
text-align: left;
position: relative;
font: var(--sk-font-size-ui-small) / 1.8rem var(--sk-font-ui);
border: none;
border-bottom: 3px solid transparent;
padding: 12px 12px 8px 12px;
border-bottom: 1px solid transparent;
padding: 0 1rem;
color: var(--sk-text-2, #999);
border-radius: 0;
}

button.active {
border-bottom: 3px solid var(--sk-theme-1, --prime);
border-bottom: 1px solid var(--sk-theme-1, --prime);
color: var(--sk-text-1, #333);
}

Expand All @@ -138,7 +148,7 @@
.tab-content {
position: absolute;
width: 100%;
height: calc(100% - 42px) !important;
height: calc(100% - var(--pane-controls-h)) !important;
visibility: hidden;
pointer-events: none;
}
Expand All @@ -147,6 +157,7 @@
visibility: visible;
pointer-events: all;
}

iframe {
width: 100%;
height: 100%;
Expand Down
2 changes: 1 addition & 1 deletion packages/repl/src/lib/Output/PaneWithPanel.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@

<style>
.panel-header {
height: 42px;
height: var(--pane-controls-h);
display: flex;
justify-content: space-between;
align-items: center;
Expand Down
Loading
Loading