From aaff13795e217c08ad9e0fd98a82f913087a20eb Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Fri, 4 Jun 2021 17:17:12 +0200
Subject: [PATCH] Fix forms UI issues

---
 .../src/less2/include/colortheme-dark.less    |  2 +-
 www/form/app-form.less                        | 27 ++++++++++++++++++-
 www/form/inner.js                             |  7 ++---
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less
index 5c3091b6b..ba80b2d64 100644
--- a/customize.dist/src/less2/include/colortheme-dark.less
+++ b/customize.dist/src/less2/include/colortheme-dark.less
@@ -435,5 +435,5 @@
 @cp_form-poll-no: @cryptpad_color_light_red;
 @cp_form-poll-yes: @cryptpad_color_light_green;
 @cp_form-poll-maybe: @cryptpad_color_light_yellow;
-@cp_form_poll-yes-color: @cryptpad_color_green;
+@cp_form-poll-yes-color: @cryptpad_color_green;
 @cp_form-invalid: @cryptpad_color_red;
diff --git a/www/form/app-form.less b/www/form/app-form.less
index f9e51c470..abe5dafd8 100644
--- a/www/form/app-form.less
+++ b/www/form/app-form.less
@@ -49,9 +49,22 @@
             flex: 1;
             justify-content: center;
             min-width: 300px;
-            flex-wrap: wrap;
+            //flex-wrap: wrap;
             overflow: auto;
 
+            @media screen and (max-width: 1000px) {
+                flex-wrap: wrap;
+                justify-content: flex-start;
+                .cp-form-creator-control {
+                    width: 100% !important;
+                    .cp-form-creator-settings {
+                        display: flex;
+                        justify-content: space-evenly;
+                        flex-wrap: wrap;
+                    }
+                }
+            }
+
             .cp-form-creator-settings {
                 padding: 30px;
                 & > div:not(:last-child) {
@@ -110,6 +123,12 @@
                             margin-right: 5px;
                         }
                         .cp-form-creator-types {
+                            .btn-default {
+                                background: transparent;
+                                &:hover, &:not(:disabled):active, &:focus {
+                                    background-color: @cp_buttons-default;
+                                }
+                            }
                             button {
                                 border: 0px;
                                 //padding-bottom: 3px;
@@ -148,6 +167,12 @@
                             margin-right: 5px;
                         }
                         .cp-form-creator-types {
+                            .btn-default {
+                                background: transparent;
+                                &:hover, &:not(:disabled):active, &:focus {
+                                    background-color: @cp_buttons-default;
+                                }
+                            }
                             button {
                                 border: 0px;
                                 padding:5px;
diff --git a/www/form/inner.js b/www/form/inner.js
index d21a3598e..01b4a3055 100644
--- a/www/form/inner.js
+++ b/www/form/inner.js
@@ -102,6 +102,7 @@ define([
     Messages.form_type_checkbox = "Checkbox"; // XXX
     Messages.form_type_multicheck = "Multiline Checkbox"; // XXX
     Messages.form_type_poll = "Poll"; // XXX
+    Messages.form_type_sort = "Ordered list"; // XXX
 
     Messages.form_type_md = "Description"; // XXX
     Messages.form_type_page = "Page break"; // XXX
@@ -207,7 +208,7 @@ define([
             ]);
             getLengthVal = function () {
                 var val = Number($(lengthInput).val()) || 1000;
-                if (val < 100) { val = 1; }
+                if (val < 1) { val = 1; }
                 if (val > 5000) { val = 5000; }
                 return val;
             };
@@ -953,7 +954,7 @@ define([
 
                 return h('div.cp-form-results-type-text', results);
             },
-            icon: h('i.fa.fa-font')
+            icon: h('i.cptools.cptools-form-paragraph')
         },
         radio: {
             defaultOpts: {
@@ -1553,7 +1554,7 @@ define([
 
                 return h('div.cp-form-results-type-radio', results);
             },
-            icon: h('i.fa.fa-list-ul')
+            icon: h('i.cptools.cptools-form-list-ordered')
         },
     };