Refs #2600: adding definition list component

4 files changed, 109 insertions, 65 deletions

diff --git a/app/assets/stylesheets/components/_lists.sass b/app/assets/stylesheets/components/_lists.sass
index e845c911d..17822b12a 100644
--- a/app/assets/stylesheets/components/_lists.sass
+++ b/app/assets/stylesheets/components/_lists.sass
@@ -3,9 +3,49 @@
 //-------//
 
 // Definition lists
-dl.definition-list
+$dlWidth: 40%
+
+.definition-list
+  > .dl-body
+    display: block
+    position: relative
+    letter-spacing: -0.31em
+    text-rendering: optimizespeed
+    font-weight: 300
+    margin-bottom: 20px
+
+  .dl-head
+    display: block
+    font-size: $h2-size
+    font-weight: 700
+    border-bottom: 2px solid $darkgrey
+    padding: 5px 15px 6px 15px
+
+  .dl-term, .dl-def
+    display: inline-block
+    letter-spacing: normal
+    word-spacing: normal
+    text-rendering: auto
+    // overflow: hidden
+    vertical-align: middle
+    padding: 5px 15px 6px 15px
+
   // Definition term
-  dt
+  .dl-term
+    position: relative
+    width: $dlWidth
+    font-weight: 700
+
+    &:after
+      content: ''
+      display: block
+      position: absolute
+      z-index: 1
+      bottom: 0
+      left: 0
+      width: (100 / ($dlWidth / 1%)) * 100 * 1%
+      border-bottom: 1px solid rgba($grey, 0.5)
 
   // Definition
-  dd
+  .dl-def
+    width: 100% - $dlWidth
diff --git a/app/helpers/newapplication_helper.rb b/app/helpers/newapplication_helper.rb
index c13d64197..15c642ed7 100644
--- a/app/helpers/newapplication_helper.rb
+++ b/app/helpers/newapplication_helper.rb
@@ -235,6 +235,26 @@ module NewapplicationHelper
     end
   end
 
+  # Definition list
+  def definition_list title, test
+    return unless test.present?
+
+    head = content_tag(:div, title, class: 'dl-head')
+
+    body = content_tag :div, class: 'dl-body' do
+      cont = []
+      test.map do |k, v|
+        cont << content_tag(:div, k, class: 'dl-term')
+        cont << content_tag(:div, v, class: 'dl-def')
+      end
+      cont.join.html_safe
+    end
+
+    content_tag :div, '', class: 'definition-list' do
+      head + body
+    end
+  end
+
   # ModalBox Builder
   def modalbox id, &block
     content_tag(:div, '', class: 'modal fade', id: id, tabindex: 1, role: 'dialog') do
diff --git a/app/views/referential_lines/show.html.slim b/app/views/referential_lines/show.html.slim
index 9eed5345e..24f52b8ce 100644
--- a/app/views/referential_lines/show.html.slim
+++ b/app/views/referential_lines/show.html.slim
@@ -6,43 +6,6 @@
   / t('last_update', time: l(@line.updated_at, format: :short)),
   / Below is secundary actions & optional contents (filters, ...)
   .row
-    .col-lg-12
-      .page_metalist
-        .pm-col
-          .pm-item
-            span.label.label-default
-              = @line.deactivated? ? 'Désactivée' : 'Activée'
-
-          .pm-item
-            strong = "#{@line.human_attribute_name(:network)} : "
-            = @line.network.nil? ? t('lines.index.unset') : @line.network.name
-
-          .pm-item
-            strong = "#{@line.human_attribute_name(:company)} : "
-            = @line.company.nil? ? t('lines.index.unset') : @line.company.name
-        
-        .pm-col
-          .pm-item
-            strong = "#{@line.human_attribute_name(:number)} : "
-            = @line.number
-          .pm-item
-            strong = "#{@line.human_attribute_name(:published_name)} : "
-            = @line.published_name
-          .pm-item
-            strong = "#{@line.human_attribute_name(:registration_number)} : "
-            = @line.registration_number
-        .pm-col
-          .pm-item
-            strong = "#{@line.human_attribute_name(:transport_mode)} : "
-            = t("enumerize.line.transport_mode.#{@line.transport_mode}") if @line.transport_mode
-          .pm-item
-            strong = "#{@line.human_attribute_name(:transport_submode)} : "
-            = t("enumerize.line.transport_submode.#{@line.transport_submode}") if @line.transport_submode
-          .pm-item
-            strong = "#{@line.human_attribute_name(:url)} : "
-            = @line.try(:url)
-
-  .row
     .col-lg-12.text-right.mb-sm
       = link_to t('lines.actions.show_network'), [@referential, @line.network], class: 'btn btn-primary'
       = link_to t('lines.actions.show_company'), [@referential, @line.company], class: 'btn btn-primary'
