Add clickable links in champ description and use bootstrap layout for forms

.byebug_history

@@ -1,3 +1,12 @@
+continue
+next
+SIADETOKEN
+next
+exit
+params
+next
+params
+SIADETOKEN
 exit
 xit
 xtei

Gemfile

@@ -119,12 +119,11 @@ end
 
 group :development do
   # Access an IRB console on exception pages or by using <%= console %> in views
-
   gem 'web-console'
-
   gem 'rack-handlers'
-
   gem 'xray-rails'
+  gem 'guard'
+
 end
 
 group :development, :test do

app/assets/javascripts/bootstrap_wysihtml5.js

@@ -3,6 +3,6 @@ $(document).on('page:load', wysihtml5_active);
 
 function wysihtml5_active (){
     $('.wysihtml5').each(function(i, elem) {
-        $(elem).wysihtml5({ toolbar:{ "fa": true, "link": false, "color": true }, "locale": "fr-FR" });
+        $(elem).wysihtml5({ toolbar:{ "fa": true, "link": false, "color": false }, "locale": "fr-FR" });
     });
-}
+}

app/assets/javascripts/description.js

@@ -18,14 +18,6 @@ function action_type_de_champs() {
         toggleErrorClass(this, validatePhone(val));
     });
 
-    $("#liste_champs input").on('focus', function () {
-        $("#description_" + this.id).slideDown();
-    });
-
-    $("#liste_champs input").on('blur', function () {
-        $("#description_" + this.id).slideUp();
-    });
-
     address_type_init();
 }
 

app/assets/stylesheets/application.scss

@@ -143,10 +143,6 @@ textarea#description {
   max-width: 27px;
 }
 
-label {
-  font-weight: normal;
-}
-
 div.pagination {
   padding-top: 20px;
   display: block;

app/assets/stylesheets/description.scss

@@ -7,9 +7,7 @@
     .show-block {
       width: 90%;
       .body{
-        padding-left: 35px;
+        padding: 15px;
-        padding-right: 35px;
-        padding-bottom: 35px;
       }
     }
   }
@@ -134,10 +132,3 @@
     width: 160px;
   }
 }
-
-.description_div {
-  margin-top: 5px;
-  margin-left: 5px;
-  color: dimgrey;
-  display: none;
-}

app/decorators/champ_decorator.rb

@@ -7,4 +7,9 @@ class ChampDecorator < Draper::Decorator
     end
     object.value
   end
-end
+
+  def description_with_links
+    description.gsub(URI.regexp, '<a target="_blank" href="\0">\0</a>').html_safe if description
+  end
+
+end

app/decorators/type_de_champ_decorator.rb

@@ -39,4 +39,4 @@ class TypeDeChampDecorator < Draper::Decorator
       @count_type_de_champ ||= procedure.types_de_champ.count
     end
   end
-end
+end

app/views/users/description/_show.html.haml

@@ -15,7 +15,7 @@
     = @dossier.procedure.libelle
 
   -#TODO use form_for
-  = form_tag(url_for({controller: 'users/description', action: :create, dossier_id: @dossier.id}), class: 'form-inline', method: 'POST', multipart: true) do
+  = form_tag(url_for({controller: 'users/description', action: :create, dossier_id: @dossier.id}), class: 'form', method: 'POST', multipart: true) do
     -unless @champs.nil?
       #liste_champs
         =render partial: 'users/description/champs', locals:{private: false}

app/views/users/description/champs/_render_list_champs.html.haml

@@ -1,54 +1,56 @@
--champs.each do |champ|
+- champs.decorate.each do |champ|
   - if champ.order_place > order_place
     - if champ.type_champ == 'header_section'
       - break
 
     - unless champ.type_champ == 'checkbox' || champ.type_champ == 'engagement'
-      %h4
+      .row
-        = champ.libelle
+        %div{ class: if champ.type_champ == 'textarea' then 'col-md-12' else 'col-md-6' end }
-        - if champ.mandatory?
+          .form-group
-          = '*'
+            %label{ for: "champs_#{ champ.id }"}
+              = champ.libelle
+              - if champ.mandatory?
+                *
 
