From 4dfe8ac0d056c1a31c95cc1c1030e5d8eb14aa74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Benqu=C3=A9?= <mail@davidbenque.com>
Date: Wed, 9 Jun 2021 15:47:01 +0100
Subject: [PATCH] Add hover style and hint to ordered list questions

---
 www/form/app-form.less | 14 ++++++++++++--
 www/form/inner.js      |  3 ++-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/www/form/app-form.less b/www/form/app-form.less
index fb4dc7c4e..b8d5785ca 100644
--- a/www/form/app-form.less
+++ b/www/form/app-form.less
@@ -506,17 +506,27 @@
             }
         }
     }
+    .cp-form-sort-hint {
+        margin-bottom: 10px;
+    }
     .cp-form-type-sort {
         cursor: grab;
-        padding: 2px;
+        padding: 5px;
         .cp-form-handle {
             margin-right: 5px;
         }
         .cp-form-sort-order {
-            border: 1px solid @cp_profile-hint;
+            border: 1px solid @cryptpad_text_col;
             padding: 0 5px;
             margin-right: 5px;
         }
+        &:hover {
+            background-color: @cp_app-bg;
+            color: @cryptpad_color_link;
+            .cp-form-sort-order {
+                border-color: @cryptpad_color_link;
+            }
+        }
     }
 
     .cp-form-type-poll-container {
diff --git a/www/form/inner.js b/www/form/inner.js
index 5d1ee5763..162e63441 100644
--- a/www/form/inner.js
+++ b/www/form/inner.js
@@ -106,6 +106,7 @@ define([
     Messages.form_type_multicheck = "Multiline Checkbox"; // XXX
     Messages.form_type_poll = "Poll"; // XXX
     Messages.form_type_sort = "Ordered list"; // XXX
+    Messages.form_sort_hint = "Please sort these items from most (1) to least (n) preferred.";
 
     Messages.form_type_md = "Description"; // XXX
     Messages.form_type_page = "Page break"; // XXX
@@ -1491,7 +1492,7 @@ define([
                     $(div).data('val', data);
                     return div;
                 });
-                var tag = h('div.cp-form-type-sort-container', els);
+                var tag = h('div.cp-form-type-sort-container', [h('div.cp-form-sort-hint', Messages.form_sort_hint), els]);
                 var $tag = $(tag);
                 var reorder = function () {
                     $tag.find('.cp-form-type-sort').each(function (i, el) {