msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

better mobile styles

Browse Source
pull/1921/head
Rich Harris 6 years ago
parent c347e7344a
commit d7dc52a9de
7 changed files with 126 additions and 130 deletions
Show Stats Download Patch File Download Diff File

4
site/src/components/InlineSvg.html
Unescape View File

@ -108,4 +108,8 @@
<path d="M15,7L18,7A2 2 0 0 1 18,17L15,17"/> <path d="M15,7L18,7A2 2 0 0 1 18,17L15,17"/>
<path d="M7,12L17,12"/> <path d="M7,12L17,12"/>
</symbol> </symbol>
<symbol id="chevron" class="icon" viewBox="0 0 24 24">
<path d="M2,7 L12,17 L20,7"/>
</symbol>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

217
site/src/components/TopNav.html
Unescape View File

@ -1,57 +1,36 @@
<script> <script>
import { onMount } from 'svelte';
import Icon from './Icon.html'; import Icon from './Icon.html';
import Logo from './Logo.html'; import Logo from './Logo.html';
export let segment; export let segment;
let open = false; let open = false;
let nav;
// TODO remove this post-https://github.com/sveltejs/svelte/issues/1914
function toggleOpen() { let ul;
// if the menu is closing, scroll back to the top *after* it onMount(() => {
// shuts. otherwise, scroll back to the top immediately function handler(event) {
// (just in case the user reopened before it happened). if (!open) {
// The reason we don't just do it when the menu opens is event.preventDefault();
// that the scrollbar visibly flashes event.stopPropagation();
if (open) { open = true;
setTimeout(() => { }
if (!open) {
nav.scrollTop = 0;
}
}, 350);
} else {
nav.scrollTop = 0;
} }
open = !open; ul.addEventListener('touchstart', handler, {
} capture: true
});
return () => {
ul.removeEventListener('touchstart', handler, {
capture: true
});
};
});
</script> </script>
<style> <style>
/* Unfortunately I'm not able to understand mousecatcher */
.mousecatcher {
position: fixed;
left: 0;
top: 0;
width: 120vw;
height: 100vh;
background-color: black;
pointer-events: none;
opacity: 0;
transition: opacity .4s;
z-index: 3;
}
.mousecatcher.open {
pointer-events: all;
opacity: .3;
}
@keyframes fadein {
from { opacity: 0 }
to { opacity: 1 }
}
header { header {
position: fixed; position: fixed;
display: flex; display: flex;
@ -65,20 +44,23 @@
box-shadow: 0 -0.4rem 0.9rem 0.2rem rgba(0,0,0,.5); box-shadow: 0 -0.4rem 0.9rem 0.2rem rgba(0,0,0,.5);
font-family: var(--font); font-family: var(--font);
z-index: 10; z-index: 10;
user-select: none;
} }
nav { nav {
position: fixed; position: fixed;
width: calc(var(--sidebar-w) + 6rem); top: 0;
height: calc(100vh - var(--nav-h)); left: 0;
top: var(--nav-h); width: 100vw;
padding: 6rem 3rem 6rem 6rem; height: var(--nav-h);
background-color: hsla(240, 8%, 15%, .9); padding: 0 var(--side-nav) 0 var(--side-nav);
box-shadow: .3rem .3rem .6rem -.2rem rgba(0,0,0,.7); display: flex;
transform: translate(-120vw, 0); align-items: center;
transition: transform .1s var(--in-cubic); justify-content: space-between;
z-index: 5; background-color: transparent;
user-select: none; transform: none;
transition: none;
box-shadow: none;
} }
h2 { h2 {
@ -88,8 +70,6 @@
} }
.open { .open {
transform: translate(-5rem,0);
transition: transform .2s var(--out-cubic);
overflow-y: auto; overflow-y: auto;
} }
@ -99,17 +79,63 @@
margin: 0; margin: 0;
} }
.primary li { display: inline } li {
display: block;
display: none;
}
li.active {
display: block;
}
.primary:first-of-type li { ul {
position: relative;
padding: 0 2em 0 0;
background: url(/icons/chevron.svg) calc(100% - 1em) 70% no-repeat;
background-size: 1em 1em;
}
ul::after {
/* prevent clicks from registering if nav is closed */
position: absolute;
content: '';
width: 100%;
height: 100%;
left: 0;
top: 0;
}
ul.open {
padding: 0 2em 1em 2em;
background: white;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
border-radius: 0 0 var(--border-r) var(--border-r);
align-self: start;
}
ul.open li {
display: block; display: block;
/* padding: 1.7rem 0 0; */
text-align: right
} }
.primary li a { ul.open::after {
display: none;
}
ul li a {
font-size: var(--h6); font-size: var(--h6);
padding: 0 .8rem; padding: 0 .8rem;
} }
ul.open li a {
font-size: var(--h6);
padding: 2rem .7rem 0 .8rem;
display: block;
}
.primary :global(svg) { .primary :global(svg) {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
@ -133,7 +159,7 @@
} }
.logotype { .logotype {
display: none; display: block;
font-size: 2.8rem; font-size: 2.8rem;
letter-spacing: .12em; letter-spacing: .12em;
line-height: 1; line-height: 1;
@ -157,73 +183,58 @@
color: var(--prime) color: var(--prime)
} }
/* media-queries -------------------------- */
@media (min-width: 768px) { @media (min-width: 768px) {
.mousecatcher, ul {
.menu-link, padding: 0;
.secondary { display: none } background: none;
}
nav {
position: fixed; ul::after {
top: 0; display: none;
left: 0;
width: 100vw;
height: var(--nav-h);
padding: 0 var(--side-nav) 0 var(--side-nav);
display: flex;
align-items: center;
justify-content: space-between;
background-color: transparent;
transform: none;
transition: none;
box-shadow: none;
} }
.primary:first-of-type li { li {
display: inline; display: inline !important;
} }
.logotype { display: block } .hide-if-desktop {
display: none !important;
}
} }
</style> </style>
<div class='{open ? "open": "closed"} mousecatcher' on:click="{() => open = false}" /> <svelte:window on:click="{() => open = false}"/>
<header> <header>
<span class='menu-link' on:click="{toggleOpen}"> <nav>
{#if open}
<Icon name='close' />
{:else}
<Icon name='menu' />
{/if}
</span>
<nav bind:this={nav} class='{open ? "open": "closed"}' on:click="{() => open = false}" >
<a rel="prefetch" href='.' class="home" title='Homepage'> <a rel="prefetch" href='.' class="home" title='Homepage'>
<h2 class='logotype'>Svelte</h2> <h2 class='logotype'>Svelte</h2>
</a> </a>
<ul class='primary'> <ul
<li><a rel='prefetch' class='{segment === "guide" ? "active": ""}' href='guide'>Guide</a></li> bind:this={ul}
<li><a rel='prefetch' class='{segment === "repl" ? "active": ""}' href='repl'>REPL</a></li> class="primary"
<li><a rel='prefetch' class='{segment === "blog" ? "active": ""}' href='blog'>Blog</a></li> class:open
<li><a href='https://sapper-redesign.now.sh'>Sapper</a></li> on:mouseenter="{() => open = true}"
on:mouseleave="{() => open = false}"
>
<li class="hide-if-desktop" class:active="{!segment}"><a rel="prefetch" href=".">Home</a></li>
<li class:active="{segment === 'guide'}"><a rel="prefetch" href="guide">Guide</a></li>
<li class:active="{segment === 'repl'}"><a rel="prefetch" href="repl">REPL</a></li>
<li class:active="{segment === 'blog'}"><a rel="prefetch" href="blog">Blog</a></li>
<li><a href="https://sapper.svelte.technology">Sapper</a></li>
<li> <li>
<a href='https://discord.gg/yy75DKs' title='Discord Chat'> <a href="https://discord.gg/yy75DKs" title="Discord Chat">
<Icon name='message-square' /> <Icon name="message-square" />
</a> </a>
</li> </li>
<li> <li>
<a href='https://github.com/sveltejs/svelte' title='Github Repo'> <a href="https://github.com/sveltejs/svelte" title="Github Repo">
<Icon name='github' /> <Icon name="github" />
</a> </a>
</li> </li>
</ul> </ul>
<!-- <ul class='secondary'>
</ul> -->
</nav> </nav>
</header> </header>

19
site/src/routes/blog/index.html
Unescape View File

@ -26,24 +26,10 @@
<style> <style>
.posts { .posts {
/* display: grid; */
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-gap: 1em; grid-gap: 1em;
/* prevent scroll bar pop-in when navigating to post */
/* yes this is hacktacular */
min-height: calc(100vh - var(--nav-h)); min-height: calc(100vh - var(--nav-h));
padding: var(--top-offset) 0;
padding: 10rem var(--side-page);
/* background-color: var(--back-light) */
}
.post {
/* display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 4rem 3.2rem 2.4rem; */
} }
h2 { h2 {
@ -83,9 +69,6 @@
color: var(--second); color: var(--second);
} }
/* fast link-reset */
/* .posts a { all: unset; cursor: pointer } */
.post > a { .post > a {
display: block; display: block;
} }

2
site/src/routes/guide/index.html
Unescape View File

@ -108,7 +108,7 @@
max-width: calc(var(--main-width) + 2 * var(--side-nav)); max-width: calc(var(--main-width) + 2 * var(--side-nav));
margin: 0 auto; margin: 0 auto;
-moz-tab-size: 2; -moz-tab-size: 2;
padding: var(--top-offset) var(--side-nav); padding: var(--top-offset) 0;
tab-size: 2; tab-size: 2;
} }

