EL-28 Design changes

henare · Jul 25, 2010 · 405ffcc · 405ffcc
1 parent 39be3c6
commit 405ffcc
Show file tree

Hide file tree

Showing 21 changed files with 420 additions and 105 deletions.
diff --git a/docs/css/main.css b/docs/css/main.css
diff --git a/docs/full.php b/docs/full.php
@@ -53,6 +53,7 @@ function bind() {
 		$this->page_title = "Full image of " . $leaflet->title . " ( election leaflet published by " . $leaflet->party_name . ")";
 	    $this->assign("leaflet", $leaflet);
 	    $this->assign("leaflet_images", $leaflet_images);
+	    $this->assign("is_full_view", true);
 
 	}
 

diff --git a/docs/images/crease_line_left.png b/docs/images/crease_line_left.png
diff --git a/docs/images/crease_line_middle.png b/docs/images/crease_line_middle.png
diff --git a/docs/images/crease_line_right.png b/docs/images/crease_line_right.png
diff --git a/docs/images/header_orange_line.png b/docs/images/header_orange_line.png
diff --git a/docs/images/logo_2010.png b/docs/images/logo_2010.png
diff --git a/docs/images/zoom.png b/docs/images/zoom.png
diff --git a/docs/script/functions.js b/docs/script/functions.js
@@ -137,4 +137,26 @@ function setTextboxHint(sId, sHint){
         }
          $(sId).className = $(sId).className.replace('hint', "");
     }
-}
+}
+
+
+function setActiveNav(){
+	$page = window.location;
+	$page_with_slash = $page+"/";
+	if(!$page) {
+		$page = '';
+	}
+	$('ul#ulMenu li a').each(function(){
+		var $href = $(this).attr('href');
+		var $href_with_slash = $href+"/";
+		if ( ($href == $page) || ($href == $page_with_slash) || $href_with_slash == $page) {
+			$(this).addClass('active');
+		} else {
+			$(this).removeClass('active');
+		}
+	});
+}
+
+$(document).ready(function(){
+	setActiveNav();
+});
diff --git a/templates/about.tpl b/templates/about.tpl
@@ -1,6 +1,6 @@
 {include file="header.tpl"}
 
-    <div class="contentfull">
+    <div class="contentfull about-us">
         <h1>About {$site_name}</h1>
         <p>
             Electioneering is a high-stakes game. We, at {$site_name}, believe that it’s time for that game to become a spectator sport.
@@ -41,7 +41,7 @@
             If you love what we do <a href="http://blog.openaustralia.org/join-us/">consider donating</a> to the OpenAustralia Foundation.
         </p>
         <br class="clear"/>
-        <h3>FAQs</h3>
+        <h4>FAQs</h4>
         <dl class="faq">
             <dt>How do I upload an election leaflet</dt>
             <dd>You need to upload a photograph of the leaflet in JPG format, then enter a few details about the leaflet. <a href="{$www_server}/addupload">Click here to get started</a>.</dd>
@@ -64,7 +64,7 @@
                 their <a href="http://www.nla.gov.au/collect/elections.html">election material archive</a>.
             </dd>
         </dl>
-        <h3 id="contact">Contact</h3>
+        <h4 id="contact">Contact</h4>
         <p>
             You can get in touch with us via email <a href="mailto:contact@electionleaflets.org.au">contact@electionleaflets.org.au</a>, say hello on <a href="http://twitter.com/electionleaflet">twitter</a> or phone Matthew on 0424 563 655.
         </p>

diff --git a/templates/addinfo.tpl b/templates/addinfo.tpl
@@ -1,6 +1,6 @@
 {include file="header.tpl"}
 
-<div class="contentleft">
+<div class="contentfull align-left">
     <form id="frmUpload" method="post" action="{$form_action}">
         {include file="formvars.tpl"}
         <h1>Step 2 - add a few details</h1>

diff --git a/templates/addupload.tpl b/templates/addupload.tpl
@@ -1,6 +1,6 @@
 {include file="header.tpl"}
 
-<div id="divContentFull">
+<div class="contentfull align-left">
     <form id="frmUpload" method="post" action="{$form_action}" enctype="multipart/form-data" onsubmit="uploadImages();">
         {include file="formvars.tpl"}        
         <h1>Add a leaflet (step 1 of 2)</h1>

diff --git a/templates/browse.tpl b/templates/browse.tpl
@@ -1,8 +1,8 @@
 {include file="header.tpl"}
-    <div class="contentfull">
-        <h1>Browse election leaflets</h1>
+    <div class="contentfull align-left">
+        <h3>Browse election leaflets</h3>
 
