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="M7,12L17,12"/>
</symbol>
<symbol id="chevron" class="icon" viewBox="0 0 24 24">
<path d="M2,7 L12,17 L20,7"/>
</symbol>
</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>
import { onMount } from 'svelte';
import Icon from './Icon.html';
import Logo from './Logo.html';
export let segment;
let open = false;
let nav;
function toggleOpen() {
// if the menu is closing, scroll back to the top *after* it
// shuts. otherwise, scroll back to the top immediately
// (just in case the user reopened before it happened).
// The reason we don't just do it when the menu opens is
// that the scrollbar visibly flashes
if (open) {
setTimeout(() => {
if (!open) {
nav.scrollTop = 0;
}
}, 350);
} else {
nav.scrollTop = 0;
// TODO remove this post-https://github.com/sveltejs/svelte/issues/1914
let ul;
onMount(() => {
function handler(event) {
if (!open) {
event.preventDefault();
event.stopPropagation();
open = true;
}
}
open = !open;
}
ul.addEventListener('touchstart', handler, {
capture: true
});
return () => {
ul.removeEventListener('touchstart', handler, {
capture: true
});
};
});
</script>
<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 {
position: fixed;
display: flex;
@ -65,20 +44,23 @@
box-shadow: 0 -0.4rem 0.9rem 0.2rem rgba(0,0,0,.5);
font-family: var(--font);
z-index: 10;
user-select: none;
}
nav {
position: fixed;
width: calc(var(--sidebar-w) + 6rem);
height: calc(100vh - var(--nav-h));
top: var(--nav-h);
padding: 6rem 3rem 6rem 6rem;
background-color: hsla(240, 8%, 15%, .9);
box-shadow: .3rem .3rem .6rem -.2rem rgba(0,0,0,.7);
transform: translate(-120vw, 0);
transition: transform .1s var(--in-cubic);
z-index: 5;
user-select: none;
top: 0;
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;
}
h2 {
@ -88,8 +70,6 @@
}
.open {
transform: translate(-5rem,0);
transition: transform .2s var(--out-cubic);
overflow-y: auto;
}
@ -99,17 +79,63 @@
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;
/* padding: 1.7rem 0 0; */
text-align: right
}
.primary li a {
ul.open::after {
display: none;
}
ul li a {
font-size: var(--h6);
padding: 0 .8rem;
}
ul.open li a {
font-size: var(--h6);
padding: 2rem .7rem 0 .8rem;
display: block;
}
.primary :global(svg) {
width: 2rem;
height: 2rem;
@ -133,7 +159,7 @@
}
.logotype {
display: none;
display: block;
font-size: 2.8rem;
letter-spacing: .12em;
line-height: 1;
@ -157,73 +183,58 @@
color: var(--prime)
}
/* media-queries -------------------------- */
@media (min-width: 768px) {
.mousecatcher,
.menu-link,
.secondary { display: none }
nav {
position: fixed;
top: 0;
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;
ul {
padding: 0;
background: none;
}
ul::after {
display: none;
}
.primary:first-of-type li {
display: inline;
li {
display: inline !important;
}
.logotype { display: block }
.hide-if-desktop {
display: none !important;
}
}
</style>
<div class='{open ? "open": "closed"} mousecatcher' on:click="{() => open = false}" />
<svelte:window on:click="{() => open = false}"/>
<header>
<span class='menu-link' on:click="{toggleOpen}">
{#if open}
<Icon name='close' />
{:else}
<Icon name='menu' />
{/if}
</span>
<nav bind:this={nav} class='{open ? "open": "closed"}' on:click="{() => open = false}" >
<nav>
<a rel="prefetch" href='.' class="home" title='Homepage'>
<h2 class='logotype'>Svelte</h2>
</a>
<ul class='primary'>
<li><a rel='prefetch' class='{segment === "guide" ? "active": ""}' href='guide'>Guide</a></li>
<li><a rel='prefetch' class='{segment === "repl" ? "active": ""}' href='repl'>REPL</a></li>
<li><a rel='prefetch' class='{segment === "blog" ? "active": ""}' href='blog'>Blog</a></li>
<li><a href='https://sapper-redesign.now.sh'>Sapper</a></li>
<ul
bind:this={ul}
class="primary"
class:open
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>
<a href='https://discord.gg/yy75DKs' title='Discord Chat'>
<Icon name='message-square' />
<a href="https://discord.gg/yy75DKs" title="Discord Chat">
<Icon name="message-square" />
</a>
</li>
<li>
<a href='https://github.com/sveltejs/svelte' title='Github Repo'>
<Icon name='github' />
<a href="https://github.com/sveltejs/svelte" title="Github Repo">
<Icon name="github" />
</a>
</li>
</ul>
<!-- <ul class='secondary'>
</ul> -->
</nav>
</header>

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

@ -26,24 +26,10 @@
<style>
.posts {
/* display: grid; */
grid-template-columns: 1fr 1fr;
grid-gap: 1em;
/* prevent scroll bar pop-in when navigating to post */
/* yes this is hacktacular */
min-height: calc(100vh - var(--nav-h));
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; */
padding: var(--top-offset) 0;
}
h2 {
@ -83,9 +69,6 @@
color: var(--second);
}
/* fast link-reset */
/* .posts a { all: unset; cursor: pointer } */
.post > a {
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));
margin: 0 auto;
-moz-tab-size: 2;
padding: var(--top-offset) var(--side-nav);
padding: var(--top-offset) 0;
tab-size: 2;
}

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

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

2
site/static/global.css
Unescape View File

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