pageflow 12.1.0 → 12.2.0

data/app/assets/javascripts/pageflow/widgets/overview.js

@@ -95,12 +95,20 @@ jQuery(function($) {
       });
 
       if (scrollerWidth < wrapper.width()) {
-        var closeButtonLeft = Math.max(400, scrollerWidth - closeButton.width() - 10);
+        var closeButtonPos = Math.max(400, scrollerWidth - closeButton.width() - 10);
 
-        closeButton.css({
-          left: closeButtonLeft + 'px',
-          right: 'auto'
-        });
+        if (isDirLtr(closeButton)) {
+          closeButton.css({
+            left: closeButtonPos + 'px',
+            right: 'auto'
+          });
+        }
+        else {
+          closeButton.css({
+            right: closeButtonPos + 'px',
+            left: 'auto'
+          });
+        }
       }
 
       closeButton.click(toggleContent);
@@ -111,6 +119,11 @@ jQuery(function($) {
           toggleContent();
         }
       });
+
+      function isDirLtr(el) {
+        var styles = window.getComputedStyle(el[0]);
+        return styles.direction == 'ltr';
+      }
     }
   });
 });

data/app/assets/stylesheets/pageflow/base.scss

@@ -72,7 +72,6 @@ a {
 @import "./header";
 @import "./focus_outline";
 @import "./skip_links";
-@import "./multimedia_alert";
 @import "./hide_text";
 @import "./subshare";
 @import "./delayed_text_fade_in";

data/app/assets/stylesheets/pageflow/entries.scss

@@ -46,8 +46,16 @@
     visibility: hidden;
     white-space: nowrap;
 
-    @include desktop {
-      left: 8%;
+    @include dir-ltr {
+      @include desktop {
+        left: 8%;
+      }
+    }
+
+    @include dir-rtl {
+      @include desktop {
+        right: 8%;
+      }
     }
 
     @include phone {
@@ -80,7 +88,7 @@
 
   .hidden_text_indicator {
     display: none;
-    left: 8%;
+    @include position-start(8%);
   }
 }
 

data/app/assets/stylesheets/pageflow/mixins.scss

@@ -12,3 +12,4 @@
 @import "mixins/label";
 @import "mixins/map_to_css";
 @import "mixins/ie_fixes";
+@import "mixins/layout_direction";

data/app/assets/stylesheets/pageflow/mixins/layout_direction.scss

@@ -0,0 +1,72 @@
+@mixin dir-ltr {
+  [dir=ltr] & { @content; }
+}
+
+@mixin dir-rtl {
+  [dir=rtl] & { @content; }
+}
+
+@mixin border-start($value) {
+  @include dir-ltr { border-left: $value; }
+  @include dir-rtl { border-right: $value; }
+}
+
+@mixin border-end($value) {
+  @include dir-ltr { border-right: $value; }
+  @include dir-rtl { border-left: $value; }
+}
+
+@mixin border-start-width($value) {
+  @include dir-ltr { border-left-width: $value; }
+  @include dir-rtl { border-right-width: $value; }
+}
+
+@mixin border-end-width($value) {
+  @include dir-ltr { border-right-width: $value; }
+  @include dir-rtl { border-left-width: $value; }
+}
+
+@mixin padding-start($value) {
+  @include dir-ltr { padding-left: $value; }
+  @include dir-rtl { padding-right: $value; }
+}
+
+@mixin padding-end($value) {
+  @include dir-ltr { padding-right: $value; }
+  @include dir-rtl { padding-left: $value; }
+}
+
+@mixin margin-start($value) {
+  @include dir-ltr { margin-left: $value; }
+  @include dir-rtl { margin-right: $value; }
+}
+
+@mixin margin-end($value) {
+  @include dir-ltr { margin-right: $value; }
+  @include dir-rtl { margin-left: $value; }
+}
+
+@mixin position-start($value) {
+  @include dir-ltr { left: $value; }
+  @include dir-rtl { right: $value; }
+}
+
+@mixin position-end($value) {
+  @include dir-ltr { right: $value; }
+  @include dir-rtl { left: $value; }
+}
+
+@mixin float-start {
+  @include dir-ltr { float: left; }
+  @include dir-rtl { float: right; }
+}
+
+@mixin float-end {
+  @include dir-ltr { float: right; }
+  @include dir-rtl { float: left; }
+}
+
+@mixin text-align-end {
+  @include dir-ltr { text-align: right; }
+  @include dir-rtl { text-align: left; }
+}

data/app/assets/stylesheets/pageflow/mixins/shadow.scss

@@ -1,3 +1,23 @@
+@mixin shadow-start($color) {
+  @include dir-ltr {
+    @include shadow($color)
+  }
+
+  @include dir-rtl {
+    @include shadow-right($color)
+  }
+}
+
+@mixin shadow-end($color) {
+  @include dir-ltr {
+    @include shadow-right($color)
+  }
+
+  @include dir-rtl {
+    @include shadow($color)
+  }
+}
+
 @mixin shadow($color) {
   /* Generated with http://www.colorzilla.com/gradient-editor */
   background: -moz-linear-gradient(left, rgba($color,1) 0%, rgba($color,0) 100%); /* FF3.6+ */

data/app/assets/stylesheets/pageflow/navigation_bar.scss

@@ -135,6 +135,7 @@
   .navigation_thumbnails a {
     position: relative;
     outline: none;
+    direction: ltr;
 
     &:focus:before {
       content: " ";
@@ -175,6 +176,10 @@
     }
   }
 
+  .navigation_volume_box {
+    direction: ltr;
+  }
+
   .navigation_share_box {
     .sub_share {
       display: none;
@@ -185,8 +190,9 @@
     min-width: 230px;
     min-height: 4px;
 
-    a.legal, a.copy {
-      float: left;
+    a.legal,
+    a.copy {
+      @include float-start;
     }
   }
 

data/app/assets/stylesheets/pageflow/navigation_mobile.scss

@@ -338,10 +338,9 @@ body {
         border-bottom: 1px solid #465b73;
 
         > a {
-          margin-left: 78px;
           text-decoration: none;
           font-size: 24px;
-          padding-top: 12px;
+          padding: 10px 15px 10px 78px;
           border: 0;
           height: 80px;
 

data/app/assets/stylesheets/pageflow/overview.scss

@@ -39,11 +39,11 @@
     z-index: 1;
 
     &.left {
-      left: 10px;
+      @include position-start(10px);
     }
 
     &.right {
-      right: 0;
+      @include position-end(0);
     }
 
     &:active {
@@ -55,8 +55,8 @@
     position: absolute;
     top: 0;
     bottom: 0;
-    left: 8%;
-    right: 120px;
+    @include position-start(8%);
+    @include position-end(4%);
     height: 555px;
     overflow: hidden;
     z-index: 2;
@@ -65,14 +65,14 @@
     @include transform(translate(200%,0));
 
     h2 {
-      margin-left: 10px;
+      @include margin-start(10px);
       margin-bottom: 0;
       margin-top: 0;
     }
 
     .close {
       position: absolute;
-      right: 0;
+      @include position-end(0);
       top: 20px;
     }
 
@@ -84,11 +84,11 @@
 
     .ov_chapter {
       position: relative;
-      float: left;
+      @include float-start;
       width: 265px;
       height: 400px;
       margin-top: 25px;
-      margin-right: 10px;
+      @include margin-end(10px);
 
       &:before, &:after {
         content: " ";
@@ -132,13 +132,12 @@
         @include perspective(700px);
         @include perspective-origin(left 50%);
 
-        display:block;
+        display: block;
 
         @include dimensions;
         position: relative;
-        margin-left: 15px;
-        margin-bottom: 5px;
 
+        margin: 0 15px 5px 15px;
 
         &.active {
           cursor: default;

data/app/assets/stylesheets/pageflow/page.scss

@@ -20,30 +20,12 @@
 
   .shadow {
     @include transition(opacity 0.2s linear, visibility 0.2s linear);
-    @include shadow(#000);
     pointer-events: none;
   }
 
   &.invert {
     color: #000;
     background-color: #fff;
-
-    .shadow {
-      @include shadow(#fff);
-    }
-  }
-
-  &.text_position_right .shadow {
-    @include shadow-right(#000);
-  }
-
-  &.invert.text_position_right  {
-    color: #000;
-    background-color: #fff;
-
-    .shadow {
-      @include shadow-right(#fff);
-    }
   }
 
   .content {
@@ -56,24 +38,12 @@
     height: 100%;
   }
 
-  .scroller > div, .content_and_background > .page_header {
-    padding: 200px 0 5% 8%;
+  .scroller > div {
     pointer-events: none;
     width: 75%;
-    @include mobile {
-      padding: 85px 12% 5% 8%;
-      width: 100%;
-    }
-  }
 
-  .content_and_background > .page_header {
-    position: relative;
-  }
-
-  .videoPage .scroller > div, .audioPage .scroller > div {
-    padding: 0px 0 5% 8%;
     @include mobile {
-      padding: 0px 12% 5% 8%;
+      width: 100%;
     }
   }
 
@@ -101,14 +71,10 @@
 
   .scroller > div {
     pointer-events: none;
-    padding: 15% 14% 5% 8%;
     width: 100%;
+
     @include mobile {
-      padding: 25% 12% 5% 8%;
       width: 100%;
-      @media (orientation: landscape) {
-        padding: 10% 12% 5% 8%;
-      }
     }
   }
 }

data/app/assets/stylesheets/pageflow/page_transitions/fade.scss

@@ -18,7 +18,6 @@ section.fade {
   .backgroundArea {
     background-color: black;
     -webkit-backface-visibility: hidden;
-    @include transition (opacity 1s ease);
   }
 
   &.invert .backgroundArea {
@@ -29,25 +28,28 @@ section.fade {
     opacity: 0;
   }
   &.animate-out-forwards .backgroundArea{
+    @include transition (opacity 1s ease);
     opacity: 1;
   }
   &.animate-in-backwards .backgroundArea{
     opacity: 0;
   }
   &.animate-out-backwards .backgroundArea{
+    @include transition (opacity 1s ease);
     opacity: 1;
   }
 
   &.active .backgroundArea {
+    @include transition (opacity 1s ease);
     opacity: 1;
   }
 
   .content {
-    @include transition(1s ease);
     -webkit-backface-visibility: hidden;
   }
 
   &.active div.content {
+    @include transition(1s ease);
     @include transform(translate3d(0,0,0));
   }
 
@@ -60,6 +62,7 @@ section.fade {
   }
   &.animate-out-forwards {
     .content {
+      @include transition(1s ease);
       @include transform(translate3d(0,-100%,0));
     }
   }
@@ -72,7 +75,8 @@ section.fade {
   }
   &.animate-out-backwards {
     .content {
+      @include transition(1s ease);
       @include transform(translate3d(0,100%,0));
     }
   }
-}
+}

data/app/assets/stylesheets/pageflow/page_transitions/fade_to_black.scss

@@ -37,7 +37,6 @@ section.fade_to_black {
     opacity: 0;
     background-color: black;
     -webkit-backface-visibility: hidden;
-    @include transition(opacity 1s ease 1s);
   }
 
   &.invert .backgroundArea {
@@ -53,7 +52,6 @@ section.fade_to_black {
   }
   &.animate-in-backwards .backgroundArea{
     opacity: 0;
-    @include transition(1s ease 1s);
   }
   &.animate-out-backwards .backgroundArea{
     opacity: 0;
@@ -66,16 +64,10 @@ section.fade_to_black {
   }
 
   .content {
-    @include transition(1s ease);
     -webkit-backface-visibility: hidden;
     opacity: 0;
   }
 
-  &.active .backgroundArea {
-    opacity: 1;
-    @include transition(1s ease 1s);
-  }
-
   &.active div.content {
     opacity: 1;
     @include transition(1s ease 1s);
@@ -95,7 +87,6 @@ section.fade_to_black {
   &.animate-in-backwards {
     .content {
       opacity: 0;
-      @include transition(1s ease 1s);
     }
   }
   &.animate-out-backwards {
@@ -104,4 +95,4 @@ section.fade_to_black {
       @include transition(1s ease);
     }
   }
-}
+}