Refactor index pages to obtain same design Refs #0028884

26 files changed, 394 insertions, 381 deletions

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index e2d7f11d9..c6c65ad50 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -19,3 +19,6 @@
 //= require_directory .
 //= require_directory ./stop_areas
 //= require_directory ./vehicle_journeys
+//= require_directory ./import_tasks
+//= require_directory ./compliance_check_tasks
+//= require_directory ./exports
diff --git a/app/assets/javascripts/compliance_check_tasks/index.js.coffee b/app/assets/javascripts/compliance_check_tasks/index.js.coffee
new file mode 100644
index 000000000..01ca11e12
--- /dev/null
+++ b/app/assets/javascripts/compliance_check_tasks/index.js.coffee
@@ -0,0 +1,5 @@
+$(".compliance_check_tasks.index").ready ->
+  $(".progress-bar.failed").addClass("progress-bar-danger").prepend("100%")
+  $(".progress-bar.pending").addClass("progress-bar-info").prepend("10%")
+  $(".progress-bar.processing").addClass("progress-bar-info").prepend("50%")
+  $(".progress-bar.completed").addClass("progress-bar-success").prepend("100%")
\ No newline at end of file
diff --git a/app/assets/javascripts/exports/index.js.coffee b/app/assets/javascripts/exports/index.js.coffee
new file mode 100644
index 000000000..0f6c524dc
--- /dev/null
+++ b/app/assets/javascripts/exports/index.js.coffee
@@ -0,0 +1,5 @@
+$(".exports.index").ready ->
+  $(".progress-bar.failed").addClass("progress-bar-danger").prepend("100%")
+  $(".progress-bar.pending").addClass("progress-bar-info").prepend("10%")
+  $(".progress-bar.processing").addClass("progress-bar-info").prepend("50%")
+  $(".progress-bar.completed").addClass("progress-bar-success").prepend("100%")
\ No newline at end of file
diff --git a/app/assets/javascripts/import_tasks/index.js.coffee b/app/assets/javascripts/import_tasks/index.js.coffee
new file mode 100644
index 000000000..bb3b3c9fb
--- /dev/null
+++ b/app/assets/javascripts/import_tasks/index.js.coffee
@@ -0,0 +1,5 @@
+$(".import_tasks.index").ready ->
+  $(".progress-bar.failed").addClass("progress-bar-danger").prepend("100%")
+  $(".progress-bar.pending").addClass("progress-bar-info").prepend("10%")
+  $(".progress-bar.processing").addClass("progress-bar-info").prepend("50%")
+  $(".progress-bar.completed").addClass("progress-bar-success").prepend("100%")
\ No newline at end of file
diff --git a/app/assets/stylesheets/application.css.scss.erb b/app/assets/stylesheets/application.css.scss.erb
index 49483d2c9..aefe12759 100644
--- a/app/assets/stylesheets/application.css.scss.erb
+++ b/app/assets/stylesheets/application.css.scss.erb
@@ -10,6 +10,7 @@ $body-bg: #eee;
 // Whatever application styles you have go last
 // Modules and Variables
 @import "modules/search";
+@import "modules/index_item";
 
 // Partials
 @import "partials/header";
diff --git a/app/assets/stylesheets/main/compliance_check_tasks.css.scss b/app/assets/stylesheets/main/compliance_check_tasks.css.scss
index c81153848..2f822aef4 100644
--- a/app/assets/stylesheets/main/compliance_check_tasks.css.scss
+++ b/app/assets/stylesheets/main/compliance_check_tasks.css.scss
@@ -14,42 +14,7 @@
     .compliance_check_tasks {
         margin-top: 20px;
     }
-
-    .compliance_check_task {
-
-        div.icon{
-            float: left;
-        }
-
-        div.resume{
-            float: right;
-            width: 70%;
-
-            ul.header{
-                font-size: 14px;
-                padding-left: 0px;  
-
-                .title{ float: left; }
-                .remove{
-                    float: right;
-                    padding-right: 10px;
-                    color: #494949;
-                }
-            }
-
-            .links {
-                font-size: 10px;
-                p { margin: 3px 0px 0px 0px !important; }                
-                img { margin-right: 10px;}
-            }
-
-            .history {
-                color: $gray-light;
-                margin-top: 5px;
-                font-size: 10px;
-            }
-        }
-    }
+    
 }
 
 #workspace.compliance_check_tasks.show {
diff --git a/app/assets/stylesheets/main/exports.css.scss b/app/assets/stylesheets/main/exports.css.scss
index 10d39db19..beefcb260 100644
--- a/app/assets/stylesheets/main/exports.css.scss
+++ b/app/assets/stylesheets/main/exports.css.scss
@@ -8,42 +8,6 @@
     .exports {
         margin-top: 20px;
     }
-
-    .export {
-
-        div.icon{
-            float: left;
-        }
-
-        div.resume{
-            float: right;
-            width: 70%;
-
-            ul.header{
-                font-size: 14px;
-                padding-left: 0px;  
-
-                .title{ float: left; }
-                .remove{
-                    float: right;
-                    padding-right: 10px;
-                    color: #494949;
-                }
-            }
-
-            .links {
-                font-size: 10px;
-                p { margin: 3px 0px 0px 0px !important; }                
-                img { margin-right: 10px;}
-            }
-
-            .history {
-                color: $gray-light;
-                margin-top: 5px;
-                font-size: 10px;
-            }
-        }
-    }   
 }
 
 #workspace.exports.show {
