diff options
author | Maxime Quandalle <maxime@quandalle.com> | 2015-05-24 12:30:58 +0200 |
---|---|---|
committer | Maxime Quandalle <maxime@quandalle.com> | 2015-05-24 22:11:40 +0200 |
commit | 781577db041e0008de22f31bcc1cb11ae96670e0 (patch) | |
tree | b45e220039b81149c463ee060dcc03d79e589a77 /client/components/cards/details.styl | |
parent | 40b605f7d897db6eb2697be1748741221378e71c (diff) | |
download | wekan-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/cards/details.styl')
-rw-r--r-- | client/components/cards/details.styl | 92 |
1 files changed, 52 insertions, 40 deletions
diff --git a/client/components/cards/details.styl b/client/components/cards/details.styl index 106a9cfd..68a436f9 100644 --- a/client/components/cards/details.styl +++ b/client/components/cards/details.styl @@ -1,45 +1,57 @@ @import 'nib' -.card-sidebar.sidebar - width: 496px - top: -46px - - .card-detail.sidebar-content - padding: 0 20px - z-index: 20 !important - // XXX Animate apparition - - .card-detail-header - margin: 0 -20px 5px - padding 7px 20px 0 - background: #F7F7F7 - border-bottom: 1px solid darken(white, 10%) - min-height: 38px - - i.fa - float: right - font-size: 1.3em - color: darken(white, 35%) - margin-top: 7px - - .card-detail-title - font-weight: bold - font-size: 1.7em - margin: 3px 0 0 - padding: 0 - - .card-detail-list - font-size: 0.85em - margin-bottom: 3px - - a.card-detail-list-title - font-weight: bold - - &.is-editable - display: inline-block - background: darken(white, 10%) - border-radius: 3px - padding: 0px 5px +.card-detail + padding: 0 20px + height: 100% + flex: 0 0 470px + overflow: hidden + background: white + border-radius: 3px + z-index: 20 !important + animation: growIn 0.2s + box-shadow: 0 0 7px 0 darken(white, 30%) + transition: flex 0.2s, padding 0.2s + + .card-detail-canvas + width: 470px + + .card-detail-header + margin: 0 -20px 5px + padding 7px 20px 0 + background: #F7F7F7 + border-bottom: 1px solid darken(white, 10%) + min-height: 38px + + i.fa + float: right + font-size: 1.3em + color: darken(white, 35%) + margin-top: 7px + + .card-detail-title + font-weight: bold + font-size: 1.7em + margin: 3px 0 0 + padding: 0 + + .card-detail-list + font-size: 0.85em + margin-bottom: 3px + + a.card-detail-list-title + font-weight: bold + + &.is-editable + display: inline-block + background: darken(white, 10%) + border-radius: 3px + padding: 0px 5px + +@keyframes growIn + from + flex: 0 0 0 + to + flex: 0 0 470px .new-comment position: relative |