Skip to content

Commit 5ed2928

Browse files
nateperrynateperry
committed
Merge pull request #17 from codeRIT/feature/events
improved mobile view resolves #16, calendar api closes #12, closes #15
2 parents df912db + b9bb092 commit 5ed2928

File tree

6 files changed

+230
-37
lines changed

6 files changed

+230
-37
lines changed

‎_includes/events.html

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
1-
<ul class="event-list">
2-
{% for post in site.categories.events order:asc %}
3-
<li class="event">
4-
<h4 class="event-title">{{ post.title }}</h4>
5-
<ul class="event-info">
6-
<li><i class="fa fa-calendar-o"></i>{{ post.date | date: "%b %-d %Y"}}
7-
{% if post.time %}<li><i class="fa fa-clock-o"></i>{{ post.time }}{% endif %}
8-
<li><i class="fa fa-map-marker"></i>{{ post.location }}
9-
</ul>
10-
</li>
11-
{% endfor %}
12-
</ul>
1+
<div id="event-list-cta">
2+
<div class="center">
3+
<img class="loader" src="assets/css/loader.gif" />
4+
</div>
5+
</div>

‎_includes/foot.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,7 @@
44
</div>
55
</footer>
66
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
7+
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
78
<script type="text/javascript" src="/assets/scripts/main.js"></script>
9+
<script>function GAPILoad(){Events.init();}</script>
10+
<script src="https://apis.google.com/js/client.js?onload=GAPILoad"></script>

‎_sass/main.sass

Lines changed: 68 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
// general colors
66
$yellow : #FEE375
77
$white : #FFFFFF
8+
$grey-light : #888888
89
$grey-med : #505050
910
$grey-dark : #444444
1011
// logo colors
@@ -102,7 +103,7 @@ a
102103
background: url('coderit_background.png') center center fixed
103104
font-size: 1.25em
104105
height: 100%
105-
min-height: 200px
106+
min-height: 350px
106107
padding: 60px 0 80px
107108
text-align: center
108109
.logo
@@ -159,9 +160,15 @@ a
159160
color: $orange-light
160161
text-align: center
161162

163+
.loader
164+
max-width: 80px
165+
margin-top: 50%
166+
opacity: 0.6
167+
tranform: translateY(-50%)
162168
// SECTIONS
163169
.section
164-
padding: 90px 0
170+
padding-bottom: 90px
171+
padding-top: 90px
165172
.title
166173
margin-bottom: 110px
167174

@@ -206,11 +213,15 @@ a
206213
margin: 0 auto
207214
text-align: justify
208215
width: 50%
209-
.event-list
216+
217+
#event-list-cta
218+
margin: 0 auto 15px
219+
width: 65%
220+
#event-list
210221
list-style: none
211-
margin: 0 auto
212222
padding-left: 0
213-
width: 50%
223+
.event-page
224+
display: none
214225
.event
215226
color: $blue-light
216227
margin-bottom: 10px
@@ -223,6 +234,19 @@ a
223234
padding: 0
224235
.fa
225236
margin-right: 10px
237+
.event-page-nav
238+
background: $grey-light
239+
@include border-radius (4px)
240+
cursor: pointer
241+
display: inline-block
242+
height: 15px
243+
margin-right: 10px
244+
width: 15px
245+
&:hover
246+
background: $blue
247+
&.active
248+
background: $orange-light
249+
226250

227251
#committees
228252
.committee
@@ -288,7 +312,7 @@ a
288312
padding-top: 25px
289313

290314

291-
@media screen and (max-width: 798px)
315+
@media screen and (max-width: 768px)
292316
body
293317
font-size: 14px
294318
.grid-cta
@@ -299,16 +323,52 @@ a
299323
padding-right: 0
300324
width: 100% !important
301325

326+
.section
327+
padding-bottom: 15px
328+
padding-top: 15px
329+
.title
330+
margin-bottom: 25px
302331
#about
303332
.badge-cta
304333
margin-bottom: 40px
334+
.badge-icon
335+
font-size: 3em
336+
height: 100px
337+
width: 100px
305338
.badge-name
306339
margin: 0
307340

