Mas cambios al layout.

Ahora hay mucho más enfasis en texto, quitando todo lo que sea inutil y agregando tooltips con jquery.

4 files changed, 97 insertions, 14 deletions

diff --git a/views/grito.haml b/views/grito.haml
index 3408b0a..5fac1c0 100644
--- a/views/grito.haml
+++ b/views/grito.haml
@@ -1,8 +1,7 @@
 %h1= @grito.title
 = @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
+#sharing
+	%input.url{:value => "http://grita.heroku.com/#{@grito.gethash}", :readonly=>true}
+	%br
+	%img#qrcode{:alt=>"Código QR", :src=>"/qr/#{@grito.gethash}.png"}
\ No newline at end of file
diff --git a/views/layoutmini.haml b/views/layoutmini.haml
index 23fbe14..5e24c98 100644
--- a/views/layoutmini.haml
+++ b/views/layoutmini.haml
@@ -9,6 +9,68 @@
 		%link{:rel => 'stylesheet', :type => 'text/css', :href => '/style.css', :title => 'default'}		
 		%link{:rel => "icon", :href => "/images/favicon.ico", :type => "image/x-icon"}
 		%link{:rel => "icon", :href => "/images/favicon.png", :type => "image/png"}
+		%script{:src => "http://www.google.com/jsapi", :type => "text/javascript" }
+		%script{:type => "text/javascript" }
+			:plain
+				  google.load("jquery", "1.4.0");
+		%script{:src => "/js/jquery.qtip-1.0.0-rc3.min.js", :type => "text/javascript" }
+		%script{:type => "text/javascript" }
+			:plain
+				$(document).ready(function() 
+				{
+					$('#qrcode').qtip(
+					   {
+					      content: 'Imprime este código para que puedas compartirlo físicamente. (Solo necesitas un lector de códigos como kaywa o i-nigma en tu celular)',
+						  show: 'mouseover',
+						  hide: 'mouseout',
+						  position: {
+						      corner: {
+						         target: 'bottomMiddle',
+						         tooltip: 'topMiddle'
+						      }
+						  },
+						  style: { 
+						      width: 400,
+						      padding: 5,
+						      background: '#222',
+						      color: '#fff',
+						      textAlign: 'center',
+						      border: {
+						         width: 7,
+						         radius: 5,
+						         color: '#222'
+						      },
+						      tip: 'topMiddle',
+						      name: 'dark' // Inherit the rest of the attributes from the preset dark style
+						   }
+					   });
+					$('input.url').qtip(
+					   {
+					      content: 'Usa esta dirección para compartir el texto via web.',
+						  show: 'mouseover',
+						  hide: 'mouseout',
+						  position: {
+						      corner: {
+						         target: 'topMiddle',
+						         tooltip: 'bottomMiddle'
+						      }
+						  },
+						  style: { 
+						      width: 400,
+						      padding: 5,
+						      background: '#222',
+						      color: '#fff',
+						      textAlign: 'center',
+						      border: {
+						         width: 7,
+						         radius: 5,
+						         color: '#222'
+						      },
+						      tip: 'bottomMiddle',
+						      name: 'dark' // Inherit the rest of the attributes from the preset dark style
+						   }
+					   });
+				});
 		%meta{'http-equiv' => 'Contet-Type', :content => 'text/html; charset=utf-8' }/
 	%body
 		#wrapper
diff --git a/views/style.css b/views/style.css
index 7582af3..3427b79 100644
--- a/views/style.css
+++ b/views/style.css
@@ -29,7 +29,7 @@ body {
   width: 140px;
   height: 65px;
   display: block;
-  margin: 10px 380px;
+  margin: 10px 410px;
 }
 #header #logo span { display: none; }
 #header #logomini span { display: none; }
@@ -114,10 +114,7 @@ hr {
   border: 0;
   border-bottom: 1px solid #eeeeee;
 }
-#body #qrcode {
-  display: block;
-  margin: 10px 90px;
-}
+#body #sharing { text-align: center; }
 #body input.title {
   border: 1px solid #cccccc;
   font-size: 1.6em;
@@ -132,6 +129,11 @@ hr {
   margin: 0 90px;
   width: 770px;
 }
+#body #sharing input.url {
+  width: 290px;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
 #body textarea.text {
   border: 1px solid #cccccc;
   font-size: 1.6em;
@@ -165,3 +167,10 @@ hr {
   width: 760px;
   background-color: #f0fff0;
 }
+.tooltip {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  display: none;
+}
diff --git a/views/style.less b/views/style.less
index 516cbbc..5d11811 100644
--- a/views/style.less
+++ b/views/style.less
@@ -47,7 +47,7 @@ body{
 	width: 140px;
 	height: 65px;
 	display: block;
-	margin: 10px 380px;
+	margin: 10px 410px;
 }
 
 #header #logo span, #header #logomini span{
@@ -141,9 +141,8 @@ hr{
 	border-bottom: 1px solid @border_color;
 }
 
-#body #qrcode{
-	display: block;
-	margin: 10px 90px;
+#body #sharing{
+	text-align: center;
 }
 
 #body input.title, #body input.url{
@@ -154,6 +153,12 @@ hr{
 	width: 770px;
 }
 
+#body #sharing input.url{
+	width: 290px;
+	margin-bottom: 10px;
+	margin-top: 10px;
+}
+
 #body textarea.text{
 	border: 1px solid @lighter_color;
 	font-size: 1.6em;
@@ -189,4 +194,12 @@ hr{
 	margin: 0 90px;
 	width: 760px;
 	background-color: @success_color;
+}
+
+.tooltip{
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 3;
+	display: none;
 }
\ No newline at end of file