Maximize Card. In Progress.

Thanks to xet7 !

Related #1574

client/components/cards/cardDetails.jade

@@ -6,6 +6,10 @@ template(name="cardDetails")
       else
         unless isMiniScreen
           a.fa.fa-times-thin.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
+          unless cardMaximized
+            a.fa.fa-window-maximize.maximize-card-details.js-maximize-card-details(title="{{_ 'maximize-card'}}")
+          if cardMaximized
+            a.fa.fa-window-minimize.minimize-card-details.js-minimize-card-details(title="{{_ 'minimize-card'}}")
           if currentUser.isBoardMember
             a.fa.fa-navicon.card-details-menu.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
             input.inline-input(type="text" id="cardURL_copy" value="{{ originRelativeUrl }}")
@@ -41,498 +45,501 @@ template(name="cardDetails")
       else
         p.warning {{_ 'card-archived'}}
 
-    .card-details-items
-      if currentBoard.allowsLabels
-        .card-details-item.card-details-item-labels
-          h3.card-details-item-title
-            i.fa.fa-tags
-            | {{_ 'labels'}}
-          a(class="{{#if canModifyCard}}js-add-labels{{else}}is-disabled{{/if}}" title="{{_ 'card-labels-title'}}")
-            each labels
-              span.card-label(class="card-label-{{color}}" title=name)
-                +viewer
-                  = name
-          if canModifyCard
-            unless currentUser.isWorker
-              a.card-label.add-label.js-add-labels(title="{{_ 'card-labels-title'}}")
-                i.fa.fa-plus
+    .card-details-left
 
-      if currentBoard.allowsReceivedDate
-        hr
-        .card-details-item.card-details-item-received
-          h3.card-details-item-title
-            i.fa.fa-sign-out
-            | {{_ 'card-received'}}
-          if getReceived
-            +cardReceivedDate
-          else
+      .card-details-items
+        if currentBoard.allowsLabels
+          .card-details-item.card-details-item-labels
+            h3.card-details-item-title
+              i.fa.fa-tags
+              | {{_ 'labels'}}
+            a(class="{{#if canModifyCard}}js-add-labels{{else}}is-disabled{{/if}}" title="{{_ 'card-labels-title'}}")
+              each labels
+                span.card-label(class="card-label-{{color}}" title=name)
+                  +viewer
+                    = name
             if canModifyCard
               unless currentUser.isWorker
-                a.card-label.add-label.js-received-date
+                a.card-label.add-label.js-add-labels(title="{{_ 'card-labels-title'}}")
                   i.fa.fa-plus
 
-      if currentBoard.allowsStartDate
-        .card-details-item.card-details-item-start
-          h3.card-details-item-title
-            i.fa.fa-hourglass-start
-            | {{_ 'card-start'}}
-          if getStart
-            +cardStartDate
-          else
-            if canModifyCard
-              unless currentUser.isWorker
-                a.card-label.add-label.js-start-date
-                  i.fa.fa-plus
+        if currentBoard.allowsReceivedDate
+          hr
+          .card-details-item.card-details-item-received
+            h3.card-details-item-title
+              i.fa.fa-sign-out
+              | {{_ 'card-received'}}
+            if getReceived
+              +cardReceivedDate
+            else
+              if canModifyCard
+                unless currentUser.isWorker
+                  a.card-label.add-label.js-received-date
+                    i.fa.fa-plus
 
-      if currentBoard.allowsDueDate
-        .card-details-item.card-details-item-due
-          h3.card-details-item-title
-            i.fa.fa-sign-in
-            | {{_ 'card-due'}}
-          if getDue
-            +cardDueDate
-          else
-            if canModifyCard
-              unless currentUser.isWorker
-                a.card-label.add-label.js-due-date
-                  i.fa.fa-plus
+        if currentBoard.allowsStartDate
+          .card-details-item.card-details-item-start
+            h3.card-details-item-title
+              i.fa.fa-hourglass-start
+              | {{_ 'card-start'}}
+            if getStart
+              +cardStartDate
+            else
+              if canModifyCard
+                unless currentUser.isWorker
+                  a.card-label.add-label.js-start-date
+                    i.fa.fa-plus
 
-      if currentBoard.allowsEndDate
-        .card-details-item.card-details-item-end
-          h3.card-details-item-title
-            i.fa.fa-hourglass-end
-            | {{_ 'card-end'}}
-          if getEnd
-            +cardEndDate
-          else
-            if canModifyCard
-              unless currentUser.isWorker
-                a.card-label.add-label.js-end-date
-                  i.fa.fa-plus
+        if currentBoard.allowsDueDate
+          .card-details-item.card-details-item-due
+            h3.card-details-item-title
+              i.fa.fa-sign-in
+              | {{_ 'card-due'}}
+            if getDue
+              +cardDueDate
+            else
+              if canModifyCard
+                unless currentUser.isWorker
+                  a.card-label.add-label.js-due-date
+                    i.fa.fa-plus
 
-      hr
-      if currentBoard.allowsCreator
-        .card-details-item.card-details-item-creator
-          h3.card-details-item-title
-            i.fa.fa-user
-            | {{_ 'creator'}}
+        if currentBoard.allowsEndDate
+          .card-details-item.card-details-item-end
+            h3.card-details-item-title
+              i.fa.fa-hourglass-end
+              | {{_ 'card-end'}}
+            if getEnd
+              +cardEndDate
+            else
+              if canModifyCard
+                unless currentUser.isWorker
+                  a.card-label.add-label.js-end-date
+                    i.fa.fa-plus
 