308341
#events
342+
padding-bottom: 20px
343+
padding-top: 20px
309344
.inner
310345
padding: 20px 10px
311346
p
312347
width: auto
313-
.event-list
314-
width: 100%
348+
#event-list
349+
width: 100%
350+
351+
#committees
352+
.committee
353+
display: block !important
354+
margin-left: 0
355+
text-align: left !important
356+
transform: none !important
357+
width: 100% !important
358+
.committee-info
359+
margin-left: 0 !important
360+
width: 100% !important
361+
362+
@media screen and (max-width: 400px)
363+
364+
#contact
365+
.grid-cta
366+
width: auto
367+
368+
#events
369+
.container
370+
background: $white
371+
.inner
372+
padding: 10px 3px
373+
#event-list-cta
374+
width: auto

‎assets/css/loader.gif

33.6 KB
Loading

‎assets/css/main.css

Lines changed: 78 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ a {
8383
background: url("coderit_background.png") center center fixed;
8484
font-size: 1.25em;
8585
height: 100%;
86-
min-height: 200px;
86+
min-height: 350px;
8787
padding: 60px 0 80px;
8888
text-align: center; }
8989
.banner.welcome .logo {
@@ -136,8 +136,15 @@ a {
136136
color: #f3852a;
137137
text-align: center; }
138138

139+
.loader {
140+
max-width: 80px;
141+
margin-top: 50%;
142+
opacity: 0.6;
143+
tranform: translateY(-50%); }
144+
139145
.section {
140-
padding: 90px 0; }
146+
padding-bottom: 90px;
147+
padding-top: 90px; }
141148
.section .title {
142149
margin-bottom: 110px; }
143150

@@ -185,24 +192,45 @@ a {
185192
text-align: justify;
186193
width: 50%; }
187194

188-
.event-list {
195+
#event-list-cta {
196+
margin: 0 auto 15px;
197+
width: 65%; }
198+
199+
#event-list {
189200
list-style: none;
190-
margin: 0 auto;
191-
padding-left: 0;
192-
width: 50%; }
193-
.event-list .event {
201+
padding-left: 0; }
202+
#event-list .event-page {
203+
display: none; }
204+
#event-list .event {
194205
color: #194774;
195206
margin-bottom: 10px; }
196-
.event-list .event-title {
207+
#event-list .event-title {
197208
font-size: 1.125em;
198209
margin: 0 0 5px; }
199-
.event-list .event-info {
210+
#event-list .event-info {
200211
font-size: 0.875em;
201212
list-style: none;
202213
padding: 0; }
203-
.event-list .event-info .fa {
214+
#event-list .event-info .fa {
204215
margin-right: 10px; }
205216

217+
.event-page-nav {
218+
background: #888888;
219+
-webkit-border-radius: 4px;
220+
-moz-border-radius: 4px;
221+
-ms-border-radius: 4px;
222+
-o-border-radius: 4px;
223+
border-radius: 4px;
224+
cursor: pointer;
225+
display: inline-block;
226+
height: 15px;
227+
margin-right: 10px;
228+
width: 15px; }
229+
.event-page-nav:hover {
230+
background: #384859; }
231+
.event-page-nav.active {
232+
background: #f3852a; }
233+
206234
#committees .committee {
207235
box-sizing: border-box;
208236
display: inline-block;
@@ -268,7 +296,7 @@ a {
268296
margin-top: 0;
269297
padding-top: 25px; }
270298

271-
@media screen and (max-width: 798px) {
299+
@media screen and (max-width: 768px) {
272300
body {
273301
font-size: 14px; }
274302

@@ -279,15 +307,49 @@ a {
279307
padding-right: 0;
280308
width: 100% !important; }
281309

310+
.section {
311+
padding-bottom: 15px;
312+
padding-top: 15px; }
313+
.section .title {
314+
margin-bottom: 25px; }
315+
282316
#about .badge-cta {
283317
margin-bottom: 40px; }
318+
#about .badge-cta .badge-icon {
319+
font-size: 3em;
320+
height: 100px;
321+
width: 100px; }
284322
#about .badge-cta .badge-name {
285323
margin: 0; }
286324

287-
#events .inner {
288-
padding: 20px 10px; }
289-
#events p {
325+
#events {
326+
padding-bottom: 20px;
327+
padding-top: 20px; }
328+
#events .inner {
329+
padding: 20px 10px; }
330+
#events p {
331+
width: auto; }
332+
333+
#event-list {
334+
width: 100%; }
335+
336+
#committees .committee {
337+
display: block !important;
338+
margin-left: 0;
339+
text-align: left !important;
340+
transform: none !important;
341+
width: 100% !important; }
342+
#committees .committee-info {
343+
margin-left: 0 !important;
344+
width: 100% !important; } }
345+
@media screen and (max-width: 400px) {
346+
#contact .grid-cta {
290347
width: auto; }
291348

