From 26e0bbce172f89baa380ddae19b7b495519db40f Mon Sep 17 00:00:00 2001
From: Lauri Ojansivu <x@xet7.org>
Date: Sun, 17 Nov 2019 01:20:26 +0200
Subject: 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
---
 client/components/swimlanes/swimlanes.styl | 60 +++++++++++++++++++++++-------
 1 file changed, 47 insertions(+), 13 deletions(-)

(limited to 'client/components/swimlanes/swimlanes.styl')

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
-- 
cgit v1.2.3-1-g7c22