adrianshort
/
suttonelections
镜像自地址 https://github.com/adrianshort/suttonelections.git
1
0
派生 0
代码 工单 0 版本发布 2 百科 动态
浏览代码

Added grid layout

tags/last-sinatra-version
Adrian Short 14 年前
父节点
1c0fc5e1ea
当前提交
97f21afeae
共有 8 个文件被更改，包括 517 次插入 和 152 次删除
分列视图
Diff 选项
显示统计 下载 Patch 文件 下载 Diff 文件
  1. +338
    -0
      public/grid.css
  2. +12
    -11
      public/style.css
  3. +30
    -29
      views/about.haml
  4. +28
    -27
      views/election.haml
  5. +5
    -0
      views/error.haml
  6. +24
    -23
      views/home.haml
  7. +23
    -15
      views/layout.haml
  8. +57
    -47
      views/wards.haml

+ 338
- 0
public/grid.css 查看文件

@@ -0,0 +1,338 @@
/*
Variable Grid System.
Learn more ~ http://www.spry-soft.com/grids/
Based on 960 Grid System - http://960.gs/

Licensed under GPL and MIT.
*/


/* Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {
margin-left: auto;
margin-right: auto;
width: 756px;
}

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
display:inline;
float: left;
position: relative;
margin-left: 20px;
margin-right: 20px;
}

/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
margin-left: 0;
}

.omega {
margin-right: 0;
}

/* Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .grid_1 {
width:23px;
}

.container_12 .grid_2 {
width:86px;
}

.container_12 .grid_3 {
width:149px;
}

.container_12 .grid_4 {
width:212px;
}

.container_12 .grid_5 {
width:275px;
}

.container_12 .grid_6 {
width:338px;
}

.container_12 .grid_7 {
width:401px;
}

.container_12 .grid_8 {
width:464px;
}

.container_12 .grid_9 {
width:527px;
}

.container_12 .grid_10 {
width:590px;
}

.container_12 .grid_11 {
width:653px;
}

.container_12 .grid_12 {
width:716px;
}



/* Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .prefix_1 {
padding-left:63px;
}

.container_12 .prefix_2 {
padding-left:126px;
}

.container_12 .prefix_3 {
padding-left:189px;
}

.container_12 .prefix_4 {
padding-left:252px;
}

.container_12 .prefix_5 {
padding-left:315px;
}

.container_12 .prefix_6 {
padding-left:378px;
}

.container_12 .prefix_7 {
padding-left:441px;
}

.container_12 .prefix_8 {
padding-left:504px;
}

.container_12 .prefix_9 {
padding-left:567px;
}

.container_12 .prefix_10 {
padding-left:630px;
}

.container_12 .prefix_11 {
padding-left:693px;
}



/* Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .suffix_1 {
padding-right:63px;
}

.container_12 .suffix_2 {
padding-right:126px;
}

.container_12 .suffix_3 {
padding-right:189px;
}

.container_12 .suffix_4 {
padding-right:252px;
}

.container_12 .suffix_5 {
padding-right:315px;
}

.container_12 .suffix_6 {
padding-right:378px;
}

.container_12 .suffix_7 {
padding-right:441px;
}

.container_12 .suffix_8 {
padding-right:504px;
}

.container_12 .suffix_9 {
padding-right:567px;
}

.container_12 .suffix_10 {
padding-right:630px;
}

.container_12 .suffix_11 {
padding-right:693px;
}



/* Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .push_1 {
left:63px;
}

.container_12 .push_2 {
left:126px;
}

.container_12 .push_3 {
left:189px;
}

.container_12 .push_4 {
left:252px;
}

.container_12 .push_5 {
left:315px;
}

.container_12 .push_6 {
left:378px;
}

.container_12 .push_7 {
left:441px;
}

.container_12 .push_8 {
left:504px;
}

.container_12 .push_9 {
left:567px;
}

.container_12 .push_10 {
left:630px;
}

.container_12 .push_11 {
left:693px;
}



/* Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .pull_1 {
left:-63px;
}

.container_12 .pull_2 {
left:-126px;
}

.container_12 .pull_3 {
left:-189px;
}

.container_12 .pull_4 {
left:-252px;
}

.container_12 .pull_5 {
left:-315px;
}

.container_12 .pull_6 {
left:-378px;
}

.container_12 .pull_7 {
left:-441px;
}

.container_12 .pull_8 {
left:-504px;
}

.container_12 .pull_9 {
left:-567px;
}

.container_12 .pull_10 {
left:-630px;
}

.container_12 .pull_11 {
left:-693px;
}




/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

* html .clearfix {
height: 1%;
}

.clearfix {
display: block;
}

+ 12
- 11
public/style.css 查看文件

@@ -3,15 +3,15 @@ body
background-color: #fff;
color: #555;
font-family: Helvetica, Arial, sans-serif;
width: 600px;
margin: 70px auto;
width: 760px;
margin: 20px auto;
line-height: 1.5em;
}

input
{
font-size: 150%;
font-size: 130%;
background-color: #fff;
}

@@ -20,20 +20,16 @@ input.postcode
text-transform: uppercase;
}

.highlight
{
background-color: yellow;
}

#main
{
margin: 60px 0;
margin: 30px 0;
}

#footer
{
font-size: 100%;
background-color: #fff;
text-align: right;
}

.credit
@@ -90,7 +86,7 @@ a.date

h1
{
margin-top: 50px;
margin-top: 20px;
line-height: 1.5em;
font-weight: bold;
color: #000;
@@ -109,11 +105,16 @@ h1

.highlight
{
background-color: yellow;
background-color: #fff7c0;
padding: 5px;
}

strong
{
color: #000;
}

.border_right
{
border-right: 0px solid #ccc;
}

+ 30
- 29
views/about.haml 查看文件

@@ -1,33 +1,34 @@
%h1 About this website

%p
This website was designed and written by
%a{ :href => 'http://adrianshort.co.uk' }> Adrian Short
\.
You can contact me by email at
%a{ :href => "mailto:adrian.short@gmail.com" }< adrian.short@gmail.com
and
%a{ :href => "http://twitter.com/adrianshort" }<follow me on Twitter
\.
.grid_9
%h1 About this website
%p This site is independent of Sutton Council, all political parties and candidates. It exists only to provide information about the voting system and local candidates.

%p
The council candidates' data comes from Sutton Council who also provided information on council wards and parliamentary constituencies.
%p
The code for this website is open source and managed on Github. It is hosted by Heroku.
%p
This website was designed and written by
%a{ :href => 'http://adrianshort.co.uk' }> Adrian Short
\.
You can contact me by email at
%a{ :href => "mailto:adrian.short@gmail.com" }< adrian.short@gmail.com
and
%a{ :href => "http://twitter.com/adrianshort" }<follow me on Twitter
\.
%p.highlight This site is independent of Sutton Council, all political parties and candidates. It exists only to provide information about the voting system and local candidates.
%p
The postcode lookup is done by UK Postcodes using open data from Ordnance Survey Code-Point Open enhanced by MySociety. I use the Ruby Pat gem to access the postcodes API.

%p
This site is written in Ruby using the Sinatra framework. The HTML templates use Haml. The database is sqlite for development and postgresql for production, abstracted through DataMapper. Source control and deployment is done with Git.
-#
%p
The council candidates' data comes from Sutton Council who also provided information on council wards and parliamentary constituencies.
%p
The code for this website is open source and managed on Github. It is hosted by Heroku.
%p
The postcode lookup is done by UK Postcodes using open data from Ordnance Survey Code-Point Open enhanced by MySociety. I use the Ruby Pat gem to access the postcodes API.
%h2 #followfooter
%p
This site is written in Ruby using the Sinatra framework. The HTML templates use Haml. The database is SQLite for development and PostgreSQL for production, abstracted through DataMapper. Source control and deployment is done with Git.
%ul
- for account in @accounts
%li
%a{ :href => "http://twitter.com/#{account}" }@#{account}
-#
%h2 #followfooter
%ul
- for account in @accounts
%li
%a{ :href => "http://twitter.com/#{account}" }@#{account}

+ 28
- 27
views/election.haml 查看文件

@@ -1,27 +1,28 @@
%h1 How the council election works

%p On 6 May 2010 you get to choose your local councillors and to decide who runs Sutton Council for the next four years.

%p Sutton borough is divided into 18 areas called wards.

%p Each ward has three councillors. That makes 54 councillors for the whole borough.

%p You get three votes to choose three councillors for your ward from the list of candidates.

%p The three people with the most votes in each ward become the councillors for that ward.

%p If a political party gets 28 or more councillors they get to run Sutton Council and decide its policies and services until the next election in four years time.


%h2 Registering to vote

%p
If you're not already registered to vote you must do so by
%strong 20 April
otherwise you won't be able to take part.

%p
You can get a registration form at the
%a{ :href => "http://www.aboutmyvote.co.uk/" } About My Vote
website or by phoning Sutton Council on
%span{ :class => 'phone' } 020 8770 4888.
.grid_9
%h1 How the council election works
%p On 6 May 2010 you get to choose your local councillors and to decide who runs Sutton Council for the next four years.
%p Sutton borough is divided into 18 areas called wards.
%p Each ward has three councillors. That makes 54 councillors for the whole borough.
%p You get three votes to choose three councillors for your ward from the list of candidates.
%p The three people with the most votes in each ward become the councillors for that ward.
%p If a political party gets 28 or more councillors they get to run Sutton Council and decide its policies and services until the next election in four years time.
%h2 Register to vote
%p
If you're not already registered to vote you must do so by
%strong 20 April
otherwise you won't be able to take part.
%p
You can get a registration form at the
%a{ :href => "http://www.aboutmyvote.co.uk/" } About My Vote
website or by phoning Sutton Council on
%span{ :class => 'phone' } 020 8770 4888.

+ 5
- 0
views/error.haml 查看文件

@@ -0,0 +1,5 @@
%h1 Not Found

%p That's an invalid postcode or one that's not in the London Borough of Sutton.

%p Sorry, we can't help you further.

+ 24
- 23
views/home.haml 查看文件

@@ -1,23 +1,24 @@
%h1
Vote for your MP and councillors
%br
in Sutton on 6 May

%p
On 6 May you can vote to
%strong
choose your local MP
and help to decide the next government of the country.

%p
And you can also
%strong
elect your local councillors
and help to decide who runs Sutton Council.

%p Who you can vote for depends on where you live. You can find your local candidates and get more information on how the elections work here.

%form{ :method => 'get', :action => '/wards' }
%label{ :for => "postcode" } My postcode is
%input{ :type => 'text', :name => 'postcode', :value => 'SM1 1EA', :size => 8, :maxlength => 8 }
%input{ :type => 'submit', :value => "Find it" }
.grid_9
%h1
Vote for your MP and councillors
%br
in Sutton on 6 May
%p
On 6 May 2010 you can vote to
%strong
choose your local MP
and help to decide the next government of the country.
%p
You can also
%strong
elect your local councillors
and help to decide who runs Sutton Council.
%p Who you can vote for depends on where you live. You can find your local candidates and get more information on how the elections work here.
%form{ :method => 'get', :action => '/wards' }
%label{ :for => "postcode" } My postcode is
%input{ :type => 'text', :name => 'postcode', :value => 'SM1 1EA', :size => 8, :maxlength => 8 }
%input{ :type => 'submit', :value => "Find it" }

+ 23
- 15
views/layout.haml 查看文件

@@ -4,23 +4,31 @@
%head
%title Sutton Elections 6 May 2010
%link{ :rel => 'stylesheet', :type => 'text/css', :href => '/style.css' }
%link{ :rel => 'stylesheet', :type => 'text/css', :href => '/grid.css' }
<script type="text/javascript" src="http://use.typekit.com/wfg6cvc.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
%body
#header
%a.date{ :href => '/' } 6 May 2010
#main
= yield
#footer
%p
%a{ :href => '/' } Home
%p
%a{ :href => '/how-the-council-election-works' } How the council election works
.container_12
-#
#header.grid_12
%a.date{ :href => '/' } 6 May 2010
.clear
#main
= yield
.clear
#footer
.grid_9
&nbsp;
.grid_3
%p
%a{ :href => '/voting' } How to vote
%p
%a{ :href => '/about' } About this website
%p.credit
Design
%a{ :href => "http://adrianshort.co.uk/" } Adrian Short
%a{ :href => '/' } Home
%p
%a{ :href => '/how-the-council-election-works' } How the council election works
-#
%p
%a{ :href => '/voting' } How to vote
%p
%a{ :href => '/about' } About this website
%p.credit
Design
%a{ :href => "http://adrianshort.co.uk/" } Adrian Short

+ 57
- 47
views/wards.haml 查看文件

@@ -4,54 +4,64 @@
If you live in
= @postcode

%h1
Candidates for
= @ward.constituency.name
member of parliament
%p
You can vote for
%strong
ONE
of these people to become your next MP.
.grid_6.border_right
%h1
= @ward.constituency.name
member of parliament

- for candidate in @parly_candidates
%p
%span.candidate_name
= candidate.forenames
= candidate.surname
%br
%span.candidate_party
= candidate.party.name
%p.highlight
This list of candidates may be incomplete as people have until
%strong
20 April
to decide whether they want to stand for election as the
= @ward.constituency.name
MP.
.grid_6
%h1
= @ward.name
ward council candidates
.clear
%h1
Council candidates in
= @ward.name
Ward
.grid_6
%p
You can vote for
%strong
ONE
of these people to become your next MP.
%p
Find out more about
%a{ :href => '/how-the-parliament-election-works' } how the parliament election works.

%p
You can vote for
%strong
THREE
of these people to become your local councillors.
%p
Find out more about
%a{ :href => '/how-the-council-election-works' } how the council election works.
- for candidate in @council_candidates
.grid_6
%p
You can vote for
%strong
THREE
of these people to become your local councillors.
%p
%span.candidate_name
= candidate.forenames
= candidate.surname
%br
%span.candidate_party
= candidate.party.name
Find out more about
%a{ :href => '/how-the-council-election-works' } how the council election works.

.clear

.grid_6
- for candidate in @parly_candidates
%p
%span.candidate_name
= candidate.forenames
= candidate.surname
%br
%span.candidate_party
= candidate.party.name
%p.highlight
This list of candidates may be incomplete as people have until
%strong
20 April
to decide whether they want to stand for election as the
= @ward.constituency.name
MP.

.grid_6
- for candidate in @council_candidates
%p
%span.candidate_name
= candidate.forenames
= candidate.surname
%br
%span.candidate_party
= candidate.party.name

撰写 预览
正在加载...
取消
保存