summaryrefslogtreecommitdiffstats
path: root/client/components
diff options
context:
space:
mode:
authorMaxime Quandalle <maxime@quandalle.com>2015-06-09 17:41:55 +0200
committerMaxime Quandalle <maxime@quandalle.com>2015-06-09 17:41:55 +0200
commit0b6c229b6cec2329752013393e83ebd122e3d2eb (patch)
tree557c1df1d21509e0ce337bd738fc74d154696667 /client/components
parent270236363abbfec7ae50a4545721d19ac37fcfe0 (diff)
downloadwekan-0b6c229b6cec2329752013393e83ebd122e3d2eb.tar.gz
wekan-0b6c229b6cec2329752013393e83ebd122e3d2eb.tar.bz2
wekan-0b6c229b6cec2329752013393e83ebd122e3d2eb.zip
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.
Diffstat (limited to 'client/components')
-rw-r--r--client/components/main/popup.styl10
-rw-r--r--client/components/main/popup.tpl.jade2
2 files changed, 9 insertions, 3 deletions
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.