Skip to content

Commit eff8326

Browse files
meirishmeirish
committed
externalized the js. Added in the resources section. Truncated the event description and added in links to the meetup event pages
1 parent 6ba9d3a commit eff8326

File tree

3 files changed

+179
-82
lines changed

3 files changed

+179
-82
lines changed

‎pythonkc_site/static/pykc.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
var pykc = window.pykc = pykc || {};
2+
pykc.map;
3+
4+
pykc.mapInit = function(lat,lon) {
5+
var latlng = new google.maps.LatLng(lat,lon);
6+
var opts = {
7+
zoom: 14,
8+
center: latlng,
9+
mapTypeId: google.maps.MapTypeId.ROADMAP
10+
};
11+
this.map = new google.maps.Map(document.getElementById("map_canvas"), opts);
12+
var venue = new google.maps.Marker({
13+
position: latlng,
14+
map: this.map
15+
});
16+
}
17+
18+
pykc.resizeMap = function(){
19+
this.$mapHolder = this.$mapHolder || $("#map_canvas");
20+
this.$mapHolder.width( this.$mapHolder.parent().width()/2);
21+
google.maps.event.trigger(this.map, 'resize');
22+
}
23+
24+
pykc.$slides = $('#evt-wrapper').children();
25+
pykc.slideNum = 0;
26+
27+
pykc.onPrev = function(e){
28+
var $ele = pykc.$slides.eq(pykc.slideNum-1);
29+
var eloffset = $ele.position().left;
30+
e.preventDefault();
31+
if (pykc.slideNum === 0) return;
32+
eloffset === 0 ?
33+
pykc.$slides.parent().animate({left: 0}) :
34+
pykc.$slides.parent().animate({left: '+='+eloffset})
35+
pykc.slideNum --;
36+
pykc.checkButtons('prev');
37+
}
38+
39+
pykc.onNext = function(e){
40+
e.preventDefault();
41+
if (pykc.slideNum === pykc.$slides.length-1) return;
42+
var $ele = pykc.$slides.eq(pykc.slideNum+1);
43+
var eloffset = $ele.position().left;
44+
pykc.$slides.parent().animate({left: -eloffset});
45+
pykc.slideNum ++;
46+
pykc.checkButtons('next');
47+
}
48+
49+
pykc.checkButtons = function(id){
50+
if ( pykc.slideNum === 0 || pykc.slideNum === pykc.$slides.length-1) {
51+
$('#'+id).addClass('disabled');
52+
}else{
53+
$('.btn-control').removeClass('disabled');
54+
}
55+
}
56+
57+
pykc.init = function(lat,lon){
58+
$('.top').click(function(e){
59+
e.preventDefault();
60+
$('html, body').animate({scrollTop: 0}, 300);
61+
});
62+
$('#prev').click(pykc.onPrev);
63+
$('#next').click(pykc.onNext);
64+
this.mapInit(lat,lon);
65+
this.resizeMap();
66+
}
67+

‎pythonkc_site/static/screen.css‎

