pageflow 13.0.0.beta6 → 13.0.0.beta7

data/app/assets/stylesheets/pageflow/editor/emulation_mode_button.scss

@@ -0,0 +1,78 @@
+.emulation_mode_button {
+  @include background-icon-right($color: #444, $font-size: 16px, $top: 4px);
+  @include up-open-icon;
+  float: left;
+  height: 25px;
+  width: 100px;
+
+  &-menu {
+    background-color: #fff;
+    border: solid 1px #aaa;
+    padding: 1px;
+    position: absolute;
+    bottom: 1px;
+    left: 1px;
+    visibility: hidden;
+    width: 200px;
+    z-index: 1;
+  }
+
+  &-menu_header {
+    margin: 3px 6px;
+  }
+
+  &:hover .emulation_mode_button-menu {
+    visibility: visible;
+  }
+
+  &-display {
+    @include background-icon-center($color: #444, $font-size: 16px, $left: 15px);
+    display: none;
+    padding: 5px 10px 5px 30px;
+
+    &.active {
+      display: block;
+    }
+  }
+
+  &-menu_item {
+    @include background-icon-center($color: #444, $font-size: 16px, $left: 15px, $top: 15px);
+  }
+
+  &-menu_link {
+    padding: 7px 35px 7px 35px;
+    display: block;
+
+    &:hover {
+      background-color: #eee;
+    }
+  }
+
+  .active .emulation_mode_button-menu_link {
+    @include background-icon-right($color: #444, $font-size: 12px, $right: 15px, $top: 9px);
+    @include fa-check-icon;
+    pointer-events: none;
+  }
+
+  &-disabled_hint {
+    display: none;
+    font-size: 10px;
+  }
+
+  .disabled {
+    pointer-events: none;
+    opacity: 0.3;
+
+    .emulation_mode_button-disabled_hint {
+      display: block;
+    }
+  }
+
+  &-phone {
+    @include mobile-icon;
+  }
+
+  &-desktop {
+    @include monitor-icon;
+  }
+}

data/app/assets/stylesheets/pageflow/editor/entry_preview.scss

@@ -0,0 +1,41 @@
+.entry_preview {
+  background-color: #222;
+  height: 100%;
+
+  .container {
+    position: relative;
+    height: 100%;
+  }
+
+  &.emulation_mode_phone {
+    > .container {
+      width: 400px;
+      height: 700px;
+      margin: auto;
+      top: 30px;
+      box-shadow: rgba(0, 0, 0, 0.5) 0px 1px 4px 0px;
+    }
+
+    .scroll_next_indicator {
+      display: none;
+    }
+  }
+
+  .navigation_disabled_hint {
+    background-color: rgba(0, 0, 0, 0.7);
+    color: #fff;
+    position: absolute;
+    width: 300px;
+    top: 30%;
+    left: 50%;
+    @include transform(translateX(-50%));
+    padding: 10px;
+    border-radius: 5px;
+    z-index: 10;
+    pointer-events: none;
+    opacity: 0;
+    @include transition(opacity 0.2s);
+    text-align: center;
+    font-size: 12px;
+  }
+}

data/app/assets/stylesheets/pageflow/editor/file_stages.scss

@@ -6,11 +6,19 @@
 }
 
 .file_stage_item {
-  @include background-icon-center($left: 20px, $color: #bbb);
-  margin-left: -60px;
-  padding: 10px 0 5px 60px;
   white-space: normal;
 
+  &.indented {
+    @include background-icon-center($left: 20px, $color: #bbb);
+    padding: 10px 0 5px 60px;
+    margin-left: -60px;
+  }
+
+  &.stand_alone {
+    @include background-icon-center($left: 31px, $color: #bbb);
+    padding-left: 70px;
+}
+
   &.action_required,
   &.active {
     @include background-icon-color(#444);

data/app/assets/stylesheets/pageflow/editor/help.scss

@@ -158,21 +158,11 @@
 }
 
 .editor .help_button {
-  @include background-icon-left($color: #a0c4e0, $font-size: 16px, $left: 5px);
+  @include background-icon-right($color: #a0c4e0, $font-size: 16px, $right: 5px, $top: 5px);
   @include help-circled-icon;
 
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  left: 0;
+  padding: 5px 30px 0 5px;
+  float: right;
   height: 20px;
-  padding: 5px 5px 0px 30px;
-
-  font-family: Helvetica, "Sans-Serif";
-  font-size: 13px;
-
-  border-top: solid 1px #aaa;
-
-  background-color: #fff;
   cursor: pointer;
-}
+}

data/app/assets/stylesheets/pageflow/editor/help_image.scss

@@ -0,0 +1,5 @@
+.help_image {
+  border: solid 1px #444;
+  display: block;
+  margin: 5px auto;
+}

data/app/assets/stylesheets/pageflow/editor/info_box.scss

@@ -0,0 +1,5 @@
+.info_box {
+  p {
+    margin-bottom: 1em;
+  }
+}

data/app/assets/stylesheets/pageflow/editor/inputs.scss

@@ -1,2 +1,3 @@
 @import "./inputs/file_input";
+@import "./inputs/file_processing_state_display";
 @import "./inputs/reference";

data/app/assets/stylesheets/pageflow/editor/inputs/file_processing_state_display.scss

@@ -0,0 +1,18 @@
+.file_processing_state_display {
+  position: relative;
+  margin-top: -6px;
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 62px;
+    height: 100%;
+    background-color: #eee;
+  }
+
+  &-empty {
+    display: none;
+  }
+}

data/app/assets/stylesheets/pageflow/editor/sidebar_footer.scss

@@ -0,0 +1,12 @@
+.sidebar_footer {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+
+  font-family: Helvetica, "Sans-Serif";
+  font-size: 13px;
+
+  border-top: solid 1px #aaa;
+  background-color: #fff;
+}

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

@@ -20,13 +20,23 @@
     opacity: 0;
     @include transition(opacity 1s ease);
 
+    &.visible.attract,
+    &.animate {
+      @include animation(bounce 0.5s ease);
+
+      .widget_phone_horizontal_slideshow_mode_present & {
+        @include phone {
+          @include animation-name(bounce_x)
+        }
+      }
+    }
+
     &.visible {
       opacity: 1;
       @include transition(opacity 0.5s ease 0.5s);
 
       &.attract {
-        @include animation(bounce 0.5s ease);
-        @include animation-iteration-count(3)
+        @include animation-iteration-count(3);
       }
     }
 
@@ -35,10 +45,6 @@
       @include transition(opacity 0.5s ease);
       top: auto; /* collision with .hidden class from application.css.scss */
     }
-
-    &.animate {
-      @include animation(bounce 0.5s ease);
-    }
   }
 
   .scroll_indicator {
@@ -62,6 +68,10 @@
       right: 15px;
     }
 
+    .emulation_mode_phone & {
+      display: none;
+    }
+
     &.visible {
       pointer-events: all;
       visibility: visible;
@@ -78,12 +88,25 @@
       visibility: hidden;
     }
 
+    &.hidden_by_scoll_indicator_mode {
+      display: none;
+    }
+
     .bigScreen & {
       opacity: 0;
       visibility: 0;
       pointer-events: none;
       z-index: 0;
     }
+
+    &-swipe,
+    .has_mobile_platform &-scroll {
+      display: none;
+    }
+
+    .has_mobile_platform &-swipe {
+      display: inline;
+    }
   }
 
   .hidden_text_indicator {

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

@@ -20,7 +20,8 @@ $simulated-media-queries: false !default;
     }
   }
   @else {
-    @media screen and (max-width: 700px) {
+    @media screen and (orientation: portrait) and (max-width: 500px),
+           screen and (orientation: landscape) and (max-height: 500px) {
       @content;
     }
   }
@@ -33,7 +34,8 @@ $simulated-media-queries: false !default;
     }
   }
   @else {
-    @media screen and (min-width: 701px) {
+    @media screen and (orientation: portrait) and (min-width: 501px),
+           screen and (orientation: landscape) and (min-height: 501px) {
       @content;
     }
   }
@@ -89,4 +91,4 @@ $simulated-media-queries: false !default;
       @content;
     }
   }
-}
+}

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