-    -if champ.type_champ == 'textarea'
+            - if champ.type_champ == 'textarea'
-      =render partial: 'users/description/champs/textarea', locals: {champ: champ}
+              = render partial: 'users/description/champs/textarea', locals: { champ: champ }
 
-    -elsif champ.type_champ == 'checkbox'
+            - elsif champ.type_champ == 'checkbox'
-      = render partial: 'users/description/champs/checkbox', locals: {champ: champ}
+              = render partial: 'users/description/champs/checkbox', locals: { champ: champ }
 
-    -elsif champ.type_champ == 'civilite'
+            - elsif champ.type_champ == 'civilite'
-      =render partial: 'users/description/champs/civilite', locals: {champ: champ}
+              = render partial: 'users/description/champs/civilite', locals: { champ: champ }
 
-    - elsif champ.type_champ == 'datetime'
+            - elsif champ.type_champ == 'datetime'
-      =render partial: 'users/description/champs/datetime', locals: {champ: champ}
+              = render partial: 'users/description/champs/datetime', locals: { champ: champ }
 
-    - elsif champ.type_champ == 'yes_no'
+            - elsif champ.type_champ == 'yes_no'
-      =render partial: 'users/description/champs/yes_no', locals: {champ: champ}
+              = render partial: 'users/description/champs/yes_no', locals: { champ: champ }
 
-    - elsif champ.type_champ == 'drop_down_list'
+            - elsif champ.type_champ == 'drop_down_list'
-      =render partial: 'users/description/champs/drop_down_list', locals: {champ: champ}
+              = render partial: 'users/description/champs/drop_down_list', locals: { champ: champ }
 
-    - elsif champ.type_champ == 'pays'
+            - elsif champ.type_champ == 'pays'
-      =render partial: 'users/description/champs/pays', locals: {champ: champ}
+              = render partial: 'users/description/champs/pays', locals: { champ: champ }
 
-    - elsif champ.type_champ == 'regions'
+            - elsif champ.type_champ == 'regions'
-      =render partial: 'users/description/champs/regions', locals: {champ: champ}
+              = render partial: 'users/description/champs/regions', locals: { champ: champ }
 
-    - elsif champ.type_champ == 'engagement'
+            - elsif champ.type_champ == 'engagement'
-      =render partial: 'users/description/champs/engagement', locals: {champ: champ}
+              = render partial: 'users/description/champs/engagement', locals: { champ: champ }
 
-    - elsif champ.type_champ == 'departements'
+            - elsif champ.type_champ == 'departements'
-      =render partial: 'users/description/champs/departements', locals: {champ: champ}
+              = render partial: 'users/description/champs/departements', locals: { champ: champ }
 
-    -else
+            - else
-      %input.form-control{name:"champs['#{champ.id}']",
+              %input.form-control{name:"champs['#{ champ.id }']",
-                      placeholder: champ.libelle,
+                              placeholder: champ.libelle,
-                      id: "champs_#{champ.id}",
+                              id: "champs_#{ champ.id }",
-                      value: champ.value,
+                              value: champ.value,
-                      type: champ.type_champ,
+                              type: champ.type_champ,
-                      'data-provide' => champ.data_provide,
+                              'data-provide' => champ.data_provide,
-                      'data-date-format' => champ.data_date_format}
+                              'data-date-format' => champ.data_date_format}
 
-  - unless champ.description.empty? || champ.type_champ == 'engagement'
+            - unless champ.description.empty? || champ.type_champ == 'engagement'
-    .row
+              .help-block{ id:"description_champs_#{ champ.id }" }
-      .col-lg-8.col-md-8.col-sm-8.col-xs-8{class: 'description_div', id:"description_champs_#{champ.id}"}
+                = champ.description_with_links
-        = champ.description

app/views/users/description/champs/_textarea.html.haml

@@ -2,4 +2,4 @@
                   placeholder: champ.description,
                   id: "champs_#{champ.id}",
                   row: '6'}
-  =champ.value
+  = champ.value