diff options
| -rw-r--r-- | grita.rb | 4 | ||||
| -rw-r--r-- | views/grito.haml | 9 | ||||
| -rw-r--r-- | views/index.haml | 11 | ||||
| -rw-r--r-- | views/layout.haml | 6 | ||||
| -rw-r--r-- | views/style.css | 67 | ||||
| -rw-r--r-- | views/style.less | 67 |
6 files changed, 156 insertions, 8 deletions
@@ -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 1a3bbc2..3408b0a 100644 --- 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 2b40431..7801311 100644 --- 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 2954a06..6fed808 100644 --- 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 c082c52..44be2e0 100644 --- 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 6052c10..feb4a95 100644 --- 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; |