diff options
| author | Maxime Quandalle <maxime@quandalle.com> | 2015-05-24 21:40:21 +0200 |
|---|---|---|
| committer | Maxime Quandalle <maxime@quandalle.com> | 2015-05-24 22:16:40 +0200 |
| commit | 9a45f3752fe7c8499960b4fb6d185f9f5f8afbda (patch) | |
| tree | f8b726271a7055d84e223704a560a4b937db16eb /client/components/cards | |
| parent | 781577db041e0008de22f31bcc1cb11ae96670e0 (diff) | |
| download | wekan-9a45f3752fe7c8499960b4fb6d185f9f5f8afbda.tar.gz wekan-9a45f3752fe7c8499960b4fb6d185f9f5f8afbda.tar.bz2 wekan-9a45f3752fe7c8499960b4fb6d185f9f5f8afbda.zip | |
Improve scrolling
We now replace native scrollbar by custom ones on the list card (which
is required by the new ergonomics in the parent commit), but the
"scrolling engine", is still native, we just hide the scrollbar and
draw our own in HTML/CSS using the perfect-scrollbar package (from
bower).
This commit also implements component scrolling when certain actions
are performed, eg scroll to the bottom when the new card composer is
opened.
Diffstat (limited to 'client/components/cards')
| -rw-r--r-- | client/components/cards/details.js | 8 | ||||
| -rw-r--r-- | client/components/cards/minicard.styl | 14 |
2 files changed, 16 insertions, 6 deletions
diff --git a/client/components/cards/details.js b/client/components/cards/details.js index d0395129..385310bb 100644 --- a/client/components/cards/details.js +++ b/client/components/cards/details.js @@ -17,6 +17,14 @@ BlazeComponent.extendComponent({ activitiesComponent.loadNextPage(); }, + onRendered: function() { + var bodyBoardComponent = this.componentParent(); + var additionalMargin = 550; + var $cardDetails = this.$(this.firstNode()); + var scollLeft = $cardDetails.offset().left + additionalMargin; + bodyBoardComponent.scrollLeft(scollLeft); + }, + events: function() { return [{ 'click .js-move-card': Popup.open('moveCard'), diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl index 1b9e60b5..775d31eb 100644 --- a/client/components/cards/minicard.styl +++ b/client/components/cards/minicard.styl @@ -8,6 +8,9 @@ position: relative z-index: 0 overflow: hidden + transition: transform 0.2s, + border-radius 0.2s, + border-left 0.2s a color: #4d4d4d @@ -39,19 +42,15 @@ .minicard-details padding: 6px 8px 2px position: relative - z-index: 10 + // z-index: 1 &.is-selected - margin-left: -11px - transform: translateX(- @margin-left) + transform: translateX(11px) border-bottom-right-radius: 0 border-top-right-radius: 0 z-index: 100 box-shadow: -2px 1px 2px rgba(0,0,0,.2) - .minicard-details - margin-right: 11px - a.minicard-details text-decoration:none @@ -122,6 +121,9 @@ .minicard-members:empty display: none + &.ui-sortable-helper + transform: rotate(4deg) + .badges float: left |