mirror of
https://github.com/wekan/wekan.git
synced 2025-12-16 15:30:13 +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")
|
||||
.swimlane
|
||||
+swimlaneHeader
|
||||
.swimlane.js-lists.js-swimlane
|
||||
if isMiniScreen
|
||||
if currentListIsInThisSwimlane _id
|
||||
+list(currentList)
|
||||
unless currentList
|
||||
// Minimize swimlanes next 2 lines below https://www.w3schools.com/howto/howto_js_accordion.asp
|
||||
button(class="accordion")
|
||||
div(class="panel")
|
||||
.swimlane.js-lists.js-swimlane
|
||||
if isMiniScreen
|
||||
if currentListIsInThisSwimlane _id
|
||||
+list(currentList)
|
||||
unless currentList
|
||||
each lists
|
||||
+miniList(this)
|
||||
if currentUser.isBoardMember
|
||||
unless currentUser.isCommentOnly
|
||||
+addListForm
|
||||
else
|
||||
each lists
|
||||
+miniList(this)
|
||||
+list(this)
|
||||
if currentCardIsInThisList _id ../_id
|
||||
+cardDetails(currentCard)
|
||||
if currentUser.isBoardMember
|
||||
unless currentUser.isCommentOnly
|
||||
+addListForm
|
||||
else
|
||||
each lists
|
||||
+list(this)
|
||||
if currentCardIsInThisList _id ../_id
|
||||
+cardDetails(currentCard)
|
||||
if currentUser.isBoardMember
|
||||
unless currentUser.isCommentOnly
|
||||
+addListForm
|
||||
|
||||
template(name="listsGroup")
|
||||
.swimlane.list-group.js-lists
|
||||
|
|
|
|||
|
|
@ -134,6 +134,22 @@ BlazeComponent.extendComponent({
|
|||
}
|
||||
|
||||
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() {
|
||||
this.draggingActive = new ReactiveVar(false);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,39 @@
|
|||
@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
|
||||
// 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.
|
||||
|
|
@ -25,22 +59,22 @@
|
|||
cursor: grabbing
|
||||
|
||||
.swimlane-header-wrap
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1 0 100%;
|
||||
background-color: #ccc;
|
||||
display: flex
|
||||
flex-direction: row
|
||||
flex: 1 0 100%
|
||||
background-color: #ccc
|
||||
|
||||
.swimlane-header
|
||||
font-size: 14px;
|
||||
font-size: 14px
|
||||
padding: 5px 5px
|
||||
font-weight: bold;
|
||||
min-height: 9px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
text-align: center;
|
||||
font-weight: bold
|
||||
min-height: 9px
|
||||
width: 100%
|
||||
overflow: hidden
|
||||
-o-text-overflow: ellipsis
|
||||
text-overflow: ellipsis
|
||||
word-wrap: break-word
|
||||
text-align: center
|
||||
|
||||
.swimlane-header-menu
|
||||
position: absolute
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue