summaryrefslogtreecommitdiffstats
path: root/client/components/cards
diff options
context:
space:
mode:
Diffstat (limited to 'client/components/cards')
-rw-r--r--client/components/cards/details.jade87
-rw-r--r--client/components/cards/details.js6
-rw-r--r--client/components/cards/details.styl92
-rw-r--r--client/components/cards/minicard.styl11
-rw-r--r--client/components/cards/router.js15
5 files changed, 106 insertions, 105 deletions
diff --git a/client/components/cards/details.jade b/client/components/cards/details.jade
index 0de59297..55cc4b9e 100644
--- a/client/components/cards/details.jade
+++ b/client/components/cards/details.jade
@@ -1,47 +1,46 @@
-template(name="cardSidebar")
- .card-sidebar.sidebar
- .card-detail.sidebar-content.js-card-sidebar-content
- if cover
- .card-detail-cover(style="background-image: url({{ card.cover.url }})")
- .card-detail-header(class="{{#if currentUser.isBoardMember}}editable{{/if}}")
- a.js-close-card-detail
- i.fa.fa-times
- h2.card-detail-title.js-card-title= title
- p.card-detail-list.js-move-card
- | {{_ 'in-list'}}
- a.card-detail-list-title(
- class="{{#if currentUser.isBoardMember}}js-open-move-from-header is-editable{{/if}}")
- = list.title
- hr
- //- if card.members
- .card-detail-item.card-detail-item-members.clearfix.js-card-detail-members
- h3.card-detail-item-header {{_ 'members'}}
- .js-card-detail-members-list.clearfix
- each members
- +userAvatar(userId=this size="small" cardId=../_id)
- a.card-detail-item-add-button.dark-hover.js-details-edit-members
- i.fa.fa-plus
- //- We should use "editable" to avoide repetiting ourselves
- .clearfix
- if currentUser.isBoardMember
- h3 Description
- +inlinedForm(classNames="js-card-description")
- i.fa.fa-times.js-close-inlined-form
- textarea(autofocus)= description
- button(type="submit") {{_ 'edit'}}
- else
- .js-open-inlined-form
- a {{_ 'edit'}}
- +viewer
- = description
- else if description
- h3 Description
- +viewer
- = description
- hr
- if attachments.count
- +WindowAttachmentsModule(card=this)
- +WindowActivityModule(card=this)
+template(name="cardDetails")
+ .card-detail.js-card-detail: .card-detail-canvas
+ if cover
+ .card-detail-cover(style="background-image: url({{ card.cover.url }})")
+ .card-detail-header(class="{{#if currentUser.isBoardMember}}editable{{/if}}")
+ a.js-close-card-detail
+ i.fa.fa-times
+ h2.card-detail-title.js-card-title= title
+ p.card-detail-list.js-move-card
+ | {{_ 'in-list'}}
+ a.card-detail-list-title(
+ class="{{#if currentUser.isBoardMember}}js-open-move-from-header is-editable{{/if}}")
+ = list.title
+ hr
+ //- if card.members
+ .card-detail-item.card-detail-item-members.clearfix.js-card-detail-members
+ h3.card-detail-item-header {{_ 'members'}}
+ .js-card-detail-members-list.clearfix
+ each members
+ +userAvatar(userId=this size="small" cardId=../_id)
+ a.card-detail-item-add-button.dark-hover.js-details-edit-members
+ i.fa.fa-plus
+ //- We should use "editable" to avoide repetiting ourselves
+ .clearfix
+ if currentUser.isBoardMember
+ h3 Description
+ +inlinedForm(classNames="js-card-description")
+ i.fa.fa-times.js-close-inlined-form
+ textarea(autofocus)= description
+ button(type="submit") {{_ 'edit'}}
+ else
+ .js-open-inlined-form
+ a {{_ 'edit'}}
+ +viewer
+ = description
+ else if description
+ h3 Description
+ +viewer
+ = description
+ hr
+ if attachments.count
+ +WindowAttachmentsModule(card=this)
+ +WindowActivityModule(card=this)
template(name="moveCardPopup")
+boardLists
diff --git a/client/components/cards/details.js b/client/components/cards/details.js
index cb1a3ef3..d0395129 100644
--- a/client/components/cards/details.js
+++ b/client/components/cards/details.js
@@ -1,6 +1,6 @@
BlazeComponent.extendComponent({
template: function() {
- return 'cardSidebar';
+ return 'cardDetails';
},
mixins: function() {
@@ -8,7 +8,7 @@ BlazeComponent.extendComponent({
},
calculateNextPeak: function() {
- var altitude = this.find('.js-card-sidebar-content').scrollHeight;
+ var altitude = this.find('.js-card-detail').scrollHeight;
this.callFirstWith(this, 'setNextPeak', altitude);
},
@@ -86,7 +86,7 @@ BlazeComponent.extendComponent({
'click .js-details-edit-labels': Popup.open('cardLabels')
}];
}
-}).register('cardSidebar');
+}).register('cardDetails');
Template.moveCardPopup.events({
'click .js-select-list': function() {
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
diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl
index a78cd46f..1b9e60b5 100644
--- a/client/components/cards/minicard.styl
+++ b/client/components/cards/minicard.styl
@@ -4,7 +4,6 @@
border-radius: 2px
cursor: pointer
margin-bottom: 9px
- max-width: 300px
min-height: 20px
position: relative
z-index: 0
@@ -42,10 +41,16 @@
position: relative
z-index: 10
-
&.is-selected
+ margin-left: -11px
+ transform: translateX(- @margin-left)
+ 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
- padding-bottom: 0
+ margin-right: 11px
a.minicard-details
text-decoration:none
diff --git a/client/components/cards/router.js b/client/components/cards/router.js
deleted file mode 100644
index 48bb9a95..00000000
--- a/client/components/cards/router.js
+++ /dev/null
@@ -1,15 +0,0 @@
-Router.route('/boards/:boardId/:slug/:cardId', {
- name: 'Card',
- template: 'board',
- waitOn: function() {
- var params = this.params;
- // XXX We probably shouldn't rely on Session
- Session.set('currentBoard', params.boardId);
- Session.set('currentCard', params.cardId);
-
- return BoardSubsManager.subscribe('board', params.boardId, params.slug);
- },
- data: function() {
- return Boards.findOne(this.params.boardId);
- }
-});
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-10-30 13:31:45 +0000