Merge pull request loomio#463 from enspiral/feature/update-homepage-f…

…or-1.3

Update 1.3 to latest home page

Gemfile

@@ -7,6 +7,7 @@ gem 'devise_invitable', '~> 1.0.0'
 gem 'pg'
 gem 'capistrano'
 gem 'jquery-rails'
+gem "jquery-scrollto-rails"
 gem 'inherited_resources'
 gem 'formtastic' # Deprecated - use simple_form instead.
 gem 'simple_form', '~> 2.0.0'

Gemfile.lock

@@ -118,7 +118,7 @@ GEM
     client_side_validations-simple_form (2.0.1)
       client_side_validations (~> 3.2.0)
       simple_form (~> 2.0.3)
-    cocaine (0.2.1)
+    cocaine (0.4.2)
     coffee-filter (0.1.1)
       coffee-script (>= 2.2.0)
       haml (>= 3.0.18)
@@ -245,6 +245,8 @@ GEM
     jquery-rails (1.0.19)
       railties (~> 3.0)
       thor (~> 0.14)
+    jquery-scrollto-rails (1.4.2)
+      railties (~> 3.1)
     json (1.7.6)
     kaminari (0.13.0)
       actionpack (>= 3.0.0)
@@ -297,11 +299,11 @@ GEM
     paper_trail (2.6.3)
       activerecord (~> 3.0)
       railties (~> 3.0)
-    paperclip (3.1.2)
+    paperclip (3.4.0)
       activemodel (>= 3.0.0)
       activerecord (>= 3.0.0)
       activesupport (>= 3.0.0)
-      cocaine (>= 0.0.2)
+      cocaine (~> 0.4.0)
       mime-types
     pg (0.11.0)
     polyamorous (0.5.0)
@@ -485,6 +487,7 @@ DEPENDENCIES
   jqplot-rails
   jquery-atwho-rails
   jquery-rails
+  jquery-scrollto-rails
   kaminari
   launchy
   letter_opener

app/assets/javascripts/application.js

@@ -12,6 +12,7 @@
 //= require lib/jquery.tokeninput
 //= require lib/jquery.mousewheel
 //= require lib/jquery.placeholder
+//= require scrollTo
 //= require rails.validations
 //= require rails.validations.simple_form
 //= require underscore

app/assets/javascripts/main.js.coffee

@@ -322,3 +322,19 @@ $ ->
           )
         e.preventDefault()
       )
+
+# homepage accordion
+$ ->
+  $(".collapse").collapse()
+
+# homepage scroll effect
+$ ->
+  $(".scroll-nav").click((event)->
+    target = this.hash
+    offsetIE7 = 0;
+    if ($.browser.msie  && parseInt($.browser.version, 10) == 7)
+      offsetIE7 = -34;
+    event.preventDefault()
+    $.scrollTo(target, 1000, {offset: offsetIE7})
+    location.hash = target
+  )

app/assets/stylesheets/main.css.scss

@@ -496,3 +496,18 @@ a.btn-icon:hover { color: $dark-grey; }
   background-image: url("pie-light-24.png");
 }
 
+// Temporary overrides for the new homepage (Jan 2013)
+.sessions.new {
+  form {
+    #user_email, #user_password, textarea {
+      width: 100%;
+    }
+    input[type="checkbox"] {
+      margin: 3px 0px;
+      display: inline-block;
+    }
+    input[type="submit"] {
+      margin: 14px 0 9px 0;
+    }
+  }
+}

app/assets/stylesheets/pages.css.scss