@@ -272,7 +272,7 @@
 @mixin fa-angle-double-up-icon { @include fontawesome-icon("\f102"); }
 @mixin fa-angle-double-down-icon { @include fontawesome-icon("\f103"); }
 @mixin fa-angle-left-icon { @include fontawesome-icon("\f104"); }
-@mixin fa-angle-right-icon { @include fontawesome-icon("\f105"); }
+@mixin fa-angle-right-icon($args...) { @include fontawesome-icon("\f105", $args...); }
 @mixin fa-angle-up-icon { @include fontawesome-icon("\f106"); }
 @mixin fa-angle-down-icon($args...) { @include fontawesome-icon("\f107", $args...); }
 @mixin fa-desktop-icon { @include fontawesome-icon("\f108"); }

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

@@ -109,6 +109,10 @@ body {
     @include transform(translate3d(0, -100px, 0));
     @include transition(transform 0.4s ease, visibility 0.4s, right 250ms);
 
+    .widget_phone_horizontal_slideshow_mode_present & {
+      @include fa-arrow-up-icon;
+    }
+
     &.is_visible {
       visibility: visible;
       @include transform(translate3d(0, 0, 0));
@@ -375,4 +379,4 @@ body {
 
 .hideText .navigation_mobile .menu.index {
   display: none;
- }
+ }

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

@@ -5,9 +5,3 @@
 @import "./page_transitions/crossfade";
 
 @import "./page_transitions/cut";
-
-@import "./page_transitions/scroll_right";
-@import "./page_transitions/scroll_left";
-
-@import "./page_transitions/scroll_over_from_right";
-@import "./page_transitions/scroll_over_from_left";

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

@@ -4,6 +4,10 @@ section.crossfade {
   @include transition(1s ease);
   -webkit-backface-visibility: hidden;
 
+  &-fast {
+    @include transition(0.5s ease);
+  }
+
   .blackLayer {
     display: none;
   }
@@ -26,4 +30,4 @@ section.crossfade {
   &.active {
     opacity: 1;
   }
-}
+}

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

@@ -5,7 +5,6 @@ section.page {
 }
 
 section.fade {
-
   background-color: transparent;
 
   &.invert {
@@ -15,6 +14,7 @@ section.fade {
   .blackLayer {
     display: none;
   }
+
   .backgroundArea {
     background-color: black;
     -webkit-backface-visibility: hidden;
@@ -24,23 +24,14 @@ section.fade {
     background-color: white;
   }
 
-  &.animate-in-forwards .backgroundArea {
-    opacity: 0;
-  }
-  &.animate-out-forwards .backgroundArea{
-    @include transition (opacity 1s ease);
-    opacity: 1;
-  }
-  &.animate-in-backwards .backgroundArea{
+  &.animate-in-forwards .backgroundArea,
+  &.animate-in-backwards .backgroundArea {
     opacity: 0;
   }
-  &.animate-out-backwards .backgroundArea{
-    @include transition (opacity 1s ease);
-    opacity: 1;
-  }
 
+  &.animate-out-forwards .backgroundArea,
+  &.animate-out-backwards .backgroundArea,
   &.active .backgroundArea {
-    @include transition (opacity 1s ease);
     opacity: 1;
   }
 
@@ -48,35 +39,52 @@ section.fade {
     -webkit-backface-visibility: hidden;
   }
 
-  &.active div.content {
-    @include transition(1s ease);
-    @include transform(translate3d(0,0,0));
+  &.animate-in-forwards,
+  &.animate-in-backwards {
+    z-index: 2;
   }
 
-  &.animate-in-forwards {
-    z-index: 2;
+  @mixin define($translate, $duration) {
+    &.active .backgroundArea,
+    &.animate-out-forwards .backgroundArea,
+    &.animate-out-backwards .backgroundArea {
+      @include transition(opacity $duration ease);
+    }
 
-    .content {
-      @include transform(translate3d(0,100%,0));
+    &.active .content,
+    &.animate-out-forwards .content,
+    &.animate-out-backwards .content {
+      @include transition($duration ease);
     }
-  }
-  &.animate-out-forwards {
-    .content {
-      @include transition(1s ease);
-      @include transform(translate3d(0,-100%,0));
+
+    &.animate-in-forwards .content,
+    &.animate-out-backwards .content {
+      @include transform(call($translate, 100%));
     }
-  }
-  &.animate-in-backwards {
-    z-index: 2;
 
-    .content {
-      @include transform(translate3d(0,-100%,0));
+    &.animate-out-forwards .content,
+    &.animate-in-backwards .content {
+      @include transform(call($translate, -100%));
     }
   }
-  &.animate-out-backwards {
-    .content {
-      @include transition(1s ease);
-      @include transform(translate3d(0,100%,0));
-    }
+
+  @function translateV($value) {
+    @return translate3d(0, $value, 0);
+  }
+
+  @function translateH($value) {
+    @return translate3d($value, 0, 0);
+  }
+
+  &-v {
+    @include define("translateV", 1s);
+  }
+
+  &-h {
+    @include define("translateH", 0.5s);
+  }
+
+  &.active div.content {
+    @include transform(translate3d(0, 0, 0));
   }
 }