Skip to content

Commit 0cbaf73

Browse files
meirishmeirish
committed
changed 'media' folder to 'static' and added a bunch of css and the init for the page to resize the map and kick off the slider
1 parent 589bccf commit 0cbaf73

File tree

7 files changed

+166
-39
lines changed

7 files changed

+166
-39
lines changed

‎pythonkc_site/media/screen.css‎

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

‎pythonkc_site/settings.py‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
# Don't put anything in this directory yourself; store your static files
6161
# in apps' "static/" subdirectories and in STATICFILES_DIRS.
6262
# Example: "/home/media/media.lawrence.com/static/"
63-
STATIC_ROOT = os.path.join(PROJECT_ROOT, 'static'),
63+
#STATIC_ROOT = os.path.join(PROJECT_ROOT, 'static'),
6464

6565
# URL prefix for static files.
6666
# Example: "http://media.lawrence.com/static/"
@@ -73,6 +73,7 @@
7373

7474
# Additional locations of static files
7575
STATICFILES_DIRS = (
76+
os.path.join(PROJECT_ROOT, 'static'),
7677
# Put strings here, like "/home/html/static" or "C:/www/django/static".
7778
# Always use forward slashes, even on Windows.
7879
# Don't forget to use absolute paths, not relative paths.

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

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎pythonkc_site/static/logo.png‎

4.61 KB
Loading

‎pythonkc_site/static/screen.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
html { height: 100%; background: #87cded; }
2+
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%);
13+
}
14+
header, section, article { display: block; }
15+
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;}
17+
.next-meeting {
18+
background-color: white;
19+
border-top: 3px solid #abdcf2;
20+
border-bottom: 3px solid #abdcf2;
21+
}
22+
footer { background: #219cd7; }
23+
#map_canvas {
24+
position: absolute;
25+
right: 0;
26+
top: 0;
27+
box-sizing: border-box;
28+
-moz-box-sizing: border-box;
29+
-webkit-box-sizing: border-box;
30+
-o-box-sizing: border-box;
31+
}
32+
.slider-controls {
33+
position: absolute;
34+
top: 10px;
35+
left: 165px;
36+
z-index: 10;
37+
}
38+
.btn-control { display: inline-block;
39+
background: #fff;
40+
padding: 4px 8px 4px 6px;
41+
border-radius: 18px;
42+
}
43+
.btn-next{
44+
padding: 4px 6px 4px 8px;
45+
}
46+
.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;
53+
}
54+
.next-arrow{
55+
border-right: none;
56+
border-left: 6px solid #646565;
57+
}

‎pythonkc_site/templates/index.html‎

Lines changed: 97 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,108 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
3+
<head>
44
<meta charset="utf-8" />
55
<meta name="description" content="PythonKC groups website. For all things Python in Kansas City." />
66
<meta name="keywords" content="python, kansas city" />
7-
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
7+
<meta name="viewport" content="initial-scale=1.0" />
88
<title>PythonKC || For all things Python in Kansas City.</title>
99
<link rel="stylesheet" href="{{ STATIC_URL }}screen.css">
10-
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
11-
<script type="text/javascript">
12-
function initialize() {
13-
var latlng = new google.maps.LatLng(-34.397, 150.644);
14-
var myOptions = {
15-
zoom: 8,
16-
center: latlng,
17-
mapTypeId: google.maps.MapTypeId.ROADMAP
18-
};
19-
var map = new google.maps.Map(document.getElementById("map_canvas"),
20-
myOptions);
21-
}
22-
</script>
23-
</head>
24-
<body onload="initialize()">
25-
<header>
10+
<!--[if lt IE 9]>
11+
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
12+
<![endif]-->
13+
</head>
14+
<body>
15+
<header role="banner">
2616
</header>
27-
28-
<section>
29-
<article>
30-
<header>
31-
<time>
32-
<h1>[upcoming date]</h1>
33-
<p>[upcoming time]</p>
34-
</time>
35-
</header>
36-
<h2>[Event title]</h2>
37-
<p>[Event descriptiopn]</p>
38-
<p class="rsvp">RSVP at</p>
39-
</article>
40-
<div id="map_canvas" style="width:100%; height:100%"></div>
41-
</section>
42-
43-
<footer></footer>
17+
<section class="next-meeting">
4418

19+
<div class="wrap">
20+
<article>
21+
<header>
22+
<time>
23+
<h1>[upcoming date]</h1>
24+
<p>[upcoming time]</p>
25+
</time>
26+
</header>
27+
<h2>[Event title]</h2>
28+
<p>[Event descriptiopn]</p>
29+
<p class="rsvp">RSVP at</p>
30+
<div id="map_canvas" style="width:100%; height:100%"></div>
31+
</article>
32+
</div>
33+
</section>
34+
35+
<section id="past-meetups">
36+
<div class="wrap">
37+
<h1>Past Events</h1>
38+
<div class="slider-controls" id="slider-controls">
39+
<a href="#" class="btn-previous btn-control" id="prev"> <span class="prev-arrow"></span></a>
40+
<a href="#" class="btn-next btn-control" id="next"><span class="next-arrow"></span></a>
41+
</div>
42+
<div id="evt-wrapper">
43+
{% for event in past_events %}
44+
<article>
45+
<header>
46+
<h1><time datetime>{Date goes here}</time></h1>
47+
</header>
48+
49+
<h2>{}</h2>
50+
<p>{summary}</p>
51+
<div class="attendees">
52+
{% for attendee in attendees %}
53+
<img src="" height="" width="" class="attendee" />
54+
{% endfor %}
55+
</div>
56+
57+
<figure>
58+
<img src="" height="" width="" />
59+
</figure>
60+
</article>
61+
{% endfor %}
62+
</div>
63+
</div>
64+
</section>
65+
66+
<footer>
67+
<div class="wrap">
68+
</div>
69+
</footer>
70+
</div>
71+
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
72+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
73+
<script src="{{STATIC_URL}}jquery.cycle.lite.min.js" type="text/javascript" charset="utf-8"></script>
74+
<script type="text/javascript" charset="utf-8">
75+
var pykc = window.pykc = pykc || {};
76+
pykc.map;
77+
78+
pykc.mapInit = function() {
79+
var latlng = new google.maps.LatLng(-34.397, 150.644);
80+
var opts = {
81+
zoom: 8,
82+
center: latlng,
83+
mapTypeId: google.maps.MapTypeId.ROADMAP
84+
};
85+
this.map = new google.maps.Map(document.getElementById("map_canvas"), opts);
86+
}
87+
88+
pykc.resizeMap = function(){
89+
this.$mapHolder = this.$mapHolder || $("#map_canvas");
90+
this.$mapHolder.width( this.$mapHolder.parent().width()/2);
91+
google.maps.event.trigger(this.map, 'resize');
92+
}
93+
94+
pykc.init = function(){
95+
$('#evt-wrapper').cycle({
96+
prev: '#prev',
97+
next: '#next',
98+
timeout: 0
99+
});
100+
this.mapInit();
101+
this.resizeMap()
102+
//$(window).resize(function(){ pykc.resizeMap(); });
103+
}
104+
105+
$(function(){ pykc.init(); });
106+
</script>
45107
</body>
46108
</html>

‎pythonkc_site/urls.py‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,5 @@
1919
# Uncomment the next line to enable the admin:
2020
# url(r'^admin/', include(admin.site.urls)),
2121
)
22+
23+

0 commit comments

Comments
 (0)