Skip to content

Commit a4441f5

Browse files
meirishmeirish
committed
wrote up some slider code and added some styling so it works correctly, changed the meetup images to background images so we can use background-size (like meetup does - icky but it works). removed jquery cycle
1 parent 1cd8e33 commit a4441f5

File tree

3 files changed

+99
-51
lines changed

3 files changed

+99
-51
lines changed

‎pythonkc_site/static/jquery.cycle.lite.min.js‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎pythonkc_site/static/screen.css‎

Lines changed: 58 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
11
html { height: 100%; background: #87cded; }
22
body {
3-
height: 100%;
4-
margin: 0;
5-
padding: 0;
6-
font: 16px/1.4 'Helvetica Neue', Arial, Helvetica, sans-serif normal;
7-
color: #646565;
8-
background-image: -moz-radial-gradient(50% 28%, circle cover, rgba(255,255,255, .3) 0%,#87cded 18.0%);
9-
background-image: -webkit-radial-gradient(50% 28%, circle cover, rgba(255,255,255, .3) 0%,#87cded 18.0%);
10-
background-image: -o-radial-gradient(50% 28%, circle cover, rgba(255,255,255, .3) 0%,#87cded 18.0%);
11-
background-image: -ms-radial-gradient(50% 28%, circle cover, rgba(255,255,255, .3) 0%,#87cded 18.0%);
12-
background-image: radial-gradient(50% 28%, circle cover, rgba(255,255,255, .3) 0%,#87cded 18.0%);
3+
height: 100%;
4+
margin: 0;
5+
padding: 0;
6+
font: 16px/1.4 'Helvetica Neue', Arial, Helvetica, sans-serif normal;
7+
color: #646565;
8+
background-image: -moz-radial-gradient(50% 28%, circle cover, rgba(255,255,255, .3) 0%,#87cded 18.0%);
9+
background-image: -webkit-radial-gradient(50% 28%, circle cover, rgba(255,255,255, .3) 0%,#87cded 18.0%);
10+
background-image: -o-radial-gradient(50% 28%, circle cover, rgba(255,255,255, .3) 0%,#87cded 18.0%);
11+
background-image: -ms-radial-gradient(50% 28%, circle cover, rgba(255,255,255, .3) 0%,#87cded 18.0%);
12+
background-image: radial-gradient(50% 28%, circle cover, rgba(255,255,255, .3) 0%,#87cded 18.0%);
1313
}
1414
header, section, article { display: block; }
1515
header[role="banner"]{ height: 145px; background: url(logo.png) center center no-repeat; }
16-
.wrap{ width: 930px; position: relative; margin: 0 auto; padding: 0 15px;}
16+
.wrap{ width: 930px; position: relative; margin: 0 auto; padding: 0 15px;
17+
overflow: hidden;
18+
}
1719
.next-meeting {
18-
background-color: white;
19-
border-top: 3px solid #abdcf2;
20-
border-bottom: 3px solid #abdcf2;
20+
background-color: white;
21+
border-top: 3px solid #abdcf2;
22+
border-bottom: 3px solid #abdcf2;
2123
}
2224
footer { background: #219cd7; }
2325
#map_canvas {
@@ -29,29 +31,55 @@ footer { background: #219cd7; }
2931
-webkit-box-sizing: border-box;
3032
-o-box-sizing: border-box;
3133
}
34+
#evt-wrapper{
35+
width: 10000px;
36+
position: relative;
37+
left: 0;
38+
}
39+
article.past-event{
40+
display: inline-block;
41+
width: 945px;
42+
vertical-align: top;
43+
}
3244
.slider-controls {
33-
position: absolute;
34-
top: 10px;
35-
left: 165px;
36-
z-index: 10;
45+
position: absolute;
46+
top: 10px;
47+
left: 165px;
48+
z-index: 10;
3749
}
3850
.btn-control { display: inline-block;
39-
background: #fff;
40-
padding: 4px 8px 4px 6px;
41-
border-radius: 18px;
51+
background: #fff;
52+
padding: 4px 8px 4px 6px;
53+
border-radius: 18px;
4254
}
4355
.btn-next{
44-
padding: 4px 6px 4px 8px;
56+
padding: 4px 6px 4px 8px;
4557
}
4658
.prev-arrow, .next-arrow{
47-
display: block;
48-
width: 0;
49-
height: 0;
50-
border-top: 5px solid transparent;
51-
border-right: 6px solid #646565;
52-
border-bottom: 5px solid transparent;
59+
display: block;
60+
width: 0;
61+
height: 0;
62+
border-top: 5px solid transparent;
63+
border-right: 6px solid #646565;
64+
border-bottom: 5px solid transparent;
5365
}
5466
.next-arrow{
55-
border-right: none;
56-
border-left: 6px solid #646565;
67+
border-right: none;
68+
border-left: 6px solid #646565;
69+
}
70+
.disabled {
71+
opacity:.5;
72+
}
73+
.attendee{
74+
background-size: 50px 50px;
75+
background-position: top center;
76+
background-repeat: no-repeat;
77+
display: inline-block;
78+
height: 50px;
79+
width: 50px;
80+
border: 3px solid white;
81+
-moz-border-radius: 3px;
82+
-webkit-border-radius: 3px;
83+
-o-border-radius: 3px;
84+
border-radius: 3px;
5785
}

‎pythonkc_site/templates/index.html‎

Lines changed: 41 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -36,29 +36,29 @@ <h2>{{ next_event.name|safe }}</h2>
3636
<div class="wrap">
3737
<h1>Past Events</h1>
3838
<div class="slider-controls" id="slider-controls">
39-
<a href="#" class="btn-previous btn-control" id="prev"> <span class="prev-arrow"></span></a>
39+
<a href="#" class="btn-previous btn-control disabled" id="prev"> <span class="prev-arrow"></span></a>
4040
<a href="#" class="btn-next btn-control" id="next"><span class="next-arrow"></span></a>
4141
</div>
4242
<div id="evt-wrapper">
4343
{% for event in past_events %}
44-
<article>
44+
<article class="past-event">
4545
<header>
4646
<h1><time datetime>{{ event.time|date:"F j, Y" }}</time></h1>
4747
</header>
4848

4949
<h2>{{ event.name|safe }}</h2>
5050
<p>{{ event.description|safe }}</p>
5151
<div class="attendees">
52+
<h3>Attendees ({{event.attendees|length}})</h3>
5253
{% for attendee in event.attendees %}
5354
{% if attendee.photo.thumb_url %}
54-
<img src="{{ attendee.photo.thumb_url}}" height="" width="" class="attendee"
55-
alt="{{ attendee.name }}" />
55+
<div title="{{ attendee.name }}" style="background-image: url( {{ attendee.photo.thumb_url }} );" class="attendee"></div>
5656
{% endif %}
5757
{% endfor %}
5858
</div>
5959

60-
<figure>
61-
<img src="" height="" width="" />
60+
<figure class="flickr-photo">
61+
<a href="{{flickr_url}}"><img src="" height="" width="" /></a>
6262
</figure>
6363
</article>
6464
{% endfor %}
@@ -73,7 +73,6 @@ <h2>{{ event.name|safe }}</h2>
7373
</div>
7474
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
7575
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
76-
<script src="{{STATIC_URL}}jquery.cycle.lite.min.js" type="text/javascript" charset="utf-8"></script>
7776
<script type="text/javascript" charset="utf-8">
7877
var pykc = window.pykc = pykc || {};
7978
pykc.map;
@@ -94,15 +93,44 @@ <h2>{{ event.name|safe }}</h2>
9493
google.maps.event.trigger(this.map, 'resize');
9594
}
9695

96+
pykc.$slides = $('#evt-wrapper').children();
97+
pykc.slideNum = 0;
98+
99+
pykc.onPrev = function(e){
100+
var $ele = pykc.$slides.eq(pykc.slideNum-1);
101+
var eloffset = $ele.position().left;
102+
e.preventDefault();
103+
if (pykc.slideNum === 0) return;
104+
eloffset === 0 ?
105+
pykc.$slides.parent().animate({left: 0}) :
106+
pykc.$slides.parent().animate({left: '+='+eloffset})
107+
pykc.slideNum --;
108+
pykc.checkButtons('prev');
109+
}
110+
111+
pykc.onNext = function(e){
112+
e.preventDefault();
113+
if (pykc.slideNum === pykc.$slides.length-1) return;
114+
var $ele = pykc.$slides.eq(pykc.slideNum+1);
115+
var eloffset = $ele.position().left;
116+
pykc.$slides.parent().animate({left: -eloffset});
117+
pykc.slideNum ++;
118+
pykc.checkButtons('next');
119+
}
120+
121+
pykc.checkButtons = function(id){
122+
if ( pykc.slideNum === 0 || pykc.slideNum === pykc.$slides.length-1) {
123+
$('#'+id).addClass('disabled');
124+
}else{
125+
$('.btn-control').removeClass('disabled');
126+
}
127+
}
128+
97129
pykc.init = function(){
98-
$('#evt-wrapper').cycle({
99-
prev: '#prev',
100-
next: '#next',
101-
timeout: 0
102-
});
130+
$('#prev').click(pykc.onPrev);
131+
$('#next').click(pykc.onNext);
103132
this.mapInit();
104133
this.resizeMap()
105-
//$(window).resize(function(){ pykc.resizeMap(); });
106134
}
107135

108136
$(function(){ pykc.init(); });

0 commit comments

Comments
 (0)