Mejoras en visualización de aplicaciones

Gemfile.lock

@@ -95,7 +95,7 @@ GEM
       mime-types
     pg (0.11.0)
     polyglot (0.3.2)
-    rack (1.3.2)
+    rack (1.3.3)
     rack-cache (1.0.3)
       rack (>= 0.4)
     rack-mount (0.8.3)
@@ -132,10 +132,11 @@ GEM
     ruby_core_source (0.1.5)
       archive-tar-minitar (>= 0.5.2)
     sass (3.1.7)
-    sass-rails (3.1.1)
+    sass-rails (3.1.2)
       actionpack (~> 3.1.0)
       railties (~> 3.1.0)
       sass (>= 3.1.4)
+      sprockets (~> 2.0.0)
       tilt (~> 1.3.2)
     sprockets (2.0.0)
       hike (~> 1.2)
@@ -154,7 +155,7 @@ GEM
     uglifier (1.0.3)
       execjs (>= 0.3.0)
       multi_json (>= 1.0.2)
-    will_paginate (3.0.0)
+    will_paginate (3.0.1)
 
 PLATFORMS
   ruby

app/assets/javascripts/apps.js.coffee

@@ -1,3 +1,12 @@
-# Place all the behaviors and hooks related to the matching controller here.
-# All this logic will automatically be available in application.js.
-# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
+jQuery ->
+  if $('#apps').length > 0
+    $('.app a.toggle-expand').click (event) ->
+      $(this).parents('.app').toggleClass('expanded')
+
+      if $(this).parents('.app').hasClass('expanded')
+        $(this).text $(this).data('contract-label')
+      else
+        $(this).text $(this).data('expand-label')
+
+      event.stopPropagation()
+      event.preventDefault()

app/assets/stylesheets/apps.css.scss

@@ -56,20 +56,30 @@
       .links {
         position: absolute;
         bottom: .5em;
+        opacity: 0;
+        @include transition(.25s, opacity, ease-out);
       }
 
       &:hover {
-        height: 15.5em;
         border: 2px solid $main-color;
-        @include transition(.25s .25s, height, ease-out);
-
-        .description {
+
+        .links {
           opacity: 1;
-          height: 10em;
-          @include transition(.2s .5s, opacity, ease-out);
+          @include transition(.25s, opacity, ease-in);
         }
       }
     }
+
+    section.app.expanded {
+      height: 15.5em;
+      @include transition(.25s, height, ease-out);
+
+      .description {
+        opacity: 1;
+        height: 10em;
+        @include transition(.2s .25s, opacity, ease-out);
+      }
+    }
 
     ul {
       margin: .5em 2em;

app/views/apps/index.html.erb

@@ -10,7 +10,10 @@
     </div>
 
     <p class="links">
-      <%= link_to t('view.apps.show_hints'), app_hints_path(app) %>
+      <%= link_to t('view.apps.show_hints'), app_hints_path(app) %> |
+      <%= link_to t('view.apps.expand'), '#', :class => 'toggle-expand',
+        'data-contract-label' => t('view.apps.contract'),
+        'data-expand-label' => t('view.apps.expand') %>
     </p>
   </section>
 <% end %>

config/locales/application.es.yml

@@ -86,6 +86,8 @@
       stale_object_error: 'La aplicación no pudo ser actualizada, intente nuevamente.'
       new: 'Nueva'
       show_hints: 'Ver consejos'
+      expand: 'Expandir'
+      contract: 'Contraer'
     feedbacks:
       submit: 'Enviar comentario'
       positive_return: 'Nos alegra haberte ayudado. Gracias por la retroalimentación.'