-          +userAvatar(userId=userId noRemove=true)
-          | {{! XXX Hack to hide syntaxic coloration /// }}
+        hr
+        if currentBoard.allowsCreator
+          .card-details-item.card-details-item-creator
+            h3.card-details-item-title
+              i.fa.fa-user
+              | {{_ 'creator'}}
 
-      //.card-details-items
-      if currentBoard.allowsMembers
-        .card-details-item.card-details-item-members
-          h3.card-details-item-title
-            i.fa.fa-users
-            | {{_ 'members'}}
-          each userId in getMembers
-            +userAvatar(userId=userId cardId=_id)
+            +userAvatar(userId=userId noRemove=true)
             | {{! XXX Hack to hide syntaxic coloration /// }}
-          if canModifyCard
-            unless currentUser.isWorker
-              a.member.add-member.card-details-item-add-button.js-add-members(title="{{_ 'card-members-title'}}")
-                i.fa.fa-plus
 
-      //if assigneeSelected
-      if currentBoard.allowsAssignee
-        .card-details-item.card-details-item-assignees
-          h3.card-details-item-title
-            i.fa.fa-user
-            | {{_ 'assignee'}}
-          each userId in getAssignees
-            +userAvatar(userId=userId cardId=_id assignee=true)
-            | {{! XXX Hack to hide syntaxic coloration /// }}
-          if canModifyCard
-            a.assignee.add-assignee.card-details-item-add-button.js-add-assignees(title="{{_ 'assignee'}}")
-              i.fa.fa-plus
-          if currentUser.isWorker
-            unless assigneeSelected
+        //.card-details-items
+        if currentBoard.allowsMembers
+          .card-details-item.card-details-item-members
+            h3.card-details-item-title
+              i.fa.fa-users
+              | {{_ 'members'}}
+            each userId in getMembers
+              +userAvatar(userId=userId cardId=_id)
+              | {{! XXX Hack to hide syntaxic coloration /// }}
+            if canModifyCard
+              unless currentUser.isWorker
+                a.member.add-member.card-details-item-add-button.js-add-members(title="{{_ 'card-members-title'}}")
+                  i.fa.fa-plus
+
+        //if assigneeSelected
+        if currentBoard.allowsAssignee
+          .card-details-item.card-details-item-assignees
+            h3.card-details-item-title
+              i.fa.fa-user
+              | {{_ 'assignee'}}
+            each userId in getAssignees
+              +userAvatar(userId=userId cardId=_id assignee=true)
+              | {{! XXX Hack to hide syntaxic coloration /// }}
+            if canModifyCard
               a.assignee.add-assignee.card-details-item-add-button.js-add-assignees(title="{{_ 'assignee'}}")
                 i.fa.fa-plus
+            if currentUser.isWorker
+              unless assigneeSelected
+                a.assignee.add-assignee.card-details-item-add-button.js-add-assignees(title="{{_ 'assignee'}}")
+                  i.fa.fa-plus
 
-      //.card-details-items
-      if getSpentTime
-        .card-details-item.card-details-item-spent
-          if getIsOvertime
+        //.card-details-items
+        if getSpentTime
+          .card-details-item.card-details-item-spent
+            if getIsOvertime
+              h3.card-details-item-title
+                | {{_ 'overtime-hours'}}
+            else
+              h3.card-details-item-title
+                | {{_ 'spent-time-hours'}}
+            +cardSpentTime
+
+        //.card-details-items
+        if currentBoard.allowsRequestedBy
+          .card-details-item.card-details-item-name
             h3.card-details-item-title
-              | {{_ 'overtime-hours'}}
-          else
+              i.fa.fa-shopping-cart
+              | {{_ 'requested-by'}}
+            if canModifyCard
+              unless currentUser.isWorker
+                +inlinedForm(classNames="js-card-details-requester")
+                  +editCardRequesterForm
+                else
+                  a.js-open-inlined-form
+                    if getRequestedBy
+                      +viewer
+                        = getRequestedBy
+                    else
+                      | {{_ 'add'}}
+            else if getRequestedBy
+              +viewer
+                = getRequestedBy
+
+        if currentBoard.allowsAssignedBy
+          .card-details-item.card-details-item-name
             h3.card-details-item-title
-              | {{_ 'spent-time-hours'}}
-          +cardSpentTime
-
-      //.card-details-items
-      if currentBoard.allowsRequestedBy
-        .card-details-item.card-details-item-name
-          h3.card-details-item-title
-            i.fa.fa-shopping-cart
-            | {{_ 'requested-by'}}
-          if canModifyCard
-            unless currentUser.isWorker
-              +inlinedForm(classNames="js-card-details-requester")
-                +editCardRequesterForm
-              else
-                a.js-open-inlined-form
-                  if getRequestedBy
-                    +viewer
-                      = getRequestedBy
-                  else
-                    | {{_ 'add'}}
-          else if getRequestedBy
-            +viewer
-              = getRequestedBy
-
-      if currentBoard.allowsAssignedBy
-        .card-details-item.card-details-item-name
-          h3.card-details-item-title
-            i.fa.fa-user-plus
-            | {{_ 'assigned-by'}}
-          if canModifyCard
-            unless currentUser.isWorker
-              +inlinedForm(classNames="js-card-details-assigner")
-                +editCardAssignerForm
+              i.fa.fa-user-plus
+              | {{_ 'assigned-by'}}
+            if canModifyCard
+              unless currentUser.isWorker
+                +inlinedForm(classNames="js-card-details-assigner")
+                  +editCardAssignerForm
+                else
+                  a.js-open-inlined-form
+                    if getAssignedBy
+                      +viewer
+                        = getAssignedBy
+                    else
+                      | {{_ 'add'}}
+            else if getRequestedBy
+              +viewer
+                = getAssignedBy
+
+        if currentBoard.allowsCardSortingByNumber
+          .card-details-item.card-details-sort-order
+            h3.card-details-item-title
+              i.fa.fa-sort
+              | {{_ 'sort'}}
+            if canModifyCard
+              +inlinedForm(classNames="js-card-details-sort")
+                +editCardSortOrderForm
               else
                 a.js-open-inlined-form
-                  if getAssignedBy
-                    +viewer
-                      = getAssignedBy
-                  else
-                    | {{_ 'add'}}
-          else if getRequestedBy
-            +viewer
-              = getAssignedBy
+                  +viewer
+                    = sort
 
-      if currentBoard.allowsCardSortingByNumber
-        .card-details-item.card-details-sort-order
-          h3.card-details-item-title
-            i.fa.fa-sort
-            | {{_ 'sort'}}
-          if canModifyCard
-            +inlinedForm(classNames="js-card-details-sort")
-              +editCardSortOrderForm
+        //.card-details-items
+        if customFieldsWD
+          hr
+          each customFieldsWD
+            .card-details-item.card-details-item-customfield
+              h3.card-details-item-title
+                i.fa.fa-list-alt
+                = definition.name
+              +cardCustomField
+
+      if getVoteQuestion
+        hr
+        .vote-title
+          div.flex
+            h3
+              i.fa.fa-thumbs-up
+              | {{_ 'vote-question'}}
+            if getVoteEnd
+              +voteEndDate
+          .vote-result
+            if votePublic
+              a.card-label.card-label-green.js-show-positive-votes {{ voteCountPositive }}
+              a.card-label.card-label-red.js-show-negative-votes {{ voteCountNegative }}
             else
-              a.js-open-inlined-form
-                +viewer
-                  = sort
-
-      //.card-details-items
-      if customFieldsWD
+              .card-label.card-label-green {{ voteCountPositive }}
+              .card-label.card-label-red {{ voteCountNegative }}
+            unless ($and currentBoard.isPublic voteAllowNonBoardMembers )
+              .card-label.card-label-gray  {{ voteCount }} {{_ 'r-of' }} {{ currentBoard.activeMembers.length }}
+        +viewer
+          = getVoteQuestion
+        if showVotingButtons
+          button.card-details-green.js-vote.js-vote-positive(class="{{#if voteState}}voted{{/if}}")
+            if voteState
+              i.fa.fa-thumbs-up
+            | {{_ 'vote-for-it'}}
+          button.card-details-red.js-vote.js-vote-negative(class="{{#if $eq voteState false}}voted{{/if}}")
+            if $eq voteState false
+              i.fa.fa-thumbs-down
+            | {{_ 'vote-against'}}
+
+      if getPokerQuestion
         hr
-        each customFieldsWD
-          .card-details-item.card-details-item-customfield
-            h3.card-details-item-title
-              i.fa.fa-list-alt
-              = definition.name
-            +cardCustomField
-
-    if getVoteQuestion
-      hr
-      .vote-title
-        div.flex
-          h3
-            i.fa.fa-thumbs-up
-            | {{_ 'vote-question'}}
-          if getVoteEnd
-            +voteEndDate
-        .vote-result
-          if votePublic
-            a.card-label.card-label-green.js-show-positive-votes {{ voteCountPositive }}
-            a.card-label.card-label-red.js-show-negative-votes {{ voteCountNegative }}
-          else
-            .card-label.card-label-green {{ voteCountPositive }}
-            .card-label.card-label-red {{ voteCountNegative }}
-          unless ($and currentBoard.isPublic voteAllowNonBoardMembers )
-            .card-label.card-label-gray  {{ voteCount }} {{_ 'r-of' }} {{ currentBoard.activeMembers.length }}
-      +viewer
-        = getVoteQuestion
-      if showVotingButtons
-        button.card-details-green.js-vote.js-vote-positive(class="{{#if voteState}}voted{{/if}}")
-          if voteState
-            i.fa.fa-thumbs-up
-          | {{_ 'vote-for-it'}}
-        button.card-details-red.js-vote.js-vote-negative(class="{{#if $eq voteState false}}voted{{/if}}")
-          if $eq voteState false
-            i.fa.fa-thumbs-down
-          | {{_ 'vote-against'}}
-
-    if getPokerQuestion
-      hr
-      .poker-title
-        div.flex
-          h3
-            i.fa.fa-thumbs-up
-            | {{_ 'poker-question'}}
-          if getPokerEnd
-            +pokerEndDate
-        div.flex
+        .poker-title
+          div.flex
+            h3
+              i.fa.fa-thumbs-up
+              | {{_ 'poker-question'}}
+            if getPokerEnd
+              +pokerEndDate
+          div.flex
+            .poker-result
+              if expiredPoker
+                unless ($and currentBoard.isPublic pokerAllowNonBoardMembers )
+                  .card-label.card-label-gray  {{ pokerCount }} {{_ 'r-of' }} {{ currentBoard.activeMembers.length }}
+        if showPlanningPokerButtons
           .poker-result
-            if expiredPoker
-              unless ($and currentBoard.isPublic pokerAllowNonBoardMembers )
-                .card-label.card-label-gray  {{ pokerCount }} {{_ 'r-of' }} {{ currentBoard.activeMembers.length }}
-      if showPlanningPokerButtons
-        .poker-result
-          .poker-deck
-            .poker-card
-              span.inner.js-poker.js-poker-vote-one(class="{{#if $eq pokerState 'one'}}poker-voted{{/if}}") {{_ 'poker-one'}}
-            if $eq pokerState "one"
-              i.fa.fa-check
-          .poker-deck
-            .poker-card
-              span.inner.js-poker.js-poker-vote-two(class="{{#if $eq pokerState 'two'}}poker-voted{{/if}}") {{_ 'poker-two'}}
-            if $eq pokerState "two"
-              i.fa.fa-check
-          .poker-deck
-            .poker-card
-              span.inner.js-poker.js-poker-vote-three(class="{{#if $eq pokerState 'three'}}poker-voted{{/if}}") {{_ 'poker-three'}}
-            if $eq pokerState "three"
-              i.fa.fa-check
-          .poker-deck
-            .poker-card
-              span.inner.js-poker.js-poker-vote-five(class="{{#if $eq pokerState 'five'}}poker-voted{{/if}}") {{_ 'poker-five'}}
-            if $eq pokerState "five"
-              i.fa.fa-check
-          .poker-deck
-            .poker-card
-              span.inner.js-poker.js-poker-vote-eight(class="{{#if $eq pokerState 'eight'}}poker-voted{{/if}}") {{_ 'poker-eight'}}
-            if $eq pokerState "eight"
-              i.fa.fa-check
-          .poker-deck
-            .poker-card
-              span.inner.js-poker.js-poker-vote-thirteen(class="{{#if $eq pokerState 'thirteen'}}poker-voted{{/if}}") {{_ 'poker-thirteen'}}
-            if $eq pokerState "thirteen"
-              i.fa.fa-check
-          .poker-deck
-            .poker-card
-              span.inner.js-poker.js-poker-vote-twenty(class="{{#if $eq pokerState 'twenty'}}poker-voted{{/if}}") {{_ 'poker-twenty'}}
-            if $eq pokerState "twenty"
-              i.fa.fa-check
-          .poker-deck
-            .poker-card
-              span.inner.js-poker.js-poker-vote-forty(class="{{#if $eq pokerState 'forty'}}poker-voted{{/if}}") {{_ 'poker-forty'}}
-            if $eq pokerState "forty"
-              i.fa.fa-check
-          .poker-deck
-            .poker-card
-              span.inner.js-poker.js-poker-vote-one-hundred(class="{{#if $eq pokerState 'oneHundred'}}poker-voted{{/if}}") {{_ 'poker-oneHundred'}}
-            if $eq pokerState "oneHundred"
-              i.fa.fa-check
-          .poker-deck
-            .poker-card
-              span.inner.js-poker.js-poker-vote-unsure(class="{{#if $eq pokerState 'unsure'}}poker-voted{{/if}}") {{_ 'poker-unsure'}}
-            if $eq pokerState "unsure"
-              i.fa.fa-check
-
-        if currentUser.isBoardAdmin
-          button.card-details-blue.js-poker-finish(class="{{#if $eq voteState false}}poker-voted{{/if}}") {{_ 'poker-finish'}}
-
-      if expiredPoker
-        .poker-table
-          .poker-table-side-left
-            .poker-table-heading-left
-              .poker-table-row
-                .poker-table-cell
-                .poker-table-cell
-                  | {{_ 'poker-result-votes' }}
-                .poker-table-cell.poker-table-cell-who
-                  | {{_ 'poker-result-who' }}
-            .poker-table-body
-              .poker-table-row
-                .poker-table-cell
-                  button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 1}}winner{{else}}loser{{/if}}") {{_ 'poker-one'}}
-                .poker-table-cell {{ pokerCountOne }}
-                .poker-table-cell.poker-table-cell-who
-                  .poker-result
-                      each m in pokerMemberOne
-                        a.name
-                          +userAvatar(userId=m._id noRemove=true)
-
-              .poker-table-row
-                .poker-table-cell
-                  button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 2}}winner{{else}}loser{{/if}}") {{_ 'poker-two'}}
-                .poker-table-cell {{ pokerCountTwo }}
-                .poker-table-cell.poker-table-cell-who
-                  .poker-result
-                      each m in pokerMemberTwo
-                        a.name
-                          +userAvatar(userId=m._id noRemove=true)
-
-              .poker-table-row
-                .poker-table-cell
-                  button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 3}}winner{{else}}loser{{/if}}") {{_ 'poker-three'}}
-                .poker-table-cell {{ pokerCountThree }}
-                .poker-table-cell.poker-table-cell-who
-                  .poker-result
-                      each m in pokerMemberThree
-                        a.name
-                          +userAvatar(userId=m._id noRemove=true)
-
-              .poker-table-row
-                .poker-table-cell
-                  button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 5}}winner{{else}}loser{{/if}}") {{_ 'poker-five'}}
-                .poker-table-cell {{ pokerCountFive }}
-                .poker-table-cell.poker-table-cell-who
-                  .poker-result
-                      each m in pokerMemberFive
-                        a.name
-                          +userAvatar(userId=m._id noRemove=true)
-
-              .poker-table-row
-                .poker-table-cell
-                  button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 8}}winner{{else}}loser{{/if}}") {{_ 'poker-eight'}}
-                .poker-table-cell {{ pokerCountEight }}
-                .poker-table-cell.poker-table-cell-who
-                  .poker-result
-                      each m in pokerMemberEight
-                        a.name
-                          +userAvatar(userId=m._id noRemove=true)
-
-          .poker-table-side-right
-            .poker-table-heading-right
-              .poker-table-row
-                .poker-table-cell
-                .poker-table-cell
-                  | {{_ 'poker-result-votes' }}
-                .poker-table-cell.poker-table-cell-who
-                  | {{_ 'poker-result-who' }}
-            .poker-table-body
-              .poker-table-row
-                .poker-table-cell
-                  button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 13}}winner{{else}}loser{{/if}}") {{_ 'poker-thirteen'}}
-                .poker-table-cell {{ pokerCountThirteen }}
-                .poker-table-cell.poker-table-cell-who
-                  .poker-result
-                      each m in pokerMemberThirteen
-                        a.name
-                          +userAvatar(userId=m._id noRemove=true)
-
-              .poker-table-row
-                .poker-table-cell
-                  button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 20}}winner{{else}}loser{{/if}}") {{_ 'poker-twenty'}}
-                .poker-table-cell {{ pokerCountTwenty }}
-                .poker-table-cell.poker-table-cell-who
-                  .poker-result
-                      each m in pokerMemberTwenty
-                        a.name
-                          +userAvatar(userId=m._id noRemove=true)
-
-              .poker-table-row
-                .poker-table-cell
-                  button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 40}}winner{{else}}loser{{/if}}") {{_ 'poker-forty'}}
-                .poker-table-cell {{ pokerCountForty }}
-                .poker-table-cell.poker-table-cell-who
-                  .poker-result
-                      each m in pokerMemberForty
-                        a.name
-                          +userAvatar(userId=m._id noRemove=true)
-
-              .poker-table-row
-                .poker-table-cell
-                  button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 100}}winner{{else}}loser{{/if}}") {{_ 'poker-oneHundred'}}
-                .poker-table-cell {{ pokerCountOneHundred }}
-                .poker-table-cell.poker-table-cell-who
-                  .poker-result
-                      each m in pokerMemberOneHundred
-                        a.name
-                          +userAvatar(userId=m._id noRemove=true)
-
-              .poker-table-row
-                .poker-table-cell
-                  button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 'unsure'}}winner{{else}}loser{{/if}}") {{_ 'poker-unsure'}}
-                .poker-table-cell {{ pokerCountUnsure }}
-                .poker-table-cell.poker-table-cell-who
-                  .poker-result
-                      each m in pokerMemberUnsure
-                        a.name
-                          +userAvatar(userId=m._id noRemove=true)
-
-        if currentUser.isBoardAdmin
-          div.estimation-add
-            button.card-details-red.js-poker-replay(class="{{#if $eq voteState false}}voted{{/if}}") {{_ 'poker-replay'}}
-          div.estimation-add
-            button.js-poker-estimation
-              i.fa.fa-plus
-              | {{_ 'set-estimation'}}
-            input(type=text,autofocus value=getPokerEstimation,id="pokerEstimation")
+            .poker-deck
+              .poker-card
+                span.inner.js-poker.js-poker-vote-one(class="{{#if $eq pokerState 'one'}}poker-voted{{/if}}") {{_ 'poker-one'}}
+              if $eq pokerState "one"
+                i.fa.fa-check
+            .poker-deck
+              .poker-card
+                span.inner.js-poker.js-poker-vote-two(class="{{#if $eq pokerState 'two'}}poker-voted{{/if}}") {{_ 'poker-two'}}
+              if $eq pokerState "two"
+                i.fa.fa-check
+            .poker-deck
+              .poker-card
+                span.inner.js-poker.js-poker-vote-three(class="{{#if $eq pokerState 'three'}}poker-voted{{/if}}") {{_ 'poker-three'}}
+              if $eq pokerState "three"
+                i.fa.fa-check
+            .poker-deck
+              .poker-card
+                span.inner.js-poker.js-poker-vote-five(class="{{#if $eq pokerState 'five'}}poker-voted{{/if}}") {{_ 'poker-five'}}
+              if $eq pokerState "five"
+                i.fa.fa-check
+            .poker-deck
+              .poker-card
+                span.inner.js-poker.js-poker-vote-eight(class="{{#if $eq pokerState 'eight'}}poker-voted{{/if}}") {{_ 'poker-eight'}}
+              if $eq pokerState "eight"
+                i.fa.fa-check
+            .poker-deck
+              .poker-card
+                span.inner.js-poker.js-poker-vote-thirteen(class="{{#if $eq pokerState 'thirteen'}}poker-voted{{/if}}") {{_ 'poker-thirteen'}}
+              if $eq pokerState "thirteen"
+                i.fa.fa-check
+            .poker-deck
+              .poker-card
+                span.inner.js-poker.js-poker-vote-twenty(class="{{#if $eq pokerState 'twenty'}}poker-voted{{/if}}") {{_ 'poker-twenty'}}
+              if $eq pokerState "twenty"
+                i.fa.fa-check
+            .poker-deck
+              .poker-card
+                span.inner.js-poker.js-poker-vote-forty(class="{{#if $eq pokerState 'forty'}}poker-voted{{/if}}") {{_ 'poker-forty'}}
+              if $eq pokerState "forty"
+                i.fa.fa-check
+            .poker-deck
+              .poker-card
+                span.inner.js-poker.js-poker-vote-one-hundred(class="{{#if $eq pokerState 'oneHundred'}}poker-voted{{/if}}") {{_ 'poker-oneHundred'}}
+              if $eq pokerState "oneHundred"
+                i.fa.fa-check
+            .poker-deck
+              .poker-card
+                span.inner.js-poker.js-poker-vote-unsure(class="{{#if $eq pokerState 'unsure'}}poker-voted{{/if}}") {{_ 'poker-unsure'}}
+              if $eq pokerState "unsure"
+                i.fa.fa-check
+
+          if currentUser.isBoardAdmin
+            button.card-details-blue.js-poker-finish(class="{{#if $eq voteState false}}poker-voted{{/if}}") {{_ 'poker-finish'}}
+
+        if expiredPoker
+          .poker-table
+            .poker-table-side-left
+              .poker-table-heading-left
+                .poker-table-row
+                  .poker-table-cell
+                  .poker-table-cell
+                    | {{_ 'poker-result-votes' }}
+                  .poker-table-cell.poker-table-cell-who
+                    | {{_ 'poker-result-who' }}
+              .poker-table-body
+                .poker-table-row
+                  .poker-table-cell
+                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 1}}winner{{else}}loser{{/if}}") {{_ 'poker-one'}}
+                  .poker-table-cell {{ pokerCountOne }}
+                  .poker-table-cell.poker-table-cell-who
+                    .poker-result
+                        each m in pokerMemberOne
+                          a.name
+                            +userAvatar(userId=m._id noRemove=true)
+
+                .poker-table-row
+                  .poker-table-cell
+                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 2}}winner{{else}}loser{{/if}}") {{_ 'poker-two'}}
+                  .poker-table-cell {{ pokerCountTwo }}
+                  .poker-table-cell.poker-table-cell-who
+                    .poker-result
+                        each m in pokerMemberTwo
+                          a.name
+                            +userAvatar(userId=m._id noRemove=true)
+
+                .poker-table-row
+                  .poker-table-cell
+                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 3}}winner{{else}}loser{{/if}}") {{_ 'poker-three'}}
+                  .poker-table-cell {{ pokerCountThree }}
+                  .poker-table-cell.poker-table-cell-who
+                    .poker-result
+                        each m in pokerMemberThree
+                          a.name
+                            +userAvatar(userId=m._id noRemove=true)
+
+                .poker-table-row
+                  .poker-table-cell
+                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 5}}winner{{else}}loser{{/if}}") {{_ 'poker-five'}}
+                  .poker-table-cell {{ pokerCountFive }}
+                  .poker-table-cell.poker-table-cell-who
+                    .poker-result
+                        each m in pokerMemberFive
+                          a.name
+                            +userAvatar(userId=m._id noRemove=true)
+
+                .poker-table-row
+                  .poker-table-cell
+                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 8}}winner{{else}}loser{{/if}}") {{_ 'poker-eight'}}
+                  .poker-table-cell {{ pokerCountEight }}
+                  .poker-table-cell.poker-table-cell-who
+                    .poker-result
+                        each m in pokerMemberEight
+                          a.name
+                            +userAvatar(userId=m._id noRemove=true)
+
+            .poker-table-side-right
+              .poker-table-heading-right
+                .poker-table-row
+                  .poker-table-cell
+                  .poker-table-cell
+                    | {{_ 'poker-result-votes' }}
+                  .poker-table-cell.poker-table-cell-who
+                    | {{_ 'poker-result-who' }}
+              .poker-table-body
+                .poker-table-row
+                  .poker-table-cell
+                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 13}}winner{{else}}loser{{/if}}") {{_ 'poker-thirteen'}}
+                  .poker-table-cell {{ pokerCountThirteen }}
+                  .poker-table-cell.poker-table-cell-who
+                    .poker-result
+                        each m in pokerMemberThirteen
+                          a.name
+                            +userAvatar(userId=m._id noRemove=true)
+
+                .poker-table-row
+                  .poker-table-cell
+                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 20}}winner{{else}}loser{{/if}}") {{_ 'poker-twenty'}}
+                  .poker-table-cell {{ pokerCountTwenty }}
+                  .poker-table-cell.poker-table-cell-who
+                    .poker-result
+                        each m in pokerMemberTwenty
+                          a.name
+                            +userAvatar(userId=m._id noRemove=true)
+
+                .poker-table-row
+                  .poker-table-cell
+                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 40}}winner{{else}}loser{{/if}}") {{_ 'poker-forty'}}
+                  .poker-table-cell {{ pokerCountForty }}
+                  .poker-table-cell.poker-table-cell-who
+                    .poker-result
+                        each m in pokerMemberForty
+                          a.name
+                            +userAvatar(userId=m._id noRemove=true)
+
+                .poker-table-row
+                  .poker-table-cell
+                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 100}}winner{{else}}loser{{/if}}") {{_ 'poker-oneHundred'}}
+                  .poker-table-cell {{ pokerCountOneHundred }}
+                  .poker-table-cell.poker-table-cell-who
+                    .poker-result
+                        each m in pokerMemberOneHundred
+                          a.name
+                            +userAvatar(userId=m._id noRemove=true)
+
+                .poker-table-row
+                  .poker-table-cell
+                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 'unsure'}}winner{{else}}loser{{/if}}") {{_ 'poker-unsure'}}
+                  .poker-table-cell {{ pokerCountUnsure }}
+                  .poker-table-cell.poker-table-cell-who
+                    .poker-result
+                        each m in pokerMemberUnsure
+                          a.name
+                            +userAvatar(userId=m._id noRemove=true)
+
+          if currentUser.isBoardAdmin
+            div.estimation-add
+              button.card-details-red.js-poker-replay(class="{{#if $eq voteState false}}voted{{/if}}") {{_ 'poker-replay'}}
+            div.estimation-add
+              button.js-poker-estimation
+                i.fa.fa-plus
+                | {{_ 'set-estimation'}}
+              input(type=text,autofocus value=getPokerEstimation,id="pokerEstimation")
 
