pageflow 14.0.0 → 14.1.0

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

@@ -49,11 +49,11 @@
       });
 
       var shareBox = $('.navigation_share_box', element),
-          links = $('> a', shareBox);
+          links = $('.share_box_icons > a', shareBox);
       shareBox.shareMenu({
         subMenu: $('.sub_share', element),
         links: links,
-        insertAfter: links.last(),
+        insertAfter: $('.share_box_icons'),
         closeOnMouseLeaving: shareBox
       });
 

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

@@ -51,7 +51,7 @@
 
       if(!!$closeOnMouseLeaving) {
         $closeOnMouseLeaving.on('mouseleave', function() {
-          $links.removeClass('active');
+          $links.removeClass('active').blur();
           $(this).find('.button').removeClass('pressed');
           $subMenu.hide();
         });

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

@@ -1,3 +1,5 @@
+// scss-lint:disable IdSelector
+
 html, body, #outer_wrapper {
   margin: 0;
   padding: 0;
@@ -27,6 +29,11 @@ body.js, .js #outer_wrapper {
   overflow: hidden;
 }
 
+// Safari sets background color of fullscreen elements to white.
+#outer_wrapper:-webkit-full-screen {
+  background-color: transparent;
+}
+
 // Apps like Twitter and Facebook displays a toolbar at the bottom of
 // the screen on iOS phone which hides parts of the browser
 // viewport. Normally this is hidden once the user scrolls, but since

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

@@ -7,6 +7,7 @@
     @include background-icon-center($font-size: 12px);
     @include hidden-text;
 
+    margin: 0;
     display: inline-block;
     width: 25px;
     height: 25px;
@@ -19,7 +20,7 @@
     }
   }
 
-  .wysihtml5-command-active {
+  > .wysihtml5-command-active {
     border: solid 1px #bbb;
     background-color: #ddd;
   }
@@ -37,16 +38,94 @@
     @include font-underline-icon;
   }
 