-        <h3>Parties</h3>
+        <h4>Parties</h4>
         <ul class="parties">
             {foreach from="$parties" item="party"}
                 <li>
@@ -14,7 +14,7 @@
                     <a href="{$www_server}/parties">View all parties ...</a>
                 </li>
         </ul>
-        <h3>Tags</h3>
+        <h4>Tags</h4>
         <ul class="tagcloud">
             {foreach from="$weighted_tags" item="weighted_tag"}
                 <li class="{if $weighted_tag->count < 1}tg1{elseif $weighted_tag->count < 3}tg2{elseif $weighted_tag->count < 5}tg3{elseif $weighted_tag->count < 10}tg4{elseif $weighted_tag->count < 30}tg5{else}tg6{/if}">
@@ -23,7 +23,7 @@
             {/foreach}
         </ul>
 
-        <h3>Categories</h3>
+        <h4>Categories</h4>
         <ul>
             {foreach from="$categories" item="category"}
                 <li>
@@ -32,7 +32,7 @@
             {/foreach}
         </ul>
 
-        <h3>{$area_names|capitalize}</h3>
+        <h4>{$area_names|capitalize}</h4>
         <ul>
             {foreach from="$constituencies" item="constituency"}
                 <li>

diff --git a/templates/footer.tpl b/templates/footer.tpl
@@ -1,13 +1,15 @@
         </div>
-        <div id="divFooter" >
+        <div id="divFooter" {if $is_full_view == true}class="full-width"{/if}>
+        	<div class="footer-line">
+        		<img src="/images/footer_line.png" />
+        	</div>
             <ul class="inline">
                 <li><a href="/">Home</a></li>
                 <li><a href="/about">About</a></li>
                 <li><a href="/about#contact">Contact</a></li>
 		<li><a href="http://twitter.com/electionleaflet">Twitter</a></li>
 		<li class="last"><a href="http://blog.openaustralia.org">Blog</a></li>
             </ul>
-            <p id="oaf">Another fine <a href="http://www.openaustraliafoundation.org.au">OpenAustralia Foundation</a> project</p>
         </div>
     </div>
 

diff --git a/templates/full.tpl b/templates/full.tpl
@@ -1,13 +1,18 @@
 {include file="header.tpl"}
 
-    <div id="divFullImage" class="contentfull">
-        <a href="{$www_server}/leaflets/{$leaflet->leaflet_id}/">&larr; back to details of <em>'{$leaflet->title}'</em></a>
+    <div id="divFullImage" class="contentfull{if $is_full_view == true} align-center{/if}">
+    	<h3>{$leaflet->title}</h3>
+    	<small class="back">
+	        &larr;<a href="{$www_server}/leaflets/{$leaflet->leaflet_id}/"> back to leaftlet details</a>
+	    </small>
         <ul>
             {foreach from="$leaflet_images" item="leaflet_image"}
                 <li id="l{$leaflet_image->leaflet_image_id}"><img src="{$leaflet_image->large_url()}" /></li>   
             {/foreach}
         </ul>
-        <a href="{$www_server}/leaflets/{$leaflet->leaflet_id}/">&larr; back to details of <em>{$leaflet->title}</em></a>
+    	<small class="back">
+	        &larr;<a href="{$www_server}/leaflets/{$leaflet->leaflet_id}/"> back to leaftlet details</a>
+	    </small>
     </div>
 
 {include file="footer.tpl"}
diff --git a/templates/header.tpl b/templates/header.tpl
@@ -26,8 +26,8 @@
 	{/if}
 </head>
 
-<body>
-    <div id="page-container">
+<body {if $is_full_view == true}class="full-width"{/if}>
+    <div id="page-container" {if $is_full_view == true} class="full-width"{/if}>
     {if $hide_header == false}
         <div class="hide">
             <a href="#divContent">Skip navigation</a>
@@ -44,10 +44,10 @@
 	  <div id="divHeader"{if $hide_logo == true} class="small"{/if}>
 
             {if $hide_logo == false}
+           <p class="credit">Another fine <a href="{$www_server}">OpenAustralia</a> project</p>
 	      <div id="pLogo">
-		<h2><a href="{$www_server}">OpenAustralia Foundation Presents</h2>
                 <h1><a href="{$www_server}">{$site_name}</a></h1>
-                <h2><a href="{$www_server}">2010 FEDERAL ELECTION Live <span>|</span> election monitoring</a></h2>
+                <h2><a href="{$www_server}"><strong>2010</strong> FEDERAL ELECTION Live <span>|</span> live election monitoring</a></h2>
 	      </div>
             {/if}
 