diff --git a/app/assets/stylesheets/main/import_tasks.css.scss b/app/assets/stylesheets/main/import_tasks.css.scss
index dabd84ae6..4f7a2713a 100644
--- a/app/assets/stylesheets/main/import_tasks.css.scss
+++ b/app/assets/stylesheets/main/import_tasks.css.scss
@@ -1,12 +1,3 @@
-.status {
-    margin-left: 10px;
-}
-
-.status_failed { color: #a94442;}
-.status_pending { color: #31708f;}
-.status_processing { color: #31708f;}
-.status_completed { color: #3c763d;}
-
 #workspace.import_tasks.index
 {
 
@@ -14,40 +5,6 @@
         margin-top: 20px;
     }
 
-    .import_task {
-
-        div.icon{
-            float: left;
-        }
-
-        div.resume{
-            float: right;
-            width: 70%;
-
-            ul.header{
-                font-size: 14px;
-                padding-left: 0px;
-
-                .title{ float: left; }
-                .remove{
-                    float: right;
-                    padding-right: 10px;
-                }
-            }
-
-            .links {
-                font-size: 10px;
-                p { margin: 3px 0px 0px 0px !important; }                
-                img { margin-right: 10px;}
-            }
-
-            .history {
-                color: $gray-light;
-                margin-top: 5px;
-                font-size: 10px;
-            }
-        }
-    }
 }
 
 #workspace.import_tasks.show {
diff --git a/app/assets/stylesheets/main/lines.css.scss b/app/assets/stylesheets/main/lines.css.scss
index 2817ec19d..d0c588391 100644
--- a/app/assets/stylesheets/main/lines.css.scss
+++ b/app/assets/stylesheets/main/lines.css.scss
@@ -7,33 +7,7 @@
 
     .lines {
         margin-top: 20px;
-    }
-    
-    .line {
-
-        .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.lines.edit, #workspace.lines.new, #workspace.lines.create, #workspace.lines.update
diff --git a/app/assets/stylesheets/main/routes.css.scss b/app/assets/stylesheets/main/routes.css.scss
index 83ff13547..25adce149 100644
--- a/app/assets/stylesheets/main/routes.css.scss
+++ b/app/assets/stylesheets/main/routes.css.scss
@@ -7,33 +7,6 @@
 
     .routes{
         margin-top: 20px;
-
-        .route{
-
-            .header{
-                font-weight: bold;
-                
-                .wayback{
-                    float: right;            
-                }
-            }
-            
-            .body {
-                margin: 10px;
-                font-size: 11px;
-
-                p{ margin: 0 0 5px;}
-
-                i{
-                    margin-right: 10px;
-                    font-size: 12px;
-                }
-
-                img{
-                    margin-right: 10px;
-                }
-            }            
-        }
     }
     
 }
diff --git a/app/assets/stylesheets/main/stop_areas.css.scss b/app/assets/stylesheets/main/stop_areas.css.scss
index 26aada5fd..bea77654e 100644
--- a/app/assets/stylesheets/main/stop_areas.css.scss
+++ b/app/assets/stylesheets/main/stop_areas.css.scss
@@ -4,23 +4,11 @@
 
 #workspace.stop_areas.index
 {
-    #country_codes { display: none; }
-    
-    .stop_area {
-
-        .area_type {
-            width: 25px;
-            height: 64px;
-            float: left;
-            margin-right: 10px;
-            
-
-            a {
-                text-decoration: none;                   
-            }
-        }
-
+    .stop_areas {
+        margin-top: 20px;
     }
+
+    #country_codes { display: none; }
 }
 
 #workspace.stop_areas.edit, #workspace.stop_areas.new {
diff --git a/app/assets/stylesheets/main/time_tables.css.scss b/app/assets/stylesheets/main/time_tables.css.scss
index 14eb87d5f..df46d3675 100644
--- a/app/assets/stylesheets/main/time_tables.css.scss
+++ b/app/assets/stylesheets/main/time_tables.css.scss
@@ -9,37 +9,30 @@
         margin-top: 20px;
     }
 
-    .time_table {
+    #index_item{
+        
         span.included_day_type {
             font-weight: bolder;
             color: black;
         }
+        
         span.excluded_day_type {
         }
 
         .state-code {
-            width: 25px;
-            height: 64px;
-            float: left;
-            margin-right: 10px;
-
-            .validity_out {
-                background-color: #FC4903;
-                width: 25px;
-                height: 25px;
-            }
-
-            .validity_out_soon {
-                background-color: orange;
-                width: 25px;
-                height: 25px;
-            }
-
-            .validity_regular {
-                background-color: #86B41D;
-                width: 25px;
-                height: 25px;
-            }
+         
+        }
+        
+        .validity_out {
+            color: #FC4903 !important;
+        }
+        
+        .validity_out_soon {
+            color: orange !important;
+        }
+        
+        .validity_regular {
+            color: #86B41D !important;
         }
     }
 }
diff --git a/app/assets/stylesheets/modules/index_item.css.scss b/app/assets/stylesheets/modules/index_item.css.scss
new file mode 100644
index 000000000..c863ea2f6
--- /dev/null
+++ b/app/assets/stylesheets/modules/index_item.css.scss
@@ -0,0 +1,54 @@
+#index_item{
+    
+
+    .panel-heading{
+
+        button {
+            margin-left:3px;
+        }
+        
+        .date {
+            font-size:10px;
+            color: gray;
+            text-align: center;
+        }
+
+        .label{
+            margin-right: 5px;
+        }
+        
+    }
+
+    .panel-body{
+        p {
+            margin: 0 0 3px;
+            font-size: 12px;
+        }
+
+        img{
+            margin-right: 5px;
+        }
+        
+    }   
+   
+    .panel-footer{
+        text-align: center;
+
+            
+        .progress {
+            margin-bottom: 5px;
+
+            .progress-bar.failed { width: 100%;}
+            .progress-bar.pending { width: 10%;}
+            .progress-bar.processing { width: 50%;}
+            .progress-bar.completed { width: 100%;}   
+        }
+
+        .history{
+            color: $gray;
+            font-size: 10px;
+        }
+    }
+      
+}
+
diff --git a/app/assets/stylesheets/vendor/pagination.css.scss b/app/assets/stylesheets/vendor/pagination.css.scss
index 87eb905e8..a2e5904ff 100644
--- a/app/assets/stylesheets/vendor/pagination.css.scss
+++ b/app/assets/stylesheets/vendor/pagination.css.scss
@@ -7,20 +7,6 @@
     margin: 20px 0 0 0;
 }
 
