Commit 4b1c31ae7dd3ae3fce434f77355fd0bb0ecbbbbd
move nav bar order, pin back button to top of page
mix irving committed on 8/16/2017, 7:55:19 AMParent: 3287f6b02c40d45d8b653ff1fbbc5f699072519c
Files changed
| app/html/app.js | changed |
| app/html/nav.mcss | changed |
| app/html/header.mcss | added |
| package-lock.json | changed |
| app/html/app.js | ||
|---|---|---|
| @@ -23,15 +23,13 @@ | ||
| 23 | 23 | exports.create = (api) => { |
| 24 | 24 | |
| 25 | 25 | var nav = HyperNav(api.router.sync.router, function (nav) { |
| 26 | 26 | return h('Header', [ |
| 27 | - h('h1', [ | |
| 28 | - computed(nav.last, function (e) { return e.element.title }) | |
| 29 | - ]), | |
| 30 | - h('Nav', [ | |
| 27 | + h('nav', [ | |
| 31 | 28 | h('div.back', { 'ev-click': nav.back }, '←'), |
| 32 | 29 | h('div', { 'ev-click': () => nav.push({page:'home'}) }, 'Home') |
| 33 | - ]) | |
| 30 | + ]), | |
| 31 | + h('h1', computed(nav.last, e => e.element.title)), | |
| 34 | 32 | ]) |
| 35 | 33 | }) |
| 36 | 34 | |
| 37 | 35 | return nest({ |
| app/html/nav.mcss | ||
|---|---|---|
| @@ -1,28 +1,0 @@ | ||
| 1 | -Nav { | |
| 2 | - display: flex | |
| 3 | - align-items: center | |
| 4 | - | |
| 5 | - margin: 0 0 1rem 1rem | |
| 6 | - | |
| 7 | - a, div { | |
| 8 | - color: #222 | |
| 9 | - margin-right: 1rem | |
| 10 | - | |
| 11 | - :hover { | |
| 12 | - text-decoration: underline | |
| 13 | - } | |
| 14 | - } | |
| 15 | - | |
| 16 | - div.back { | |
| 17 | - border: 1px solid #ddd | |
| 18 | - padding: 0 0.2em; | |
| 19 | - font-size: 1.4rem; | |
| 20 | - border-radius: 4px | |
| 21 | - | |
| 22 | - :hover { | |
| 23 | - text-decoration: none | |
| 24 | - border-color: #222 | |
| 25 | - } | |
| 26 | - } | |
| 27 | -} | |
| 28 | - | |
| app/html/header.mcss | ||
|---|---|---|
| @@ -1,0 +1,42 @@ | ||
| 1 | +Header { | |
| 2 | + margin: 1rem 0 0 1rem | |
| 3 | + | |
| 4 | + nav { | |
| 5 | + display: flex | |
| 6 | + align-items: center | |
| 7 | + | |
| 8 | + position: fixed | |
| 9 | + top: 0 | |
| 10 | + left: 0 | |
| 11 | + background: #fff | |
| 12 | + width: 100% | |
| 13 | + padding: 1rem | |
| 14 | + | |
| 15 | + a, div { | |
| 16 | + color: #222 | |
| 17 | + margin-right: 1rem | |
| 18 | + | |
| 19 | + :hover { | |
| 20 | + text-decoration: underline | |
| 21 | + } | |
| 22 | + } | |
| 23 | + | |
| 24 | + div.back { | |
| 25 | + border: 1px solid #ddd | |
| 26 | + padding: 0 0.2em; | |
| 27 | + font-size: 1.4rem; | |
| 28 | + border-radius: 4px | |
| 29 | + | |
| 30 | + :hover { | |
| 31 | + text-decoration: none | |
| 32 | + border-color: #222 | |
| 33 | + } | |
| 34 | + } | |
| 35 | + } | |
| 36 | + | |
| 37 | + h1 { | |
| 38 | + margin-top: 4rem | |
| 39 | + | |
| 40 | + } | |
| 41 | +} | |
| 42 | + | |
| package-lock.json | ||
|---|---|---|
| The diff is too large to show. Use a local git client to view these changes. Old file size: 191797 bytes New file size: 192040 bytes |
Built with git-ssb-web