diff options
| author | Lauri Ojansivu <x@xet7.org> | 2019-11-17 01:20:26 +0200 |
|---|---|---|
| committer | Lauri Ojansivu <x@xet7.org> | 2019-11-17 01:20:26 +0200 |
| commit | 26e0bbce172f89baa380ddae19b7b495519db40f (patch) | |
| tree | e9d7613160be5eee74b510cef5a471c04e78b06d /client/components/swimlanes/swimlanes.styl | |
| parent | a6366114718f0faf0e1c600374ffdd8745a3d9ff (diff) | |
| download | wekan-26e0bbce172f89baa380ddae19b7b495519db40f.tar.gz wekan-26e0bbce172f89baa380ddae19b7b495519db40f.tar.bz2 wekan-26e0bbce172f89baa380ddae19b7b495519db40f.zip | |
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
Diffstat (limited to 'client/components/swimlanes/swimlanes.styl')
| -rw-r--r-- | client/components/swimlanes/swimlanes.styl | 60 |
1 files changed, 47 insertions, 13 deletions
diff --git a/client/components/swimlanes/swimlanes.styl b/client/components/swimlanes/swimlanes.styl index 164c66d5..9a89bf07 100644 --- a/client/components/swimlanes/swimlanes.styl +++ b/client/components/swimlanes/swimlanes.styl @@ -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 |