-.paginated_content > .row {
-    margin-top: 10px;
-    
-    .col-md-4 > div{
-        padding: 5px;
-        background-color: $gray-lighter;
-        border: 1px solid $brand-primary;
-        @include border-top-radius(5px);
-        @include border-right-radius(5px);
-        @include border-left-radius(5px);
-        @include border-bottom-radius(5px);
-    }
-}
-
 .page_info {
     margin: 20px 0 0 0;
     height: 30px;
diff --git a/app/views/companies/_company.erb b/app/views/companies/_company.erb
index 4955dec8b..928bf1d4e 100644
--- a/app/views/companies/_company.erb
+++ b/app/views/companies/_company.erb
@@ -1,11 +1,26 @@
-<%= div_for(company) do %>
-  <%= link_to company.name, [@referential, company] %>
-  <div class="info">
-  	<%= company.human_attribute_name('code') %> <%= company.code %>
-    <div class="actions">  
-      <%= link_to t("actions.edit"), edit_referential_company_path(@referential, company), :class => "edit" %> |
-      <%= link_to t("actions.destroy"), referential_company_path(@referential, company), :method => :delete, :data => {:confirm =>  t('companies.actions.destroy_confirm')}, :class => "remove" %>
-    </div>
-
+<div id="index_item" class="panel panel-default">
+  <div class="panel-heading">
+    <div class="panel-title clearfix">
+      <span class="pull-right">                
+        <%= link_to edit_referential_company_path(@referential, company), :class => "btn btn-default btn-sm" do %>
+          <span class="fa fa-pencil"></span>
+        <% end %>
+        <%= link_to referential_company_path(@referential, company), :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, company], :class => "preview", :title => "#{Chouette::Company.model_name.human.capitalize} #{company.name}") do %>        
+        <span class="name">
+          <%= truncate(company.name, :length => 20) %>          
+        </span>
+        <% end %>
+      </h5>
+    </div>                          
   </div>
-<% end %>
+  <div class="panel-body">
+    <p>
+    <%= company.human_attribute_name('code') %> <%= company.code %> 
+    </p>
+  </div>
+</div>
diff --git a/app/views/compliance_check_tasks/_compliance_check_task.html.erb b/app/views/compliance_check_tasks/_compliance_check_task.html.erb
index 081b04b46..ac652c470 100644
--- a/app/views/compliance_check_tasks/_compliance_check_task.html.erb
+++ b/app/views/compliance_check_tasks/_compliance_check_task.html.erb
@@ -1,25 +1,34 @@
-<%= div_for(compliance_check_task, :class => "compliance_check_task clearfix") do %>
-  <div class="icon">
-    <%= link_to image_tag("compliance_check_task-#{compliance_check_task.status}.png"), referential_compliance_check_task_path(@referential, compliance_check_task) %>
+<div id="index_item" class="panel panel-default">
+  <div class="panel-heading">
+    <div class="panel-title clearfix">
+      <span class="pull-right">                
+        <%= link_to referential_compliance_check_task_path(@referential, compliance_check_task), :method => :delete, :data => {:confirm =>  t('compliance_check_tasks.actions.destroy_confirm')}, :class => "btn btn-danger btn-sm" do %>
+          <span class="fa fa-trash-o"></span>
+        <% end %>
+      </span>
+      <h5>
+        <%= link_to( referential_compliance_check_task_path(@referential, compliance_check_task), :class => "preview", :title => "#{ComplianceCheckTask.model_name.human.capitalize} #{compliance_check_task.name}") do %>        
+        <span class="name">
+          <%= truncate(compliance_check_task.name, :length => 20) %>          
+        </span>
+        <% end %>
+      </h5>
+    </div>                          
   </div>