@@ -80,9 +80,10 @@
               </li>
               -->
             </ul>
+            <div id="header-border"><img src="/images/header_orange_line.png" /></div>
         </div>
     {/if}
-    <div id="divPage" {if $is_home}class="home"{/if}>
+    <div id="divPage" {if $is_home}class="home"{/if} {if $is_full_view == true}class="full-width"{/if}>
 
         <div id="divContent">
 

diff --git a/templates/header_fullwidth.tpl b/templates/header_fullwidth.tpl
@@ -0,0 +1,110 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+	<title>{$page_title|default:$site_tag_line} | {$site_name}</title>
+	<link rel="stylesheet" media="all" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/ui-lightness/jquery-ui.css" />
+	<link rel="stylesheet" media="all" type="text/css" href="{$www_server}/css/main.css?v=7" />
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
+	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js" type="text/javascript"></script> 
+	<script src="{$www_server}/script/jcarousel.js" type="text/javascript" charset="utf-8"></script>
+	<script src="{$www_server}/script/functions.js" type="text/javascript"></script>
+	<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script>
+	<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>
+	{if $has_upload}
+	  <script src="{$www_server}/script/jquery.uploadify.v2.1.0.min.js" type="text/javascript"></script>
+	  <script src="{$www_server}/script/jquery.json-2.2.min.js" type="text/javascript"></script>
+	{/if}    
+	<script src="{$www_server}/script/main.js?v=1" type="text/javascript"></script>
+	{if $has_map}
+	  <script src="http://maps.google.com/maps?file=api&v=2&key={$google_maps_key}" type="text/javascript"></script>
+	  <script src="{$www_server}/script/mapstraction.js" type="text/javascript"></script>
+	{/if}
+	<link rel="Shortcut Icon" href="{$www_server}/favicon.ico" type="image/x-icon" />
+	{if $rss_link != ''}
+	  <link rel="alternate" type="application/rss+xml" title="{$page_title}" href="{$rss_link}">
+	{/if}
+</head>
+
+<body>
+    <div id="page-container" class="full-width">
+    {if $hide_header == false}
+        <div class="hide">
+            <a href="#divContent">Skip navigation</a>
+        </div>
+            {* Comment this out for another day
+            {if $is_home == false}
+            <div id="divBanner">
+                Track how your new MP is voting with
+                <strong><a href="http://www.publicwhip.org.uk/">The Public Whip</a></strong>
+                </div>
+            {/if}
+            *}
+
+	  <div id="divHeader"{if $hide_logo == true} class="small"{/if}>
+
+            {if $hide_logo == false}
+	      <div id="pLogo">
+		<h2><a href="{$www_server}">OpenAustralia Foundation Presents</h2>
+                <h1><a href="{$www_server}">{$site_name}</a></h1>
+                <h2><a href="{$www_server}">2010 FEDERAL ELECTION Live <span>|</span> election monitoring</a></h2>
+	      </div>
+            {/if}
+
+            <ul id="ulMenu">
+              <li>
+                  <a href="{$www_server}">
+                      Home
+                  </a>
+              </li>
+              <li>
+                  <a href="{$www_server}/addupload">
+                      Add a leaflet
+                  </a>
+              </li>
+              <li>
+                  <a href="{$www_server}/leaflets/">
+                      Latest
+                  </a>
+              </li>
+              <!--
+              <li>
+                  <a href="{$www_server}/map/leaflets/">
+                      Map
+                  </a>
+              </li>
+              <li>
+                  <a href="{$www_server}/analysis/">
+                      Analysis
+                  </a>
+              </li>
+              -->
+            </ul>
+        </div>
+    {/if}
+    <div id="divPage" {if $is_home}class="home"{/if}>
+
+        <div id="divContent">
+
+            {* Warnings *}
+			<div id="divWarning">
+	            {if $show_warnings == true}
+	   				<ul class="nobullets">
+	                       {foreach name="warnings" from="$warnings" item="warning"}
+	                           <li>{$warning}</li>
+	                       {/foreach}
+	                   </ul>
+				{/if}
+			</div>
+
+			{* Messages *}
+			<div id="divMessages">
+	            {if $show_messages == true}
+	   				<ul class="nobullets">
+	                       {foreach name="messages" from="$messages" item="message"}
+	                           <li>{$message}</li>
+	                       {/foreach}
+	                   </ul>
+				{/if}
+			</div>
+
diff --git a/templates/index.tpl b/templates/index.tpl
@@ -3,8 +3,8 @@
 <div id="divContentFull">
     <div class="leftcolumn">
     <div id="divWelcome">
