summaryrefslogtreecommitdiffstats
path: root/client/components/lists/main.styl
diff options
context:
space:
mode:
authorMaxime Quandalle <maxime@quandalle.com>2015-05-24 12:30:58 +0200
committerMaxime Quandalle <maxime@quandalle.com>2015-05-24 22:11:40 +0200
commit781577db041e0008de22f31bcc1cb11ae96670e0 (patch)
treeb45e220039b81149c463ee060dcc03d79e589a77 /client/components/lists/main.styl
parent40b605f7d897db6eb2697be1748741221378e71c (diff)
downloadwekan-781577db041e0008de22f31bcc1cb11ae96670e0.tar.gz
wekan-781577db041e0008de22f31bcc1cb11ae96670e0.tar.bz2
wekan-781577db041e0008de22f31bcc1cb11ae96670e0.zip
Experiment new ergonomics to interact with card details
The idea is that by displaying card details in a sidebar stuck on the right of the screen, the mouse had to travel too much before interacting with it. I also don’t want to use the Trello solution (modal) on big screens, because I like the ability to interact with the selected card and with the board at the same time (like in a e-mail client). The solution introduced in this commit consist of opening the card detail in a column next to the minicard list. This commit also fix right sidebar members and labels drag and drop.
Diffstat (limited to 'client/components/lists/main.styl')
-rw-r--r--client/components/lists/main.styl12
1 files changed, 3 insertions, 9 deletions
diff --git a/client/components/lists/main.styl b/client/components/lists/main.styl
index ce408990..60a6ab98 100644
--- a/client/components/lists/main.styl
+++ b/client/components/lists/main.styl
@@ -10,8 +10,7 @@
// transparent, because that won't work during a list drag.
background: darken(white, 10%)
height: 100%
- border-right: 1px solid darken(white, 17%)
- border-left: 1px solid darken(white, 4%)
+ border-left: 1px solid darken(white, 20%)
padding: 12px 7px 5px
overflow-y: auto
@@ -19,9 +18,8 @@
margin-left: 5px
border-left: none
- &:last-child
- margin-right: 5px
- border-right: none
+ .card-detail + &
+ border-left: none
&.editable
cursor: grab
@@ -87,9 +85,6 @@
margin: 0
.minicards
- // flex: 1 1 auto
- overflow-y: auto
- overflow-x: hidden
padding: 4px 4px 1px
z-index: 1
height: 100%
@@ -105,7 +100,6 @@
padding: 7px 10px
position: relative
text-decoration: none
- animation: fadeIn 0.2s
i.fa
margin-right: 7px