Animate popup screens transition

1 files changed, 14 insertions, 6 deletions

diff --git a/client/components/main/popup.tpl.jade b/client/components/main/popup.tpl.jade
index ba24db0a..9e99030d 100644
--- a/client/components/main/popup.tpl.jade
+++ b/client/components/main/popup.tpl.jade
@@ -3,11 +3,19 @@
   class=currentBoard.colorClass
   style="display:block; left:{{offset.left}}px; top:{{offset.top}}px;")
   .header.clearfix
-    if hasPopupParent
-      a.back-btn.js-back-view
-        i.fa.fa-chevron-left
+    a.back-btn.js-back-view(class="{{#unless hasPopupParent}}is-hidden{{/unless}}")
+      i.fa.fa-chevron-left
     span.header-title= title
-    a.close-btn.js-close-popover
+    a.close-btn.js-close-pop-over
       i.fa.fa-times
-  .content.clearfix
-    +Template.dynamic(template=popupName data=dataContext)
+  .content-wrapper
+    //-
+      We display the all stack of popup content next to each other and move
+      the "window" by translating .content-container inside .content-wrapper.
+    .content-container(style="transform:translateX({{containerTranslation}}px)")
+      each stack
+        //-
+          XXX We need a better way to express the "is the last element" condition.
+          Hopefully the @last helper will come soon (or at least @index)
+        .content(class="{{#unless $eq popupName ../popupName}}is-hidden{{/unless}}")
+          +Template.dynamic(template=popupName data=dataContext)