Skip to content

Commit ef3a54d

Browse files
committed
fnishing up
1 parent a9d628f commit ef3a54d

File tree

4 files changed

+56
-25
lines changed

4 files changed

+56
-25
lines changed

src/app.sass

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -611,9 +611,12 @@ p {
611611
}
612612

613613
.footer {
614-
min-height: 15em;
614+
min-height: 7em;
615615
background-color: #f2f2f2;
616616
color: #333;
617+
font-size: 1em;
618+
line-height: 7em;
619+
font-family: 'Arimo';
617620
}
618621
.icon-list {
619622
list-style: none;

src/index.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
6-
<title>react-weui</title>
6+
<title>Charlie Lin</title>
77
{{#if css}}
88
<style>
99
{{{ css }}}

src/view/contact.js

Lines changed: 50 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,51 @@ import { MoveOnScroll, moveOnScrollOpacity, showOnSeen } from '../hoc/moveOnScro
44
import { bubble } from '../components/chat/bubble'
55
import { iphone } from '../components/iphonemock/index'
66

7+
const data = {
8+
info: {
9+
title: 'Let\'s have a talk',
10+
intro: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem.',
11+
icons: [
12+
'fa fa-twitter',
13+
'fa fa-facebook',
14+
'fa fa-linkedin',
15+
'fa fa-google-plus'
16+
],
17+
address: {
18+
line1: '65-30 Kissena Blvd.',
19+
line2: 'CEP Hall 2',
20+
city: 'Queens, NY 11367'
21+
},
22+
phone: '888-898-8666',
23+
email: 'charlie@n7.tech'
24+
},
25+
chat: {
26+
name: 'Charlie',
27+
avatar: "assets/img/charlie.jpg",
28+
messages: [
29+
'Hey there!😃 What\'s up?!',
30+
'Checking out your profile you know..',
31+
'Ok cool, Let me know if you have any question 👄👄~~'
32+
]
33+
},
34+
map: {
35+
place: {
36+
lat: 40.738168, lng: -73.819524
37+
},
38+
bg: 'assets/img/newyork.jpg'
39+
}
40+
}
41+
742
export const contact = container => {
843

944
const chaticon = h('div', 'contact_chat-appbar_icon')
10-
const icons = ['fa fa-twitter',
11-
'fa fa-facebook',
12-
'fa fa-linkedin',
13-
'fa fa-google-plus'
14-
]
1545

16-
chaticon.style.backgroundImage = `url(assets/img/charlie.jpg)`
46+
chaticon.style.backgroundImage = `url(${data.chat.avatar})`
1747

1848
const mapEl = h('div', 'map')
1949
const mapBox = h('div', 'contact_numbers-block 2/3--desk', mapEl);
2050

21-
mapBox.style.backgroundImage = 'url(assets/img/newyork.jpg)'
51+
mapBox.style.backgroundImage = `url(${data.map.bg})`
2252
const btnMap = h('p', 'btn-map', 'View on the map', h('i', 'fa fa-map-o'))
2353

2454
btnMap.addEventListener('click', e=> {
@@ -31,7 +61,7 @@ export const contact = container => {
3161
})
3262

3363
function initMap() {
34-
const place = {lat: 40.738168, lng: -73.819524};
64+
const place = data.map.place;
3565
const map = new google.maps.Map(mapEl, {
3666
zoom: 12,
3767
center: place
@@ -49,42 +79,40 @@ export const contact = container => {
4979
h('div', '1/3--desk',
5080
MoveOnScroll(iphone(container,
5181
h('div', 'contact_chat',
52-
h('div', 'contact_chat-appbar', chaticon, h('p', 'contact_chat-appbar_name', 'Charlie')),
53-
showOnSeen(bubble('', 'Hey there!😃 What\'s up?!'), container, 'loud'),
82+
h('div', 'contact_chat-appbar', chaticon, h('p', 'contact_chat-appbar_name', data.chat.name)),
83+
showOnSeen(bubble('', data.chat.messages[0]), container, 'loud'),
5484
h('div','clear'),
55-
showOnSeen(bubble('', 'Checking out your profile you know..', true, 'blue ani-delay-15'), container, 'slam'),
85+
showOnSeen(bubble('', data.chat.messages[1], true, 'blue ani-delay-15'), container, 'slam'),
5686
h('div','clear'),
57-
showOnSeen(bubble('', 'Ok cool, Let me know if you have any question 👄👄~~', false, 'white ani-delay-30'), container, 'gentle')
87+
showOnSeen(bubble('', data.chat.messages[2], false, 'white ani-delay-30'), container, 'gentle')
5888
)
5989
), {container})
6090
),
6191
h('div', 'contact_content-detail 2/3--desk',
62-
moveOnScrollOpacity(header('Let\'s have a talk', 'Contacts', '', 'text-left'), {
92+
moveOnScrollOpacity(header(data.info.title, 'Contacts', '', 'text-left'), {
6393
container
6494
}),
65-
moveOnScrollOpacity(h(
66-
'p', 'contact_content-detail_intro',
67-
'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem.'),
95+
moveOnScrollOpacity(h( 'p', 'contact_content-detail_intro', data.info.intro),
6896
{container}, 15
6997
),
70-
moveOnScrollOpacity(h('ul', 'icon-list', icons.map( icon=> h('li', icon))),{
98+
moveOnScrollOpacity(h('ul', 'icon-list', data.info.icons.map( icon=> h('li', icon))),{
7199
container
72100
})
73101
)
74102
),
75103
h('div', 'contact_numbers',
76104
h('div', 'contact_numbers-detail 1/3--desk text-left',
77105
h('h5', '', 'Address'),
78-
h('p', '', '65-30 Kissena Blvd.'),
79-
h('p', '', 'CEP Hall 2'),
80-
h('p', '', 'Queens, NY 11367'),
106+
h('p', '', data.info.address.line1),
107+
h('p', '', data.info.address.line2),
108+
h('p', '', data.info.address.city),
81109
btnMap,
82110
h('br',''),
83111
h('h5', '', 'Phone'),
84-
h('p', '', '888-898-8666'),
112+
h('p', '', data.info.phone),
85113
h('br',''),
86114
h('h5', '', 'Email'),
87-
h('p', '', 'charlie@n7.tech')
115+
h('p', '', data.info.email)
88116
),
89117
mapBox
90118
)

src/view/footer.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@ import { MoveOnScroll, moveOnScrollOpacity, showOnSeen } from '../hoc/moveOnScro
33

44
export const footer = container => {
55

6-
return h('div', 'footer')
6+
return h('div', 'footer', 'Copyright 2016 Charlie Lin')
77

88
}

0 commit comments

Comments
 (0)