@@ -65,6 +28,44 @@
   .container-fluid
     .row
       .col-lg-12
+        / = definition_list t('metadatas'),
+        /   {  }
+        .page_metalist
+          .pm-col
+            .pm-item
+              span.label.label-default
+                = @line.deactivated? ? 'Désactivée' : 'Activée'
+
+            .pm-item
+              strong = "#{@line.human_attribute_name(:network)} : "
+              = @line.network.nil? ? t('lines.index.unset') : @line.network.name
+
+            .pm-item
+              strong = "#{@line.human_attribute_name(:company)} : "
+              = @line.company.nil? ? t('lines.index.unset') : @line.company.name
+          
+          .pm-col
+            .pm-item
+              strong = "#{@line.human_attribute_name(:number)} : "
+              = @line.number
+            .pm-item
+              strong = "#{@line.human_attribute_name(:published_name)} : "
+              = @line.published_name
+            .pm-item
+              strong = "#{@line.human_attribute_name(:registration_number)} : "
+              = @line.registration_number
+          .pm-col
+            .pm-item
+              strong = "#{@line.human_attribute_name(:transport_mode)} : "
+              = t("enumerize.line.transport_mode.#{@line.transport_mode}") if @line.transport_mode
+            .pm-item
+              strong = "#{@line.human_attribute_name(:transport_submode)} : "
+              = t("enumerize.line.transport_submode.#{@line.transport_submode}") if @line.transport_submode
+            .pm-item
+              strong = "#{@line.human_attribute_name(:url)} : "
+              = @line.try(:url)
+    .row
+      .col-lg-12
         - if @routes.any?
           = new_pagination @routes, 'pull-right'
 
diff --git a/app/views/referentials/show.html.slim b/app/views/referentials/show.html.slim
index 1f27b24bd..b3929d637 100644
--- a/app/views/referentials/show.html.slim
+++ b/app/views/referentials/show.html.slim
@@ -24,33 +24,15 @@
 .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)} : "
-              = ""
+      .col-lg-6.col-md-6.col-sm-12.col-xs-12
+        = definition_list t('metadatas'),
+          { @referential.human_attribute_name(:archived_at) => (@referential.archived? ? l(@referential.archived_at, format: :short) : '-'),
+            @referential.human_attribute_name(:validity_period) => (@referential.validity_period.present? ? t('validity_range', debut: l(@referential.try(:validity_period).try(:begin), format: :short), end: l(@referential.try(:validity_period).try(:end), format: :short)) : '-'),
+            @referential.human_attribute_name(:organisation) => @referential.organisation.name,
+            @referential.human_attribute_name(:published_at) => '-' }
   
     - if @reflines.any?
-      .row
+      .row.mt-lg
         .col-lg-5.col-md-6.col-sm-6.col-xs-8
           = search_form_for @q, url: referential_path(@referential.id) do |f|
             .input-group.search_bar
@@ -59,6 +41,7 @@
               span.input-group-btn
                 button.btn.btn-default type='submit'
                   span.fa.fa-search
+
         .col-lg-7.col-md-6.col-sm-6.col-xs-4.text-right
           = new_pagination @reflines