292-
.event-list {
293-
width: 100%; } }
349+
#events .container {
350+
background: white; }
351+
#events .inner {
352+
padding: 10px 3px; }
353+
354+
#event-list-cta {
355+
width: auto; } }

‎assets/scripts/main.js

Lines changed: 76 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,79 @@ $(document).ready(function () {
99
}, 1000);
1010
});
1111

12-
});
12+
});
13+
14+
var Events = {
15+
init : function () {
16+
gapi.client.setApiKey('AIzaSyDTyYHxMN8sAUCystSZWuXXgCZfxpSI_kw');
17+
gapi.client.request({
18+
'path' : '/calendar/v3/calendars/coderit.public@gmail.com/events',
19+
'callback' : Events.displayEvents,
20+
'orderBy' : 'startTime',
21+
'singleEvents' : true
22+
});
23+
},
24+
showEventPage : function (id) {
25+
$('.event-page').hide();
26+
$('.event-page[data-event-page=' + id + ']').show();
27+
},
28+
changeEventPage : function (e) {
29+
var $target = $(e.target);
30+
Events.showEventPage($target.data('event-page-id'));
31+
$('.event-page-nav').removeClass('active');
32+
$target.addClass('active');
33+
},
34+
displayEvents : function (response) {
35+
if (response.items.length === 0) {
36+
$('#event-list-cta').html('<h4>There are no upcoming events.</h4>');
37+
return false;
38+
}
39+
40+
// sort events by date
41+
var events = response.items.sort(function (a ,b) {
42+
if (a.start.dateTime !== undefined)
43+
a.start.date = a.start.dateTime;
44+
if (b.start.dateTime !== undefined)
45+
b.start.date = b.start.dateTime;
46+
return new Date(a.start.date) - new Date(b.start.date);
47+
});
48+
var count = 0;
49+
var numPages = 1;
50+
var html = '<ul id="event-list">';
51+
// print each event
52+
response.items.forEach(function(event) {
53+
if (count === 0) {
54+
html += '<div class="event-page" data-event-page="'+ numPages +'">';
55+
}
56+
html += '<li class="event">';
57+
html += '<h4 class="event-title">' + event.summary + '</h4>';
58+
html += '<ul class="event-info">';
59+
date = moment(event.start.date);
60+
html += '<li><i class="fa fa-calendar-o"></i>' + date.format('MMM D \'YY') + '</li>';
61+
// print out time if set
62+
html += (event.start.dateTime === undefined)?'':'<li><i class="fa fa-clock-o"></i>' + date.format('h:mm A') + '</li>';
63+
html += (event.location === undefined)?'':'<li><i class="fa fa-map-marker"></i>' + event.location + '</li>';
64+
html += '</ul>';
65+
html += '</li>';
66+
count++;
67+
if (count === 4) {
68+
html += '</div>';
69+
count = 0;
70+
numPages++;
71+
}
72+
});
73+
html += '</ul>';
74+
75+
if (numPages > 1) {
76+
for (var i = 1; i <= numPages; i++) {
77+
html += '<span data-event-page-id="'+ i +'" class="event-page-nav';
78+
html += (i === 1)?' active':'';
79+
html += '">&nbsp;</span>';
80+
}
81+
}
82+
$('#event-list-cta').html(html);
83+
Events.showEventPage(1);
84+
$('.event-page-nav').on('click', Events.changeEventPage);
85+
$('#event-list').css('minHeight', $('#event-list').height());
86+
}
87+
}

0 commit comments

Comments
 (0)