From 4df4c48fbd575d9ec4dc1dfa862da571a690a05c Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Tue, 6 Feb 2018 17:36:37 +0100
Subject: [PATCH] Improve UI for pad creation screen

---
 customize.dist/src/less2/include/creation.less | 18 ++++++++++++++----
 www/common/common-ui-elements.js               | 10 ++++++++--
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less
index aa94beb28..17d72f28f 100644
--- a/customize.dist/src/less2/include/creation.less
+++ b/customize.dist/src/less2/include/creation.less
@@ -33,16 +33,26 @@
             flex-wrap: wrap;
             justify-content: center;
             align-items: center;
-            h2, p {
-                width: 100%;
-            }
             h2 {
+                width: 100%;
                 display: flex;
+                margin-bottom: 20px;
                 justify-content: space-between;
                 .cp-creation-help {
                     display: none;
                 }
             }
+            .cp-creation-help-container {
+                display: flex;
+                justify-content: space-between;
+                p {
+                    padding: 0 20px;
+                    flex-grow: 0;
+                    flex-shrink: 0;
+                    flex-basis: 50%;
+                    text-align: justify;
+                }
+            }
             @media screen and (max-width: 500px) {
                 width: ~"calc(100% - 30px)";
             }
@@ -50,7 +60,7 @@
                 h2 .cp-creation-help {
                     display: inline;
                 }
-                p {
+                .cp-creation-help-container {
                     display: none;
                 }
             }
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index d31fe0a70..432061d2e 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1687,7 +1687,10 @@ define([
                 Messages.creation_ownedTitle,
                 createHelper(Messages.creation_owned1 + '\n' + Messages.creation_owned2)
             ]),
-            setHTML(h('p'), Messages.creation_owned1 + '<br>' + Messages.creation_owned2),
+            h('div.cp-creation-help-container', [
+                setHTML(h('p'), Messages.creation_owned1),
+                setHTML(h('p'), Messages.creation_owned2)
+            ]),
             h('input#cp-creation-owned-true.cp-creation-owned-value', {
                 type: 'radio',
                 name: 'cp-creation-owned',
@@ -1715,7 +1718,10 @@ define([
                 Messages.creation_expireTitle,
                 createHelper(Messages.creation_expire1, Messages.creation_expire2)
             ]),
-            setHTML(h('p'), Messages.creation_expire1 + '<br>' + Messages.creation_expire2),
+            h('div.cp-creation-help-container', [
+                setHTML(h('p'), Messages.creation_expire1),
+                setHTML(h('p'), Messages.creation_expire2)
+            ]),
             h('input#cp-creation-expire-false.cp-creation-expire-value', {
                 type: 'radio',
                 name: 'cp-creation-expire',