-  <div class="resume">
-    <ul class="header clearfix">
-      <li class="title"><%= link_to(compliance_check_task.name, referential_compliance_check_task_path(@referential, compliance_check_task)) %></li>
-      <li class="remove"><%= link_to "<i class='fa fa-trash-o'></i>".html_safe, referential_compliance_check_task_path(@referential, compliance_check_task), :method => :delete, :class => "delete", :data => {:confirm =>  t('compliance_check_tasks.actions.destroy_confirm')} %></li>
-    </ul>
-    <div class="history">
-      <%= t("compliance_check_tasks.statuses.#{compliance_check_task.status}") %>
-    </div>
-    <div class="links">
-      <% if compliance_check_task.import_task.present? %>
+  <div class="panel-body">
+     <% if compliance_check_task.import_task.present? %>
       <p><%= link_to( image_tag('icons/link_page.png') + t("compliance_check_tasks.import_task"), referential_import_task_path(@referential, compliance_check_task.import_task)) %></p>
       <% end %>
       <% if compliance_check_task.parameter_set %>
       <p><%= link_to( image_tag('icons/link_page.png') + t("compliance_check_tasks.actions.rule_parameter_set"), rule_parameter_set_referential_compliance_check_task_path(@referential, compliance_check_task)) %></p>
       <% end %>
+  </div>
+  <div class="panel-footer">
+    <div class="progress">
+      <div class="progress-bar <%= compliance_check_task.status %>" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <%= t("compliance_check_tasks.statuses.#{compliance_check_task.status}") %></div>
     </div>
     <div class="history">
-      <%= l  compliance_check_task.created_at, :format => "%d/%m/%Y %H:%M" %> | <%=  compliance_check_task.user_name %>
+      <%= l compliance_check_task.created_at, :format => "%d/%m/%Y %H:%M" %> | <%= compliance_check_task.user_name %>
     </div>
   </div>
-<% end %>
+</div>
diff --git a/app/views/connection_links/_connection_link.erb b/app/views/connection_links/_connection_link.erb
index 0cdcd6f34..b9bf0916b 100644
--- a/app/views/connection_links/_connection_link.erb
+++ b/app/views/connection_links/_connection_link.erb
@@ -1,7 +1,26 @@
-<%= div_for(connection_link) do %>
-  <%= link_to truncate(connection_link.name, :length => 35), [@referential, connection_link], :title => "#{Chouette::TimeTable.model_name.human} #{connection_link.name}" %>
-  <div class="info">
-    <%= t('.from') %>
+<div id="index_item" class="panel panel-default">
+  <div class="panel-heading">
+    <div class="panel-title clearfix">
+      <span class="pull-right">                
+        <%= link_to edit_referential_connection_link_path(@referential, connection_link), :class => "btn btn-default btn-sm" do %>
+          <span class="fa fa-pencil"></span>
+        <% end %>
+        <%= link_to referential_connection_link_path(@referential, connection_link), :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, connection_link], :class => "preview", :title => "#{Chouette::ConnectionLink.model_name.human.capitalize} #{connection_link.name}") do %>        
+        <span class="name">
+          <%= truncate(connection_link.name, :length => 20) %>          
+        </span>
+        <% end %>
+      </h5>
+    </div>                          
+  </div>
+  <div class="panel-body">
+    <p>      
+     <%= t('.from') %>
     <% if connection_link.departure.present? %>
       <%= link_to_if connection_link.departure, truncate(connection_link.departure.name, :length => 15) , referential_stop_area_path(@referential, connection_link.departure), :title => "#{connection_link.human_attribute_name('departure')} #{connection_link.departure.name}" %>
     <% else %>
@@ -12,12 +31,10 @@
       <%= link_to_if( connection_link.arrival, truncate(connection_link.arrival.name, :length => 15), referential_stop_area_path(@referential, connection_link.arrival), :title => "#{connection_link.human_attribute_name('arrival')} #{connection_link.arrival.name}" )  %>
     <% else %>
         <%= connection_link.human_attribute_name("undefined") %>
-    <% end %> -
+    <% end %>
+    </p>
+    <p>
     <%= connection_link.human_attribute_name('default_duration').capitalize %>: <%= connection_link.default_duration ? connection_link.default_duration.strftime('%Mm %Ss') : connection_link.human_attribute_name("undefined") %>
-
-    <div class="actions">
-      <%= link_to t("actions.edit"), edit_referential_connection_link_path(@referential, connection_link), :class => "edit" %> |
-      <%= link_to t("actions.destroy"), referential_connection_link_path(@referential, connection_link), :method => :delete,  :data => {:confirm =>  t('connection_links.actions.destroy_confirm')}, :class => "remove" %>
-    </div>
+    </p>
   </div>
-<% end %>
+</div>
\ No newline at end of file
diff --git a/app/views/exports/_export.erb b/app/views/exports/_export.erb
index 2bda5e4c5..7d67a3d72 100644
--- a/app/views/exports/_export.erb
+++ b/app/views/exports/_export.erb
@@ -1,26 +1,35 @@
-<%= div_for(export, :class => "export clearfix") do %>
-  <div class="icon">   
-    <%= link_to image_tag("export-#{export.status}.png"), referential_export_path(@referential, export) %>
+<div id="index_item" class="panel panel-default">
+  <div class="panel-heading">
+    <div class="panel-title clearfix">
+      <span class="pull-right">                
+        <%= link_to referential_export_path(@referential, export), :method => :delete, :data => {:confirm =>  t('exports.actions.destroy_confirm')}, :class => "btn btn-danger btn-sm" do %>
+          <span class="fa fa-trash-o"></span>
+        <% end %>
+      </span>
+      <h5>
+        <%= link_to( referential_export_path(@referential, export), :class => "preview", :title => "#{Export.model_name.human.capitalize} #{export.name}") do %>        
+        <span class="name">
+          <%= truncate(export.name, :length => 20) %>          
+        </span>
+        <% end %>
+      </h5>
+    </div>                          
   </div>
