New filter template

Author: barodeur

Gemfile

@@ -20,6 +20,7 @@ group :assets do
   gem "rails-backbone"
   gem 'compass-rails'
   gem 'haml_coffee_assets'
+  gem 'chosen-rails'
 end
 
 gem 'jquery-rails'

Gemfile.lock

@@ -46,6 +46,9 @@ GEM
       bson (~> 1.6.1)
     builder (3.0.0)
     cancan (1.6.7)
+    chosen-rails (0.9.8)
+      railties (~> 3.0)
+      thor (~> 0.14)
     chunky_png (1.2.5)
     coderay (1.0.5)
     coffee-rails (3.2.2)
@@ -230,6 +233,7 @@ PLATFORMS
 DEPENDENCIES
   bson_ext (~> 1.6)
   cancan
+  chosen-rails
   coffee-rails (~> 3.2.1)
   compass-rails
   database_cleaner

app/assets/javascripts/application.js

@@ -17,4 +17,5 @@
 //= require backbone_rails_sync
 //= require backbone_datalink
 //= require hamlcoffee
+//= require chosen-jquery
 //= require backbone/iaato

app/assets/stylesheets/application.css

@@ -9,5 +9,6 @@
  * compiled file, but it's generally better to create a new file per style scope.
  *
  *= require_self
+ *= require chosen
  *= require_tree .
 */

app/assets/stylesheets/layout.css.sass

@@ -30,23 +30,49 @@ nav
     color: white
     text-decoration: none
 
+@mixin cf
+  display: block
+  content: "."
+  height: 0
+  visibility: hidden
+  clear: both
 @mixin resource_layout
   position: relative
   margin-left: 10px
   $map_width: 50%
 
-  section#filter
+  form
     color: black
     background: rgba(255,255,255, 0.5)
     +border-radius(10px)
     box-shadow: -1px 2px 5px 1px rgba(255, 255, 255, 0.7)
-    input[type='text']
+    margin-bottom: 10px
+    margin-right: $map_width
+    padding: 10px
+    font-weight: normal
+    $label_width: 20%
+    label
+      float: left
+      width: $label_width
+      padding-right: 30px
+    input[type='search']
+      display: block
+      width: 100%
+      font-size: 40pt
+    select
+      //margin-left: 20%
+      width: 50%
+      margin-top: 10px
+      &:after
+        +cf
+    input[type='range']
+      //margin-left: 20%
+      width: 50%
+      &:after
+        //+cf
     input[type='submit']
       display: inline-block
       height: 1em
-    margin-bottom: 10px
-    margin-right: $map_width
-    padding-right: 40px
 
   ul.ships
     margin-right: $map_width
@@ -71,11 +97,7 @@ nav
           font-weight: bold
       .operator
         &:before
-          display: block
-          content: "."
-          height: 0
-          visibility: hidden
-          clear: both
+          +cf
       .hidden
         display: none
 

app/views/templates/ships.html.haml

@@ -5,11 +5,23 @@
 #ships
   #map
     #canvas
-  %section#filter
-    %h2 Filters
-    %form{action: '#'}
-      %label Ship name
-      %input{type: 'text', name: 'name', placeholder: 'nom'}
+  %form{action: '#'}
+    %input{type: 'search', name: 'name', placeholder: 'nom'}
+    .fields
+      %label Operator
+      %select{name: 'operator', 'data-placeholder' => 'Operator'}
+        %option
+        %option{value: '1'} Cunard Line
+        %option{value: '2'} Costa Croisière
+    .fields
+      %label Classe
+      %select{name: 'operator', 'data-placeholder' => 'Classe'}
+        %option
+        %option{value: '1'} Paquebot
+        %option{value: '2'} Plaisance
+    .fields
+      %label Capacité
+      %input{type: 'range', min: 0, max: 3000}
   %ul.ships
     %li
       %h2 Queen Mary 2
@@ -66,3 +78,4 @@
       })
       new google.maps.Marker({map: map, position: point1})
     }
+    $('select[name="operator"]').chosen()