Lines changed: 70 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,12 @@ table { border-collapse: collapse; border-spacing: 0; }
3434
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
3535
textarea, input { border: 1px solid #ddd; background: #FFFFFF; font-weight: normal; color: #333; font-size: 13px; }
3636
ul, li { list-style: none; }
37-
a { text-decoration: none; }
38-
a:hover { text-decoration: underline; }
37+
a { text-decoration: none; color:#646565; text-decoration: underline;}
38+
a:hover { text-decoration: none; }
39+
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
40+
.clearfix { display: inline-block; }
41+
* html .clearfix { height: 1%; }
42+
.clearfix { display: block; }
3943

4044
html { height: 100%; background: #87cded; }
4145
body {
@@ -56,11 +60,18 @@ header[role="banner"]{ height: 145px; background: url(logo.png) center center no
5660
overflow: hidden;
5761
}
5862

59-
63+
section h1{
64+
color: #ffffff;
65+
font:bold 36px/1.4 'Helvetica Neue', Arial, Helvetica;
66+
text-transform: uppercase;
67+
}
68+
h3{
69+
margin-bottom: 5px;
70+
}
6071
.next-meeting {
6172
background-color: white;
62-
border-top: 3px solid #abdcf2;
63-
border-bottom: 3px solid #abdcf2;
73+
border-top: 3px solid #a8dbf2;
74+
border-bottom: 3px solid #a8dbf2;
6475
}
6576

6677
.next-meeting .details {
@@ -71,6 +82,7 @@ header[role="banner"]{ height: 145px; background: url(logo.png) center center no
7182
.next-meeting h1 {
7283
font-size: 44px;
7384
line-height: 30px;
85+
color: #646565;
7486
}
7587

7688
.next-meeting h2 {
@@ -92,17 +104,33 @@ header[role="banner"]{ height: 145px; background: url(logo.png) center center no
92104
position: absolute;
93105
padding-left: 10px;
94106
}
107+
#past-meetups{
108+
padding-top: 50px;
109+
}
110+
.past-event h1{
111+
font-size: 27px;
112+
color: #646565;
113+
margin: 15px 0;
114+
}
115+
.past-event h2{
116+
font-size: 20px;
117+
color: #646565;
118+
margin-bottom: 5px;
119+
}
95120

96121
footer {
97122
color: #FFFFFF;
98123
background: #219cd7;
99124
font-size: 13px;
100125
padding: 40px 0;
101126
position: relative;
127+
border-top: 3px solid #a8dbf2;
102128
}
103129

104130
footer h1 {
105131
margin-bottom: 15px;
132+
font-size: 13px;
133+
106134
}
107135

108136
footer a.top {
@@ -162,8 +190,8 @@ article.past-event{
162190
}
163191
.slider-controls {
164192
position: absolute;
165-
top: 10px;
166-
left: 165px;
193+
top: 15px;
194+
left: 275px;
167195
z-index: 10;
168196
}
169197
.btn-control { display: inline-block;
@@ -193,7 +221,8 @@ article.past-event{
193221
background-size: 50px 50px;
194222
background-position: top center;
195223
background-repeat: no-repeat;
196-
display: inline-block;
224+
float: left;
225+
margin: 0 5px 5px 0;
197226
height: 50px;
198227
width: 50px;
199228
border: 3px solid white;
@@ -202,3 +231,36 @@ article.past-event{
202231
-o-border-radius: 3px;
203232
border-radius: 3px;
204233
}
234+
235+
.attendees{
236+
margin-top: 30px;
237+
}
238+
.read-more{
239+
display: inline-block;
240+
margin: 10px 0;
241+
}
242+
section.resources{
243+
padding: 30px 0;
244+
}
245+
.resources article {
246+
-webkit-box-sizing: border-box;
247+
-moz-box-sizing: border-box;
248+
-o-box-sizing: border-box;
249+
-ms-box-sizing: border-box;
250+
box-sizing: border-box;
251+
width: 32%;
252+
float:left;
253+
vertical-align: top;
254+
}
255+
.resources article h1{
256+
text-transform: none;
257+
color: #646565;
258+
font-size: 27px;
259+
}
260+
.resources li { margin: 5px 0;}
261+
.resources a { font-weight: bold;}
262+
.author{
263+
display: block;
264+
font-weight: normal;
265+
font-size: 80%;
266+
}

‎pythonkc_site/templates/index.html‎

Lines changed: 42 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ <h1>{{ next_event.time|date:"F j"|upper }}</h1>
2525
</time>
2626
</header>
2727
<h2>{{ next_event.name|safe }}</h2>
28-
{% if next_event.venue.id %}<address>{{ next_event.venue.name }} // {{ next_event.venue.address1 }}{% if next_event.venue.address2 %}, {{ next_event.venue.address2 }}{% endif %} // {{ next_event.venue.city }}, {{ next_event.venue.state }} {{ next_event.venue.zip }}</address>{% else %}Venue TBD{% endif %}
28+
{% if next_event.venue.id %}<address>{{ next_event.venue.name }}{% if next_event.venue.address1 %} // {{ next_event.venue.address1 }}{% if next_event.venue.address2 %}, {{ next_event.venue.address2 }}{% endif %}{% endif %} // {{ next_event.venue.city }}, {{ next_event.venue.state }} {{ next_event.venue.zip }}</address>{% else %}Venue TBD{% endif %}
2929
{% if next_event.description %}<p class="description">{{ next_event.description|safe }}</p>{% endif %}
3030
<p class="rsvp">RSVP at <a href="{{ next_event.event_url }}"><img src="{{ STATIC_URL }}meetup-logo.gif" alt="PythonKC Meetup RSVP for {{ next_event.name|safe }}"></a></p>
3131
</div>
@@ -48,9 +48,12 @@ <h1>Past Events</h1>
4848
<h1><time datetime>{{ event.time|date:"F j, Y" }}</time></h1>
4949
</header>
5050

51-
<h2>{{ event.name|safe }}</h2>
52-
<p>{{ event.description|safe }}</p>
53-
<div class="attendees">
51+
<h2><a href="{{ event.event_url }}">{{ event.name|safe }}</a></h2>
52+
{% if event.description %}
53+
<p>{{ event.description|safe|truncatewords_html:25 }}</p>
54+
{% endif %}
55+
<a href="{{ event.event_url }}" class="read-more">Read more at the Meetup event page &rarr;</a>
56+
<div class="attendees clearfix">
5457
<h3>Attendees ({{event.attendees|length}})</h3>
5558
{% for attendee in event.attendees %}
5659
{% if attendee.photo.thumb_url %}
@@ -63,7 +66,37 @@ <h3>Attendees ({{event.attendees|length}})</h3>
6366
</div>
6467
</div>
6568
</section>
66-
69+
<section class="resources clearfix">
70+
<div class="wrap">
71+
<h1>Resources</h1>
72+
<article>
73+
<h1>Books</h1>
74+
<ul class="resources">
75+
<li><a href="http://www.diveintopython.org/"> Dive Into Python <span class="author">Mark Pilgrim</span></a></li>
76+
<li><a href="http://learnpythonthehardway.org/">Learn Python The Hard Way <span class="author">Zed A. Shaw</span></a></li>
77+
<li><a href="http://www.swaroopch.com/notes/Python">A Byte of Python <span class="author">Swaroop C H</span></a></li>
78+
<li><a href="http://greenteapress.com/thinkpython/thinkpython.html">Think Python <span class="author">Allen B. Downey</span></a></li>
79+
</ul>
80+
</article>
81+
<article>
82+
<h1>Websites</h1>
83+
<ul class="resources">
84+
<li><a href="http://python.org/">Official Python Site</a></li>
85+
<li><a href="http://docs.python.org">Python Docs</a></li>
86+
<li><a href="http://codingbat.com/python">Coding exercises</a></li>
87+
<li><a href="https://github.com/gregmalcolm/python_koans">Coding koans</a></li>
88+
<li><a href="http://www.pythonchallenge.com/">The Python Challenge</a></li>
89+
</ul>
90+
</article>
91+
<article>
92+
<h1>Community</h1>
93+
<ul class="resources">
94+
<li><a href="http://www.python.org/community/">Python Community</a></li>
95+
<li><a href="http://reddit.com/r/python/">Python on Reddit</a></li>
96+
</ul>
97+
</article>
98+
</div>
99+
</section>
67100
<footer>
68101
<a class="top">Back to the top</a>
69102
<div class="wrap">
@@ -102,76 +135,11 @@ <h1>FOLLOW US</h1>
102135
</div>
103136
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
104137
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
138+
<script src="{{ STATIC_URL }}pykc.js" type="text/javascript" charset="utf-8"></script>
105139
<script type="text/javascript" charset="utf-8">
106-
var pykc = window.pykc = pykc || {};
107-
pykc.map;
108-
109-
pykc.mapInit = function() {
110-
var latlng = new google.maps.LatLng({{ next_event.venue.lat|default:past_events.0.venue.lat|default:-34.397 }}, {{ next_event.venue.lon|default:past_events.0.venue.lon|default:150.644 }});
111-
var opts = {
112-
zoom: 8,
113-
center: latlng,
114-
mapTypeId: google.maps.MapTypeId.ROADMAP
115-
};
116-
this.map = new google.maps.Map(document.getElementById("map_canvas"), opts);
117-
var venue = new google.maps.Marker({
118-
position: latlng,
119-
map: this.map,
120-
title:'{{ next_events.venue }}'
121-
});
122-
}
123-
124-
pykc.resizeMap = function(){
125-
this.$mapHolder = this.$mapHolder || $("#map_canvas");
126-
this.$mapHolder.width( this.$mapHolder.parent().width()/2);
127-
google.maps.event.trigger(this.map, 'resize');
128-
}
129-
130-
pykc.$slides = $('#evt-wrapper').children();
131-
pykc.slideNum = 0;
132-
133-
pykc.onPrev = function(e){
134-
var $ele = pykc.$slides.eq(pykc.slideNum-1);
135-
var eloffset = $ele.position().left;
136-
e.preventDefault();
137-
if (pykc.slideNum === 0) return;
138-
eloffset === 0 ?
139-
pykc.$slides.parent().animate({left: 0}) :
140-
pykc.$slides.parent().animate({left: '+='+eloffset})
141-
pykc.slideNum --;
142-
pykc.checkButtons('prev');
143-
}
144-
145-
pykc.onNext = function(e){
146-
e.preventDefault();
147-
if (pykc.slideNum === pykc.$slides.length-1) return;
148-
var $ele = pykc.$slides.eq(pykc.slideNum+1);
149-
var eloffset = $ele.position().left;
150-
pykc.$slides.parent().animate({left: -eloffset});
151-
pykc.slideNum ++;
152-
pykc.checkButtons('next');
153-
}
154-
155-
pykc.checkButtons = function(id){
156-
if ( pykc.slideNum === 0 || pykc.slideNum === pykc.$slides.length-1) {
157-
$('#'+id).addClass('disabled');
158-
}else{
159-
$('.btn-control').removeClass('disabled');
160-
}
161-
}
162-
163-
pykc.init = function(){
164-
$('.top').click(function(e){
165-
e.preventDefault();
166-
$('html, body').animate({scrollTop: 0}, 300);
167-
});
168-
$('#prev').click(pykc.onPrev);
169-
$('#next').click(pykc.onNext);
170-
this.mapInit();
171-
this.resizeMap()
172-
}
173-
174-
$(function(){ pykc.init(); });
140+
$(function(){
141+
pykc.init( {{ next_event.venue.lat|default:past_events.0.venue.lat|default:-34.397 }}, {{ next_event.venue.lon|default:past_events.0.venue.lon|default:150.644 }});
142+
});
175143
</script>
176144
</body>
177145
</html>

0 commit comments

Comments
 (0)