From 42a8917f5cc04a02fef68af3685cbb99e072b57a Mon Sep 17 00:00:00 2001
From: Paul van Tilburg
Date: Mon, 31 May 2010 22:15:44 +0200
Subject: [PATCH] Small view and style tweaks. * Put the footer in a
paragraph. * Update the intro text. * Kill the stupid . * Make CSS
pixel perfect.
---
anne-survey.rb | 66 ++++++++++++++++++++++++++------------------------
1 file changed, 34 insertions(+), 32 deletions(-)
diff --git a/anne-survey.rb b/anne-survey.rb
index 9ca7115..1924898 100644
--- a/anne-survey.rb
+++ b/anne-survey.rb
@@ -1,6 +1,7 @@
+require "camping"
+require "camping/session"
require "pathname"
require "markaby"
-require "camping/session"
Markaby::Builder.set(:indent, 2)
@@ -174,19 +175,21 @@ module Anne::Views
h1 "Enquête ruimtelijke effecten"
end
div.content! { self << yield }
- div.footer! { "Copyright © 2010 Anne Pijl, Bram Senders, Paul van Tilburg" }
+ div.footer! do
+ p "Copyright © 2010 Anne Pijl, Bram Senders, Paul van Tilburg"
+ end
end
end
end
def intro
p "Met deze enquête worden een aantal ruimtelijke effecten onderzocht. " \
- "Je krijgt 45 keer een plaatje met twee afbeeldingen te zien. " \
- "Je kiest welke afbeelding, de linker of de rechter afbeelding, " \
- "je ruimtelijker ervaart. " \
- "In welk plaatje zie je meer diepte, welk plaatje lijkt jou het meest " \
- "3-dimensionaal? Als je het niet weet, klik je op een willekeurige " \
- "afbeelding. De test duurt 5 à 10 minuten. Succes!"
+ "Je krijgt 45 keer twee afbeeldingen te zien. Je kiest welke afbeelding" \
+ " je ruimtelijker ervaart. In welke afbeelding zie je meer diepte, " \
+ "welke afbeelding lijkt jou het meest 3-dimensionaal? Als je het niet " \
+ "weet, klik je op een willekeurige afbeelding. De test duurt 5 á 10 " \
+ "minuten. Succes!"
+
p "Doe de test volledig om kans te maken op de prijs."
p "– Anne Pijl"
@@ -220,7 +223,8 @@ module Anne::Views
"Technische Natuurkunde",
"Werktuigbouwkunde",
"Wiskunde & Informatica"]
- make_select "Studiejaar", "user_study_year", ["niet van toepassing"] + (1998..2009).to_a
+ make_select "Studiejaar", "user_study_year",
+ ["niet van toepassing"] + (1998..2009).to_a
make_select "Geslacht", "user_gender", ["", "man", "vrouw"]
make_select "Ben je kleurenblind?", "user_colorblind", ["nee", "ja"]
make_select "Vind je dat je een goed ruimtelijk voorstellingsvermogen hebt?",
@@ -234,17 +238,19 @@ module Anne::Views
h2 "Welk beeld is ruimtelijker?"
form :action => R(Vote), :method => :post do
input :type => "hidden", :name => "image", :value => image
- input.image :type => "image", :src => R(ImageX, "#{image}-l.png"), :name => "left", :id => "left"
- input.image :type => "image", :src => R(ImageX, "#{image}-r.png"), :name => "right", :id => "right"
+ input.image :type => "image", :src => R(ImageX, "#{image}-l.png"),
+ :name => "left", :id => "left"
+ input.image :type => "image", :src => R(ImageX, "#{image}-r.png"),
+ :name => "right", :id => "right"
end
div.progressbar! do
- div.done! :style => "width: #{progress}%" do " " end
+ div.done! :style => "width: #{progress}%" do end
end
end
def finish
h2 "Dank je wel voor het meedoen aan dit onderzoek."
- p "Als je geïnteresseerd bent in de resultaten van de enquête of je wilt " +
+ p "Als je geïnteresseerd bent in de resultaten van de enquête of je wilt " \
"meedingen naar de prijs, vul dan hier je e-mailadres in."
form :action => R(Finish), :method => :post do
@@ -279,20 +285,18 @@ end
__END__
/* Style sheet for the Anne Survey Camping app */
-html, body { margin: 0; padding: 0; background: #333; }
+html { background: #333; }
body {
- margin: 0 auto;
- margin-top: 10pt;
- border: thin solid #333;
- padding: 10px;
+ margin: 10px auto;
+ padding: 12px;
width: 960px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: white;
background-color: black;
- -webkit-border-radius: 1em;
- -moz-border-radius: 1em;
- border-radius: 1em;
+ -webkit-border-radius: 12px;
+ -moz-border-radius: 12px;
+ border-radius: 12px;
}
#header {
@@ -300,28 +304,26 @@ body {
height: 73px;
}
-#header h1 {
- padding-top: 20px;
-}
+#header h1 { padding-top: 25px; margin-top: 0px; }
-.image { border: thin solid #888; text-align: center; }
-#left { margin-right: 10px; }
-#right { margin-left: 10px; }
+.image { border: thin solid #888; }
+#left { margin: 0px 15px 0px 0px; }
+#right { margin: 0px 0px 0px 15px; }
#progressbar {
height: 6px;
- margin-top: 1.2em;
+ margin-top: 14px;
background-color: #101073;
}
#progressbar #done {
- height: 5pt;
+ height: inherit;
background-color: #d6007b;
}
#footer {
- padding: 3pt 8pt 0pt 8pt;
- margin-top: 1em;
+ padding: 0px 0px 0px 8px;
+ margin-top: 14px;
border-top: thin #eee solid;
- font-size: 62.5%;
+ font-size: 69.4%;
}