-    	<h3>Headline here:</h3>
-    	<h3 class="light">keeping them honest</h3>
+    	<h3>Make a difference</h3>
+    	<h3 class="light">before you vote</h3>
         <p>
             Election leaflets are one of the main weapons in the fight 
 for votes in Australia.
@@ -13,7 +13,7 @@ for votes in Australia.
             They are targeted, effective and sometimes very bitter. 
         </p>
         <p>
-            We need your help to photograph and map them so we can keep 
+            We need <strong>your help</strong> to photograph and map them so we can keep 
 an eye on what the parties are up to, and try to keep them honest.
         </p><br/>
         <p id="pCount">
@@ -23,27 +23,29 @@ an eye on what the parties are up to, and try to keep them honest.
     </div>
     <div class="rightcolumn">
     <div id="calltoactions">
+    <div class="divider"><img class="left" width="110" height="42" src="/images/crease_line_left.png"/><img class="middle" width="75" height="42" src="/images/crease_line_middle.png"/><img class="right" width="75" height="42" src="/images/crease_line_right.png"/></div>
 	    <div id="divFrontLookup">
 			<h4>View leaflets in your area</h4>
-             <form method="get" action="{$www_server}/{$area_names}/">
-                 <input id="txtSearch" name="p" value="Enter postcode" type="text" onfocus="value=''"><input type="image" src="{$www_server}/images/search_button.png" class="button" value="GO" type="submit">                    
-             </form>
+	         <form method="get" action="{$www_server}/{$area_names}/">
+	             <input id="txtSearch" name="p" value="Enter postcode" type="text" onfocus="value=''"><input type="image" src="{$www_server}/images/search_button.png" class="button" value="GO" type="submit">                    
+	         </form>
+	     </div>
+
+	     <div id="divAction">
+	     	<h4>Add a leaflet</h4>
+	        <div class="add upload" onclick="window.location = '{$www_server}/addupload';">
+	            <span class="add-title"><a href="{$www_server}/addupload">Upload them online now</span>
+	            <p>(Photograph or scan them first)</a></p>
+	        </div>
+	        <div class="add email" onclick="window.location = 'mailto:{$leaflets_email}';">
+	            <span class="add-title"><a href="mailto:{$leaflets_email}">Email them straight from your phone</a></span>
+	            <p><a href="mailto:{$leaflets_email}">{$leaflets_email}</a></p>
+	        </div>
+	        <div class="add post">
+	            <span class="add-title">Post them to us via snail mail</span>
+	            <p>OpenAustralia, PO Box 1234, Sydney NSW 2000</p>
+	        </div>
 	     </div>
-     <div id="divAction">
-     	<h4>Add a leaflet</h4>
-        <div class="add upload">
-            <span class="add-title"><a href="{$www_server}/addupload">Upload them online now</span>
-            <p>(Photograph or scan them first)</a></p>
-        </div>
-        <div class="add email">
-            <span class="add-title"><a href="mailto:{$leaflets_email}">Email them straight from your phone</a></span>
-            <p><a href="mailto:{$leaflets_email}">{$leaflets_email}</a></p>
-        </div>
-        <div class="add post">
-            <span class="add-title">Post them to us via snail mail</span>
-            <p>OpenAustralia, PO Box 1234, Sydney NSW 2000</p>
-        </div>
-     </div>
      </div>
      </div>
      <br class="clear">
@@ -74,15 +76,15 @@ an eye on what the parties are up to, and try to keep them honest.
             <h4>Top parties</h4>
             <ol>
                 {foreach from="$total_counts" item="party" name="parties"}
-                    <li><a href="{$www_server}/parties/{$party->url_id}/">{$party->name}</a> {$party->count} leaflets</li>
+                    <li><a href="{$www_server}/parties/{$party->url_id}/">{$party->name}</a> <span class="count">({$party->count})</span></li>
                 {/foreach}
             </ol>
         </div>
         <div>
             <h4>Top {$area_names}</h4>
             <ol>
                 {foreach from="$constituency_counts" item="constituency"}
-                    <li><a href="{$www_server}/{$area_names}/{$constituency->url_id}/">{$constituency->name}</a> {$constituency->count} leaflets</li>
+                    <li><a href="{$www_server}/{$area_names}/{$constituency->url_id}/">{$constituency->name}</a> <span class="count">({$constituency->count})</span></li>
                 {/foreach}
             </ol>
         </div>