Number of cards per list and sum of custom number field in list head.

Thanks to xet7 !

Fixes #3796

client/components/cards/cardDetails.css

@@ -31,8 +31,8 @@
   display: block;
   position: relative;
   float: left;
-  height: 30px;
-  width: 30px;
+  height: clamp(24px, 3.5vw, 36px);
+  width: clamp(24px, 3.5vw, 36px);
   margin: .3vh;
   cursor: pointer;
   user-select: none;

client/components/cards/cardDetails.jade

@@ -26,10 +26,10 @@ template(name="cardDetails")
               | ☰
             a.card-copy-button.js-copy-link(
               id="cardURL_copy"
-              class="fa-link"
               title="{{_ 'copy-card-link-to-clipboard'}}"
               href="{{ originRelativeUrl }}"
             )
+              | 🔗
             span.copied-tooltip {{_ 'copied'}}
         else
           unless isPopup
@@ -40,10 +40,10 @@ template(name="cardDetails")
               | ☰
             a.card-copy-mobile-button.js-copy-link(
               id="cardURL_copy"
-              class="fa-link"
               title="{{_ 'copy-card-link-to-clipboard'}}"
               href="{{ originRelativeUrl }}"
             )
+              | 🔗
             span.copied-tooltip {{_ 'copied'}}
         h2.card-details-title.js-card-title(
           class="{{#if canModifyCard}}js-open-inlined-form is-editable{{/if}}")
@@ -304,7 +304,7 @@ template(name="cardDetails")
               hr
             .card-details-item.card-details-item-customfield
               h3.card-details-item-title
-                | 📋-alt
+                | 📋
                 = definition.name
               +cardCustomField
 
@@ -678,7 +678,7 @@ template(name="cardDetailsActionsPopup")
           | 👁️
           |  {{_ 'unwatch'}}
         else
-          | 👁️-slash
+          | 👁️
           |  {{_ 'watch'}}
   hr
   if canModifyCard
@@ -698,7 +698,7 @@ template(name="cardDetailsActionsPopup")
         if currentUser.isBoardAdmin
           li
             a.js-custom-fields
-              | 📋-alt
+              | 📋
               | {{_ 'card-edit-custom-fields'}}
         //li: a.js-received-date {{_ 'editCardReceivedDatePopup-title'}}
         //li: a.js-start-date {{_ 'editCardStartDatePopup-title'}}
@@ -718,7 +718,7 @@ template(name="cardDetailsActionsPopup")
               | 👁️
               | {{_ 'hide-list-on-minicard'}}
             else
-              | 👁️-slash
+              | 👁️
               | {{_ 'show-list-on-minicard'}}
   hr
   ul.pop-over-list

client/components/cards/checklists.css

@@ -67,14 +67,14 @@ textarea.js-edit-checklist-item {
 .checklist-title .checklist-stat.is-finished {
   color: #3cb500;
 }
-.checklist-title span.fa.checklist-handle {
+.checklist-title span.checklist-handle {
   padding-right: 20px;
   padding-top: 3px;
   float: left;
-}
-.checklist-title span.fa.checklist-handle.fa-arrows::before {
-  content: "↕️" !important;
-  font-family: inherit !important;
+  display: inline-block;
+  width: 1.2em;
+  text-align: center;
+  color: #999;
 }
 #card-details-overlay {
   top: 0;
@@ -148,13 +148,13 @@ textarea.js-edit-checklist-item {
   word-wrap: break-word;
   max-width: 420px;
 }
-.checklist-item span.fa.checklistitem-handle {
+.checklist-item span.checklistitem-handle {
   padding-top: 2px;
   padding-right: 10px;
-}
-.checklist-item span.fa.checklistitem-handle.fa-arrows::before {
-  content: "↕️" !important;
-  font-family: inherit !important;
+  display: inline-block;
+  width: 1.2em;
+  text-align: center;
+  color: #999;
 }
 .js-delete-checklist-item,
 .js-convert-checklist-item-to-card {

client/components/cards/checklists.jade

@@ -43,7 +43,7 @@ template(name="checklistDetail")
         if canModifyCard
           h4.title.js-open-inlined-form.is-editable
             if isTouchScreenOrShowDesktopDragHandles
-              span.fa.checklist-handle(class="fa-arrows" title="{{_ 'dragChecklist'}}")
+              span.checklist-handle(title="{{_ 'dragChecklist'}}") ↕️
             +viewer
               = checklist.title
         else
@@ -127,7 +127,7 @@ template(name='checklistItemDetail')
     if canModifyCard
       .check-box-container
         .check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
-      span.fa.checklistitem-handle(class="fa-arrows" title="{{_ 'dragChecklistItem'}}")
+      span.checklistitem-handle(title="{{_ 'dragChecklistItem'}}") ↕️
       .item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}")
         +viewer
           = item.title

client/components/cards/labels.css

@@ -223,9 +223,13 @@
 .card-label-edit-button:hover {
   background: #dbdbdb;
 }
-ul.edit-labels-pop-over span.fa.label-handle {
+ul.edit-labels-pop-over span.label-handle {
   padding-right: 10px;
+  display: inline-block;
+  width: 1.2em;
+  text-align: center;
+  color: #999;
 }
-ul.edit-labels-pop-over span.fa.label-handle + .card-label {
+ul.edit-labels-pop-over span.label-handle + .card-label {
   max-width: 180px;
 }

client/components/cards/labels.jade

@@ -31,7 +31,7 @@ template(name="cardLabelsPopup")
         a.card-label-edit-button.js-edit-label
           | ✏️
         if isTouchScreenOrShowDesktopDragHandles
-          span.fa.label-handle(class="fa-arrows" title="{{_ 'dragLabel'}}")
+          span.label-handle(title="{{_ 'dragLabel'}}") ↕️
         span.card-label.card-label-selectable.js-select-label.card-label-wrapper(class="card-label-{{color}}"
           class="{{# if isLabelSelected ../_id }}active{{/if}}")
             +viewer

client/components/cards/minicard.css

@@ -142,9 +142,12 @@
     display: block;
   }
 }
-.minicard .handle .fa-arrows {
+.minicard .handle .drag-handle {
   font-size: clamp(16px, 3vw, 20px);
   color: #ccc;
+  display: inline-block;
+  width: 1.4em;
+  text-align: center;
 }
 .minicard .minicard-title .card-number {
   color: #b3b3b3;
@@ -297,19 +300,6 @@
   background-color: #1976d2 !important;
 }
 
-/* Font Awesome icons in minicard dates */
-.minicard .card-date i.fa {
-  margin-right: 0.3vw;
-  font-size: 0.9em;
-  vertical-align: middle;
-}
-
-/* Font Awesome icons in minicard spent time */
-.minicard .card-time i.fa {
-  margin-right: 0.3vw;
-  font-size: 0.9em;
-  vertical-align: middle;
-}
 .minicard .badges {
   float: left;
   margin-top: 1vh;
@@ -740,8 +730,3 @@
   align-items: center;
   gap: 0.3vw;
 }
-
-.minicard-list-name i.fa {
-  font-size: 0.8em;
-  opacity: 0.7;
-}

client/components/cards/minicard.jade

@@ -251,6 +251,6 @@ template(name="minicardDetailsActionsPopup")
           | 👁️
           |  {{_ 'unwatch'}}
         else
-          | 👁️-slash
+          | 👁️
           |  {{_ 'watch'}}