pageflow 15.2.0 → 15.5.0

data/app/assets/javascripts/pageflow/editor/vendor.js

@@ -1,3 +1,4 @@
+
 //= require i18n
 //= require i18n/translations
 

data/app/assets/javascripts/pageflow/vendor.js

@@ -2,15 +2,17 @@
 // This file is meant to hold code we don't develop and/or rarely change.
 // It means this asset will stay cached for much longer.
 
-//= require i18n
-//= require jquery
-//= require jquery-ui/widget
-//= require jquery_ujs
-//= require jquery.fullscreen
-//= require jquery.placeholder
+// = require polyfills/bind
+// = require ./asset_urls
 
-//= require iscroll
-//= require audio5.min
+// = require i18n
+// = require jquery
+// = require jquery-ui/widget
+// = require jquery_ujs
+// = require jquery.fullscreen
+// = require jquery.placeholder
 
-//= require react
-//= require backbone-rails
+// = require iscroll
+// = require audio5.min
+
+// = require backbone-rails

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

@@ -18,13 +18,6 @@ body {
   -ms-touch-action: none;
 }
 
-.ios7.ipad body {
-  @media screen and (orientation: landscape) {
-    position: fixed;
-    margin-top: 0px;
-  }
-}
-
 body.js, .js #outer_wrapper {
   overflow: hidden;
 }

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

@@ -1,5 +1,7 @@
 @import "bourbon";
 
+@import "pageflow/fonts";
+
 @import "pageflow/jquery_ui";
 @import "pageflow/ui";
 @import "pageflow/animations";
@@ -22,7 +24,7 @@
   @import "./change_theme";
   @extend %pageflow-ui;
 
-  font-family: Helvetica, "Sans-Serif";
+  font-family: Helvetica, Arial, "Sans-Serif";
   font-size: 13px;
 
   padding: 0;
@@ -129,8 +131,9 @@
     top: 0;
     left: 0;
     right: 0;
-    bottom: 25px;
+    bottom: 31px;
     overflow: auto;
+    overflow-y: scroll;
   }
 }
 

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

@@ -4,6 +4,10 @@
 
 // See entry_type/scrolled/package/src/editor/buttons.module.css
 
