Fix journey pattern index design and css paginate

25 files changed, 55 insertions, 277 deletions

diff --git a/app/assets/javascripts/journey_pattern.js.coffee b/app/assets/javascripts/journey_pattern.js.coffee
index 062fc611e..0f203397b 100644
--- a/app/assets/javascripts/journey_pattern.js.coffee
+++ b/app/assets/javascripts/journey_pattern.js.coffee
@@ -3,6 +3,7 @@ jQuery ->
     if (event.type == 'mouseenter') 
       if event.target.id.match(/^stop_point_(\w+)$/)
         stopAreaId = $("#"+event.target.id+" a").attr('href').match(/\d+$/)[0]
+        console.log(stopAreaId)
         placeMark = selectFeature.layer.getFeatureByFid( stopAreaId)
         selectFeature.unselectAll()
         selectFeature.select( placeMark)
@@ -11,9 +12,3 @@ jQuery ->
 
   $(document).on("hover", '.journey_patterns.show div.stop_points .stop_point', select_stop_on_map)
 
-  make_ajax_pagination = () ->
-    $.get(this.href, null, null, 'script')
-    false
-
-  $(document).on("click", '.stop_points_detail .pagination a', make_ajax_pagination)
-
diff --git a/app/assets/javascripts/route.js.coffee b/app/assets/javascripts/route.js.coffee
index b679f1893..ea2984d02 100644
--- a/app/assets/javascripts/route.js.coffee
+++ b/app/assets/javascripts/route.js.coffee
@@ -1,22 +1,10 @@
-jQuery ->
-  switch_journey_patterns = (event) -> 
-    event.preventDefault()
-    $('.routes.show .journey_patterns.content').toggle('slow')
-    $('a.journey_patterns .switcher').toggle()
-
-  $('.routes.show a.journey_patterns').click(switch_journey_patterns)
-
-  switch_stop_points = (event) -> 
-    event.preventDefault()
-    $('.routes.show .stop_points_detail').toggle('slow')
-    $('a.stop_points .switcher').toggle()
-
-  $('.routes.show a.stop_points').click(switch_stop_points)
-
+jQuery -> 
   select_stop_on_map = (event) ->
     if (event.type == 'mouseenter') 
       if event.target.id.match(/^stop_point_(\w+)$/)
+        console.log(event.target.id)
         stopAreaId = $("#"+event.target.id+" a").attr('href').match(/\d+$/)[0]
+        console.log(stopAreaId) 
         placeMark = selectFeature.layer.getFeatureByFid( stopAreaId)
         selectFeature.unselectAll()
         selectFeature.select( placeMark)
@@ -24,9 +12,3 @@ jQuery ->
       selectFeature.unselectAll()
 
   $(document).on("hover", '.routes.show div.stop_points .stop_point', select_stop_on_map)
-
-  make_ajax_pagination = () ->
-    $.get(this.href, null, null, 'script')
-    false
-
-  $(document).on("click", '.routes.show .stop_points_detail .pagination a', make_ajax_pagination)
diff --git a/app/assets/stylesheets/main/access_points.css.scss b/app/assets/stylesheets/main/access_points.css.scss
index 7be2cb39b..e9eda0f9e 100644
--- a/app/assets/stylesheets/main/access_points.css.scss
+++ b/app/assets/stylesheets/main/access_points.css.scss
@@ -3,26 +3,7 @@
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
 #workspace.access_points.index