-  <div class="resume">
-    <ul class="header clearfix">
-      <li class="title">
-        <%= link_to(export.name, referential_export_path(@referential, export)) %>
-      </li>
-      <li class="remove"><%= link_to "<i class='fa fa-trash-o'></i>".html_safe, referential_export_path(@referential, export), :method => :delete,  :data => {:confirm =>  t('exports.actions.destroy_confirm')}, :class => "remove" %></li>
-    </ul>    
-    <div class="history">
-      <%= t("exports.statuses.#{export.status}") %>
-    </div>
-    <div class="links">  
-      <% if export.status == 'completed' %>
-      <%= link_to t("exports.actions.download"), referential_export_path(@referential, export, :format => :zip), :class => "download" %>
-      <% else %>
-      &nbsp;
-      <% end %>
+  <div class="panel-body">
+      <p>
+        <% if export.status == 'completed' %>
+          <%= link_to t("exports.actions.download"), referential_export_path(@referential, export, :format => :zip), :class => "download" %>
+        <% else %>
+          &nbsp;
+        <% end %>
+      </p>      
+  </div>
+  <div class="panel-footer">
+    <div class="progress">
+      <div class="progress-bar <%= export.status %>" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <%= t("exports.statuses.#{export.status}") %></div>
     </div>
     <div class="history">
-      <%= l  export.created_at, :format => "%d/%m/%Y %H:%M" %> 
+      <%= l export.created_at, :format => "%d/%m/%Y %H:%M" %>
     </div>
   </div>
-<% end %>
+</div>
diff --git a/app/views/group_of_lines/_group_of_line.erb b/app/views/group_of_lines/_group_of_line.erb
index a1933744a..dfbebdec6 100644
--- a/app/views/group_of_lines/_group_of_line.erb
+++ b/app/views/group_of_lines/_group_of_line.erb
@@ -1,12 +1,26 @@
-<%= div_for(group_of_line) do %>
-  <%= link_to group_of_line.name, [@referential, group_of_line] %>
-  <div class="info">
-  	<%= group_of_line.human_attribute_name('line_count') %>:<%=  group_of_line.lines.count %> 
-    <% if @line.nil? %>
-    <div class="actions">  
-      <%= link_to t("actions.edit"), edit_referential_group_of_line_path(@referential, group_of_line), :class => "edit" %> |
-      <%= link_to t("actions.destroy"), referential_group_of_line_path(@referential, group_of_line), :method => :delete, :data => {:confirm =>  t('group_of_lines.actions.destroy_confirm')}, :class => "remove" %>
-    </div>
-    <% end %>
+<div id="index_item" class="panel panel-default">
+  <div class="panel-heading">
+    <div class="panel-title clearfix">
+      <span class="pull-right">                
+        <%= link_to edit_referential_group_of_line_path(@referential, group_of_line), :class => "btn btn-default btn-sm" do %>
+          <span class="fa fa-pencil"></span>
+        <% end %>
+        <%= link_to referential_group_of_line_path(@referential, group_of_line), :method => :delete, :data => {:confirm =>  t('group_of_lines.actions.destroy_confirm')}, :class => "btn btn-danger btn-sm" do %>
+          <span class="fa fa-trash-o"></span>
+        <% end %>
+      </span>
+      <h5>
+        <%= link_to([@referential, group_of_line], :class => "preview", :title => "#{Chouette::GroupOfLine.model_name.human.capitalize} #{group_of_line.name}") do %>        
+        <span class="name">
+          <%= truncate(group_of_line.name, :length => 20) %>          
+        </span>
+        <% end %>
+      </h5>
+    </div>                          
   </div>
-<% end %>
+  <div class="panel-body">
+    <p>
+    <%= group_of_line.human_attribute_name('line_count') %> <%=  group_of_line.lines.count %>   
+    </p>
+  </div>
+</div>
diff --git a/app/views/import_tasks/_import_task.erb b/app/views/import_tasks/_import_task.erb
index df497fb05..0bb8cad08 100644
--- a/app/views/import_tasks/_import_task.erb
+++ b/app/views/import_tasks/_import_task.erb
@@ -1,23 +1,32 @@
-<%= div_for import_task, :class => "clearfix" do %>
-  <div class="icon">
-    <%= link_to image_tag("import_task-#{import_task.status}.png"), referential_import_task_path(@referential, import_task) %>
+<div id="index_item" class="panel panel-default">
+  <div class="panel-heading">
+    <div class="panel-title clearfix">
+      <span class="pull-right">                
+        <%= link_to referential_import_task_path(@referential, import_task), :method => :delete, :data => {:confirm =>  t('import_tasks.actions.destroy_confirm')}, :class => "btn btn-danger btn-sm" do %>
+          <span class="fa fa-trash-o"></span>
+        <% end %>
+      </span>
+      <h5>
+        <%= link_to( referential_import_task_path(@referential, import_task), :class => "preview", :title => "#{ImportTask.model_name.human.capitalize} #{import_task.name}") do %>        
+        <span class="name">
+          <% if import_task.save_requested? %><i class="fa fa-save"></i><% end %> <%= truncate(import_task.name, :length => 20) %>          
+        </span>
+        <% end %>
+      </h5>
+    </div>                          
   </div>