-    //- XXX We should use "editable" to avoid repetiting ourselves
-    if canModifyCard
-      unless currentUser.isWorker
+      //- XXX We should use "editable" to avoid repetiting ourselves
+      if canModifyCard
+        unless currentUser.isWorker
+          if currentBoard.allowsDescriptionTitle
+            hr
+            h3.card-details-item-title
+              i.fa.fa-align-left
+              | {{_ 'description'}}
+          if currentBoard.allowsDescriptionText
+            +inlinedCardDescription(classNames="card-description js-card-description")
+              +descriptionForm
+              .edit-controls.clearfix
+                button.primary(type="submit") {{_ 'save'}}
+                a.fa.fa-times-thin.js-close-inlined-form
+            else
+              if currentBoard.allowsDescriptionText
+                a.js-open-inlined-form
+                  if getDescription
+                    +viewer
+                      = getDescription
+                  else
+                    | {{_ 'edit'}}
+                if (hasUnsavedValue 'cardDescription' _id)
+                  p.quiet
+                    | {{_ 'unsaved-description'}}
+                    a.js-open-inlined-form {{_ 'view-it'}}
+                    = ' - '
+                    a.js-close-inlined-form {{_ 'discard'}}
+      else if getDescription
         if currentBoard.allowsDescriptionTitle
           hr
