Andreas/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2025-12-16 15:30:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Experiment new ergonomics to interact with card details

Browse source 
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.
This commit is contained in:
Maxime Quandalle 2015-05-24 12:30:58 +02:00
parent 40b605f7d8
commit 781577db04
22 changed files with 225 additions and 203 deletions
Download patch file Download diff file Expand all files Collapse all files

78
client/components/cards/details.styl
View file

@ -1,45 +1,57 @@
@import 'nib'
.card-sidebar.sidebar
width: 496px
top: -46px
.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.sidebar-content
padding: 0 20px
z-index: 20 !important
// XXX Animate apparition
.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
.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
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-title
font-weight: bold
font-size: 1.7em
margin: 3px 0 0
padding: 0
.card-detail-list
font-size: 0.85em
margin-bottom: 3px
.card-detail-list
font-size: 0.85em
margin-bottom: 3px
a.card-detail-list-title
font-weight: bold
a.card-detail-list-title
font-weight: bold
&.is-editable
display: inline-block
background: darken(white, 10%)
border-radius: 3px
padding: 0px 5px
&.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