From db25d914abe619fa97a57ef55473c3cfa685b08c Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Mon, 29 Oct 2018 11:48:22 +0100
Subject: [PATCH] Improve default UI for small or zoomed screens

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

diff --git a/customize.dist/src/less2/include/help.less b/customize.dist/src/less2/include/help.less
index 4dd396a29..a094f28ac 100644
--- a/customize.dist/src/less2/include/help.less
+++ b/customize.dist/src/less2/include/help.less
@@ -38,7 +38,7 @@
             color: @help-text-color;
             color: var(--help-text-color);
             margin: 0;
-            padding: 15px;
+            padding: 5px 15px;
             a {
                 color: @help-link-color;
                 color: var(--help-link-color);
@@ -52,7 +52,13 @@
             h3 {
                 font-size: 16px;
             }
-            ul, ol, p { margin: 0; }
+            ul, ol, p, h1, h2, h3 { margin: 0; }
+            &.cp-help-small {
+                ul {
+                    display: none;
+                }
+                cursor: pointer;
+            }
         }
     }
 }
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 60666a6c0..741b71e10 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1122,14 +1122,30 @@ define([
             common.setAttribute(['hideHelp', type], true);
         };
 
-        $(closeButton).click(function () { toggleHelp(true); });
+        var showMore = function () {
+            $(text).addClass("cp-help-small");
+            var $dot = $('<span>').text('...').appendTo($(text).find('h1'));
+            $(text).click(function () {
+                $(text).removeClass('cp-help-small');
+                $(text).off('click');
+                $dot.remove();
+            });
+        };
+
+        $(closeButton).click(function (e) {
+            e.stopPropagation();
+            toggleHelp(true);
+        });
         $toolbarButton.click(function () {
             toggleHelp();
         });
 
         common.getAttribute(['hideHelp', type], function (err, val) {
-            if ($(window).height() < 800 && $(window).width() < 800) { return void toggleHelp(true); }
-            if (val === true) { toggleHelp(true); }
+            //if ($(window).height() < 800 || $(window).width() < 800) { return void toggleHelp(true); }
+            if (val === true) { return void toggleHelp(true); }
+            if (!val && ($(window).height() < 800 || $(window).width() < 800)) {
+                return void showMore();
+            }
         });
 
         return {
diff --git a/www/common/toolbar3.js b/www/common/toolbar3.js
index 0edaddad4..e5e1ce00d 100644
--- a/www/common/toolbar3.js
+++ b/www/common/toolbar3.js
@@ -481,7 +481,7 @@ Messenger, MessengerUI, Messages) {
         });
         show();
         Common.getAttribute(['toolbar', 'chat-drawer'], function (err, val) {
-            if (val === false || ($(window).height() < 800 && $(window).width() < 800)) {
+            if (val === false || ($(window).height() < 800 || $(window).width() < 800)) {
                 return void hide();
             }
             show();