summaryrefslogtreecommitdiffstats
path: root/client/components/cards
diff options
context:
space:
mode:
Diffstat (limited to 'client/components/cards')
-rw-r--r--client/components/cards/attachments.jade3
-rw-r--r--client/components/cards/attachments.styl10
-rw-r--r--client/components/cards/cardDate.jade20
-rw-r--r--client/components/cards/cardDate.js228
-rw-r--r--client/components/cards/cardDate.styl58
-rw-r--r--client/components/cards/cardDetails.jade17
-rw-r--r--client/components/cards/cardDetails.js9
-rw-r--r--client/components/cards/cardDetails.styl7
-rw-r--r--client/components/cards/checklists.jade61
-rw-r--r--client/components/cards/checklists.js89
-rw-r--r--client/components/cards/checklists.styl68
-rw-r--r--client/components/cards/labels.js4
-rw-r--r--client/components/cards/minicard.jade16
-rw-r--r--client/components/cards/minicard.styl28
14 files changed, 598 insertions, 20 deletions
diff --git a/client/components/cards/attachments.jade b/client/components/cards/attachments.jade
index 2cb3bb85..da728114 100644
--- a/client/components/cards/attachments.jade
+++ b/client/components/cards/attachments.jade
@@ -49,4 +49,5 @@ template(name="attachmentsGalery")
| {{_ 'delete'}}
if currentUser.isBoardMember
- a.attachment-item.add-attachment.js-add-attachment {{_ 'add-attachment' }}
+ li.attachment-item.add-attachment
+ a.js-add-attachment {{_ 'add-attachment' }}
diff --git a/client/components/cards/attachments.styl b/client/components/cards/attachments.styl
index f322ebc8..9a5d0645 100644
--- a/client/components/cards/attachments.styl
+++ b/client/components/cards/attachments.styl
@@ -20,6 +20,10 @@
display: flex
align-items: center
+ a
+ display: block
+ margin: auto
+
.attachment-thumbnail
height: 80px
display: flex
@@ -28,8 +32,8 @@
position: relative
.attachment-thumbnail-img
- height: 100%
- width: 100%
+ max-height: 100%
+ max-width: 100%
.attachment-thumbnail-ext
text-transform: uppercase
@@ -39,7 +43,7 @@
font-size: 0.75em
margin: 3px
- .attachment-details-actions
+ .attachment-details-actions a
display: block
.attachment-image-preview
diff --git a/client/components/cards/cardDate.jade b/client/components/cards/cardDate.jade
new file mode 100644
index 00000000..a2a28bbd
--- /dev/null
+++ b/client/components/cards/cardDate.jade
@@ -0,0 +1,20 @@
+template(name="editCardDate")
+ .edit-card-date
+ form.edit-date
+ .fields
+ .left
+ label(for="date") {{_ 'date'}}
+ input.js-date-field#date(type="text" name="date" value=showDate placeholder=dateFormat autofocus)
+ .right
+ label(for="time") {{_ 'time'}}
+ input.js-time-field#time(type="text" name="time" value=showTime placeholder=timeFormat)
+ .js-datepicker
+ if error.get
+ .warning {{_ error.get}}
+ button.primary.wide.left.js-submit-date(type="submit") {{_ 'save'}}
+ button.js-delete-date.negate.wide.right.js-delete-date {{_ 'delete'}}
+
+template(name="dateBadge")
+ a.js-edit-date.card-date(title="{{showTitle}}" class="{{classes}}")
+ time(datetime="{{showISODate}}")
+ | {{showDate}}
diff --git a/client/components/cards/cardDate.js b/client/components/cards/cardDate.js
new file mode 100644
index 00000000..4d129e8e
--- /dev/null
+++ b/client/components/cards/cardDate.js
@@ -0,0 +1,228 @@
+// Edit start & due dates
+const EditCardDate = BlazeComponent.extendComponent({
+ template() {
+ return 'editCardDate';
+ },
+
+ onCreated() {
+ this.error = new ReactiveVar('');
+ this.card = this.data();
+ this.date = new ReactiveVar(moment.invalid());
+ },
+
+ onRendered() {
+ const $picker = this.$('.js-datepicker').datepicker({
+ todayHighlight: true,
+ todayBtn: 'linked',
+ language: TAPi18n.getLanguage(),
+ }).on('changeDate', function(evt) {
+ this.find('#date').value = moment(evt.date).format('L');
+ this.error.set('');
+ this.find('#time').focus();
+ }.bind(this));
+
+ if (this.date.get().isValid()) {
+ $picker.datepicker('update', this.date.get().toDate());
+ }
+ },
+
+ showDate() {
+ if (this.date.get().isValid())
+ return this.date.get().format('L');
+ return '';
+ },
+ showTime() {
+ if (this.date.get().isValid())
+ return this.date.get().format('LT');
+ return '';
+ },
+ dateFormat() {
+ return moment.localeData().longDateFormat('L');
+ },
+ timeFormat() {
+ return moment.localeData().longDateFormat('LT');
+ },
+
+ events() {
+ return [{
+ 'keyup .js-date-field'() {
+ // parse for localized date format in strict mode
+ const dateMoment = moment(this.find('#date').value, 'L', true);
+ if (dateMoment.isValid()) {
+ this.error.set('');
+ this.$('.js-datepicker').datepicker('update', dateMoment.toDate());
+ }
+ },
+ 'keyup .js-time-field'() {
+ // parse for localized time format in strict mode
+ const dateMoment = moment(this.find('#time').value, 'LT', true);
+ if (dateMoment.isValid()) {
+ this.error.set('');
+ }
+ },
+ 'submit .edit-date'(evt) {
+ evt.preventDefault();
+
+ // if no time was given, init with 12:00
+ const time = evt.target.time.value || moment(new Date().setHours(12, 0, 0)).format('LT');
+
+ const dateString = `${evt.target.date.value} ${time}`;
+ const newDate = moment(dateString, 'L LT', true);
+ if (newDate.isValid()) {
+ this._storeDate(newDate.toDate());
+ Popup.close();
+ }
+ else {
+ this.error.set('invalid-date');
+ evt.target.date.focus();
+ }
+ },
+ 'click .js-delete-date'(evt) {
+ evt.preventDefault();
+ this._deleteDate();
+ Popup.close();
+ },
+ }];
+ },
+});
+
+// editCardStartDatePopup
+(class extends EditCardDate {
+ onCreated() {
+ super.onCreated();
+ this.data().startAt && this.date.set(moment(this.data().startAt));
+ }
+
+ _storeDate(date) {
+ this.card.setStart(date);
+ }
+
+ _deleteDate() {
+ this.card.unsetStart();
+ }
+}).register('editCardStartDatePopup');
+
+// editCardDueDatePopup
+(class extends EditCardDate {
+ onCreated() {
+ super.onCreated();
+ this.data().dueAt && this.date.set(moment(this.data().dueAt));
+ }
+
+ onRendered() {
+ super.onRendered();
+ if (moment.isDate(this.card.startAt)) {
+ this.$('.js-datepicker').datepicker('setStartDate', this.card.startAt);
+ }
+ }
+
+ _storeDate(date) {
+ this.card.setDue(date);
+ }
+
+ _deleteDate() {
+ this.card.unsetDue();
+ }
+}).register('editCardDueDatePopup');
+
+
+// Display start & due dates
+const CardDate = BlazeComponent.extendComponent({
+ template() {
+ return 'dateBadge';
+ },
+
+ onCreated() {
+ const self = this;
+ self.date = ReactiveVar();
+ self.now = ReactiveVar(moment());
+ window.setInterval(() => {
+ self.now.set(moment());
+ }, 60000);
+ },
+
+ showDate() {
+ // this will start working once mquandalle:moment
+ // is updated to at least moment.js 2.10.5
+ // until then, the date is displayed in the "L" format
+ return this.date.get().calendar(null, {
+ sameElse: 'llll',
+ });
+ },
+
+ showISODate() {
+ return this.date.get().toISOString();
+ },
+});
+
+class CardStartDate extends CardDate {
+ onCreated() {
+ super.onCreated();
+ const self = this;
+ self.autorun(() => {
+ self.date.set(moment(self.data().startAt));
+ });
+ }
+
+ classes() {
+ if (this.date.get().isBefore(this.now.get(), 'minute') &&
+ this.now.get().isBefore(this.data().dueAt)) {
+ return 'current';
+ }
+ return '';
+ }
+
+ showTitle() {
+ return `${TAPi18n.__('card-start-on')} ${this.date.get().format('LLLL')}`;
+ }
+
+ events() {
+ return super.events().concat({
+ 'click .js-edit-date': Popup.open('editCardStartDate'),
+ });
+ }
+}
+CardStartDate.register('cardStartDate');
+
+class CardDueDate extends CardDate {
+ onCreated() {
+ super.onCreated();
+ const self = this;
+ self.autorun(() => {
+ self.date.set(moment(self.data().dueAt));
+ });
+ }
+
+ classes() {
+ if (this.now.get().diff(this.date.get(), 'days') >= 2)
+ return 'long-overdue';
+ else if (this.now.get().diff(this.date.get(), 'minute') >= 0)
+ return 'due';
+ else if (this.now.get().diff(this.date.get(), 'days') >= -1)
+ return 'almost-due';
+ return '';
+ }
+
+ showTitle() {
+ return `${TAPi18n.__('card-due-on')} ${this.date.get().format('LLLL')}`;
+ }
+
+ events() {
+ return super.events().concat({
+ 'click .js-edit-date': Popup.open('editCardDueDate'),
+ });
+ }
+}
+CardDueDate.register('cardDueDate');
+
+(class extends CardStartDate {
+ showDate() {
+ return this.date.get().format('l');
+ }
+}).register('minicardStartDate');
+
+(class extends CardDueDate {
+ showDate() {
+ return this.date.get().format('l');
+ }
+}).register('minicardDueDate');
diff --git a/client/components/cards/cardDate.styl b/client/components/cards/cardDate.styl
new file mode 100644
index 00000000..1631baa5
--- /dev/null
+++ b/client/components/cards/cardDate.styl
@@ -0,0 +1,58 @@
+.edit-card-date
+ .fields
+ .left
+ width: 56%
+ .right
+ width: 38%
+ .datepicker
+ width: 100%
+ table
+ width: 100%
+ border: none
+ border-spacing: 0
+ border-collapse: collapse
+ thead
+ background: none
+ td, th
+ box-sizing: border-box
+
+
+.card-date
+ display: block
+ border-radius: 4px
+ padding: 1px 3px
+
+ background-color: #dbdbdb
+ &:hover, &.is-active
+ background-color: #b3b3b3
+
+ &.current, &.almost-due, &.due, &.long-overdue
+ color: #fff
+
+ &.current
+ background-color: #5ba639
+ &:hover, &.is-active
+ background-color: darken(#5ba639, 10)
+
+ &.almost-due
+ background-color: #edc909
+ &:hover, &.is-active
+ background-color: darken(#edc909, 10)
+
+ &.due
+ background-color: #fa3f00
+ &:hover, &.is-active
+ background-color: darken(#fa3f00, 10)
+
+ &.long-overdue
+ background-color: #fd5d47
+ &:hover, &.is-active
+ background-color: darken(#fd5d47, 7)
+
+ time
+ &::before
+ font: normal normal normal 14px/1 FontAwesome
+ font-size: inherit
+ -webkit-font-smoothing: antialiased
+ content: "\f017" // clock symbol
+ margin-right: 0.3em \ No newline at end of file
diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade
index 734fc7e3..cf113951 100644
--- a/client/components/cards/cardDetails.jade
+++ b/client/components/cards/cardDetails.jade
@@ -35,6 +35,17 @@ template(name="cardDetails")
a.card-label.add-label.js-add-labels(title="{{_ 'card-labels-title'}}")
i.fa.fa-plus
+ if startAt
+ .card-details-item.card-details-item-start
+ h3.card-details-item-title {{_ 'card-start'}}
+ +cardStartDate
+
+ if dueAt
+ .card-details-item.card-details-item-due
+ h3.card-details-item-title {{_ 'card-due'}}
+ +cardDueDate
+
+
//- XXX We should use "editable" to avoid repetiting ourselves
if currentUser.isBoardMember
h3.card-details-item-title {{_ 'description'}}
@@ -61,6 +72,10 @@ template(name="cardDetails")
h3.card-details-item-title {{_ 'description'}}
+viewer
= description
+
+ hr
+ +checklists(cardId = _id)
+
if attachments.count
hr
h2
@@ -91,6 +106,8 @@ template(name="cardDetailsActionsPopup")
li: a.js-members {{_ 'card-edit-members'}}
li: a.js-labels {{_ 'card-edit-labels'}}
li: a.js-attachments {{_ 'card-edit-attachments'}}
+ li: a.js-start-date {{_ 'editCardStartDatePopup-title'}}
+ li: a.js-due-date {{_ 'editCardDueDatePopup-title'}}
hr
ul.pop-over-list
li: a.js-move-card-to-top {{_ 'moveCardToTop-title'}}
diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js
index 299bbf34..b7e0ef76 100644
--- a/client/components/cards/cardDetails.js
+++ b/client/components/cards/cardDetails.js
@@ -62,6 +62,9 @@ BlazeComponent.extendComponent({
events() {
const events = {
+ [`${CSSEvents.transitionend} .js-card-details`]() {
+ this.isLoaded.set(true);
+ },
[`${CSSEvents.animationend} .js-card-details`]() {
this.isLoaded.set(true);
},
@@ -143,16 +146,18 @@ Template.cardDetailsActionsPopup.events({
'click .js-members': Popup.open('cardMembers'),
'click .js-labels': Popup.open('cardLabels'),
'click .js-attachments': Popup.open('cardAttachments'),
+ 'click .js-start-date': Popup.open('editCardStartDate'),
+ 'click .js-due-date': Popup.open('editCardDueDate'),
'click .js-move-card': Popup.open('moveCard'),
'click .js-move-card-to-top'(evt) {
evt.preventDefault();
const minOrder = _.min(this.list().cards().map((c) => c.sort));
- this.move(this.listId, minOrder / 2);
+ this.move(this.listId, minOrder - 1);
},
'click .js-move-card-to-bottom'(evt) {
evt.preventDefault();
const maxOrder = _.max(this.list().cards().map((c) => c.sort));
- this.move(this.listId, Math.floor(maxOrder) + 1);
+ this.move(this.listId, maxOrder + 1);
},
'click .js-archive'(evt) {
evt.preventDefault();
diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl
index d7d29551..f209862c 100644
--- a/client/components/cards/cardDetails.styl
+++ b/client/components/cards/cardDetails.styl
@@ -73,8 +73,13 @@
margin: 15px 0
.card-details-item
+ margin-right: 0.5em
+ &:last-child
+ margin-right: 0
&.card-details-item-labels,
- &.card-details-item-members
+ &.card-details-item-members,
+ &.card-details-item-start,
+ &.card-details-item-due
width: 50%
flex-shrink: 1
diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade
new file mode 100644
index 00000000..987e6cd9
--- /dev/null
+++ b/client/components/cards/checklists.jade
@@ -0,0 +1,61 @@
+template(name="checklists")
+ h2 {{_ 'checklists'}}
+ .card-checklist-items
+ each checklist in currentCard.checklists
+ +checklistDetail(checklist = checklist)
+ +inlinedForm(classNames="js-add-checklist" cardId = cardId)
+ +addChecklistItemForm
+ else
+ a.js-open-inlined-form
+ i.fa.fa-plus
+ | {{_ 'add-checklist'}}...
+
+template(name="checklistDetail")
+ +inlinedForm(classNames="js-edit-checklist-title" checklist = checklist)
+ +editChecklistItemForm(checklist = checklist)
+ else
+ .checklist-title
+ .checkbox.fa.fa-check-square-o
+ a.js-delete-checklist {{_ "delete"}}...
+ span.checklist-stat(class="{{#if checklist.isFinished}}is-finished{{/if}}") {{checklist.finishedCount}}/{{checklist.itemCount}}
+ h2.title.js-open-inlined-form.is-editable {{checklist.title}}
+ +checklistItems(checklist = checklist)
+
+template(name="addChecklistItemForm")
+ textarea.js-add-checklist-item(rows='1' autofocus)
+ .edit-controls.clearfix
+ button.primary.confirm.js-submit-add-checklist-item-form(type="submit") {{_ 'save'}}
+ a.fa.fa-times-thin.js-close-inlined-form
+
+template(name="editChecklistItemForm")
+ textarea.js-edit-checklist-item(rows='1' autofocus)
+ if $eq type 'item'
+ = item.title
+ else
+ = checklist.title
+ .edit-controls.clearfix
+ button.primary.confirm.js-submit-edit-checklist-item-form(type="submit") {{_ 'save'}}
+ a.fa.fa-times-thin.js-close-inlined-form
+ span(title=createdAt) {{ moment createdAt }}
+ if currentUser.isBoardMember
+ a.js-delete-checklist-item {{_ "delete"}}...
+
+template(name="checklistItems")
+ .checklist-items
+ each item in checklist.items
+ +inlinedForm(classNames="js-edit-checklist-item" item = item checklist = checklist)
+ +editChecklistItemForm(type = 'item' item = item checklist = checklist)
+ else
+ +itemDetail(item = item checklist = checklist)
+ if currentUser.isBoardMember
+ +inlinedForm(classNames="js-add-checklist-item" checklist = checklist)
+ +addChecklistItemForm
+ else
+ a.add-checklist-item.js-open-inlined-form
+ i.fa.fa-plus
+ | {{_ 'add-checklist-item'}}...
+
+template(name='itemDetail')
+ .item
+ .check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
+ .item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}") {{item.title}}
diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js
new file mode 100644
index 00000000..5dac7bd3
--- /dev/null
+++ b/client/components/cards/checklists.js
@@ -0,0 +1,89 @@
+BlazeComponent.extendComponent({
+ addChecklist(event) {
+ event.preventDefault();
+ const textarea = this.find('textarea.js-add-checklist-item');
+ const title = textarea.value.trim();
+ const cardId = this.currentData().cardId;
+ Checklists.insert({
+ cardId,
+ title,
+ });
+ },
+
+ addChecklistItem(event) {
+ event.preventDefault();
+ const textarea = this.find('textarea.js-add-checklist-item');
+ const title = textarea.value.trim();
+ const checklist = this.currentData().checklist;
+ checklist.addItem(title);
+ },
+
+ editChecklist(event) {
+ event.preventDefault();
+ const textarea = this.find('textarea.js-edit-checklist-item');
+ const title = textarea.value.trim();
+ const checklist = this.currentData().checklist;
+ checklist.setTitle(title);
+ },
+
+ editChecklistItem(event) {
+ event.preventDefault();
+
+ const textarea = this.find('textarea.js-edit-checklist-item');
+ const title = textarea.value.trim();
+ const itemId = this.currentData().item._id;
+ const checklist = this.currentData().checklist;
+ checklist.editItem(itemId, title);
+ },
+
+ deleteItem() {
+ const checklist = this.currentData().checklist;
+ const item = this.currentData().item;
+ if (checklist && item && item._id) {
+ checklist.removeItem(item._id);
+ }
+ },
+
+ deleteChecklist() {
+ const checklist = this.currentData().checklist;
+ if (checklist && checklist._id) {
+ Checklists.remove(checklist._id);
+ }
+ },
+
+ pressKey(event) {
+ //If user press enter key inside a form, submit it, so user doesn't have to leave keyboard to submit a form.
+ if (event.keyCode === 13) {
+ event.preventDefault();
+ const $form = $(event.currentTarget).closest('form');
+ $form.find('button[type=submit]').click();
+ }
+ },
+
+ events() {
+ return [{
+ 'submit .js-add-checklist': this.addChecklist,
+ 'submit .js-edit-checklist-title': this.editChecklist,
+ 'submit .js-add-checklist-item': this.addChecklistItem,
+ 'submit .js-edit-checklist-item': this.editChecklistItem,
+ 'click .js-delete-checklist-item': this.deleteItem,
+ 'click .js-delete-checklist': this.deleteChecklist,
+ keydown: this.pressKey,
+ }];
+ },
+}).register('checklists');
+
+BlazeComponent.extendComponent({
+ toggleItem() {
+ const checklist = this.currentData().checklist;
+ const item = this.currentData().item;
+ if (checklist && item && item._id) {
+ checklist.toggleItem(item._id);
+ }
+ },
+ events() {
+ return [{
+ 'click .item .check-box': this.toggleItem,
+ }];
+ },
+}).register('itemDetail');
diff --git a/client/components/cards/checklists.styl b/client/components/cards/checklists.styl
new file mode 100644
index 00000000..885d7528
--- /dev/null
+++ b/client/components/cards/checklists.styl
@@ -0,0 +1,68 @@
+.js-add-checklist
+ color: #8c8c8c
+
+textarea.js-add-checklist-item, textarea.js-edit-checklist-item
+ overflow: hidden
+ word-wrap: break-word
+ resize: none
+ height: 34px
+
+.delete-text
+ color: #8c8c8c
+ text-decoration: underline
+ word-wrap: break-word
+ float: right
+ padding-top: 6px
+ &:hover
+ color: inherit
+
+.checklist-title
+ .checkbox
+ float: left
+ width: 30px
+ height 30px
+ font-size: 18px
+ line-height: 30px
+
+ .title
+ font-size: 18px
+ line-height: 30px
+
+ .checklist-stat
+ margin: 0 0.5em
+ float: right
+ padding-top: 6px
+ &.is-finished
+ color: #3cb500
+
+ .js-delete-checklist
+ @extends .delete-text
+
+.checklist-items
+ margin: 0 0 0.5em 1.33em
+
+ .item
+ line-height: 25px
+ font-size: 1.1em
+ margin-top: 3px
+ display: flex
+
+ .check-box
+ margin-top: 5px
+ &.is-checked
+ border-bottom: 2px solid #3cb500
+ border-right: 2px solid #3cb500
+
+ .item-title
+ padding-left: 10px;
+ &.is-checked
+ color: #8c8c8c
+ font-style: italic
+
+ .js-delete-checklist-item
+ @extends .delete-text
+ padding: 12px 0 0 0
+
+ .add-checklist-item
+ padding-top: 0.5em
+ display: inline-block
diff --git a/client/components/cards/labels.js b/client/components/cards/labels.js
index 20d95bc6..cdd5a700 100644
--- a/client/components/cards/labels.js
+++ b/client/components/cards/labels.js
@@ -9,9 +9,7 @@ BlazeComponent.extendComponent({
},
labels() {
- return labelColors.map((color) => {
- return { color, name: '' };
- });
+ return labelColors.map((color) => ({ color, name: '' }));
},
isSelected(color) {
diff --git a/client/components/cards/minicard.jade b/client/components/cards/minicard.jade
index 573b3da1..8b46ee74 100644
--- a/client/components/cards/minicard.jade
+++ b/client/components/cards/minicard.jade
@@ -1,8 +1,7 @@
template(name="minicard")
.minicard
if cover
- .minicard-cover
- img(src="{{pathFor cover.url}}")
+ .minicard-cover(style="background-image: url('{{pathFor cover.url}}');")
if labels
.minicard-labels
each labels
@@ -15,7 +14,7 @@ template(name="minicard")
.badges
if comments.count
.badge(title="{{_ 'card-comments-title' comments.count }}")
- span.badge-icon.fa.fa-comment-o
+ span.badge-icon.fa.fa-comment-o.badge-comment
span.badge-text= comments.count
if description
.badge.badge-state-image-only(title=description)
@@ -24,3 +23,14 @@ template(name="minicard")
.badge
span.badge-icon.fa.fa-paperclip
span.badge-text= attachments.count
+ if startAt
+ .badge
+ +minicardStartDate
+ if dueAt
+ .badge
+ +minicardDueDate
+ if checklists.count
+ .badge(class="{{#if checklistFinished}}is-finished{{/if}}")
+ span.badge-icon.fa.fa-check-square-o
+ span.badge-text.check-list-text {{checklistFinishedCount}}/{{checklistItemCount}}
+
diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl
index 3b8c8a9a..12a89785 100644
--- a/client/components/cards/minicard.styl
+++ b/client/components/cards/minicard.styl
@@ -62,16 +62,11 @@
.minicard-cover
background-position: center
background-repeat: no-repeat
- background-size: cover
+ background-size: contain
height: 145px
user-select: none
margin: -6px -8px 6px -8px
border-radius: top 2px
- position: relative
-
- img
- height: 100%
- width: 100%
.minicard-labels
float: right
@@ -96,15 +91,34 @@
margin-right: 11px
margin-bottom: 3px
font-size: 0.9em
+
+ &:last-of-type
+ margin-right: 0
.badge-icon,
.badge-text
- vertical-align: top
+ vertical-align: middle
+
+ &.is-finished
+ background: #3cb500
+ padding: 0px 3px
+ border-radius: 3px
+ color: white
+
+ .badge-icon,
+ .badge-text
+ vertical-align: middle//didn't figure why use top, it'd be easier to fill bg if it's middle. This was introduced in commit "91cfcf7b12b5e7c137c2e765b2c378dde6b82966" & "* Improve the design of the minicards badges" was mentioned.
+ &.badge-comment
+ margin-bottom: 0.1rem
.badge-text
font-size: 0.9em
padding-left: 2px
line-height: 14px
+ .check-list-text
+ padding-left: 0px
+ line-height: 12px
+
.minicard-members
float: right
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-10-03 08:03:50 +0000