Skip to content
This repository was archived by the owner on Dec 23, 2021. It is now read-only.

Commit e719982

Browse files
joehandjoehand
committed
use wrapper and make header standalone component
1 parent b1ff337 commit e719982

14 files changed

Lines changed: 111 additions & 143 deletions

File tree

‎client/js/components/auth/user-panel.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ const prefix = css`
7777
module.exports = function (state, emit) {
7878
if (!state.township.username) return
7979

80-
return html`<div class="user-panel ${prefix} ${state.township.sidePanel}">
80+
return html`<div class="user-panel tl mr2 mr4-l ${prefix} ${state.township.sidePanel}">
8181
<a class="close-button" title="Close" href="#" onclick=${() => emit('township:sidePanel')}>
8282
<svg>
8383
<use xlink:href="#daticon-cross" />

‎client/js/components/header.js‎

Lines changed: 29 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -5,46 +5,42 @@ const importButton = require('../elements/import-button')
55
const loginButton = require('../components/login-button')
66
const message = require('../elements/message')
77

8-
var headerStyles = css`
9-
:host {
10-
height: var(--site-header-height);
11-
background-color: var(--color-white);
12-
border-bottom: 1px solid var(--color-neutral-10);
13-
}
14-
`
15-
16-
var navStyles = css`
8+
const logoCss = css`
179
:host {
18-
display: flex;
19-
height: var(--site-header-height);
20-
align-items: center;
10+
img {
11+
transition: transform .5s ease-in-out;
12+
width: inherit;
13+
}
14+
&:hover, &:focus {
15+
img {
16+
transform: rotate(360deg);
17+
}
18+
}
2119
}
2220
`
2321

24-
const header = (state, emit) => {
25-
return html`<div>
26-
<header class="relative ${headerStyles}">
22+
module.exports = function (state, emit) {
23+
return html`
24+
<header>
2725
${message(state.message)}
28-
<div class="container container--top-bar">
29-
<div class="flex justify-between items-center relative">
30-
${panel(state, emit)}
31-
<nav class="flex items-center ${navStyles}">
32-
<a href="/" data-no-routing class="dat-logo">
33-
<img src="/public/img/dat-hexagon.svg" />
34-
<span class="dat-logo__word">Dat</span>
35-
</a>
36-
${importButton(emit)}
37-
<a href="/explore" data-no-routing class="header-nav-link">Explore</a>
38-
<a href="/install" class="header-nav-link">Install</a>
39-
</nav>
40-
<div>
41-
${state.township.email ? html`<a href="/publish" class="btn btn--green">Publish</a>` : ''}
26+
<nav class="bg-white bb b--neutral-10 dt w-100 w-100 border-box pa2 ph4-l">
27+
<div class="dtc v-mid w-75">
28+
<a class="${logoCss} v-mid dib link dim mr2 w2 h2" href="/" title="DatBase">
29+
<img src="/public/img/dat-hexagon.svg" alt="Dat Logo">
30+
</a>
31+
<a class="mr3 v-mid link dim color-neutral hover-color-neutral b f5 f3-ns dib-ns dn" href="/" title="DatBase">Dat<span class="color-neutral-60">Base</span></a>
32+
${importButton(emit)}
33+
<a href="http://docs.datproject.org" class="ml3 link dim color-neutral ttu tracked f6 f5-ns dib">Docs</a>
34+
<a href="http://chat.datproject.org" class="ml3 link dim color-neutral ttu tracked f6 f5-ns dib-l dn">Chat</a>
35+
</div>
36+
<div class="dtc v-mid w-25 tr">
37+
${state.township.email ? html`<a href="/publish" class="dib-ns dn btn btn--green">Publish</a>` : ''}
38+
<div class="dib">
4239
${loginButton(state, emit)}
4340
</div>
41+
${panel(state, emit)}
4442
</div>
45-
</div>
43+
</nav>
4644
</header>
47-
</div>`
45+
`
4846
}
49-
50-
module.exports = header

