From 0b6c229b6cec2329752013393e83ebd122e3d2eb Mon Sep 17 00:00:00 2001
From: Maxime Quandalle <maxime@quandalle.com>
Date: Tue, 9 Jun 2015 17:41:55 +0200
Subject: Define the popup translation in the stylesheet, not in the JS code

This allows us to autoprexfix the property, which is needed for Safari
support (see http://caniuse.com/#feat=transforms2d).

Fixes #178.
---
 client/components/main/popup.styl     | 10 ++++++++--
 client/components/main/popup.tpl.jade |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

(limited to 'client/components/main')

diff --git a/client/components/main/popup.styl b/client/components/main/popup.styl
index ce40fc83..550f80f1 100644
--- a/client/components/main/popup.styl
+++ b/client/components/main/popup.styl
@@ -1,5 +1,7 @@
 @import 'nib'
 
+$popupWidth = 300px
+
 .pop-over
   background: #fff
   border-radius: 3px
@@ -7,13 +9,13 @@
   border-bottom-color: #c2c2c2
   box-shadow: 0 1px 6px rgba(0, 0, 0, .3)
   position: absolute
-  width: 300px
+  width: $popupWidth
   z-index: 99999
   margin-top: 5px
 
   hr
     margin: 4px -10px
-    width: 300px
+    width: $popupWidth
 
   input[type="text"],
   input[type="email"],
@@ -118,6 +120,10 @@
     .at-result
       background: #b2dfdb
 
+  for depth in (1..6)
+    .popup-container-depth-{depth}
+      transform: translateX(- depth * $popupWidth)
+
 .select-members-list
   margin-bottom: 8px
 
diff --git a/client/components/main/popup.tpl.jade b/client/components/main/popup.tpl.jade
index e6cc982a..1add6033 100644
--- a/client/components/main/popup.tpl.jade
+++ b/client/components/main/popup.tpl.jade
@@ -13,7 +13,7 @@
     //-
       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)")
+    .content-container(class="popup-container-depth-{{depth}}")
       each stack
         //-
           XXX We need a better way to express the "is the last element" condition.
-- 
cgit v1.2.3-1-g7c22