-{   
-    .access_point {
-        /* to create multi-column index */
-        width: 250px;
-        float: left;
-        padding-right: 10px;
-
-        .access_type {
-            width: 25px;
-            height: 64px;
-            float: left;
-            margin-right: 10px;
-            
-
-            a {
-                text-decoration: none;                   
-            }
-        }
-
-    }
+{     
 }
 
 #workspace.access_points.edit,#workspace.access_points.new,#workspace.access_points.create,#workspace.access_points.update
diff --git a/app/assets/stylesheets/main/api_keys.css.scss b/app/assets/stylesheets/main/api_keys.css.scss
index e78c7bda0..5ac873da7 100644
--- a/app/assets/stylesheets/main/api_keys.css.scss
+++ b/app/assets/stylesheets/main/api_keys.css.scss
@@ -2,24 +2,7 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
-#workspace.referentials.show
+#workspace.api_keys.show
 {
-
-    .api_keys {
-        margin-top: 20px;
-    }
-    
-    .api_key {
-
-        /* to create multi-column index */
-        width: 350px;
-        padding-right: 10px;
-        
-        .name {
-            line-height: 16px;
-            float: left;
-        }
-        
-    }
 }
 
diff --git a/app/assets/stylesheets/main/companies.css.scss b/app/assets/stylesheets/main/companies.css.scss
index daf4da488..481b2ee7b 100644
--- a/app/assets/stylesheets/main/companies.css.scss
+++ b/app/assets/stylesheets/main/companies.css.scss
@@ -4,10 +4,6 @@
 
 #workspace.companies.index
 {
-
-    .companies {
-        margin-top: 20px;
-    }   
 }
 
 #workspace.companies.show
diff --git a/app/assets/stylesheets/main/compliance_check_tasks.css.scss b/app/assets/stylesheets/main/compliance_check_tasks.css.scss
index 2f822aef4..663dd6932 100644
--- a/app/assets/stylesheets/main/compliance_check_tasks.css.scss
+++ b/app/assets/stylesheets/main/compliance_check_tasks.css.scss
@@ -10,11 +10,6 @@
 
 #workspace.compliance_check_tasks.index
 {
-
-    .compliance_check_tasks {
-        margin-top: 20px;
-    }
-    
 }
 
 #workspace.compliance_check_tasks.show {
diff --git a/app/assets/stylesheets/main/connection_links.css.scss b/app/assets/stylesheets/main/connection_links.css.scss
index d4672cd31..5e5186ccf 100644
--- a/app/assets/stylesheets/main/connection_links.css.scss
+++ b/app/assets/stylesheets/main/connection_links.css.scss
@@ -4,10 +4,6 @@
 
 #workspace.connection_links.index
 {
-
-    .connection_links {
-        margin-top: 20px;
-    }       
 }
 
 
diff --git a/app/assets/stylesheets/main/exports.css.scss b/app/assets/stylesheets/main/exports.css.scss
index beefcb260..6b11e8b7f 100644
--- a/app/assets/stylesheets/main/exports.css.scss
+++ b/app/assets/stylesheets/main/exports.css.scss
@@ -4,10 +4,6 @@
 
 #workspace.exports.index
 {
-
-    .exports {
-        margin-top: 20px;
-    }
 }
 
 #workspace.exports.show {
diff --git a/app/assets/stylesheets/main/group_of_lines.css.scss b/app/assets/stylesheets/main/group_of_lines.css.scss
index f56f76e44..007a0381f 100644
--- a/app/assets/stylesheets/main/group_of_lines.css.scss
+++ b/app/assets/stylesheets/main/group_of_lines.css.scss
@@ -4,10 +4,6 @@
 
 #workspace.group_of_lines.index
 {
-
-    .group_of_lines {
-        margin-top: 20px;
-    }   
 }
 
 #workspace.group_of_lines.show
diff --git a/app/assets/stylesheets/main/import_tasks.css.scss b/app/assets/stylesheets/main/import_tasks.css.scss
index 4f7a2713a..198f83129 100644
--- a/app/assets/stylesheets/main/import_tasks.css.scss
+++ b/app/assets/stylesheets/main/import_tasks.css.scss
@@ -1,10 +1,5 @@
 #workspace.import_tasks.index
 {
-
-    .import_tasks {
-        margin-top: 20px;
-    }
-
 }
 
 #workspace.import_tasks.show {
diff --git a/app/assets/stylesheets/main/lines.css.scss b/app/assets/stylesheets/main/lines.css.scss
index d0c588391..653ca899c 100644
--- a/app/assets/stylesheets/main/lines.css.scss
+++ b/app/assets/stylesheets/main/lines.css.scss
@@ -3,11 +3,7 @@
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
 #workspace.lines.index
-{
-
-    .lines {
-        margin-top: 20px;
-    }   
+{   
 }
 
 #workspace.lines.edit, #workspace.lines.new, #workspace.lines.create, #workspace.lines.update
diff --git a/app/assets/stylesheets/main/networks.css.scss b/app/assets/stylesheets/main/networks.css.scss
index 3730d6668..c8533699e 100644
--- a/app/assets/stylesheets/main/networks.css.scss
+++ b/app/assets/stylesheets/main/networks.css.scss
@@ -3,11 +3,7 @@
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
 #workspace.networks.index
-{
-    .networks {
-        margin-top: 20px;
-    }
-  
+{ 
 }
 
 #workspace.networks.show
diff --git a/app/assets/stylesheets/main/organisations.css.scss b/app/assets/stylesheets/main/organisations.css.scss
index aaecbe30f..b3ef5b5f4 100644
--- a/app/assets/stylesheets/main/organisations.css.scss
+++ b/app/assets/stylesheets/main/organisations.css.scss
@@ -4,23 +4,5 @@
 
 #workspace.organisations.show
 {
-
-    .users {
-        margin-top: 20px;
-    }
-    
-    .user {
-
-        /* to create multi-column index */
-        width: 350px;
-        float: left;
-        padding-right: 10px;
-        position: relative;
-
-        img.preview {
-            width: 64px;
-            height: 64px;
-        }
-    }
 }
 
diff --git a/app/assets/stylesheets/main/referentials.css.scss b/app/assets/stylesheets/main/referentials.css.scss
index 8f2fa0bf7..8b6ae4b66 100644
--- a/app/assets/stylesheets/main/referentials.css.scss
+++ b/app/assets/stylesheets/main/referentials.css.scss
@@ -4,11 +4,8 @@
 
 #workspace.referentials.index
 {
-
-    .referentials {
-        margin-top: 20px;
-    }    
 }
+
 #workspace.referentials.show
 {
     .summary p label {
diff --git a/app/assets/stylesheets/main/routes.css.scss b/app/assets/stylesheets/main/routes.css.scss
index 25adce149..2d2d53a7b 100644
--- a/app/assets/stylesheets/main/routes.css.scss
+++ b/app/assets/stylesheets/main/routes.css.scss
@@ -3,12 +3,7 @@
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
 #workspace.lines.show
-{
-
-    .routes{
-        margin-top: 20px;
-    }
-    
+{   
 }
 
 #workspace.routes.edit, #workspace.routes.new, #workspace.routes.create, #workspace.routes.update
@@ -41,75 +36,6 @@
 }
 
 #workspace.routes.show
-{
-    .page_info {
-        margin: 10px 0 10px 0;
-    }
-    
-    .route_color{ color: white;
-                  font-weight: bold;
-                  padding: 0 5px 0 5px;}
-
-    .summary p label {
-        font-weight: bold;
-    }
-
-    .stop_points_detail div.page_info {
-        margin-top: 0px;
-    }   
-
-    .stop_points {
-        margin-top: 10px;
-    }
-    
-    .route_journey_patterns {
-      a {
-        cursor: pointer;
-      }
-    }
-    
-    .route_stop_points {
-        clear: both;
-        margin: 0px;
-        padding: 0px;
-        a {
-          cursor: pointer;
-        }
-    }
-
-    .stop_point {
-        /* to create multi-column index */
-        width: 250px;
-        float: left;
-        padding-right: 10px;
-
-        .position {
-            width: 25px;
-            height: 20px;
-            float: left;
-            background-color: #61970B;
-            font-weight: bold;
-            color: white;
-            margin-right: 10px;
-            padding-left: 4px;
-        }
-    }
-    
-    .journey_patterns {
-        margin-top: 10px;
-    }
-    
-    .journey_pattern {
-        /* to create multi-column index */
-        width: 350px;
-        padding-right: 10px;
-        height: 80px;
-        float: left;
-
-        .name {
-            line-height: 16px;
-        }
-        
-    }
+{  
 }     
 
diff --git a/app/assets/stylesheets/main/rule_parameter_sets.css.scss b/app/assets/stylesheets/main/rule_parameter_sets.css.scss
index 682631ce5..7df394190 100644
--- a/app/assets/stylesheets/main/rule_parameter_sets.css.scss
+++ b/app/assets/stylesheets/main/rule_parameter_sets.css.scss
@@ -4,41 +4,6 @@
 
 #workspace.rule_parameter_sets.index
 {
-    .rule_parameter_sets {
-        margin-top: 20px;
-    }
-
-    .rule_parameter_set {
-
-        /* to create multi-column index */
-        width: 350px;
-        float: left;
-        padding-right: 10px;
-        position: relative;
-
-        .color {
-            background-color: white;
-            width: 64px;
-            height: 64px;
-            float: left;
-            margin-right: 10px;
-            border: 1px solid #999;
-
-            a {
-                text-decoration: none;
-            }
-        }
-
-        .number {
-            font-size: 16px;
-            text-align: center;
-            font-weight: bold;
-            padding-top: 21px;
-        }
-        .name a {
-            display: inline;
-        }
-    }
 }
 
 #workspace.rule_parameter_sets.show, #workspace.compliance_check_tasks.rule_parameter_set
diff --git a/app/assets/stylesheets/main/stop_areas.css.scss b/app/assets/stylesheets/main/stop_areas.css.scss
index bea77654e..a81b780a6 100644
--- a/app/assets/stylesheets/main/stop_areas.css.scss
+++ b/app/assets/stylesheets/main/stop_areas.css.scss
@@ -4,10 +4,6 @@
 
 #workspace.stop_areas.index
 {
-    .stop_areas {
-        margin-top: 20px;
-    }
-
     #country_codes { display: none; }
 }
 
diff --git a/app/assets/stylesheets/main/time_tables.css.scss b/app/assets/stylesheets/main/time_tables.css.scss
index a2bd5a968..091904f2d 100644
--- a/app/assets/stylesheets/main/time_tables.css.scss
+++ b/app/assets/stylesheets/main/time_tables.css.scss
@@ -4,11 +4,6 @@
 
 #workspace.time_tables.index
 {
-
-    .time_tables {
-        margin-top: 20px;
-    }
-
     #index_item{
         
         span.included_day_type {
diff --git a/app/assets/stylesheets/modules/index_item.css.scss b/app/assets/stylesheets/modules/index_item.css.scss
index 896000a12..6fc1c6013 100644
--- a/app/assets/stylesheets/modules/index_item.css.scss
+++ b/app/assets/stylesheets/modules/index_item.css.scss
@@ -34,6 +34,10 @@
         img{
             margin-right: 5px;
         }
+
+        i{
+            margin-right: 5px;
+        }
         
     }   
    
diff --git a/app/assets/stylesheets/vendor/pagination.css.scss b/app/assets/stylesheets/vendor/pagination.css.scss
index a2e5904ff..eb994f308 100644
--- a/app/assets/stylesheets/vendor/pagination.css.scss
+++ b/app/assets/stylesheets/vendor/pagination.css.scss
@@ -24,4 +24,11 @@
     b {
         padding: 0.1em 0.25em; 
     }
+}
+
+.paginated_content{
+  
+    .row{
+       margin-top: 15px; 
+    }
 }
\ No newline at end of file
diff --git a/app/views/journey_patterns/_journey_pattern.html.erb b/app/views/journey_patterns/_journey_pattern.html.erb
index 821d3ef47..52a1fd89f 100644
--- a/app/views/journey_patterns/_journey_pattern.html.erb
+++ b/app/views/journey_patterns/_journey_pattern.html.erb
@@ -1,16 +1,29 @@
-<%= div_for(journey_pattern) do %>
-  <%= link_to journey_name(journey_pattern), [@referential, @line, @route, journey_pattern] %>
-  <div class="info">
+<div id="index_item" class="panel panel-default journey_pattern">
+  <div class="panel-heading">
+    <div class="panel-title clearfix">
+      <span class="pull-right">                
+        <%= link_to referential_line_route_journey_pattern_path(@referential, @line, @route, journey_pattern), :method => :delete, :data => {:confirm =>  t('companies.actions.destroy_confirm')}, :class => "btn btn-danger btn-sm" do %>
+          <span class="fa fa-trash-o"></span>
+        <% end %>
+      </span>
+      <h5>
+        <%= link_to([@referential, @line, @route, journey_pattern], :class => "preview", :title => "#{Chouette::JourneyPattern.model_name.human.capitalize} #{journey_pattern.name}") do %>        
+        <span class="name">
+          <%= truncate(journey_pattern.name, :length => 20) %>
+        </span>
+        <% end %>
+      </h5>
+    </div>                          
+  </div>
+  <div class="panel-body">
     <% unless journey_pattern.stop_points.empty? %>
-      <%= t('.from_to', :departure => journey_pattern.stop_points.first.stop_area.name, :arrival => journey_pattern.stop_points.last.stop_area.name) %>
-    <% end %><br>
-    <%= t('.stop_count', :count => journey_pattern.stop_points.count, :route_count => @route.stop_points.count) %> | <%= t('.vehicle_journeys_count', :count => journey_pattern.vehicle_journeys.count) %>
-    <div class="actions">  
-      <%= link_to t("actions.destroy"), referential_line_route_journey_pattern_path(@referential, @line, @route, journey_pattern), :method => :delete, :data => {:confirm =>  t('journey_patterns.actions.destroy_confirm')}, :class => "remove" %>
-      <% if journey_pattern.vehicle_journeys.count > 0 %>
-        | <i class="fa fa-clock-o"></i><%= link_to t('journey_patterns.journey_pattern.vehicle_journey_at_stops'), referential_line_route_vehicle_journeys_path(@referential, @line, @route, :q => {:journey_pattern_id_eq => journey_pattern.id}), :class => "with_fa" %>
-      <% end %>
-    </div>
+      <p><%= t('.from_to', :departure => journey_pattern.stop_points.first.stop_area.name, :arrival => journey_pattern.stop_points.last.stop_area.name) %></p>
+    <% end %>
+    <p><%= t('.stop_count', :count => journey_pattern.stop_points.count, :route_count => @route.stop_points.count) %> | <%= t('.vehicle_journeys_count', :count => journey_pattern.vehicle_journeys.count) %></p>
+    <% if journey_pattern.vehicle_journeys.count > 0 %>
+    <p>
+      <i class="fa fa-clock-o"></i><%= link_to t('journey_patterns.journey_pattern.vehicle_journey_at_stops'), referential_line_route_vehicle_journeys_path(@referential, @line, @route, :q => {:journey_pattern_id_eq => journey_pattern.id}), :class => "with_fa" %>
+    </p>
+    <% end %>
   </div>
-<% end %>
-
+</div>
diff --git a/app/views/journey_patterns/show.js.erb b/app/views/journey_patterns/show.js.erb
deleted file mode 100644
index aedb0fb9e..000000000
--- a/app/views/journey_patterns/show.js.erb
+++ /dev/null
@@ -1,4 +0,0 @@
-$(function (){
-  $(".stop_points_detail").html("<%= escape_javascript(render(:partial => "stop_points_detail")) %>");
-});
-
diff --git a/app/views/routes/_stop_points_detail.html.erb b/app/views/routes/_stop_points_detail.html.erb
deleted file mode 100644
index 6c9e4afae..000000000
--- a/app/views/routes/_stop_points_detail.html.erb
+++ /dev/null
@@ -1,10 +0,0 @@
-  <div class="page_info">
-    <span class="search"> <%= t("will_paginate.page_entries_info.list") %></span> <%= page_entries_info @stop_points %>
-  </div>
-  <div class="stop_points paginated_content">
-    <%= render :partial => "stop_points/stop_point", :collection => @stop_points %>
-  </div>
-  <div class="pagination">
-    <%= will_paginate @stop_points, :container => false %>
-  </div>
-
diff --git a/app/views/routes/show.html.erb b/app/views/routes/show.html.erb
index 22ef7fff8..ce9e9618f 100644
--- a/app/views/routes/show.html.erb
+++ b/app/views/routes/show.html.erb
@@ -61,7 +61,9 @@
     </div>
     <div id="stop_points" class="panel-collapse collapse">
       <div class="panel-body">
-        <%= render :partial => "stop_points_detail" %>
+        <div class="stop_points paginated_content">
+          <%= paginated_content( @stop_points, "stop_points/stop_point") %>
+        </div>
       </div>
     </div>
   </div>
@@ -78,7 +80,9 @@
     </div>
     <div id="journey_patterns" class="panel-collapse collapse">
       <div class="panel-body">
-        <%= render :partial => "journey_patterns/journey_pattern", :collection => @route.journey_patterns %>
+        <div class="journey_patterns paginated_content">
+          <%= paginated_content( @route.journey_patterns, "journey_patterns/journey_pattern") %>
+        </div>
       </div>
     </div>
   </div>
diff --git a/app/views/routes/show.js.erb b/app/views/routes/show.js.erb
deleted file mode 100644
index aedb0fb9e..000000000
--- a/app/views/routes/show.js.erb
+++ /dev/null
@@ -1,4 +0,0 @@
-$(function (){
-  $(".stop_points_detail").html("<%= escape_javascript(render(:partial => "stop_points_detail")) %>");
-});
-