8
site/src/routes/repl/index.html
Unescape View File

@ -143,7 +143,7 @@
overflow: hidden; overflow: hidden;
background-color: var(--back); background-color: var(--back);
padding: var(--app-controls-h) 0 0 0; padding: var(--app-controls-h) 0 0 0;
margin: 0 -0.8rem; margin: 0 calc(var(--side-nav) * -1);
box-sizing: border-box; box-sizing: border-box;
} }
@ -157,12 +157,6 @@
.pane { width: 100%; height: 100% } .pane { width: 100%; height: 100% }
@media (min-width: 600px) {
.repl-outer {
margin: 0 -4.8rem; /* can't do calc(0 - var(--side-nav)) */
}
}
.loading { .loading {
text-align: center; text-align: center;
color: var(--second); color: var(--second);

2
site/static/global.css
Unescape View File

@ -169,7 +169,7 @@ a:focus {
--sidebar-w: 24rem; --sidebar-w: 24rem;
--main-width: 80rem; --main-width: 80rem;
--code-w: 72em; --code-w: 72em;
--side-nav: .8rem; --side-nav: 1.6rem;
--side-page: var(--side-nav); --side-page: var(--side-nav);
/* easings */ /* easings */

4
site/static/icons/chevron.svg
Unescape View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
<path style="stroke: #676778; stroke-width: 2; fill: none" d="M2,8 L12,16 L22,8"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 221 B

Write Preview
Loading…
Cancel
Save