+  [data-wysihtml5-command="insertOrderedList"] {
+    @include font-list-ol-icon;
+  }
+
+  [data-wysihtml5-command="insertUnorderedList"] {
+    @include font-list-ul-icon;
+  }
+
   [data-wysihtml5-command="createLink"] {
     @include link-icon;
 
-    &.wysihtml5-command-active + .dialog [data-wysihtml5-dialog-action="cancel"] {
-      display: none;
+    &.wysihtml5-command-active + .dialog {
+      [data-wysihtml5-dialog-action="cancel"] {
+        display: none;
+      }
+
+      [data-wysihtml5-command="removeLink"] {
+        display: block;
+      }
     }
   }
 
+  [data-wysihtml5-command="removeLink"] {
+    display: none;
+    float: right;
+    margin-top: 8px;
+  }
+
   .wysihtml5-command-dialog-opened {
-    margin-bottom: 83px;
+    margin-bottom: 133px;
+  }
+
+  &.fragment_link_panel_active {
+    .wysihtml5-command-dialog-opened {
+      margin-bottom: 143px;
+    }
+
+    .fragment_link_panel {
+      display: block;
+    }
+
+    .url_link_panel {
+      display: none;
+    }
+  }
+
+  .fragment_link_panel {
+    display: none;
+    margin: 0 -2px;
+
+    label {
+      margin: -1px 2px;
+    }
+  }
+
+  .link_type_select {
+    label {
+      display: inline;
+    }
+  }
+
+  .open_in_new_tab_section {
+    position: relative;
+    margin: 4px -4px 0 0;
+    padding-right: 20px;
+
+    label {
+      z-index: 4;
+    }
+
+    .inline_help {
+      top: -3px;
+    }
+  }
+
+  .internal {
+    display: none;
+  }
+
+  label input {
+    display: inline;
+    width: 15px;
+    margin: 5px 0;
+    vertical-align: middle;
+
+    &:focus {
+      outline: none;
+    }
   }
 
   .dialog {
@@ -59,7 +138,7 @@
     background-color: #fff;
     border: solid 1px #444;
 
-    a {
+    .button {
       @include button;
       padding: 5px 10px;
       margin-top: 5px;

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

@@ -19,4 +19,6 @@
 
 @mixin font-italic-icon         { @include fontawesome-icon("\f033");   }
 @mixin font-underline-icon      { @include fontawesome-icon("\f0cd");   }
-@mixin font-bold-icon           { @include fontawesome-icon("\f032");   }
+@mixin font-bold-icon           { @include fontawesome-icon("\f032");   }
+@mixin font-list-ol-icon        { @include fontawesome-icon("\f0cb");   }
+@mixin font-list-ul-icon        { @include fontawesome-icon("\f0ca");   }

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

@@ -137,6 +137,10 @@ body {
     }
   }
 
+  &.without_sharing_button .menu.sharing {
+    display: none;
+  }
+
   .overview_mobile, .imprint_mobile, .sharing_mobile {
     position: absolute;
     top: 0;
@@ -338,9 +342,6 @@ body {
     }
 
     .sharing_mobile {
-      .wrapper {
-        top: 0;
-      }
       li {
         width: 200px;
         border-bottom: 1px solid #465b73;
@@ -348,32 +349,25 @@ body {
         > a {
           text-decoration: none;
           font-size: 24px;
-          padding: 10px 15px 10px 78px;
+          padding: 10px 10px 10px 72px;
           border: 0;
           height: 80px;
 
-          &:before {
-            content: "";
+          svg {
             position: absolute;
-            width: 42px;
-            height: 37px;
-            background-size: 100% auto;
-            left: 30px;
-            top: 30px;
+            left: 25px;
+            top: 36px;
+            width: 30px;
+            height: 30px;
           }
 
-          &.facebook:before {
-            background-position: center top;
-          }
-          &.twitter:before {
-            background-position: center 122px;
-          }
-          &.google:before {
-            background-position: center bottom;
+          p {
+            padding-top: 3px;
           }
         }
       }
     }
+
     .sub_share {
       display: none;
     }

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

@@ -1,21 +1,23 @@
 div.sub_share {
   display: none;
-}
+  width: 210px;
+  margin: 15px auto 0;
 
-.navigation_share_box div.sub_share a, .navigation_mobile div.sub_share a {
-  width: 45%;
-  padding: 5px 3px;
-  color: white;
-  font-family: SourceSansPro;
-  font-size: 13px;
-  text-align: center;
-  margin: 20px 1% 0;
-  background-color: rgba(0, 0, 0, 0.3);
-  display: inline-block;
-  text-decoration: none;
+  a {
+    line-height: 1;
+    width: 100px;
+    padding: 7px 0;
+    color: #ffffff;
+    font-family: inherit;
+    font-size: 13px;
+    text-align: center;
+    background-color: rgba(0, 0, 0, 0.3);
+    display: inline-block;
+    text-decoration: none;
 
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.6);
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.6);
+    }
   }
 }
 

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

@@ -22,6 +22,7 @@
 @import "./page";
 @import "./indicators";
 @import "./navigation";
+@import "./navigation_share_box";
 @import "./mobile_navigation";
 @import "./background_media_unmute_button";
 @import "./multimedia_alert";

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

@@ -97,8 +97,8 @@ $mobile-navigation-pictogram-visibility: $standard-page-pictogram-visibility !de
   .sharing_mobile a {
     color: $mobile-navigation-share-link-color;
 
-    &::before {
-      background-image: image-url("#{$image-dir}/sharing_icons_sprite.png");
+    svg {
+      fill: $mobile-navigation-share-link-color;
     }
   }
 }

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

@@ -54,7 +54,6 @@ $navigation-current-page-marker-color: $main-color !default;
   @import "./navigation/icons/icon_font";
   @import "./navigation/icons/sprite";
   @import "./navigation/menu_boxes";
-  @import "./navigation/share_box";
   @import "./navigation/credits";
   @import "./navigation/separator_lines";
   @import "./navigation/volume_control";
@@ -100,3 +99,10 @@ $navigation-current-page-marker-color: $main-color !default;
   background-color: $navigation-bar-background-color;
   background-image: $navigation-background-image;
 }
+
+body.has_no_phone_platform {
+  a.share.whats_app,
+  a.share.telegram {
+    display: none !important;
+  }
+}

data/app/assets/stylesheets/pageflow/themes/default/navigation/dimensions.scss

@@ -2,14 +2,15 @@
 $navigation-bar-padding-top: null !default;
 
 $top-height: 44px;
-$item-height: 44px;
+$top-item-height: 44px;
 $bottom-height: 268px;
+$bottom-item-height: 36px;
 
 $scroll-indicator-height: 30px;
 $scroll-indicator-offset: 35px;
 
 @if $navigation-display-header-button {
-  $top-height: $top-height + $item-height;
+  $top-height: $top-height + $top-item-height;
 } @else {
   .menu_li {
     display: none;
@@ -18,10 +19,10 @@ $scroll-indicator-offset: 35px;
 
 @if not $navigation-display-share-button and
     not $navigation-display-hide-text-button {
-  $bottom-height: 196px;
+  $bottom-height: $bottom-height - 2 * $bottom-item-height;
 } @elseif not $navigation-display-share-button or
     not $navigation-display-hide-text-button{
-  $bottom-height: 232px;
+  $bottom-height: $bottom-height - $bottom-item-height;
 }
 
 @if not $navigation-display-share-button {
@@ -62,15 +63,15 @@ $scroll-indicator-offset: 35px;
 
   @mixin top_positions($top-height) {
     .navigation_bar_top {
-      height: $top-height + $item-height;
+      height: $top-height + $top-item-height;
     }
 
     .scroller {
-      top: $top-height + $item-height;
+      top: $top-height + $top-item-height;
     }
 
     .navigation_scroll_indicator.top {
-      top: $top-height + $item-height - $scroll-indicator-offset;
+      top: $top-height + $top-item-height - $scroll-indicator-offset;
     }
   }
 
@@ -78,10 +79,34 @@ $scroll-indicator-offset: 35px;
 
   &.with_home_button,
   &.with_overview_button {
-    @include top_positions($top-height + $item-height);
+    @include top_positions($top-height + $top-item-height);
   }
 
   &.with_home_button.with_overview_button {
-    @include top_positions($top-height + 2 * $item-height);
+    @include top_positions($top-height + 2 * $top-item-height);
+  }
+
+  // dynamically added class when no share providers are configured
+  &.without_sharing_button,
+  &.mobile_sharing_only {
+    @if $navigation-display-share-button {
+      .navigation_menu.share {
+        display: none;
+      }
+
+      .navigation_bar_bottom {
+        height: $bottom-height - $bottom-item-height;
+      }
+
+      .scroller {
+        bottom: $bottom-height - $bottom-item-height;
+      }
+
+      .navigation_scroll_indicator {
+        &.bottom {
+          bottom: $bottom-height - $scroll-indicator-offset - $bottom-item-height;
+        }
+      }
+    }
   }
 }

data/app/assets/stylesheets/pageflow/themes/default/navigation/icons/icon_font.scss

@@ -6,10 +6,7 @@
   $active-button-icon-color,
   $deactivated-button-icon-color,
 
-  $scroll-indicator-color: #888,
-
-  $share-icon-color: #fff,
-  $active-share-icon-color: $main-color
+  $scroll-indicator-color: #888
 ) {
 
   .navigation_bullet,
@@ -163,55 +160,6 @@
     }
   }
 
-  .navigation_share_box {
-    a {
-      text-align: center;
-
-      p {
-        font-family: SourceSansPro;
-        font-size: 12px;
-      }
-    }
-
-    .share_google,
-    .share_facebook,
-    .share_twitter {
-      font-size: 1.5em;
-
-      &:before {
-        font-family: "FontAwesome";
-        color: $share-icon-color;
-        text-shadow: none;
-      }
-    }
-
-    a:hover {
-      p {
-        color: $active-share-icon-color;
-      }
-
-      .share_google,
-      .share_facebook,
-      .share_twitter {
-        &:before {
-          color: $active-share-icon-color;
-        }
-      }
-    }
-
-    .share_google {
-      @include fa-google-plus-icon;
-    }
-
-    .share_facebook {
-      @include fa-facebook-icon;
-    }
-
-    .share_twitter {
-      @include fa-twitter-icon;
-    }
-  }
-
   .volume-control {
     @include background-icon-left(
       $left: -21px,