Refs #2589: updating referential form, with nested upd according to layout updates

8 files changed, 68 insertions, 61 deletions

diff --git a/app/assets/stylesheets/_layout.sass b/app/assets/stylesheets/_layout.sass
index 38294174c..83efe60d9 100644
--- a/app/assets/stylesheets/_layout.sass
+++ b/app/assets/stylesheets/_layout.sass
@@ -21,3 +21,10 @@ body
 
 .page_content
   padding: 35px
+
+.separator
+  display: block
+  height: 0px
+  // width: 75%
+  border-bottom: 1px solid rgba($blue, 0.5)
+  margin: 30px auto 45px auto
diff --git a/app/assets/stylesheets/application.sass b/app/assets/stylesheets/application.sass
index 7ddb37b68..e3a875fe1 100644
--- a/app/assets/stylesheets/application.sass
+++ b/app/assets/stylesheets/application.sass
@@ -17,6 +17,7 @@
 @import 'components/select2'
 @import 'components/forms'
 @import 'components/tables'
+@import 'components/lists'
 @import 'components/pagination'
 @import 'components/main_nav'
 @import 'components/page_header'
diff --git a/app/assets/stylesheets/components/_buttons.sass b/app/assets/stylesheets/components/_buttons.sass
index ac367ded5..73f2e4317 100644
--- a/app/assets/stylesheets/components/_buttons.sass
+++ b/app/assets/stylesheets/components/_buttons.sass
@@ -25,6 +25,16 @@
       border-color: darken($darkblue, 2.5%)
       color: #fff
 
+  &.btn-outline-primary
+    background-color: transparent
+    border-color: $darkblue
+    color: $darkblue
+
+    &:hover, &:focus, &.focus, &:active, &.active,
+    .open > .btn-primary.dropdown-toggle
+      background-color: $darkblue
+      color: #fff
+
   + .btn
     margin-left: 15px
 
diff --git a/app/assets/stylesheets/components/_forms.sass b/app/assets/stylesheets/components/_forms.sass
index 613b6095b..171294ac1 100644
--- a/app/assets/stylesheets/components/_forms.sass
+++ b/app/assets/stylesheets/components/_forms.sass
@@ -380,6 +380,9 @@ $cbx-size: 20px
   margin: 0
   padding: 0 5px
 
+  + .nested-fields
+    border-top: 2px solid $darkgrey
+
   .wrapper
     display: table
     table-layout: fixed
@@ -387,7 +390,7 @@ $cbx-size: 20px
 
     > div
       display: table-cell
-      padding: 10px
+      padding: 0 10px 10px 10px
 
       &:last-child
         width: 34px
@@ -401,15 +404,13 @@ $cbx-size: 20px
           padding: 0
 
 .nested-linker
-  margin: 0
-  padding: 10px 15px
+  padding: 10px 15px 0 15px
   text-align: right
   border-top: 1px solid rgba($grey, 0.5)
 
 // Subforms
 .subform
   margin: 0 0 15px 0
-  border: 1px solid rgba($grey, 0.5)
 
   > .form-group
     margin: 0
diff --git a/app/assets/stylesheets/components/_lists.sass b/app/assets/stylesheets/components/_lists.sass
new file mode 100644
index 000000000..e845c911d
--- /dev/null
+++ b/app/assets/stylesheets/components/_lists.sass
@@ -0,0 +1,11 @@
+//-------//
+// LISTS //
+//-------//
+
+// Definition lists
+dl.definition-list
+  // Definition term
+  dt
+
+  // Definition
+  dd
diff --git a/app/assets/stylesheets/components/_page_header.sass b/app/assets/stylesheets/components/_page_header.sass
index 562b33664..3bbd429a9 100644
--- a/app/assets/stylesheets/components/_page_header.sass
+++ b/app/assets/stylesheets/components/_page_header.sass
@@ -41,27 +41,3 @@
 
       + .btn
         margin-left: 15px
