From d71585ad59c3b51e0542063b31cef0c871546ea5 Mon Sep 17 00:00:00 2001
From: Thomas Gelf <thomas@gelf.net>
Date: Fri, 18 Mar 2016 11:59:55 +0100
Subject: [PATCH] css/js: improve form field rendering behaviour

---
 public/css/module.less |  7 ++++---
 public/js/module.js    | 19 +++++++++++++++++++
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/public/css/module.less b/public/css/module.less
index 983fe8f5..52126404 100644
--- a/public/css/module.less
+++ b/public/css/module.less
@@ -105,7 +105,8 @@ form input[type=submit]:first-of-type {
 form p.description {
   padding: 1em 1em;
   margin: 0;
-  display: none;
+  font-style: italic;
+  width: 100%;
 }
 
 input, select, select option, textarea {
@@ -480,8 +481,8 @@ form dt.active label {
 
 form dd.active {
     p.description {
-        display: block;
-        width: 100%;
+        color: inherit;
+        font-style: normal;
     }
 }
 
diff --git a/public/js/module.js b/public/js/module.js
index a5fa6598..08857b5c 100644
--- a/public/js/module.js
+++ b/public/js/module.js
@@ -95,6 +95,7 @@
         {
             var $input = $(ev.currentTarget);
             var $dd = $input.closest('dd');
+            $dd.find('p.description').show();
             if ($dd.attr('id') && $dd.attr('id').match(/button/)) {
                 return;
             }
@@ -105,6 +106,19 @@
             $li.addClass('active');
             $dt.addClass('active');
             $dd.addClass('active');
+            $dd.find('p.description.fading-out')
+                .stop(true)
+                .removeClass('fading-out')
+                .fadeIn('fast');
+
+            $form.find('dd').not($dd)
+                .find('p.description')
+                .not('.fading-out')
+                .addClass('fading-out')
+                .delay(2000)
+                .fadeOut('slow', function() {
+                    $(this).removeClass('fading-out').hide()
+                });
         },
 
         highlightFormErrors: function($container)
@@ -127,12 +141,17 @@
             this.openedFieldsets[$fieldset.attr('id')] = ! $fieldset.hasClass('collapsed');
         },
 
+        hideInactiveFormDescriptions: function($container) {
+            $container.find('dd').not('.active').find('p.description').hide();
+        },
+
         rendered: function(ev) {
             var $container = $(ev.currentTarget);
             this.restoreContainerFieldsets($container);
             this.backupAllExtensibleSetDefaultValues($container);
             this.putFocusOnFirstObjectTypeElement($container);
             this.highlightFormErrors($container);
+            this.hideInactiveFormDescriptions($container);
         },
 
         restoreContainerFieldsets: function($container)