@@ -1,133 +1,187 @@
-@import "settings";
-@import "bootstrap/mixins";
+body.sessions.new, body.pages.show{
+  color: black;
 
-body.pages, body.sessions.new {
-  background-color: #F7F7ED;
-
-  h1 { display: block; }
-  h2 {
-    color: $dark-grey;
-    font-size: 28px;
-    margin: 0 0 10px;
-  }
-  h3 {
-    color: $mid-grey;
-    font-size: 21px;
-    font-weight: normal;
-    margin-bottom: 15px;
-  }
-  p {
-    margin-bottom: 15px;
+  p, label{
+    font-size: 18px;
     line-height: 24px;
+    margin-bottom: 18px;
+    font-weight: 300;
   }
-  ul.about {
-    list-style: circle;
-    padding-left: 20px;
+  label{
+    margin-bottom: 0;
   }
-  ul.about li { margin-bottom: 10px; }
-
-  .main-container.container { padding-top: 0px; }
-  .inner-container { padding: 0 10px; }
-
-  .how-it-works-panel{
-    p{
-      font-size: 16px;
+  .home-flash{
+    margin-top: 50px;
+    margin-bottom: -50px;
+  }
+  .navbar{
+    .navbar-inner .container{
+      margin-top: 0;
     }
-    img, iframe{
-      border: 1px solid #eee;
+    a.brand{
+      padding-bottom: 0;
+      margin-top:  -6px;
+      margin-left: 20px;
     }
-    .position-icons img{
-      float: left;
-      border: 0;
-      width: 30px;
-      height: 30px;
-      padding-right: 7px;
+    .pull-right{
+      padding-right: 34px;
     }
-    .position-icons p{
-      font-size: 14px;
+  }
+  .container{
+    .subhead{
+      padding-bottom: 24px;
+    }
+    h1{
+      margin-bottom: 5px;
+    }
+    h2{
+      letter-spacing:  -1px;
+      font-size: 30px;
+      line-height: 36px;
+      margin-bottom: 5px;
+    }
+    h2.squish{
+      font-size:28px;
+    }
+    h3{
+      font-size: 20px;
+      line-height: 24px;
+      margin-bottom: 18px;
+    }
+    .buffer{
+      margin-bottom: 18px;
+    }
+    .no-bottom-margin{
+      margin-bottom: 0px;
     }
-    p.special-last{ margin-bottom: 0;}
   }
-
-  hr {
-    margin: 2.5em 0;
+  .subhead h1, .head h1{
+    font-size: 50px;
+    margin-bottom: 9px;
+    letter-spacing:  -1px;
   }
-
-  #github-link {
-    position: absolute;
-    right: 0px;
+  .head h1{
+    margin: 72px 0 9px 0;
+  }
+  .inner-container{
+    padding: 34px;
+  }
+  .section{
+    margin-top: 34px;
+    background: white;
+    box-shadow: 3px 3px 5px #eee;
+    border: 1px solid #eee;
+  }
+  .section#first{
+    background: transparent;
+    margin-top: 0px;
+    box-shadow: none;
+    border: none;
+    margin-top: 66px;
+  }
+  #first .inner-container{
+    padding: 0 34px;
+  }
+  #principles img, #purpose img{
     float: right;
+    margin: 10px 10px 0 0 ;
   }
-  .main-navigation{
-    .navbar .nav li a { text-shadow: none;}
-    .navbar .nav li a:hover { color: $dark-grey; }
-    .navbar .nav .active a{ background-color: $loomio-orange; }
-    .navbar-inner {
-      min-height: 39px;
-      background-color: #FAFAFA;
-      background-image: -moz-linear-gradient(top, white, #F2F2F2);
-      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#F2F2F2));
-      background-image: -webkit-linear-gradient(top, white, #F2F2F2);
-      background-image: linear-gradient(to bottom, white, #F2F2F2);
-      background-repeat: repeat-x;
-      border: 1px solid #DDD;
-      box-shadow: none;
+  #coop img{ margin-top: 0;}
+  #adaptive img {margin-top: -10px;}
+  #free img{ margin-top: 5px;}
+  #how-it-works {
+    img, iframe{
+      border: 1px solid #eee;
+      margin-bottom: 18px;
     }
-  }
-
-  .header {
-    margin-bottom: 20px;
-    height: 150px;
-    background-image: url(loomio-orange.png);
-    background-position: 5px top;
-    background-repeat: no-repeat;
-    text-indent: -999em;
-    span {
-      display: none;
-    }
-  }
-  #loomio-project-iframe { margin-left: -10px; }
-
-  // *** browser not supported ***
-  .notice { padding-bottom: 25px; }
-
-  ul#browser-icons{
-    li {
-      float: left;
-      height: 120px;
-      margin: 5px;
-      padding: 5px;
-      width: 160px;
+    .no-bottom-margin{
+      margin-bottom: 0px;
+    }
+    .positions img{
+      width: 30px;
+      margin-right: 4px;
+      border: none;
     }
-    li:hover{
-      background-color: #F7F7ED;
-      @include border-radius(4px);
+    .modal{
+      width: 902px;
+      margin-left: -450px;
+      margin-top: -340px;
+      -webkit-border-radius: 0px;
+      -moz-border-radius: 0px;
+      border: none;
     }
-    li:hover{
-      p.browser-title, p.visit-site{
-        background-color: $light-grey;
-        color: white;
+    .modal-body{
+      width: 900px;
+      max-height: 675px;
+      padding: 0px;
+      margin: 1px;
+      overflow-y: hidden;
+      overflow-x: hidden;
+      a{
+        cursor: pointer;
       }
     }
+    .close{
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      font-size: 30px;
+      opacity: 1;
+    }
+  }
+  .divider{
+    border-top: 1px solid #eee;
+    margin: 14px 223px 34px 223px;
+  }
+  .more-link{
+    .toggle{
+      background: url("link-icon.png") 4px 4px no-repeat #f8f8f8;
+      font-size: 15px;
+      padding: 4px 4px 4px 24px;
+      a{
+        display: block;
+        width: 100%;
+        height: 100%;
+        font-size: 15px;
+      }
+      a:hover{
+        text-decoration: none;
+        color: black;
+        cursor: pointer;
+      }
+    }
+    i{
+      margin: 2px;
+    }
+    li{
+      padding: 4px;
+    }
     a{
-      color: $mid-grey;
+      font-size: 14px;
     }
-    img {
-      display: block;
-      height: 80px;
-      margin: 0 auto 10px;
+    .collapse{
+      border: 1px solid #f8f8f8;
+      border-top: 0px;
     }
-    p{
-      font-size:$font-tiny;
+  }
+  input.pull-left{
+    margin-right: 5px;
+  }
+  form a{
+    font-size: 18px;
+  }
+  ul#browser-icons{
+    a{
+      font-size: 16px;
+      line-height: 18px;
     }
-    p.browser-title, p.visit-site{
+    li {
+      float: left;
+      height: 120px;
+      margin: 5px;
+      padding: 5px;
+      width: 150px;
       text-align: center;
-      color: $dark-grey;
-      background-color: $lighter-grey;
-      @include border-radius(4px);
-    }
-    p.browser-description{
-      height: 100px;
     }
   }
 }