-          h3.card-details-item-title
-            i.fa.fa-align-left
-            | {{_ 'description'}}
+          h3.card-details-item-title {{_ 'description'}}
         if currentBoard.allowsDescriptionText
-          +inlinedCardDescription(classNames="card-description js-card-description")
-            +descriptionForm
-            .edit-controls.clearfix
-              button.primary(type="submit") {{_ 'save'}}
-              a.fa.fa-times-thin.js-close-inlined-form
-          else
-            if currentBoard.allowsDescriptionText
-              a.js-open-inlined-form
-                if getDescription
-                  +viewer
-                    = getDescription
-                else
-                  | {{_ 'edit'}}
-              if (hasUnsavedValue 'cardDescription' _id)
-                p.quiet
-                  | {{_ 'unsaved-description'}}
-                  a.js-open-inlined-form {{_ 'view-it'}}
-                  = ' - '
-                  a.js-close-inlined-form {{_ 'discard'}}
-    else if getDescription
-      if currentBoard.allowsDescriptionTitle
-        hr
-        h3.card-details-item-title {{_ 'description'}}
-      if currentBoard.allowsDescriptionText
-        +viewer
-          = getDescription
-
-    .card-checklist-attachmentGalerys
-      .card-checklist-attachmentGalery.card-checklists
-        if currentBoard.allowsChecklists
+          +viewer
+            = getDescription
+
+      .card-checklist-attachmentGalerys
+        .card-checklist-attachmentGalery.card-checklists
+          if currentBoard.allowsChecklists
+            hr
+            +checklists(cardId = _id)
+          if currentBoard.allowsSubtasks
+            hr
+            +subtasks(cardId = _id)
+        if currentBoard.allowsAttachments
           hr
