mirror of
https://github.com/wekan/wekan.git
synced 2026-01-22 01:06:09 +01:00
a2e6f621a2
Since7cc185ac"Properly fix horizontal rendering on Chrome and Firefox" The rendering of the new design of the swimlanes was correct, but this commit broke the reordering capability. Having the swimlane header at the same level than the lists of cards makes the whole sortable pattern fail. 2 solutions: - revert to only have 1 div per swimlane. But this introduces the firefox bug mentioned in7cc185ac, so not ideal - force the sortable pattern to do what we want. To force the sortable pattern, we need: - add in the helper a clone of the list of cards (to not just move the header) - make sure the placeholder never get placed between the header and the list of cards in a swimlane - fix the finding of the next and previous list of cards. For all of this to be successful, we need to resize the swimlanes to a known value. This can lead to some visual jumps with scrolling when you drag or drop the swimlanea. I tried to remedy that by computing the new scroll value. Still not ideal however, as there are still some jumps when dropping. Fixes #2159
138 lines
3.5 KiB
Stylus
138 lines
3.5 KiB
Stylus
@import 'nib'
|
|
|
|
.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.
|
|
background: darken(white, 13%)
|
|
display: flex
|
|
flex-direction: row
|
|
overflow: 0;
|
|
max-height: calc(100% - 26px)
|
|
|
|
&.placeholder
|
|
background-color: rgba(0, 0, 0, .2)
|
|
border-color: transparent
|
|
box-shadow: none
|
|
height: 100px
|
|
|
|
&.ui-sortable-helper
|
|
box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
|
|
0 0 1px rgba(0, 0, 0, .5)
|
|
transform: rotate(2deg)
|
|
cursor: grabbing
|
|
|
|
.swimlane-header.ui-sortable-handle
|
|
cursor: grabbing
|
|
|
|
.swimlane-header-wrap
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex: 1 0 100%;
|
|
background-color: #ccc;
|
|
|
|
.swimlane-header
|
|
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;
|
|
|
|
.swimlane-header-menu
|
|
position: absolute
|
|
padding: 5px 5px
|
|
|
|
.swimlane-header-plus-icon
|
|
margin-left: 5px
|
|
margin-right: 10px
|
|
|
|
.list-group
|
|
height: 100%
|
|
|
|
.moving-swimlane
|
|
display: none
|
|
|
|
swimlane-color(background, color...)
|
|
background: background !important
|
|
if color
|
|
color: color !important //overwrite text for better visibility
|
|
|
|
.swimlane-white
|
|
swimlane-color(#ffffff, #4d4d4d) //Black text for better visibility
|
|
border: 1px solid #eee
|
|
|
|
.swimlane-green
|
|
swimlane-color(#3cb500, #ffffff) //White text for better visibility
|
|
|
|
.swimlane-yellow
|
|
swimlane-color(#fad900, #4d4d4d) //Black text for better visibility
|
|
|
|
.swimlane-orange
|
|
swimlane-color(#ff9f19, #4d4d4d) //Black text for better visibility
|
|
|
|
.swimlane-red
|
|
swimlane-color(#eb4646, #ffffff) //White text for better visibility
|
|
|
|
.swimlane-purple
|
|
swimlane-color(#a632db, #ffffff) //White text for better visibility
|
|
|
|
.swimlane-blue
|
|
swimlane-color(#0079bf, #ffffff) //White text for better visibility
|
|
|
|
.swimlane-pink
|
|
swimlane-color(#ff78cb, #4d4d4d) //Black text for better visibility
|
|
|
|
.swimlane-sky
|
|
swimlane-color(#00c2e0, #ffffff) //White text for better visibility
|
|
|
|
.swimlane-black
|
|
swimlane-color(#4d4d4d, #ffffff) //White text for better visibility
|
|
|
|
.swimlane-lime
|
|
swimlane-color(#51e898, #4d4d4d) //Black text for better visibility
|
|
|
|
.swimlane-silver
|
|
swimlane-color(unset, #4d4d4d) //Black text for better visibility
|
|
|
|
.swimlane-peachpuff
|
|
swimlane-color(#ffdab9, #4d4d4d) //Black text for better visibility
|
|
|
|
.swimlane-crimson
|
|
swimlane-color(#dc143c, #ffffff) //White text for better visibility
|
|
|
|
.swimlane-plum
|
|
swimlane-color(#dda0dd, #4d4d4d) //Black text for better visibility
|
|
|
|
.swimlane-darkgreen
|
|
swimlane-color(#006400, #ffffff) //White text for better visibility
|
|
|
|
.swimlane-slateblue
|
|
swimlane-color(#6a5acd, #ffffff) //White text for better visibility
|
|
|
|
.swimlane-magenta
|
|
swimlane-color(#ff00ff, #ffffff) //White text for better visibility
|
|
|
|
.swimlane-gold
|
|
swimlane-color(#ffd700, #4d4d4d) //Black text for better visibility
|
|
|
|
.swimlane-navy
|
|
swimlane-color(#000080, #ffffff) //White text for better visibility
|
|
|
|
.swimlane-gray
|
|
swimlane-color(#808080, #ffffff) //White text for better visibility
|
|
|
|
.swimlane-saddlebrown
|
|
swimlane-color(#8b4513, #ffffff) //White text for better visibility
|
|
|
|
.swimlane-paleturquoise
|
|
swimlane-color(#afeeee, #4d4d4d) //Black text for better visibility
|
|
|
|
.swimlane-mistyrose
|
|
swimlane-color(#ffe4e1, #4d4d4d) //Black text for better visibility
|
|
|
|
.swimlane-indigo
|
|
swimlane-color(#4b0082, #ffffff) //White text for better visibility
|