-  <div class="resume">
-    <ul class="header clearfix">
-      <li class="title"><% if import_task.save_requested? %><i class="fa fa-save"></i><% end %> <%= link_to(import_task.name, referential_import_task_path(@referential, import_task)) %></li>
-      <li class="remove"><%= link_to "<i class='fa fa-trash-o'></i>".html_safe, referential_import_task_path(@referential, import_task), :method => :delete, :class => "delete", :data => {:confirm =>  t('import_tasks.actions.destroy_confirm')} %></li>
-    </ul>
-    <div class="history">
-      <%= t("import_tasks.statuses.#{import_task.status}") %>
-    </div>
-    <div class="links">
+  <div class="panel-body">
       <p><%= link_to image_tag("icons/file_#{import_task.file_path_extension}.png") + t("import_tasks.show.imported_file"), file_to_import_referential_import_task_path(@referential, import_task) %></p>
       <% if import_task.compliance_check_task.present? %>
         <p><%= link_to image_tag( compliance_icon( import_task)) + t("import_tasks.compliance_check_task"), referential_compliance_check_task_path(@referential, import_task.compliance_check_task) %></p>
       <% end %>
+  </div>
+  <div class="panel-footer">
+    <div class="progress">
+      <div class="progress-bar <%= import_task.status %>" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <%= t("import_tasks.statuses.#{import_task.status}") %></div>
     </div>
     <div class="history">
       <%= l import_task.created_at, :format => "%d/%m/%Y %H:%M" %> | <%= import_task.user_name %>
     </div>
   </div>
-<% end %>
+</div>
diff --git a/app/views/lines/_line.erb b/app/views/lines/_line.erb
index 69baacd75..3723db775 100644
--- a/app/views/lines/_line.erb
+++ b/app/views/lines/_line.erb
@@ -1,27 +1,43 @@
-<%= div_for(line) do %>
-  <div><%= link_to([@referential, line], :class => "preview", :title => "#{Chouette::Line.model_name.human.capitalize} #{line.number}") do %></div>
-    <div class="color">
-      <% if line.number and line.number.length <= 3 %>
-        <div class="number"><%= line.number %></div>
-      <% end %>
-    </div>
-  <% end %>
-  <div class="name">
-  <%= check_box_tag "ids[]", line.id, false, :class => "multiple_selection", :style => "display: none;" %>
-  <%= link_to truncate(line.name, :length => 30), [@referential, line], :title => "#{Chouette::Line.model_name.human.capitalize} #{line.name}"%>
+<div id="index_item" class="panel panel-default">
+  <div class="panel-heading">
+    <div class="panel-title clearfix">
+      <span class="pull-right">                
+        <%= link_to edit_referential_line_path(@referential, line), :class => "btn btn-default btn-sm" do %>
+          <span class="fa fa-pencil"></span>
+        <% end %>
+        <%= link_to referential_line_path(@referential, line), :method => :delete, :data => {:confirm =>  t('lines.actions.destroy_confirm')}, :class => "btn btn-danger btn-sm" do %>
+          <span class="fa fa-trash-o"></span>
+        <% end %>
+      </span>
+      <h5>
+        <%= link_to([@referential, line], :class => "preview", :title => "#{Chouette::Line.model_name.human.capitalize} #{line.name}") do %>        
+        <% if line.number and line.number.length <= 3 %>
+           <span class="label label-default"><%= line.number %></span>
+        <% end %>        
+        <span class="name">
+          <%= check_box_tag "ids[]", line.id, false, :class => "multiple_selection", :style => "display: none;" %>
+          <%= truncate(line.name, :length => 20) %>          
+        </span>
+        <% end %>
+      </h5>
+    </div>                          
   </div>
-  <div class="info">
-  	<% if line.network.nil? %>
-  	   <%= line.human_attribute_name('network') %> <%=  t('lines.index.unset') %> 
+  <div class="panel-body">
+    <p>
+    <% if line.network.nil? %>
+    	<%= line.human_attribute_name('network') %> <%=  t('lines.index.unset') %> 
   	<% else %>
-       <%= line.human_attribute_name('network') %> <%= link_to_if line.network, line.network.name, referential_network_path(@referential, line.network), :title => "#{line.human_attribute_name('network')} #{line.network.name}" %><br>
+       <%= line.human_attribute_name('network') %> <%= link_to_if line.network, line.network.name, referential_network_path(@referential, line.network), :title => "#{line.human_attribute_name('network')} #{line.network.name}" %>
     <% end %>
+    </p>
+    <p>
   	<% if line.company.nil? %>
   	   <%= line.human_attribute_name('company') %> <%=  t('lines.index.unset') %> 
   	<% else %>
        <%= line.human_attribute_name('company') %> <%= link_to_if( line.company, line.company.name, referential_company_path(@referential, line.company), :title => "#{line.human_attribute_name('company')} #{line.company.name}" )  %>
     <% end %>
-    <br/>
+    </p>   
+    <p>
     <% if line.group_of_lines.count == 0 %> 
         <%= t('lines.form.no_group_of_line') %>
     <% elsif line.group_of_lines.count == 1 %>
@@ -30,11 +46,6 @@
     <% else %>
        <%= t('lines.form.several_group_of_lines', :count => line.group_of_lines.count) %>
     <% end %>