-          +checklists(cardId = _id)
-        if currentBoard.allowsSubtasks
-          hr
-          +subtasks(cardId = _id)
-      if currentBoard.allowsAttachments
-        hr
-        h3.card-details-item-title
-          i.fa.fa-paperclip
-          | {{_ 'attachments'}}
-        .card-checklist-attachmentGalery.card-attachmentGalery
-          +attachmentsGalery
-
-    hr
-    unless currentUser.isNoComments
-      .activity-title
-        h3.card-details-item-title
-          i.fa.fa-history
-          | {{ _ 'activity'}}
+          h3.card-details-item-title
+            i.fa.fa-paperclip
+            | {{_ 'attachments'}}
+          .card-checklist-attachmentGalery.card-attachmentGalery
+            +attachmentsGalery
+
+    .card-details-right
+
+      unless currentUser.isNoComments
+        .activity-title
+          h3.card-details-item-title
+            i.fa.fa-history
+            | {{ _ 'activity'}}
+          if currentUser.isBoardMember
+            .material-toggle-switch(title="{{_ 'hide-system-messages'}}")
+              //span.toggle-switch-title
+              if hiddenSystemMessages
+                input.toggle-switch(type="checkbox" id="toggleButton" checked="checked")
+              else
+                input.toggle-switch(type="checkbox" id="toggleButton")
+              label.toggle-label(for="toggleButton")
+      if currentBoard.allowsComments
         if currentUser.isBoardMember