-
-  .page_metalist
-    margin: 0 0 25px 0
-    padding: 0 0 0 65px
-    font-size: 0.85em
-
-    .pm-col
-      display: inline-block
-      vertical-align: top
-      min-width: 150px
-      padding-right: 15px
-      margin-right: 15px
-      border-right: 1px solid rgba(#fff, 0.5)
-
-      &:last-child
-        margin-right: 0
-        padding-right: 0
-        border-right: none
-
-    .pm-item
-      margin-top: 0.5em
-
-      &:first-child
-        margin-top: 0
diff --git a/app/views/referentials/_form.html.slim b/app/views/referentials/_form.html.slim
index 8a437cb69..648b2718b 100644
--- a/app/views/referentials/_form.html.slim
+++ b/app/views/referentials/_form.html.slim
@@ -29,7 +29,9 @@
       = form.input :upper_corner, input_html: {title: t("formtastic.titles.referential.upper_corner")}
       = form.input :lower_corner, input_html: {title: t("formtastic.titles.referential.lower_corner")}
 
-  .row.mt-md
+  .separator
+
+  .row
     .col-lg-12
       - if @referential.errors.has_key? :metadatas
         .row
@@ -58,13 +60,12 @@
             = render 'period_fields', f: period_form
 
           .links.nested-linker
-            = link_to_add_association 'Ajouter une période', subform, :periods, class: 'btn btn-primary'
+            = link_to_add_association 'Ajouter une période', subform, :periods, class: 'btn btn-outline-primary'
 
-  .row.mt-md
-    .col-lg-12
-      .subform
-        = form.simple_fields_for :metadatas do |subform|
-          = subform.input :lines, as: :select, collection: @referential.workbench.lines.includes(:company).order(:name), selected: subform.object.line_ids, label_method: :display_name, input_html: { 'data-select2ed': 'true', 'data-select2ed-placeholder': 'Sélection de lignes', 'multiple': 'multiple', style: 'width: 100%' }
+  .separator
+
+  = form.simple_fields_for :metadatas do |subform|
+    = subform.input :lines, as: :select, collection: @referential.workbench.lines.includes(:company).order(:name), selected: subform.object.line_ids, label_method: :display_name, input_html: { 'data-select2ed': 'true', 'data-select2ed-placeholder': 'Sélection de lignes', 'multiple': 'multiple', style: 'width: 100%' }
 
   .hidden = form.input :workbench_id, as: :hidden
 
diff --git a/app/views/referentials/show.html.slim b/app/views/referentials/show.html.slim
index bd65b470b..1f27b24bd 100644
--- a/app/views/referentials/show.html.slim
+++ b/app/views/referentials/show.html.slim
@@ -6,32 +6,6 @@
              link_to(t('actions.edit'), edit_referential_path(@referential), class: 'btn btn-default') do
 
   / Below is secundary actions & optional contents (filters, ...)
-  .row
-    .col-lg-12
-      .page_metalist
-        .pm-col
-          - if @referential.archived?
-            .pm-item
-              span.label.label-default
-                strong = "#{@referential.human_attribute_name(:archived_at)} : "
-                = l(@referential.archived_at, format: :short)
-          - else
-            .pm-item
-              strong = "#{@referential.human_attribute_name(:archived_at)} : "
-
-          .pm-item
-            strong = "#{@referential.human_attribute_name(:validity_period)} : "
-            - if @referential.validity_period
-              = t('validity_range', debut: l(@referential.try(:validity_period).try(:begin), format: :short), end: l(@referential.try(:validity_period).try(:end), format: :short))
-
-        .pm-col
-          .pm-item
-            strong = "Organisation : "
-            = @referential.organisation.name
-          .pm-item
-            strong = "#{@referential.human_attribute_name(:published_at)} : "
-            = ""
-
   .row.mb-sm
     .col-lg-12.text-right
       / Actions are: controler, rapport de controle, dupliquer, purger, conserver, supprimer
@@ -49,6 +23,32 @@
 / PageContent
 .page_content
   .container-fluid
+    .row
+      .col-lg-12
+        .page_metalist
+          .pm-col
+            - if @referential.archived?
+              .pm-item
+                span.label.label-default
+                  strong = "#{@referential.human_attribute_name(:archived_at)} : "
+                  = l(@referential.archived_at, format: :short)
+            - else
+              .pm-item
+                strong = "#{@referential.human_attribute_name(:archived_at)} : "
+
+            .pm-item
+              strong = "#{@referential.human_attribute_name(:validity_period)} : "
+              - if @referential.validity_period
+                = t('validity_range', debut: l(@referential.try(:validity_period).try(:begin), format: :short), end: l(@referential.try(:validity_period).try(:end), format: :short))
+
+          .pm-col
+            .pm-item
+              strong = "Organisation : "
+              = @referential.organisation.name
+            .pm-item
+              strong = "#{@referential.human_attribute_name(:published_at)} : "
+              = ""
+  
     - if @reflines.any?
       .row
         .col-lg-5.col-md-6.col-sm-6.col-xs-8