‎client/js/elements/footer/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ module.exports = function () {
3737
`
3838

3939
return html`
40-
<footer class="bg-neutral white">
40+
<footer class="bg-neutral white absolute bottom-0 w-100">
4141
<section class="pa2 ph4-m mw8-ns center-ns">
4242
<div class="pt2 cf">
4343
<div class="fl w-third">

‎client/js/elements/import-button/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ module.exports = function (emit) {
99
}
1010
}
1111
return html`<label for="import-dat" class="dat-input">
12-
<input name="import-dat" type="text" placeholder="Search" onkeydown=${keydown} class="dat-input__input dat-input__input--icon">
12+
<input name="import-dat" type="text" placeholder="view dat://" onkeydown=${keydown} class="dat-input__input dat-input__input--icon">
1313
<svg class="dat-input__icon pa1">
1414
<use xlink:href="#daticon-search" />
1515
</svg>

‎client/js/pages/archive/index.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
const html = require('choo/html')
2+
const wrapper = require('../wrapper')
23
const hyperdrive = require('../../components/hyperdrive')
34
const hyperhealth = require('../../components/health')
45
const copyButton = require('../../components/copy-button')
5-
const header = require('../../components/header')
66
const preview = require('../../components/preview')
77
const fourohfour = require('../../elements/404')
88
const error = require('../../elements/error')
@@ -28,8 +28,7 @@ const archivePage = (state, emit) => {
2828
var props = ARCHIVE_ERRORS[err.message]
2929
if (props) {
3030
return html`
31-
<div>
32-
${header(state, emit)}
31+
<div class="">
3332
${fourohfour(props)}
3433
</div>
3534
`
@@ -100,7 +99,6 @@ const archivePage = (state, emit) => {
10099

101100
return html`
102101
<div class="${styles}">
103-
${header(state, emit)}
104102
<div id="dat-info" class="dat-header">
105103
<div class="container">
106104
<div class="dat-header-actions-wrapper">
@@ -137,4 +135,4 @@ const archivePage = (state, emit) => {
137135
</div>`
138136
}
139137

140-
module.exports = archivePage
138+
module.exports = wrapper(archivePage)

‎client/js/pages/download.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
const html = require('choo/html')
2-
const header = require('../components/header')
2+
const wrapper = require('./wrapper')
33

4-
module.exports = function (state, emit) {
4+
module.exports = wrapper(function (state, emit) {
55
return html`
66
<div>
7-
${header(state, emit)}
87
<section class="section">
98
<div class="container">
109
<h1>Desktop app</h1>
@@ -44,4 +43,4 @@ module.exports = function (state, emit) {
4443
</section>
4544
</div>
4645
`
47-
}
46+
})

‎client/js/pages/fourohfour.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
const html = require('choo/html')
2-
const header = require('../components/header')
2+
const wrapper = require('./wrapper')
33
const four = require('../elements/404')
44

5-
module.exports = function (state, emit) {
5+
module.exports = wrapper(function fourohfour (state, emit) {
66
return html`
77
<div>
8-
${header(state, emit)}
98
${four()}
109
</div>
1110
`
12-
}
11+
})

‎client/js/pages/publish/index.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
const html = require('choo/html')
2-
const header = require('./../../components/header')
2+
const wrapper = require('../wrapper')
33

44
const publish = (state, emit) => {
55
return html`
6-
<div>
7-
${header(state, emit)}
8-
6+
<div class="">
97
<section class="section bg-splash-02" id="publish">
108
<div class="container">
119
<div class="col-xs-12 col-sm-5 flex flex-column justify-center">
@@ -24,4 +22,4 @@ $ dat publish</code></pre>
2422
</div>`
2523
}
2624

27-
module.exports = publish
25+
module.exports = wrapper(publish)

‎client/js/pages/wrapper.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const html = require('choo/html')
2+
const header = require('../components/header')
3+
const footer = require('../elements/footer')
4+
5+
module.exports = function (view, opts) {
6+
return function (state, emit) {
7+
return html`
8+
<div class="min-vh-100 pb7">
9+
${header(state, emit)}
10+
${view(state, emit)}
11+
${footer()}
12+
</div>
13+
`
14+
}
15+
}

‎client/scss/app.scss‎

Lines changed: 50 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@
1616
@import "imports/base";
1717
@import "imports/layout";
1818
@import "imports/grid";
19-
@import "imports/site-header";
20-
@import "imports/header-logo";
2119
@import "imports/sections";
2220
@import "imports/horizontal-rule";
2321
@import "imports/block-create";
@@ -90,3 +88,53 @@ pre {
9088
color: $color-neutral-70;
9189
line-height: 1.75;
9290
}
91+
.copy-link,
92+
.open-desktop {
93+
display: inline-block;
94+
white-space: nowrap;
95+
svg {
96+
max-width: 1em;
97+
height: 1em;
98+
fill: currentColor;
99+
vertical-align: -9%;
100+
}
101+
}
102+
103+
// Border colors
104+
// TODO: https://github.com/Kriesse/dat-colors/pull/5
105+
106+
.b--white { border-color: #FFFFFF }
107+
.b--black { border-color: #070B14 }
108+
.b--neutral { border-color: #293648 }
109+
.b--neutral-90 { border-color: #394B5B }
110+
.b--neutral-80 { border-color: #505F6D }
111+
.b--neutral-70 { border-color: #65737F }
112+
.b--neutral-60 { border-color: #7C8792 }
113+
.b--neutral-50 { border-color: #919BA4 }
114+
.b--neutral-40 { border-color: #A7AFB6 }
115+
.b--neutral-30 { border-color: #C3C9CD }
116+
.b--neutral-20 { border-color: #D3D7DB }
117+
.b--neutral-14 { border-color: #E0E3E5 }
118+
.b--neutral-10 { border-color: #E9EBEC }
119+
.b--neutral-04 { border-color: #F6F7F8 }
120+
.b--green { border-color: #2ACA4B }
121+
.b--green-hover { border-color: #199E33 }
122+
.b--green-darker { border-color: #006607 }
123+
.b--green-disabled { border-color: #94E4A5 }
124+
.b--blue { border-color: #007FFF }
125+
.b--blue-hover { border-color: #0066CC }
126+
.b--blue-darker { border-color: #003E83 }
127+
.b--blue-disabled { border-color: #7FBFFF }
128+
.b--mint { border-color: #159F84 }
129+
.b--mint-hover { border-color: #0B856D }
130+
.b--mint-darker { border-color: #045943 }
131+
.b--mint-disabled { border-color: #8ACFC1 }
132+
.b--yellow { border-color: #F2CD02 }
133+
.b--yellow-hover { border-color: #C4A500 }
134+
.b--yellow-darker { border-color: #9F7D07 }
135+
.b--yellow-disabled { border-color: #FBF0B3 }
136+
.b--red { border-color: #D8524E }
137+
.b--red-hover { border-color: #B33C38 }
138+
.b--red-darker { border-color: #A52724 }
139+
.b--red-disabled { border-color: #EBA8A6 }
140+
.b--pink { border-color: #F9A5E4 }

0 commit comments

Comments
 (0)