mirror of
https://github.com/wekan/wekan.git
synced 2025-12-27 04:38:49 +01:00
Swimlanes collapsed by default.
TODO: - Add count. - Move list names to top, if possible. I did not get it working yet. - Try to fit collapse+swimlane name etc at same row. Related #2804
This commit is contained in:
parent
a636611471
commit
26e0bbce17
3 changed files with 80 additions and 27 deletions
|
|
@ -1,24 +1,27 @@
|
||||||
template(name="swimlane")
|
template(name="swimlane")
|
||||||
.swimlane
|
.swimlane
|
||||||
+swimlaneHeader
|
+swimlaneHeader
|
||||||
.swimlane.js-lists.js-swimlane
|
// Minimize swimlanes next 2 lines below https://www.w3schools.com/howto/howto_js_accordion.asp
|
||||||
if isMiniScreen
|
button(class="accordion")
|
||||||
if currentListIsInThisSwimlane _id
|
div(class="panel")
|
||||||
+list(currentList)
|
.swimlane.js-lists.js-swimlane
|
||||||
unless currentList
|
if isMiniScreen
|
||||||
|
if currentListIsInThisSwimlane _id
|
||||||
|
+list(currentList)
|
||||||
|
unless currentList
|
||||||
|
each lists
|
||||||
|
+miniList(this)
|
||||||
|
if currentUser.isBoardMember
|
||||||
|
unless currentUser.isCommentOnly
|
||||||
|
+addListForm
|
||||||
|
else
|
||||||
each lists
|
each lists
|
||||||
+miniList(this)
|
+list(this)
|
||||||
|
if currentCardIsInThisList _id ../_id
|
||||||
|
+cardDetails(currentCard)
|
||||||
if currentUser.isBoardMember
|
if currentUser.isBoardMember
|
||||||
unless currentUser.isCommentOnly
|
unless currentUser.isCommentOnly
|
||||||
+addListForm
|
+addListForm
|
||||||
else
|
|
||||||
each lists
|
|
||||||
+list(this)
|
|
||||||
if currentCardIsInThisList _id ../_id
|
|
||||||
+cardDetails(currentCard)
|
|
||||||
if currentUser.isBoardMember
|
|
||||||
unless currentUser.isCommentOnly
|
|
||||||
+addListForm
|
|
||||||
|
|
||||||
template(name="listsGroup")
|
template(name="listsGroup")
|
||||||
.swimlane.list-group.js-lists
|
.swimlane.list-group.js-lists
|
||||||
|
|
|
||||||
|
|
@ -134,6 +134,22 @@ BlazeComponent.extendComponent({
|
||||||
}
|
}
|
||||||
|
|
||||||
initSortable(boardComponent, $listsDom);
|
initSortable(boardComponent, $listsDom);
|
||||||
|
|
||||||
|
// Minimize swimlanes start https://www.w3schools.com/howto/howto_js_accordion.asp
|
||||||
|
var acc = document.getElementsByClassName("accordion");
|
||||||
|
var i;
|
||||||
|
for (i = 0; i < acc.length; i++) {
|
||||||
|
acc[i].addEventListener("click", function() {
|
||||||
|
this.classList.toggle("active");
|
||||||
|
var panel = this.nextElementSibling;
|
||||||
|
if (panel.style.maxHeight) {
|
||||||
|
panel.style.maxHeight = null;
|
||||||
|
} else {
|
||||||
|
panel.style.maxHeight = panel.scrollHeight + "px";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// Minimize swimlanes end https://www.w3schools.com/howto/howto_js_accordion.asp
|
||||||
},
|
},
|
||||||
onCreated() {
|
onCreated() {
|
||||||
this.draggingActive = new ReactiveVar(false);
|
this.draggingActive = new ReactiveVar(false);
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,39 @@
|
||||||
@import 'nib'
|
@import 'nib'
|
||||||
|
|
||||||
|
// Minimize swimlanes start https://www.w3schools.com/howto/howto_js_accordion.asp
|
||||||
|
|
||||||
|
.accordion
|
||||||
|
cursor: pointer
|
||||||
|
width: 30px
|
||||||
|
height: 20px
|
||||||
|
border: none
|
||||||
|
outline: none
|
||||||
|
font-size: 18px
|
||||||
|
transition: 0.4s
|
||||||
|
padding-top: 0px
|
||||||
|
margin-top: 0px
|
||||||
|
|
||||||
|
.accordion:after
|
||||||
|
// Unicode triagle right:
|
||||||
|
content: '\25B6'
|
||||||
|
color: #777
|
||||||
|
font-weight: bold
|
||||||
|
float: left
|
||||||
|
|
||||||
|
.active:after
|
||||||
|
// Unicode triangle down:
|
||||||
|
content: '\25BC'
|
||||||
|
|
||||||
|
.panel
|
||||||
|
width: 100%
|
||||||
|
max-height: 0
|
||||||
|
overflow: hidden
|
||||||
|
transition: max-height 0.2s ease-out
|
||||||
|
margin: 0px
|
||||||
|
padding: 0px
|
||||||
|
|
||||||
|
// Minimize swimlanes end https://www.w3schools.com/howto/howto_js_accordion.asp
|
||||||
|
|
||||||
.swimlane
|
.swimlane
|
||||||
// Even if this background color is the same as the body we can't leave it
|
// Even if this background color is the same as the body we can't leave it
|
||||||
// transparent, because that won't work during a swimlane drag.
|
// transparent, because that won't work during a swimlane drag.
|
||||||
|
|
@ -25,22 +59,22 @@
|
||||||
cursor: grabbing
|
cursor: grabbing
|
||||||
|
|
||||||
.swimlane-header-wrap
|
.swimlane-header-wrap
|
||||||
display: flex;
|
display: flex
|
||||||
flex-direction: row;
|
flex-direction: row
|
||||||
flex: 1 0 100%;
|
flex: 1 0 100%
|
||||||
background-color: #ccc;
|
background-color: #ccc
|
||||||
|
|
||||||
.swimlane-header
|
.swimlane-header
|
||||||
font-size: 14px;
|
font-size: 14px
|
||||||
padding: 5px 5px
|
padding: 5px 5px
|
||||||
font-weight: bold;
|
font-weight: bold
|
||||||
min-height: 9px;
|
min-height: 9px
|
||||||
width: 100%;
|
width: 100%
|
||||||
overflow: hidden;
|
overflow: hidden
|
||||||
-o-text-overflow: ellipsis;
|
-o-text-overflow: ellipsis
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis
|
||||||
word-wrap: break-word;
|
word-wrap: break-word
|
||||||
text-align: center;
|
text-align: center
|
||||||
|
|
||||||
.swimlane-header-menu
|
.swimlane-header-menu
|
||||||
position: absolute
|
position: absolute
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue