Merge pull request #1307 from cryptpad/kanban_tag_display_mobile

Changed positioning of kanban tag container on smaller screens

www/kanban/app-kanban.less

@@ -164,7 +164,10 @@
         }
         margin-bottom: 15px;
     }
-
+    .kanban-tag-btn-toggle {
+        margin-top: 10px;
+        margin-left: 10px
+    }
     #cp-app-kanban-container {
         flex: 1;
         display: flex;
@@ -432,7 +435,12 @@
         position: relative;
         min-height: 50px;
         .cp-kanban-filterTags {
+            @media (min-width: 505px) {
                 display: inline-flex;
+                .kanban-tag-btn-toggle {
+                    margin-right: 10px;
+                }
+            }
             align-items: center;
             flex: 1;
             //max-width: 80%;
@@ -440,6 +448,9 @@
             .cp-kanban-filterTags-toggle {
                 min-width: 100px;
                 display: flex;
+                @media (max-width: 505px) {
+                    margin-left: 10px;
+                }
                 flex-flow: column;
                 flex-shrink: 0;
                 & > * {
@@ -457,6 +468,10 @@
             button.cp-kanban-filterTags-reset {
                 cursor: pointer;
                 white-space: normal !important;
+                @media (max-width: 505px) {
+                    margin-bottom: 10px;
+                    margin-right: 10px;
+                }
                 .tools_unselectable();
                 i {
                     margin-right: 5px;

www/kanban/inner.js

@@ -56,6 +56,9 @@ define([
     jKanban,
     Export)
 {
+    Messages.kanban_showTags = 'See all tags'; // XXX
+    Messages.kanban_hideTags = 'See less tags'; // XXX
+
     var verbose = function (x) { console.log(x); };
     verbose = function () {}; // comment out to enable verbose logging
     var onRedraw = Util.mkEvent();
@@ -937,6 +940,8 @@ define([
                 //framework._.sfCommon.setPadAttribute('quickMode', false);
             });
 
+            var toggleTagsButton = h('button.btn.btn-default.kanban-tag-btn-toggle', Messages.kanban_showTags);
+
             // Tags filter
             var existing = getExistingTags(kanban.options.boards);
             var list = h('div.cp-kanban-filterTags-list');
@@ -946,12 +951,14 @@ define([
             ]);
             var hint = h('span.cp-kanban-filterTags-name', Messages.kanban_tags);
             var tags = h('div.cp-kanban-filterTags', [
+
                 h('span.cp-kanban-filterTags-toggle', [
                     hint,
                     reset,
                 ]),
                 list,
             ]);
+
             var $reset = $(reset);
             var $list = $(list);
             var $hint = $(hint);
@@ -967,6 +974,7 @@ define([
                     return String($(this).data('tag'));
                 }).get();
             };
+
             var commitTags = function () {
                 var t = getTags();
                 setTagFilterState(t.length);
@@ -1024,6 +1032,40 @@ define([
                 commitTags();
             });
 
+
+            if ($(window).width() < 500) {
+
+                $(tags).append(toggleTagsButton);
+
+                var hideTags = function () {
+                    for (var tag of list.children) {
+                        if (existing.indexOf(tag.innerHTML) > 10) {
+                            $(tag).hide();                    
+                        }
+                    }
+                };
+                hideTags();
+    
+                var toggleTags = function () {
+                    for (var tag of list.children) {
+                        if (existing.indexOf(tag.innerHTML) > 10 && kanban.options.tags.indexOf(tag.innerHTML) === -1) {
+                            if ($(tag).is(":visible")) { 
+                                $(tag).hide();
+                                $(toggleTagsButton).text(Messages.kanban_showTags);
+                            } else {
+                                $(tag).show();
+                                $(toggleTagsButton).text(Messages.kanban_hideTags);
+                            }
+                        }
+                    }
+                };
+    
+                $(toggleTagsButton).click(function() {
+                    toggleTags();
+                });
+    
+            }
+
             var container = h('div#cp-kanban-controls', [
                 tags,
                 h('div.cp-kanban-changeView', [