-    <% if @group_of_line.nil? %>
-    <div class="actions">  
-      <%= link_to t("actions.edit"), edit_referential_line_path(@referential, line), :class => "edit" %> |
-      <%= link_to t("actions.destroy"), referential_line_path(@referential, line), :method => :delete, :data => {:confirm =>  t('lines.actions.destroy_confirm')}, :class => "remove" %>
-    </div>
-    <% end %>
+    </p>
   </div>
-<% end %>
+</div>
diff --git a/app/views/networks/_network.erb b/app/views/networks/_network.erb
index 9ae53650e..30897d3fa 100644
--- a/app/views/networks/_network.erb
+++ b/app/views/networks/_network.erb
@@ -1,9 +1,21 @@
-<%= div_for(network) do %>
-  <%= link_to network.name, [@referential, network] %>
-  <div class="info">
-    <div class="actions">  
-      <%= link_to t("actions.edit"), edit_referential_network_path(@referential, network), :class => "edit" %> |
-      <%= link_to t("actions.destroy"), referential_network_path(@referential, network), :method => :delete, :data => {:confirm =>  t('networks.actions.destroy_confirm')}, :class => "remove" %>
-    </div>
+<div id="index_item" class="panel panel-default">
+  <div class="panel-heading">
+    <div class="panel-title clearfix">
+      <span class="pull-right">                
+        <%= link_to edit_referential_network_path(@referential, network), :class => "btn btn-default btn-sm" do %>
+          <span class="fa fa-pencil"></span>
+        <% end %>
+        <%= link_to referential_network_path(@referential, network), :method => :delete, :data => {:confirm =>  t('networks.actions.destroy_confirm')}, :class => "btn btn-danger btn-sm" do %>
+          <span class="fa fa-trash-o"></span>
+        <% end %>
+      </span>
+      <h5>
+        <%= link_to([@referential, network], :class => "preview", :title => "#{Chouette::Network.model_name.human.capitalize} #{network.name}") do %>            
+        <span class="name">
+          <%= truncate(network.name, :length => 20) %>          
+        </span>
+        <% end %>
+      </h5>
+    </div>                          
   </div>
-<% end %>
+</div>
diff --git a/app/views/routes/_route.html.erb b/app/views/routes/_route.html.erb
index 79064ed97..cf875f94f 100644
--- a/app/views/routes/_route.html.erb
+++ b/app/views/routes/_route.html.erb
@@ -1,16 +1,28 @@
-<%= div_for(route) do %>
-<div class="header">
-  <% if ( route.wayback_code ) %>
-    <%= fonticon_wayback(route.wayback) %>
-    <% end %>
-    <%= link_to route.name, referential_line_route_path( @referential, @line, route) %>
-    <% if route.wayback_code %>
-      <span class="wayback"><%= route.human_attribute_name('wayback_code') %> <%= (route.wayback=="A") ? t('.wayback.positive') : t('.wayback.negative') %></span>
-    <% end %>
-</div>
-<div class="clearfix"></div>
-<div class="body">
-  <p>
+<div id="index_item" class="panel panel-default">
+  <div class="panel-heading">
+    <div class="panel-title clearfix">
+      <span class="pull-right">                
+        <%= link_to edit_referential_line_route_path(@referential, @line, route), :class => "btn btn-default btn-sm" do %>
+          <span class="fa fa-pencil"></span>
+        <% end %>
+        <%= link_to referential_line_route_path(@referential, @line, route), :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], :class => "preview", :title => "#{Chouette::Route.model_name.human.capitalize} #{route.name}") do %>        
+        <span class="name">
+          <% if ( route.wayback_code ) %>
+          <%= fonticon_wayback(route.wayback) %>
+          <% end %>
+          <%= truncate(route.name, :length => 20) %>
+        </span>
+        <% end %>
+      </h5>
+    </div>                          
+  </div>
+  <div class="panel-body">
+     <p>
   <% if route.journey_patterns.size > 0 %>
     <i class="fa fa-clock-o"></i><%= link_to t("vehicle_journeys.actions.index"), referential_line_route_vehicle_journeys_path(@referential, @line, route) %>
   <% else %> 
@@ -19,7 +31,7 @@
   </p>
   <p>
     <% if route.opposite_route %>
-      <%= fonticon_wayback(route.opposite_route.wayback) %><%= link_to route.opposite_route.name, referential_line_route_path( @referential, @line, route.opposite_route) %> [<%= t('.opposite') %>]
+      <%= fonticon_wayback(route.opposite_route.wayback) %><%= link_to truncate(route.opposite_route.name, :length => 30), referential_line_route_path( @referential, @line, route.opposite_route) %>
     <% else %>
     <%= t('.no_opposite') %>
     <% end %>
@@ -31,6 +43,5 @@
     <br>  
     <% end %>
   </p>
+  </div>
 </div>
