Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

redeveloped tabs by myself + fixed most layout problems

  • Loading branch information...
commit 6ed5d3cc9c853bb69ef8017387a05b2b7ba14798 1 parent 28fe9b5
@madewulf authored
View
3  site.py
@@ -27,6 +27,7 @@ def pyramid(country="WORLD",year="2010",currentLetter=None):
currentLetter = currentCountryName[0]
alphabet = map(chr, range(97, 123))
alphabet.remove('x')
+ alphabet = map(lambda x:x.upper(),alphabet)
countries_lists =[]
for letter in alphabet:
country_list = letters_to_countries_list_dict[letter.upper()]
@@ -35,8 +36,6 @@ def pyramid(country="WORLD",year="2010",currentLetter=None):
country_tuples.append((c,unicode(countries_dict[c])))
big_tuple = (letter,country_tuples)
countries_lists.append(big_tuple)
- years = map(str,years)
- print years
return render_template("index.html",
currentCountry=country,
currentCountryName=currentCountryName,
View
103 static/css/base.css
@@ -78,12 +78,12 @@ a:hover {color:#D156BF;} /* mouse over link */
a:active {color:#D156BF;} /* selected link */
#canvas_container {
- width: 420px;
+ width: 450px;
}
#canvas_container2 {
- width: 520px;
+ width: 480px;
padding-bottom:10px;
}
@@ -100,14 +100,13 @@ a:active {color:#D156BF;} /* selected link */
#canvas_container_div
{
float:left;
- width:420px;
+ width:450px;
}
#curve_div
{
float:left;
width:520px;
- margin:0 0 0 20px;
}
#year_list_div
{
@@ -117,24 +116,6 @@ a:active {color:#D156BF;} /* selected link */
text-align: center;
}
-#alpha_list_div
-{
- float:left;
- margin: 0 20px 0 20px;
- padding: 0 20px 0 20px;
- width:30px;
- text-align: center;
- border-left: dotted 1px #eeeeee;
- border-right: dotted 1px #eeeeee;
-}
-
-#country_list_div
-{
- float:left;
- padding: 0 0 0 0px;
- width : 298px;
-
-}
#link {
display:hidden;
}
@@ -160,9 +141,6 @@ a.selected_link
text-decoration: none;
padding: 1px 2px;
margin: 0px -2px;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
text-align: center;
}
@@ -191,7 +169,78 @@ a.selected_link
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}
-.year_div_box
+.year_div
+{
+ padding:1px;
+ width:13px;
+ height:60px;
+ float:left;
+ font-size:12px;
+ font-family: courier;
+}
+
+#right_content_div
+{
+ float:left;
+ width:490px;
+ margin-left:20px;
+}
+
+#years
+{
+ width:520px;
+ height:40px;
+ margin-top:-15px;
+ float:left;
+ padding-bottom:10px;
+}
+
+#countriesTabs
+{
+ margin-top:10px;
+ height:35px;
+}
+
+h3
+{
+ font-size: 1.2em;
+ padding-bottom:10px;
+}
+
+.alphaTab
+{
+ list-style: none;
+ float:left;
+ color:white;
+ width:17px;
+ height:19px;
+ text-align: center;
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ background-color: white;
+ border:#d3d3d3 1px solid;
+ padding-top:2px;
+}
+
+.alphaTab a
+{
+ color:#07669d;
+}
+
+.alphaTab.selectedTab
+{
+
+ background-color: white;
+ border:#d3d3d3 1px solid;
+ border-bottom: none;
+}
+.alphaTab.selectedTab a
+{
+ color:#07669d;
+}
+
+#countries
{
- width:12px;height:60px;float:left; line-height: 12px;font-family: arial;
+ clear:both;
+ width:475px;
}
View
23 static/js/pyramid.js
@@ -1,6 +1,6 @@
-var canvas_size = 420,
+var canvas_size = 450,
multiplier = 5,
- curveWidth = 455,
+ curveWidth = 477,
curveHeight = 100,
c,
curve,
@@ -258,24 +258,11 @@ $(function () {
changePyramidInfo();
});*/
- $("#slider").slider({
- 'max':2100,
- 'min':1950,
- "step":5,
- "value":currentYear
- });
- $("#slider").bind("slide", function(event, ui){
+ $("#year_list_div").hide();
- var value = $( this ).slider( "option", "value" );
- currentYear= value;
- $('#currentYear').text(currentYear);
- var p2 = generatePath( );
- c.animate({path:p2}, 10);
- changePyramidInfo();
- });
+ $(".countryList").hide();
+ $("#tabs-S").show();
- $("#year_list_div").hide();
- $('#countriesTabs').tabs();
});
View
39 templates/index.html
@@ -24,10 +24,8 @@
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400italic|Prata' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="/static/css/base.css"/>
- <link type="text/css" href="/static/jquery-ui/css/custom-theme/jquery-ui-1.8.23.custom.css" rel="stylesheet">
<script type="text/javascript" src="/static/js/raphael.js"></script>
<script type="text/javascript" src="/static/js/jquery.js"></script>
- <script type="text/javascript" src="/static/jquery-ui/js/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
@@ -59,8 +57,8 @@
<div style="width:960px; margin:auto;">
<h1 style="padding:0 0 0 0px;text-shadow: 0px -1px 0 #3796CA;width:400px;">Population Pyramids of the World from 1950 to 2100: </h1>
- <div style="float:right; margin-top:-19px;"><g:plusone size="medium" annotation="inline" width="120" href="http://populationpyramid.net"></g:plusone>
- </div>
+ <!--<div style="float:right; margin-top:-19px;"><g:plusone size="medium" annotation="inline" width="120" href="http://populationpyramid.net"></g:plusone>
+ </div>-->
<div style="float:right; margin-top:-19px;"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fpopulationpyramid.net&amp;send=false&amp;layout=button_count&amp;width=90&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=20&amp;appId=205567582820738" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:20px;" allowTransparency="true"></iframe></div>
<p style="float:right; margin-top:-17px; margin-right:10px; color:#66A7CC; font-size:0.8em;">Soon on iPad as part of the <a href="http://movingworldapp.com" style="color:#66A7CC;text-decoration: underline; ">Moving World App</a></p>
</div>
@@ -73,7 +71,7 @@ <h1 style="padding:0 0 0 0px;text-shadow: 0px -1px 0 #3796CA;width:400px;">Popul
<span id="currentCountry">{{currentCountryName}}</span>
</h2>
- <div style="width:420px;">
+ <div style="width:450px;">
<h2 style="float:left; ">
<span id="currentYear">2010</span>
</h2>
@@ -89,40 +87,30 @@ <h2 style="float:right;padding-bottom:0px;">
<div id="canvas_container_div">
<div id="canvas_container"></div>
</div>
- <div id="right_content_div" style="float:left;width:520px;">
- <div style="width:400px;height:40px">
-
- <!-- <div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" style="width:400px;margin-left:20px; ">
- <div class="ui-slider-range ui-widget-header" style="left: 12%; width: 77%; "></div>
- <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 12%; "></a>
- </div>-->
- </div>
+ <div id="right_content_div">
+ <h3>Pick a Year:</h3>
<div id="curve_div">
<div id="canvas_container2"></div>
</div>
- <div id="years" style="width:440px;height:40px; margin-top:-10px; padding-left:23px;">
+ <div id="years">
{% for year in years %}
- <div class="year_div box_rotate" style="padding:1px;width:12px;height:60px;float:left; font-size:12px; font-family: courier;">
- <a href="">{{year}}</a>
+ <div class="year_div box_rotate">
+ <a class="year_link {% if year == 2010 %} selected_link {%endif%} " href="/{{currentCountry}}/{{year}}" id="{{year}}">{{year}}</a>
</div>
{%endfor%}
</div>
- <div id="year_list_div" class="nav_links_div" style="text-align: center;">
- <ul id="year_list">
- {% for year in years %}
- <li><a class="year_link" href="/{{currentCountry}}/{{year}}" id="{{year}}">{{year}}</a></li>
- {%endfor%}
- </ul>
- </div>
+ <h3>Pick a Country:</h3>
<div id="countriesTabs" style="clear:both;">
<ul>
{%for letter in alphabet %}
- <li><a href="#tabs-{{letter}}">{{letter}}</a></li>
+ <li class="alphaTab {% if letter == 'S' %} selectedTab {%endif%} "><a href="#tabs-{{letter}}">{{letter}}</a></li>
{%endfor %}
</ul>
+ </div>
+ <div id="countries">
{% for big_tuple in countries_lists %}
- <div id="tabs-{{big_tuple.0}}">
+ <div class="countryList" id="tabs-{{big_tuple.0}}">
{% for country_t in big_tuple.1%}
<a class="country_link" href="/{{country_t.0}}/{{currentYear}}/" id="{{country_t.0}}" na="Western Asia">{{country_t.1}}</a> -
{%endfor%}
@@ -131,6 +119,7 @@ <h2 style="float:right;padding-bottom:0px;">
</div>
+
</div> <!-- closing right content div-->
</div>
<!--<div id="link">
Please sign in to comment.
Something went wrong with that request. Please try again.