-.icon_button {
+.primary_icon_button {
   @include icon-button;
 }
+
+.secondary_icon_button {
+  @include icon-button(#888);
+}

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

@@ -31,7 +31,7 @@ $drop-down-button-menu-border-color: #aaa !default;
   &.is_visible {
     @include transition(visibility 0ms, opacity 100ms);
     visibility: visible;
-    pointer-events: all;
+    pointer-events: auto;
     opacity: 1;
   }
 }

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

@@ -1,78 +1,67 @@
 .emulation_mode_button {
-  @include background-icon-right($color: #444, $font-size: 16px, $top: 4px);
-  @include up-open-icon;
+  position: relative;
   float: left;
-  height: 25px;
-  width: 100px;
+  cursor: pointer;
 
-  &-menu {
-    background-color: #fff;
-    border: solid 1px #aaa;
-    padding: 1px;
-    position: absolute;
-    bottom: 1px;
-    left: 1px;
-    visibility: hidden;
-    width: 200px;
-    z-index: 1;
+  &-wrapper {
+    width: 110px;
+    height: 30px;
   }
 
-  &-menu_header {
-    margin: 3px 6px;
+  &-desktop_icon,
+  &-phone_icon {
+    @include background-icon-center($color: #444, $font-size: 16px);
+    width: 40px;
+    height: 100%;
   }
 
-  &:hover .emulation_mode_button-menu {
-    visibility: visible;
+  &-desktop_icon {
+    @include monitor-icon;
+    float: left;
   }
 
-  &-display {
-    @include background-icon-center($color: #444, $font-size: 16px, $left: 15px);
-    display: none;
-    padding: 5px 10px 5px 30px;
-
-    &.active {
-      display: block;
-    }
+  &-phone_icon {
+    @include mobile-icon;
+    float: right;
   }
 
-  &-menu_item {
-    @include background-icon-center($color: #444, $font-size: 16px, $left: 15px, $top: 15px);
+  &-track,
+  &-thumb {
+    position: absolute;
+    background-color: #1976d2;
   }
 
-  &-menu_link {
-    padding: 7px 35px 7px 35px;
-    display: block;
-
-    &:hover {
-      background-color: #eee;
-    }
+  &-track {
+    top: 8px;
+    left: 40px;
+    border-radius: 7px;
+    opacity: 0.5;
+    width: 34px;
+    height: 14px;
   }
 
-  .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;
+  &-thumb {
+    top: 5px;
+    left: 37px;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   }
 
-  &-disabled_hint {
-    display: none;
-    font-size: 10px;
+  &.active .emulation_mode_button-thumb {
+    transform: translateX(20px);
   }
 
-  .disabled {
-    pointer-events: none;
-    opacity: 0.3;
-
-    .emulation_mode_button-disabled_hint {
-      display: block;
+  &.disabled {
+    .emulation_mode_button-wrapper {
+      opacity: 0.4;
     }
-  }
 
-  &-phone {
-    @include mobile-icon;
-  }
-
-  &-desktop {
-    @include monitor-icon;
+    .emulation_mode_button-track,
+    .emulation_mode_button-thumb {
+      background-color: #000;
+    }
   }
 }

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

@@ -158,10 +158,10 @@
 }
 
 .editor .help_button {
-  @include background-icon-right($color: #a0c4e0, $font-size: 16px, $right: 5px, $top: 5px);
+  @include background-icon-right($color: #a0c4e0, $font-size: 16px, $right: 5px, $top: 7px);
   @include help-circled-icon;
 
-  padding: 5px 30px 0 5px;
+  padding: 7px 30px 0 5px;
   float: right;
   height: 20px;
   cursor: pointer;

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

@@ -37,7 +37,7 @@
   &:hover .dropdown {
     @include transition(visibility 0ms, opacity 100ms, top 200ms);
     visibility: visible;
-    pointer-events: all;
+    pointer-events: auto;
 
     top: 18px;
     opacity: 1;

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

@@ -4,7 +4,7 @@
   right: 0;
   left: 0;
 
-  font-family: Helvetica, "Sans-Serif";
+  font-family: Helvetica, Arial, "Sans-Serif";
   font-size: 13px;
 
   border-top: solid 1px #aaa;

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

@@ -73,7 +73,7 @@
     }
 
     &.visible {
-      pointer-events: all;
+      pointer-events: auto;
       visibility: visible;
     }
 

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

@@ -1,4 +1,7 @@
 .loading_spinner {
+  // Ensure loading spinner does not cover page if JS is
+  // disabled. Will be overridden by
+  // layouts/pageflow_paged/_loading_spinner_inline_script.html.erb
   display: none;
 
   position: absolute;
@@ -17,4 +20,4 @@
     @include transition(opacity 0.5s linear);
     opacity: 0;
   }
-}
+}

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

@@ -75,7 +75,7 @@ body {
     background-position: -45px 0px;
     background-size: auto 100%;
     right: 10px;
-    pointer-events: all;
+    pointer-events: auto;
     cursor: pointer;
     @include transition(opacity 500ms, right 250ms);
 
@@ -99,7 +99,7 @@ body {
     @include background-icon-center($color: #ddd);
     @include fa-arrow-left-icon;
     cursor: pointer;
-    pointer-events: all;
+    pointer-events: auto;
     position: absolute;
     top: 16px;
     right: 60px;
@@ -277,7 +277,7 @@ body {
   }
 
   &.active {
-    pointer-events: all;
+    pointer-events: auto;
     visibility: visible;
 
     &:before {
@@ -293,7 +293,7 @@ body {
       right: 200px;
 
       &.sharing, &.imprint {
-        pointer-events: all;
+        pointer-events: auto;
         opacity: 1;
       }
     }

data/app/assets/stylesheets/pageflow/themes/default/anchors.scss

@@ -12,7 +12,7 @@ $anchor-external-links-icon: false !default;
   }
 
   text-decoration: none;
-  pointer-events: all;
+  pointer-events: auto;
   position: relative;
   margin-left: 6px;
   margin-right: 6px;

data/app/assets/stylesheets/pageflow/themes/default/logo/variant/watermark.scss

@@ -111,7 +111,7 @@ $logo-watermark-mobile-height: null !default;
   }
 
   .header.near_top .header_logo {
-    pointer-events: all;
+    pointer-events: auto;
   }
 
   @if $logo-watermark-variant-fade-in-near-top == "first-page" {

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

@@ -8,6 +8,9 @@ $page-typography: () !default;
 /// Typography for content text.
 $page-content-text-typography: () !default;
 
+/// Typography for content text in phone layout.
+$page-content-text-phone-typography: () !default
+
 /// Base font size for page content
 $page-content-font-size: 1em !default;
 
@@ -62,6 +65,10 @@ $page-content-list-indent: 40px !default;
         line-height: $page-content-text-line-height
       )
     );
+
+    @include phone {
+      @include typography($page-content-text-phone-typography);
+    }
   }
 
   .page_text > .paragraph ul,

data/app/assets/stylesheets/pageflow/themes/default/page/anchors.scss

@@ -15,7 +15,7 @@ $page-anchor-typography: () !default;
   .page_text a {
     @extend %anchor;
     color: $page-anchor-color;
-    pointer-events: all;
+    pointer-events: auto;
     margin-right: 0;
     @include typography($page-anchor-typography)
   }

data/app/assets/stylesheets/pageflow/themes/default/player_controls/classic/control_bar.scss

@@ -61,7 +61,7 @@ $classic-player-controls-timestamp-position: "left" !default;
 
     background-color: $classic-player-controls-background-color;
     border: $classic-player-controls-border-width solid $classic-player-controls-border-color;
-    pointer-events: all;
+    pointer-events: auto;
 
     &:before {
       content: "";

data/app/assets/stylesheets/pageflow/themes/default/player_controls/classic/info_box.scss

@@ -80,7 +80,7 @@ $classic-player-controls-info-box-border-radius: 4px !default;
     pointer-events: none;
 
     a {
-      pointer-events: all;
+      pointer-events: auto;
     }
 
     margin: 0;

data/app/assets/stylesheets/pageflow/themes/default/player_controls/shared/menu_bar.scss

@@ -15,7 +15,7 @@ $player-controls-quality-menu-annotation-color: #ff0000 !default;
     position: absolute;
     bottom: 0;
     z-index: 10;
-    pointer-events: all;
+    pointer-events: auto;
 
     @include transition(opacity 0.5s, visibility 0.5s);
 
@@ -98,7 +98,7 @@ $player-controls-quality-menu-annotation-color: #ff0000 !default;
   &-menu_bar_button-sub_menu_visible .player_controls-menu_bar_button_sub_menu {
     visibility: visible;
     opacity: 1;
-    pointer-events: all;
+    pointer-events: auto;
     @include transition(none);
   }
 

data/app/assets/stylesheets/pageflow/themes/default/player_controls/slim/control_bar.scss

@@ -53,7 +53,7 @@ $slim-player-controls-control-bar-text-phone-typography: () !default;
   }
 
   &-container-playing %player_controls-control_bar {
-    pointer-events: all;
+    pointer-events: auto;
   }
 
   &-control_bar_text {
@@ -248,7 +248,7 @@ $slim-player-controls-control-bar-text-phone-typography: () !default;
   &-control_bar_text,
   &-play_button,
   &-skip_button {
-    pointer-events: all;
+    pointer-events: auto;
   }
 
   &-progress_bar,

data/app/assets/stylesheets/pageflow/themes/default/player_controls/slim/info_box.scss

@@ -74,7 +74,7 @@ $slim-player-controls-info-box-header-typography: () !default;
     pointer-events: none;
 
     a {
-      pointer-events: all;
+      pointer-events: auto;
     }
 
     position: absolute;

data/app/assets/stylesheets/pageflow/themes/default/player_controls/slim/quality_menu.scss

@@ -12,7 +12,7 @@ $slim-player-controls-quality-menu-annotation-color: #ff0000 !default;
     bottom: 0;
     right: 10px;
     z-index: 10;
-    pointer-events: all;
+    pointer-events: auto;
 
     @include transition(opacity 0.5s, visibility 0.5s);
   }
@@ -88,7 +88,7 @@ $slim-player-controls-quality-menu-annotation-color: #ff0000 !default;
   &-menu_bar_button-sub_menu_visible .player_controls-menu_bar_button_sub_menu {
     visibility: visible;
     opacity: 1;
-    pointer-events: all;
+    pointer-events: auto;
     @include transition(none);
   }