-          .material-toggle-switch(title="{{_ 'hide-system-messages'}}")
-            //span.toggle-switch-title
-            if hiddenSystemMessages
-              input.toggle-switch(type="checkbox" id="toggleButton" checked="checked")
-            else
-              input.toggle-switch(type="checkbox" id="toggleButton")
-            label.toggle-label(for="toggleButton")
-    if currentBoard.allowsComments
-      if currentUser.isBoardMember
-        unless currentUser.isNoComments
-          +commentForm
-    unless currentUser.isNoComments
-      if isLoaded.get
-        if isLinkedCard
-          +activities(card=this mode="linkedcard")
-        else if isLinkedBoard
-          +activities(card=this mode="linkedboard")
-        else
-          +activities(card=this mode="card")
+          unless currentUser.isNoComments
+            +commentForm
+      unless currentUser.isNoComments
+        if isLoaded.get
+          if isLinkedCard
+            +activities(card=this mode="linkedcard")
+          else if isLinkedBoard
+            +activities(card=this mode="linkedboard")
+          else
+            +activities(card=this mode="card")
 
 template(name="editCardTitleForm")
   textarea.js-edit-card-title(rows='1' autofocus dir="auto")

client/components/cards/cardDetails.js

@@ -54,6 +54,10 @@ BlazeComponent.extendComponent({
     return Meteor.user().hasHiddenSystemMessages();
   },
 
+  cardMaximized() {
+    return Meteor.user().hasCardMaximized();
+  },
+
   canModifyCard() {
     return (
       Meteor.user() &&
@@ -408,6 +412,14 @@ BlazeComponent.extendComponent({
         'click #toggleButton'() {
           Meteor.call('toggleSystemMessages');
         },
+        'click #js-maximize-card-details'() {
+          Meteor.call('toggleCardMaximized');
+          autosize($('.card-details'));
+        },
+        'click #js-minimize-card-details'() {
+          Meteor.call('toggleCardMaximized');
+          autosize($('.card-details'));
+        },
         'click .js-vote'(e) {
           const forIt = $(e.target).hasClass('js-vote-positive');
           let newState = null;

client/components/cards/cardDetails.styl

@@ -86,21 +86,62 @@ avatar-radius = 50%
 
 // Other card details
 
-.card-details
-  padding: 0
-  flex-shrink: 0
-  flex-basis: 600px
-  will-change: flex-basis
-  overflow-y: scroll
-  overflow-x: hidden
-  background: darken(white, 3%)
-  border-radius: bottom 3px
-  z-index: 20 !important
-  animation: flexGrowIn 0.1s
-  box-shadow: 0 0 7px 0 darken(white, 30%)
-  transition: flex-basis 0.1s
-  box-sizing: border-box
+unless isMiniScreen
+  if cardMaximized
+    .card-details
+      padding: 0
+      flex-shrink: 0
+      flex-basis: calc(100% - 20px)
+      will-change: flex-basis
+      overflow-y: scroll
+      overflow-x: scroll
+      background: darken(white, 3%)
+      border-radius: bottom 3px
+      z-index: 1000 !important
+      animation: flexGrowIn 0.1s
+      box-shadow: 0 0 7px 0 darken(white, 30%)
+      transition: flex-basis 0.1s
+      box-sizing: border-box
+      position: absolute
+      top: 0
+      left: 0
+      height: calc(100% - 20px)
+      width: calc(100% - 20px)
+      float: left
+
+      .card-details-left
+        position: absolute
+        float: left
+        top: 60px
+        left: 20px
+        width: 47%
+
+      .card-details-right
+        position: absolute
+        float: right
+        top: 20px
+        left: 50%
+
+      .card-details-header
+        width: 47%
+
+if isMiniScreen
+  .card-details
+    padding: 0
+    flex-shrink: 0
+    flex-basis: 600px
+    will-change: flex-basis
+    overflow-y: scroll
+    overflow-x: hidden
+    background: darken(white, 3%)
+    border-radius: bottom 3px
+    z-index: 20 !important
+    animation: flexGrowIn 0.1s
+    box-shadow: 0 0 7px 0 darken(white, 30%)
+    transition: flex-basis 0.1s
+    box-sizing: border-box
 
+.card-details
   .mCustomScrollBox
     padding-left: 0
 
@@ -110,11 +151,13 @@ avatar-radius = 50%
 
   .card-details-header
     margin: 0 -20px 5px
-    padding 7px 20px
+    padding: 7px 20px
     background: darken(white, 7%)
     border-bottom: 1px solid darken(white, 14%)
 
     .close-card-details,
+    .maximize-card-details,
+    .minimize-card-details,
     .card-details-menu,
     .card-copy-button,
     .card-copy-mobile-button,
@@ -122,7 +165,9 @@ avatar-radius = 50%
     .card-details-menu-mobile-web
       float: right
 
-    .close-card-details
+    .close-card-details,
+    .maximize-card-details,
+    .minimize-card-details
       font-size: 24px
       padding: 5px
       margin-right: -8px
@@ -260,7 +305,13 @@ input[type="submit"].attachment-add-link-submit
         margin-right: 0px
 
       .card-details-menu
-        margin-right: 10px
+        margin-right: 40px
+
+      .maximize-card-details
+        margin-right: 40px
+
+      .minimize-card-details
+        margin-right: 40px
 
 card-details-color(background, color...)
   background: background !important

i18n/en.i18n.json

@@ -1048,5 +1048,7 @@
   "Double-Bounce": "Double Bounce Wait Spinner",
   "Rotateplane": "Rotateplane Wait Spinner",
   "Scaleout": "Scaleout Wait Spinner",
-  "Wave": "Wave Wait Spinner"
+  "Wave": "Wave Wait Spinner",
+  "maximize-card": "Maximize Card",
+  "minimize-card": "Minimize Card"
 }

models/users.js

@@ -164,7 +164,7 @@ Users.attachSchema(
     },
     'profile.showDesktopDragHandles': {
       /**
-       * does the user want to hide system messages?
+       * does the user want to show desktop drag handles?
        */
       type: Boolean,
       optional: true,
@@ -176,6 +176,13 @@ Users.attachSchema(
       type: Boolean,
       optional: true,
     },
+    'profile.cardMaximized': {
+      /**
+       * has user clicked maximize card?
+       */
+      type: Boolean,
+      optional: true,
+    },
     'profile.hiddenSystemMessages': {
       /**
        * does the user want to hide system messages?
@@ -641,6 +648,11 @@ Users.helpers({
     return profile.hiddenSystemMessages || false;
   },
 
+  hasCardMaximized() {
+    const profile = this.profile || {};
+    return profile.cardMaximized || false;
+  },
+
   hasHiddenMinicardLabelText() {
     const profile = this.profile || {};
     return profile.hiddenMinicardLabelText || false;
@@ -793,6 +805,14 @@ Users.mutations({
     };
   },
 
+  toggleCardMaximized(value = false) {
+    return {
+      $set: {
+        'profile.cardMaximized': !value,
+      },
+    };
+  },
+
   toggleLabelText(value = false) {
     return {
       $set: {
@@ -887,6 +907,10 @@ Meteor.methods({
     const user = Meteor.user();
     user.toggleSystem(user.hasHiddenSystemMessages());
   },
+  toggleCardMaximized() {
+    const user = Meteor.user();
+    user.toggleCardMaximized(user.hasCardMaximized());
+  },
   toggleMinicardLabelText() {
     const user = Meteor.user();
     user.toggleLabelText(user.hasHiddenMinicardLabelText());