Version 1.0 Como quien dice

Ya todo estilizado, arregle unas cosas en cuanto a validación ... y aha.

diff --git a/grita.rb b/grita.rb
index 28d903a420b3b989a61927fd6aa930b18370c130..406dde7b846c411021445e47be29fe07cde6b8cb 100644 (file)
--- a/grita.rb
+++ b/grita.rb
@@ -6,6 +6,7 @@ require 'dm-validations'
 require 'dm-timestamps'
 require 'dm-migrations'
 require 'rqr'
+require 'rdiscount'
 
 #config
 set :haml, :format => :html5
@@ -43,6 +44,9 @@ end
 get '/:grito' do
     @grito = Grito.first(:id => params[:grito].to_i(36))
     raise "Invalid Post" if @grito.nil?
+    
+    @markdown = RDiscount.new(@grito.text)
+    
     haml :grito
 end
 

diff --git a/views/grito.haml b/views/grito.haml
index 1a3bbc2caf8d3ac65c17f1811d28401bf40d503a..3408b0ac0ab865e22a47a41532c83f4d364ab287 100644 (file)
--- a/views/grito.haml
+++ b/views/grito.haml
@@ -1,5 +1,8 @@
 %h1= @grito.title
-%p= @grito.text
-%h2 Share
-%p=    "http://grita.heroku.com/#{@grito.gethash}"
+= @markdown.to_html
+%hr
+%h1 Comparte este texto.
+%p Puedes usar esta dirección para pasar a tus amigos por web:
+%input.url{:value => "http://grita.heroku.com/#{@grito.gethash}"}
+%p o puedes usar esta imagen para imprimirla y compartir físicamente con el mundo:
 %img#qrcode{:alt=>"Código QR", :src=>"/qr/#{@grito.gethash}.png"}
\ No newline at end of file

diff --git a/views/index.haml b/views/index.haml
index 2b40431778e65cfe4535fdea9f738adafbfbbd8e..7801311e455345cc50ae1500d3c92d21e6fe188e 100644 (file)
--- a/views/index.haml
+++ b/views/index.haml
@@ -10,9 +10,18 @@
                                Su texto ha sido guardado!
                                %a{:href=>"/#{@grito.gethash}"} De click aquí para verlo.
        %h1 Título
-       %input.title{:type => 'text', :name => 'title'}
+       -unless @grito.nil?
+               -unless @grito.errors.empty?
+                       %input.title{:type => 'text', :name => 'title', :Value => @grito.title}
+               -else
+                       %input.title{:type => 'text', :name => 'title'}
+       -else
+               %input.title{:type => 'text', :name => 'title'}
        %br
        %h1 Texto
        %textarea.text{:name => 'text', :cols => '76', :rows => '20'}
+               -unless @grito.nil?
+                       -unless @grito.errors.empty?
+                               =@grito.text
        %br
        %input.submit{:type => 'submit', :value => 'Gritalo!'}
\ No newline at end of file

diff --git a/views/layout.haml b/views/layout.haml
index 2954a06c915b0750cb3038270a1b83ddeb04322d..6fed8088883c95025c516d69cb37c112131421c5 100644 (file)
--- a/views/layout.haml
+++ b/views/layout.haml
@@ -1,7 +1,11 @@
 !!! 5
 %html
        %head
-               %title ¡Grita!
+               -unless @grito.nil?
+                       -if @grito.errors.empty?
+                               %title= "#{@grito.title} - ¡Grita!"
+                       -else
+                               %title ¡Grita!
                %link{:rel => 'stylesheet', :type => 'text/css', :href => '/style.css', :title => 'default'}
                %meta{'http-equiv' => 'Contet-Type', :content => 'text/html; charset=utf-8' }/
        %body

diff --git a/views/style.css b/views/style.css
index c082c521e60f61c0df0a26341bcf697c48e76f22..44be2e09a8f2b70f950216d1cd782be4454ebee6 100644 (file)
--- a/views/style.css
+++ b/views/style.css
@@ -2,6 +2,7 @@
   margin: 0;
   padding: 0;
 }
+img { border: 0; }
 body {
   color: #666666;
   background-color: #ffffff;
@@ -35,6 +36,16 @@ body {
   font-size: 2.4em;
   color: #222222;
 }
+#body h2 {
+  margin: 20px 90px;
+  font-size: 1.8em;
+  color: #222222;
+}
+#body h3 {
+  margin: 20px 90px;
+  font-size: 1.6em;
+  color: #222222;
+}
 #body p {
   margin: 20px 90px;
   font-size: 1.6em;
