-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.html
171 lines (136 loc) · 5.97 KB
/
main.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<head>
<title>Effective Altruism Profiles</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
</head>
<body>
{{> main}}
</body>
<template name="main">
<div class="pure-menu pure-menu-open pure-menu-horizontal">
<a class="pure-menu-heading" href="{{listPath}}">EA Profiles</a>
<ul>
<li><a href="{{listPath}}">List</a></li>
<li><a href="{{mapPath}}">Map</a></li>
{{#if currentUser}}<li><a href="{{formPath}}">Edit Profile</a></li>{{/if}}
{{#unless currentUser}}<li>Create your profile:</li>{{/unless}}
<li>{{loginButtons}}</li>
</ul>
</div>
{{#isolate}}
{{renderPage}}
{{/isolate}}
</template>
<template name="list">
<div class="quote">
<p>Effective altruists (EAs) apply evidence and reason to working out the most effective ways to improve the world.</p>
<p>They consider all causes, and then act to bring about the greatest positive impact.</p>
</div>
<div class="list">
<div class="pure-g-r">
{{#each users}}
<div class="pure-u-1-3" style="padding: 2em">
<div class="profile" href="{{profilePath _id}}">
<img src="{{getPhotoURL profile 250 250}}"
style="float:left; margin-right: 1em" />
<div style="font-weight: bold">{{profile.name}}</div>
{{profile.doingNow}}
<div style="clear:both"><div>
</a>
</div>
{{/each}}
</div>
</div>
</template>
<template name="profile">
<div class="active-profile">
<div class="pure-g-r">
<div class="pure-u-1-4 padded">
<img src="{{getPhotoURL profile 250 250}}" class="photo" />
<h1>{{profile.name}}</h1>
<p>{{profile.doingNow}}</p>
<div><a href="mailto:{{email}}">{{profile.email}}</a></div>
{{#if profile.canContact}}
<p>{{profile.contactEncouragement}}</p>
{{/if}}
{{#if profile.canHost}}
<p>{{profile.hostEncouragement}}</p>
{{/if}}
</div>
<div class="pure-u-3-4 padded">
{{#if profile.bio}}
<h2 style="margin-top:0">Bio</h2>
<p>{{profile.bio}}</p>
{{/if}}
<div class="pure-g-r">
<div class="pure-u-1-2">
{{#if profile.areasOfInterest}}
<h2>Areas Of Interest</h2>
{{profile.areasOfInterest}}
{{/if}}
</div>
<div class="pure-u-1-2">
{{#if profile.areasOfExpertise}}
<h2>Areas Of Expertise</h2>
{{profile.areasOfExpertise}}
{{/if}}
</div>
</div>
</div>
</div>
</div>
</template>
<template name="form">
<form class="pure-form pure-form-stacked profile">
<fieldset>
<div class="pure-g-r">
<div class="pure-u-1-4 padded">
<label for="name" class="required">Name</label>
<input id="name" class="pure-input-1" type="text" value="{{profile.name}}" placeholder="Name">
<label for="email" class="required">Email Address</label>
<input id="email" class="pure-input-1" type="text" value="{{email}}" placeholder="Email Address">
<label>Photo</label>
<div class="photo-container js-pick-photo">
<img src="{{getPhotoURL profile 250 250}}">
<span class="photo-instructions">Pick Photo</span>
</div>
<label for="location">Location</label>
<input id="location" type="text" class="pure-input-1" placeholder="Type in an intersection" value="{{profile.location}}" />
{{#constant}}
<div class="map_canvas"></div>
{{/constant}}
<fieldset id="geocomplete_info">
<input name="lat" id="lat" type="text" value="">
<input name="lng" id="lng" type="text" value="">
</fieldset>
</div>
<div class="pure-u-3-4 padded">
<label for="doingNow" class="required">What Are You Doing?</label>
<input id="doingNow" type="text" class="pure-input-1" value="{{profile.doingNow}}" placeholder="e.g., I'm earning to give at a financial institution">
<label for="bio">Bio</label>
<textarea id="bio" type="text" class="pure-input-1" value="">{{profile.bio}}</textarea>
<div class="pure-g-r">
<div class="pure-u-1-2" style="padding-right:1em">
<label for="areasOfInterest">Areas Of Interest</label>
<textarea id="areasOfInterest" type="text" class="pure-input-1" >{{profile.areasOfInterest}}</textarea>
</div>
<div class="pure-u-1-2">
<label for="areasOfExpertise">Areas Of Expertise</label>
<textarea id="areasOfExpertise" type="text" class="pure-input-1">{{profile.areasOfExpertise}}</textarea>
</div>
</div>
<label for="canContact"><input type="checkbox" id="canContact" {{#if profile.canContact}}checked{{/if}} /> Current and prospective EAs may reach out to me</label>
<label for="contactEncouragment">Contact details/encouragement</label>
<input id="contactEncouragement" type="text" class="pure-input-1" value="{{profile.contactEncouragement}}" placeholder="e.g., email me to set up a skype call / Happy to talk about X, Y, Z">
<label for="canHost"><input type="checkbox" id="canHost" {{#if profile.canHost}}checked{{/if}} /> I can host travelers</label>
<label for="hostEncouragment">Host details/encouragement</label>
<input id="hostEncouragement" type="text" class="pure-input-1" value="{{profile.hostEncouragement}}" placeholder="e.g., I only have a futon / I will throw massive parties in your honor ">
<button type="submit" class="pure-button pure-button-primary js-update-profile">Save Profile</button>
<button type="submit" class="pure-button js-deactivate-profile">Deactivate Profile</button>
</div>
</div>
</fieldset>
</form>
</template>
<template name="map">
<div id="bigmap_canvas"/>
</template>