new layout for the home buttons

10 files changed, 111 insertions, 67 deletions

diff --git a/app/assets/stylesheets/leap.scss b/app/assets/stylesheets/leap.scss
index a7d6261..577d211 100644
--- a/app/assets/stylesheets/leap.scss
+++ b/app/assets/stylesheets/leap.scss
@@ -1,27 +1,24 @@
+//
+// LAYOUT
+//
 
-table.table-hover .btn {
-  opacity: 0;
-}
-table.table-hover tr:hover .btn {
-  opacity: 1;
-}
-
-.ticket {
-  td.user {
-    white-space: nowrap;
-  }
-  td.comment {
-    width: 100%;
-  }
+// This is a trick to be able to use bootstrap fluid layout and also have a max-width.
+// It is like having your cake and eating it too.
+#main {
+  *zoom: 1;
+  margin-left: auto;
+  margin-right: auto;
+  width: 1000px;
+  max-width: 100%;
 }
 
 //
 // UTILITY
 //
 
-.debug {
-  outline: 1px solid red;
-}
+//.debug {
+// outline: 1px solid red;
+//}
 
 .full-width {
   width: 100%;
@@ -36,8 +33,35 @@ table.table-hover tr:hover .btn {
   padding-top: 0;
 }
 
+.last {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
 //
-// Typography
+// ICONS
+//
+
+[class^="big-icon-"],
+[class*=" big-icon-"] {
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  @include ie7-restore-right-whitespace();
+  line-height: 32px;
+  vertical-align: middle;
+  //background-image: $iconSpritePath;
+  //background-position: 14px 14px;
+  background-repeat: no-repeat;
+  margin-top: 1px;
+}
+
+.big-icon-arrow-down {
+  background-image: url(/img/32/arrow-down.png)
+}
+
+//
+// TYPOGRAPHY
 //
 
 input.large {
@@ -50,7 +74,7 @@ input.large {
 }
 
 //
-// FORMS
+// BOOSTRAP TWEAKS
 //
 
 //
@@ -67,27 +91,33 @@ input, textarea {
   }
 }
 
-//
-// Labels
-//
-
+// like a label, but with no background
 .label-clear {
   background-color: $white;
   text-shadow: none;
   color: $black;
 }
 
-//
-// Icons
-//
-
 // force a black icon, even if bootstrap thinks differently
 .icon-black {
   background-image: url(/assets/glyphicons-halflings.png) !important;
 }
 
 //
-// Boring default masthead
+// TICKETS
+//
+
+.ticket {
+  td.user {
+    white-space: nowrap;
+  }
+  td.comment {
+    width: 100%;
+  }
+}
+
+//
+// BORING DEFAULT MASTHEAD
 //
 
 #masthead {
@@ -104,25 +134,25 @@ input, textarea {
 }
 
 .home-buttons {
-  .span6 {
-    margin-bottom: 20px;
+  text-align: center;
+  .first {
+    margin: 20px 0;
   }
-  div {
-    a {
-      width: 10em;
-      margin-bottom: 4px;
-      display: block;
-    }
-    .info {
-    }
-    span {
+  .download {
+    a.btn {
+      width: 14em;
     }
   }
+  a.btn {
+    font-weight: bold;
+    width: 11em;
+    margin: 10px auto;
+    display: block;
+  }
 }
 
-
 //
-// Side Navigation
+// SIDE NAVIGATION
 //
 
 .sidenav {
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index 06b245a..62d9df2 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -3,4 +3,16 @@ class ApplicationController < ActionController::Base
 
   ActiveSupport.run_load_hooks(:application_controller, self)
 
+  protected
+
+  #
+  # Allows us to pass through bold text to flash messages. See format_flash() for where this is reversed.
+  #
+  # TODO: move to core
+  #
+  def bold(str)
+    "[b]#{str}[/b]"
+  end
+  helper_method :bold
+
 end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index a236a0a..1e79990 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -29,4 +29,12 @@ module ApplicationHelper
     "<i class=\"icon-#{name} #{color_class}\"></i> ".html_safe
   end
 
+  def big_icon(name, color=nil)
+    "<i class=\"big-icon-#{name}\"></i> ".html_safe
+  end
+
+  def format_flash(msg)
+    html_escape(msg).gsub('[b]', '<b>').gsub('[/b]', '</b>').html_safe
+  end
+
 end
diff --git a/app/views/home/_home_text.html.haml b/app/views/home/_home_text.html.haml
deleted file mode 100644
index 4de4b5e..0000000
--- a/app/views/home/_home_text.html.haml
+++ /dev/null
@@ -1,6 +0,0 @@
-%h1= t(:welcome, :provider => APP_CONFIG[:domain])
-
-%p
-  We provide secure communication services, including encrypted internet, email (coming soon), and chat (coming later).
-
-= home_page_buttons
diff --git a/app/views/home/index.html.haml b/app/views/home/index.html.haml
index 96a3aee..9da66a1 100644
--- a/app/views/home/index.html.haml
+++ b/app/views/home/index.html.haml
@@ -1,10 +1,9 @@
-/ .row-fluid
-/   .span8
-/     = render 'home_text'
-/   .span4
-/     = render '/login_or_signup'
+%h1= t(:welcome, :provider => APP_CONFIG[:domain])
 
-= render 'home_text'
+%p
+  We provide secure communication services, including encrypted internet, email (coming soon), and chat (coming later).
+
+= home_page_buttons
 
 - if Rails.env == 'development'
   .row-fluid
diff --git a/app/views/layouts/_masthead_large.html.haml b/app/views/layouts/_masthead_noauth.html.haml
index 6bb1943..6bb1943 100644
--- a/app/views/layouts/_masthead_large.html.haml
+++ b/app/views/layouts/_masthead_noauth.html.haml
diff --git a/app/views/layouts/_messages.html.haml b/app/views/layouts/_messages.html.haml
index 80e34d4..a3bbbac 100644
--- a/app/views/layouts/_messages.html.haml
+++ b/app/views/layouts/_messages.html.haml
@@ -2,4 +2,4 @@
   - if msg.is_a?(String)
     %div{:class => "alert alert-#{name == :notice ? "success" : "error"}"}
       %a.close{"data-dismiss" => "alert"} ×
-      = content_tag :div, msg, :id => "flash_#{name}"
+      = content_tag :div, format_flash(msg), :id => "flash_#{name}"
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 71364fc..e185f26 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -12,8 +12,8 @@
     #masthead
       - if logged_in?
         = render 'layouts/masthead'
-      - else
-        = render 'layouts/masthead_large'
+      - elsif params[:controller] != 'home'
+        = render 'layouts/masthead_noauth'
     #main
       .container-fluid
         - if logged_in?
diff --git a/core/app/views/common/_home_page_buttons.html.haml b/core/app/views/common/_home_page_buttons.html.haml
index ed70ff7..82a5cc2 100644
--- a/core/app/views/common/_home_page_buttons.html.haml
+++ b/core/app/views/common/_home_page_buttons.html.haml
@@ -1,18 +1,19 @@
-- link_class = 'btn'
 - icon_color = :black
 
 .home-buttons
   .row-fluid.first
-    .login.span6
-      %span.link= link_to(icon('ok-sign', icon_color) + t(:login), new_session_path, :class => link_class)
-      %span.info= t(:login_info)
-    .signup.span6
-      %span.link= link_to(icon('user', icon_color) + t(:signup), new_user_path, :class => link_class)
-      %span.info= t(:signup_info)
-  .row-fluid.second
+    .span3
     .download.span6
-      %span.link= link_to(icon('arrow-down', icon_color) + t(:download_client), "https://downloads.leap.se/client", :class => link_class)
+      %span.link= link_to(big_icon('arrow-down', icon_color) + t(:download_client), "https://downloads.leap.se/client", :class => 'btn btn-large')
       %span.info= t(:download_client_info, :provider => content_tag(:b,APP_CONFIG[:domain])).html_safe
-    .help.span6
-      %span.link= link_to(icon('question-sign', icon_color) + t(:get_help), "/tickets/new", :class => link_class)
+    .span3
+  .row-fluid.second
+    .login.span4
+      %span.link= link_to(icon('ok-sign', icon_color) + t(:login), new_session_path, :class => 'btn')
+      %span.info= t(:login_info)
+    .signup.span4
+      %span.link= link_to(icon('user', icon_color) + t(:signup), new_user_path, :class => 'btn')
+      %span.info= t(:signup_info)
+    .help.span4
+      %span.link= link_to(icon('question-sign', icon_color) + t(:get_help), "/tickets/new", :class => 'btn')
       %span.info= t(:help_info)
diff --git a/public/img/32/arrow-down.png b/public/img/32/arrow-down.png
new file mode 100644
index 0000000..3b16e6d
--- /dev/null
+++ b/public/img/32/arrow-down.png