@@ -42,6 +53,53 @@ body {
   text-indent: 3em;
   text-align: justify;
 }
+#body ul {
+  margin: 20px 90px;
+  font-size: 1.4em;
+  line-height: 1.8em;
+}
+#body ol {
+  margin: 20px 90px;
+  font-size: 1.4em;
+  line-height: 1.8em;
+}
+#body ul li p {
+  font-size: 1em;
+  margin: 0;
+  line-height: 1em;
+  text-indent: 0;
+}
+#body ol li p {
+  font-size: 1em;
+  margin: 0;
+  line-height: 1em;
+  text-indent: 0;
+}
+#body ul li { margin-left: 80px; }
+#body ol li { margin-left: 80px; }
+#body blockquote {
+  margin: 20px 170px;
+  text-align: justify;
+  border-left: 2px solid #eeeeee;
+  padding-left: 5px;
+}
+#body blockquote blockquote { margin: 10px; }
+#body pre {
+  margin: 20px 170px;
+  border: 1px solid #999999;
+  background-color: #eeeeee;
+  padding: 10px;
+}
+#body pre code {
+  font-size: 1.6em;
+  line-height: 1.8em;
+}
+#body blockquote p {
+  margin: 5px 0;
+  text-indent: 0;
+  font-size: 1.4em;
+  line-height: 1.8em;
+}
 hr {
   margin: 10px;
   border: 0;
@@ -49,7 +107,7 @@ hr {
 }
 #body #qrcode {
   display: block;
-  margin: 10px 250px;
+  margin: 10px 90px;
 }
 #body input.title {
   border: 1px solid #eeeeee;
@@ -58,6 +116,13 @@ hr {
   margin: 0 90px;
   width: 770px;
 }
+#body input.url {
+  border: 1px solid #eeeeee;
+  font-size: 1.6em;
+  padding: 5px;
+  margin: 0 90px;
+  width: 770px;
+}
 #body textarea.text {
   border: 1px solid #eeeeee;
   font-size: 1.6em;

diff --git a/views/style.less b/views/style.less
index 6052c107dbc77383ab8aa09fc59dbcefedbe55a6..feb4a95cda04fa7655d8d5275f847b4f789dfa1b 100644 (file)
--- a/views/style.less
+++ b/views/style.less
@@ -13,6 +13,10 @@
        padding: 0;
 }
 
+img{
+       border: 0;
+}
+
 body{
        color: @text_color;
        background-color: @background_color;
@@ -54,6 +58,18 @@ body{
        color: @emphasis_color;
 }
 
+#body h2{
+       margin: 20px 90px;
+       font-size: 1.8em;
+       color: @emphasis_color;
+}
+
+#body h3{
+       margin: 20px 90px;
+       font-size: 1.6em;
+       color: @emphasis_color;
+}
+
 #body p{
        margin: 20px 90px;
        font-size: 1.6em;
@@ -62,6 +78,53 @@ body{
        text-align: justify;
 }
 
+#body ul, #body ol{
+       margin: 20px 90px;
+       font-size: 1.4em;
+       line-height: 1.8em;
+}
+
+#body ul li p, #body ol li p{
+       font-size: 1em;
+       margin: 0;
+       line-height: 1em;
+       text-indent: 0;
+}
+
+#body ul li, #body ol li{
+       margin-left: 80px;
+}
+
+#body blockquote{
+       margin: 20px 170px;
+       text-align: justify;
+       border-left: 2px solid @border_color;
+       padding-left: 5px;
+}
+
+#body blockquote blockquote{
+       margin: 10px;
+}
+
+#body pre{
+       margin: 20px 170px;
+       border: 1px solid @light_color;
+       background-color: @border_color;
+       padding: 10px;
+}
+
+#body pre code{
+       font-size: 1.6em;
+       line-height: 1.8em;
+}
+
+#body blockquote p{
+       margin: 5px 0;
+       text-indent: 0;
+       font-size: 1.4em;
+       line-height: 1.8em;
+}
+
 hr{
        margin: 10px;
        border: 0;
@@ -70,10 +133,10 @@ hr{
 
 #body #qrcode{
        display: block;
-       margin: 10px 250px;
+       margin: 10px 90px;
 }
 
-#body input.title{
+#body input.title, #body input.url{
        border: 1px solid @border_color;
        font-size: 1.6em;
        padding: 5px;