-<% end %>
-
diff --git a/app/views/stop_areas/_stop_area.html.erb b/app/views/stop_areas/_stop_area.html.erb
index 8f8d0f966..9567a7491 100644
--- a/app/views/stop_areas/_stop_area.html.erb
+++ b/app/views/stop_areas/_stop_area.html.erb
@@ -1,11 +1,24 @@
-<%= div_for(stop_area) do %>
-  <%= link_to([@referential, stop_area], :class => "preview") do %>
-    <div class="area_type">
-      <%= image_tag "map/" + stop_area.stop_area_type + ".png"   %>
-    </div>
-  <% end %>
-  <%= link_to stop_area.name, [@referential, stop_area] %>
-  <div class="info">
+<div id="index_item" class="panel panel-default">
+  <div class="panel-heading">
+    <div class="panel-title clearfix">
+      <span class="pull-right">                
+        <%= link_to edit_referential_stop_area_path(@referential, stop_area), :class => "btn btn-default btn-sm" do %>
+          <span class="fa fa-pencil"></span>
+        <% end %>
+        <%= link_to referential_stop_area_path(@referential, stop_area), :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, stop_area], :class => "preview", :title => "#{Chouette::StopArea.model_name.human.capitalize} #{stop_area.name}") do %>        
+        <span class="name">
+          <%= image_tag "map/" + stop_area.stop_area_type + ".png"   %> <%= truncate(stop_area.name, :length => 20) %>          
+        </span>
+        <% end %>
+      </h5>
+    </div>                          
+  </div>
+  <div class="panel-body">
     <p>      
       <% unless stop_area.area_type == 'ITL' || stop_area.geometry %>
       <span class="warning"><%= t('.no_position') %></span> -
@@ -31,9 +44,5 @@
         <% end %>
       <% end %>
     </p>
-    <div class="actions">  
-      <%= link_to t("actions.edit"), edit_referential_stop_area_path(@referential, stop_area), :class => "edit" %> |
-      <%= link_to t("actions.destroy"), referential_stop_area_path(@referential, stop_area), :method => :delete, :data => {:confirm =>  t('stop_areas.actions.destroy_confirm')}, :class => "remove" %>
-    </div>
   </div>
-<% end %>
+</div>
diff --git a/app/views/stop_points/_stop_point.html.erb b/app/views/stop_points/_stop_point.html.erb
index 4fa01d060..519c80fe5 100644
--- a/app/views/stop_points/_stop_point.html.erb
+++ b/app/views/stop_points/_stop_point.html.erb
@@ -1,9 +1,16 @@
-<%= div_for(stop_point) do %>
-  <span class="position">
-    <%= stop_point.position + 1 %>
-  </span>
-  <%= link_to stop_point.stop_area.name, [@referential, stop_point.stop_area] %>
-  <div class="info">
+<div id="index_item" class="panel panel-default">
+  <div class="panel-heading">
+    <div class="panel-title clearfix">
+      <h5>
+        <%= link_to([@referential, stop_point.stop_area], :class => "preview", :title => "#{Chouette::StopArea.model_name.human.capitalize} #{stop_point.stop_area.name}") do %>        
+        <span class="name">
+          <span class="label label-default"><%= stop_point.position + 1 %></span><%= truncate(stop_point.stop_area.name, :length => 20) %>          
+        </span>
+        <% end %>
+      </h5>
+    </div>                          
+  </div>
+  <div class="panel-body">
     <p>      
       <% unless stop_point.stop_area.geometry %>
       <span class="warning"><%= t('.no_position') %></span> -
@@ -12,14 +19,16 @@
     <p> 
       <%= t('.lines') %> <% stop_point.stop_area.lines.reject { |l| l.id==@line.id}.each do |line| %>
         <span class="line"><%= line.number %></span>
-      <% end %> -
+      <% end %>
+    </p>    
+    <p>      
       <% if stop_point.stop_area.zip_code.blank? %>
-      <%= stop_point.stop_area.human_attribute_name('country_code') %> <%= stop_point.stop_area.country_code %>
+        <%= stop_point.stop_area.human_attribute_name('country_code') %> <%= stop_point.stop_area.country_code %>
       <% else %>
-      <%= stop_point.stop_area.zip_code %>
+        <%= stop_point.stop_area.zip_code %>
       <% end %> 
       <%= stop_point.stop_area.city_name %>
     </p>
   </div>
-<% end %>
+</div>
 
diff --git a/app/views/time_tables/_time_table.html.erb b/app/views/time_tables/_time_table.html.erb
index bf3ace290..794b6ade7 100644
--- a/app/views/time_tables/_time_table.html.erb
+++ b/app/views/time_tables/_time_table.html.erb
@@ -1,10 +1,25 @@
-<%= div_for(time_table) do %>
-  <%= render "cell_title", time_table: time_table  %>
-  <div class="info">
+<div id="index_item" class="panel panel-default">
+  <div class="panel-heading">
+    <div class="panel-title clearfix">
+      <span class="pull-right">                
+        <%= link_to edit_referential_time_table_path(@referential, time_table), :class => "btn btn-default btn-sm" do %>
+          <span class="fa fa-pencil"></span>
+        <% end %>
+        <%= link_to referential_time_table_path(@referential, time_table), :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, time_table], :class => "preview", :title => "#{Chouette::TimeTable.model_name.human.capitalize} #{time_table.comment}") do %>
+        <span class="state-code <%= time_table_state_code(time_table) %>"><i class="fa fa-certificate"></i></span>
+        <span class="name">
+          <%= truncate(time_table.comment, :length => 20) %>          
+        </span>
+        <% end %>
+      </h5>
+    </div>                          
+  </div>
+  <div class="panel-body">
     <%= render "cell_info", time_table: time_table  %>
-    <div class="actions">
-      <%= link_to t("actions.edit"), edit_referential_time_table_path(@referential, time_table), :class => "edit" %> |
-      <%= link_to t("actions.destroy"), referential_time_table_path(@referential, time_table), :method => :delete, :data => {:confirm =>  t('time_tables.actions.destroy_confirm')}, :class => "remove" %>
-    </div>
   </div>
-<% end %>
+</div>