mirror of https://github.com/xwiki-labs/cryptpad
Merge pull request #1307 from cryptpad/kanban_tag_display_mobile
Changed positioning of kanban tag container on smaller screens
This commit is contained in:
commit
993d64e603
|
@ -164,7 +164,10 @@
|
||||||
}
|
}
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
.kanban-tag-btn-toggle {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-left: 10px
|
||||||
|
}
|
||||||
#cp-app-kanban-container {
|
#cp-app-kanban-container {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -432,7 +435,12 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 50px;
|
min-height: 50px;
|
||||||
.cp-kanban-filterTags {
|
.cp-kanban-filterTags {
|
||||||
|
@media (min-width: 505px) {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
.kanban-tag-btn-toggle {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
//max-width: 80%;
|
//max-width: 80%;
|
||||||
|
@ -440,6 +448,9 @@
|
||||||
.cp-kanban-filterTags-toggle {
|
.cp-kanban-filterTags-toggle {
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@media (max-width: 505px) {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
& > * {
|
& > * {
|
||||||
|
@ -457,6 +468,10 @@
|
||||||
button.cp-kanban-filterTags-reset {
|
button.cp-kanban-filterTags-reset {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
white-space: normal !important;
|
white-space: normal !important;
|
||||||
|
@media (max-width: 505px) {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
.tools_unselectable();
|
.tools_unselectable();
|
||||||
i {
|
i {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
|
|
|
@ -56,6 +56,9 @@ define([
|
||||||
jKanban,
|
jKanban,
|
||||||
Export)
|
Export)
|
||||||
{
|
{
|
||||||
|
Messages.kanban_showTags = 'See all tags'; // XXX
|
||||||
|
Messages.kanban_hideTags = 'See less tags'; // XXX
|
||||||
|
|
||||||
var verbose = function (x) { console.log(x); };
|
var verbose = function (x) { console.log(x); };
|
||||||
verbose = function () {}; // comment out to enable verbose logging
|
verbose = function () {}; // comment out to enable verbose logging
|
||||||
var onRedraw = Util.mkEvent();
|
var onRedraw = Util.mkEvent();
|
||||||
|
@ -937,6 +940,8 @@ define([
|
||||||
//framework._.sfCommon.setPadAttribute('quickMode', false);
|
//framework._.sfCommon.setPadAttribute('quickMode', false);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var toggleTagsButton = h('button.btn.btn-default.kanban-tag-btn-toggle', Messages.kanban_showTags);
|
||||||
|
|
||||||
// Tags filter
|
// Tags filter
|
||||||
var existing = getExistingTags(kanban.options.boards);
|
var existing = getExistingTags(kanban.options.boards);
|
||||||
var list = h('div.cp-kanban-filterTags-list');
|
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 hint = h('span.cp-kanban-filterTags-name', Messages.kanban_tags);
|
||||||
var tags = h('div.cp-kanban-filterTags', [
|
var tags = h('div.cp-kanban-filterTags', [
|
||||||
|
|
||||||
h('span.cp-kanban-filterTags-toggle', [
|
h('span.cp-kanban-filterTags-toggle', [
|
||||||
hint,
|
hint,
|
||||||
reset,
|
reset,
|
||||||
]),
|
]),
|
||||||
list,
|
list,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
var $reset = $(reset);
|
var $reset = $(reset);
|
||||||
var $list = $(list);
|
var $list = $(list);
|
||||||
var $hint = $(hint);
|
var $hint = $(hint);
|
||||||
|
@ -967,6 +974,7 @@ define([
|
||||||
return String($(this).data('tag'));
|
return String($(this).data('tag'));
|
||||||
}).get();
|
}).get();
|
||||||
};
|
};
|
||||||
|
|
||||||
var commitTags = function () {
|
var commitTags = function () {
|
||||||
var t = getTags();
|
var t = getTags();
|
||||||
setTagFilterState(t.length);
|
setTagFilterState(t.length);
|
||||||
|
@ -1024,6 +1032,40 @@ define([
|
||||||
commitTags();
|
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', [
|
var container = h('div#cp-kanban-controls', [
|
||||||
tags,
|
tags,
|
||||||
h('div.cp-kanban-changeView', [
|
h('div.cp-kanban-changeView', [
|
||||||
|
|
Loading…
Reference in New Issue