Footer and Locale

GuruPI · Aug 20, 2010 · bdea477 · bdea477
1 parent 5f16e0d
commit bdea477
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 7 deletions.
diff --git a/locales/en.yml b/locales/en.yml
@@ -0,0 +1,8 @@
+index:
+  title: How many fakes follow you?
+  button: Calculate
+  footer:
+    message: !!html
+      Twifakes uses <a href="http://en.wikipedia.org/wiki/OAuth" target="_blank">OAuth</a> for Authentication. This is designed to protect your account. You will be redirected to Twitter and asked to allow the Twifakes Application. Simply click Allow to use Twifakes. We promise not to misuse or abuse your account.
+    locale: !!html
+      Change language to <a href="/?locale=pt">Portuguese</a>
diff --git a/locales/pt.yml b/locales/pt.yml
@@ -0,0 +1,8 @@
+index:
+  title: Quantos fakes seguem você?
+  button: Calcular
+  footer:
+    message: !!html
+      Para proteger sua conta o Twifakes usa <a href="http://en.wikipedia.org/wiki/OAuth" target="_blank">OAuth</a> na Autenticação. Você será redirecionado para o Twitter que perguntará se você dar permissão à aplicação Twifakes. Simplesmente clique em "Allow" para usar o Twifakes. Prometemos não fazer uso indevido ou abusar da sua conta.
+    locale: !!html
+      Mudar idioma para <a href="/?locale=en">Inglês</a>
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
@@ -14,15 +14,17 @@ html, body {
 body {
   background:#e5e5e5 url("/images/bg.gif") repeat-x;
   font:88%/1.4em Arial, sans-serif;
-  color:#555;
+  color:#888;
   text-align:center;
 }
 header, section, footer {
   display:block;
 }
 #wrapper {
   background:url("/images/bg-point.jpg") center top no-repeat;
-  height:100%;
+  height:auto !important;
+  margin-bottom:-100px;
+  min-height:100%;
 }
 header {
   height:180px;
@@ -70,4 +72,21 @@ header h1 {
   text-shadow:none;
   height:59px;
   padding:1px 59px 0 61px;
+}
+#stick {
+  height:100px;
+  padding-bottom:1em;
+}
+footer {
+  height:100px;
+  width:900px;
+  margin:0 auto;
+  font-size:0.9em;
+}
+footer a {
+  color:#656565;
+}
+#locale {
+  margin-top:10px;
+  font-size:0.9em;
 }
diff --git a/twifakes.rb b/twifakes.rb
@@ -2,6 +2,14 @@
 require 'sinatra'
 require 'yaml'
 require 'twitter_oauth'
+require 'sinatra/r18n'
+
+set :default_locale, 'en'
+set :translations,   './locales'
+
+before do
+  session[:locale] = params[:locale] || "en"
+end
 
 get "/" do
   erb :index

diff --git a/views/index.erb b/views/index.erb
@@ -1,11 +1,11 @@
 <!DOCTYPE HTML>
-<html lang="en"> 
+<html lang="<%= r18n.locale.code %>"> 
   <head> 
     <meta charset="utf-8">
     <meta name="description" content="How many fakes follow you?" />
     <meta name="keywords" content="Twitter, Fakes, Joke, Calculate, Twitter Fakes, Twitter service" />
     <link rel="stylesheet" media="screen" href="/stylesheets/style.css" />
-    <title>How many fakes follow you? | Twifakes</title> 
+    <title><%= r18n.index.title %> | Twifakes</title> 
     <!--[if IE]>
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
@@ -30,11 +30,16 @@
       </header>
 
       <section id="content">
-        <h1>How many fakes follow you?</h1>
-        <p id="calculate"><a href="/connect">Calculate</a></p>
+        <h1><%= r18n.index.title %></h1>
+        <p id="calculate"><a href="/connect"><%= r18n.index.button %></a></p>
       </section>
+
+      <div id="stick"></div>
 	  </section>
 
-    <footer></footer>
+    <footer>
+      <p id="message"><%= r18n.index.footer.message %></p>
+      <p id="locale"><%= r18n.index.footer.locale %></p>
+    </footer>
   </body>
 </html>