web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Horizontal scrollbar layout

Browse Source
This commit is contained in:
yflory 2020-03-04 15:25:03 +01:00
parent ea154e9ecc
commit b31d024851
3 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
www/kanban/app-kanban.less
View File

@ -98,6 +98,7 @@
flex: 1; flex: 1;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
overflow-x: hidden;
} }
#cp-app-kanban-editor { #cp-app-kanban-editor {
flex: 1; flex: 1;
@ -108,30 +109,33 @@
} }
#cp-app-kanban-content { #cp-app-kanban-content {
flex: 1; flex: 1;
overflow-y: auto;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
max-height: 100%;
overflow-x: auto;
.kanban-container-outer { .kanban-container-outer {
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
min-height: -webkit-min-content; min-height: 0;
min-height: min-content;
.kanban-container { .kanban-container {
flex: 1; flex: 1;
display: flex; display: flex;
flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
max-height: 100%;
} }
} }
#kanban-trash { #kanban-trash {
width: 100px;
height: 100px; height: 100px;
align-self: end;
font-size: 40px; font-size: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative;
width: 100%;
i {
position: fixed;
}
&.kanban-trash-active { &.kanban-trash-active {
color: red; color: red;
border: 1px solid red; border: 1px solid red;
@ -147,6 +151,9 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 10px 5px 10px 10px; padding: 10px 5px 10px 10px;
&.new-item {
padding: 10px;
}
.kanban-item-text { .kanban-item-text {
cursor: text; cursor: text;
overflow-wrap: anywhere; overflow-wrap: anywhere;
@ -157,6 +164,13 @@
.kanban-board { .kanban-board {
background-color: #eaeaea; background-color: #eaeaea;
color: @cryptpad_text_col; color: @cryptpad_text_col;
main {
min-height: 0;
padding: 0 10px;
margin: 10px 0;
flex: 1;
overflow-y: auto;
}
header { header {
display: flex; display: flex;
align-items: center; align-items: center;
@ -177,7 +191,8 @@
} }
} }
footer { footer {
padding: 10px; margin: 10px;
margin-top: 0px;
span { span {
.tools_unselectable(); .tools_unselectable();
outline: none; outline: none;

5
www/kanban/inner.js
View File

@ -607,6 +607,9 @@ define([
var $input = getInput().val(name).appendTo($item); var $input = getInput().val(name).appendTo($item);
kanban.addForm(boardId, $item[0]); kanban.addForm(boardId, $item[0]);
$input.focus(); $input.focus();
setTimeout(function () {
$input[0].scrollIntoView();
});
var save = function () { var save = function () {
$item.remove(); $item.remove();
kanban.inEditMode = false; kanban.inEditMode = false;
@ -624,7 +627,7 @@ define([
e.stopPropagation(); e.stopPropagation();
save(); save();
if (!$input.val()) { return; } if (!$input.val()) { return; }
$(el).closest('.kanban-board').find('.kanban-title-button.fa-plus').click(); $(el).closest('.kanban-board').find('footer .kanban-title-button').click();
return; return;
} }
if (e.which === 27) { if (e.which === 27) {

7
www/kanban/jkanban.css
View File

@ -4,7 +4,6 @@
.kanban-board { .kanban-board {
position: relative; position: relative;
float: left;
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
margin: 10px; margin: 10px;
vertical-align: top; vertical-align: top;
@ -45,17 +44,11 @@
padding: .25rem .5rem; padding: .25rem .5rem;
} }
.kanban-board .kanban-drag {
min-height: 200px;
padding: 20px;
flex: 1;
}
.kanban-item { .kanban-item {
background: #fff; background: #fff;
padding: 15px; padding: 15px;
margin-bottom: 20px; margin-bottom: 20px;
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
} }
.kanban-item:hover { .kanban-item:hover {