pageflow 0.10.0 → 0.11.0

data/app/assets/stylesheets/pageflow/page_types/video/content_hiding.scss

@@ -0,0 +1,32 @@
+.js .videoPage {
+  .scroller {
+    @include transition(opacity 0.2s linear);
+  }
+
+  .shadow,
+  .scroller {
+    @include transition-delay(3s);
+
+    &.is_paused {
+      @include transition-delay(0.5s);
+    }
+
+    &.is_playing {
+      // Override inline style on shadow
+      // scss-lint:disable ImportantRule
+      opacity: 0 !important;
+      // scss-lint:enable ImportantRule
+    }
+  }
+
+  &.has_played {
+    .shadow,
+    .scroller {
+      @include transition-delay(0s);
+
+      &.is_paused {
+        @include transition-delay(0.5s);
+      }
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/{skip_links.css.scss → skip_links.scss}

@@ -12,15 +12,6 @@
   z-index: 1000;
 }
 
-a:focus {
-  outline: 3px solid #c1c1c1;
-  text-decoration: none;
-}
-
-input:focus {
-  outline: 3px solid #065195;
-}
-
 #skipLinks {
   position: absolute;
   width: 100%;

data/app/assets/stylesheets/pageflow/{slideshow.css.scss → slideshow.scss}

@@ -1,7 +1,9 @@
 .slideshow {
-  position: relative;
+  position: absolute;
   width: 100%;
-  height: 100%;
+  height: auto;
+  top: 0;
+  bottom: 0;
   overflow: hidden;
   z-index: 0;
 
@@ -59,7 +61,7 @@
     height: 100%;
     -webkit-backface-visibility: hidden;
 
-    z-index: 1;
+    z-index: 2;
     overflow: hidden;
     @include transition(0.5s ease);
   }
@@ -74,7 +76,8 @@
     top: 0;
     left: 0;
     width: 100%;
-    height: 100%;
+    bottom: 0;
+    z-index: 1;
 
     > div {
       position: absolute;
@@ -99,6 +102,3 @@
     }
   }
 }
-.js .slideshow {
-  position: absolute;
-}

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

@@ -0,0 +1 @@
+@import "./default/base";

data/app/assets/stylesheets/pageflow/themes/default/README.md

@@ -0,0 +1,26 @@
+The Pageflow default theme provides a rich set of SCSS variables that
+can be used to build custom themes. Instructions on how to setup a
+custom theme can be found in the
+[themes guide](https://github.com/codevise/pageflow/blob/master/doc/creating_themes.md).
+
+## Custom Page Type Pictograms
+
+By default, each page type brings its own set of pictogram images for
+display inside navigations bars and overviews. Default pictograms are
+usually located in a directory named
+`app/assets/images/pageflow/<page_type_name>/themes/default/pictograms`
+inside the page type gem.
+
+To supply custom pictograms, add the following line to your theme
+file:
+
+    # pageflow/themes/<theme_name>.scss
+    $custom-page-type-picotgrams: true;
+
+This causes pictograms to be looked for in
+`pageflow/themes/<theme_name>/page_type_pictograms/<page_type_name>/`
+inside your apps image directory. Each directory must contain the
+following variants:
+
+* `wide.png`
+* `sprite.png`

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

@@ -0,0 +1,24 @@
+%anchor {
+  @include fa-caret-right-icon;
+  text-decoration: none;
+  pointer-events: all;
+  position: relative;
+  margin-left: 6px;
+  margin-right: 6px;
+
+  @include phone {
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:before {
+    display: inline-block;
+    top: 7px;
+    width: 10px;
+    height: 12px;
+  }
+}

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

@@ -0,0 +1,2 @@
+@import "./animations/rotate";
+@import "./animations/rotate_and_blink";

data/app/assets/stylesheets/pageflow/themes/default/animations/rotate.scss

@@ -0,0 +1,9 @@
+@include keyframes(rotate) {
+  0% {
+    @include transform(rotate(0));
+  }
+
+  100% {
+    @include transform(rotate(360deg));
+  }
+}

data/app/assets/stylesheets/pageflow/themes/default/animations/rotate_and_blink.scss

@@ -0,0 +1,16 @@
+@include keyframes(rotate_and_blink) {
+  0% {
+    @include transform(rotate(0));
+    opacity: 1;
+  }
+
+  50% {
+    @include transform(rotate(180deg));
+    opacity: 0.5;
+  }
+
+  100% {
+    @include transform(rotate(360deg));
+    opacity: 1;
+  }
+}

data/app/assets/stylesheets/pageflow/themes/default/{base.css.scss → base.scss}

@@ -12,10 +12,18 @@
 @import "pageflow/mixins";
 @import "pageflow/animations";
 
-@import "./variables";
+@import "./definitions";
+
+@import "./built_in_page_types";
 @import "./anchors";
 @import "./loading_spinner";
+@import "./logo";
 @import "./page";
+@import "./indicators";
 @import "./navigation";
+@import "./mobile_navigation";
 @import "./overview";
-@import "./player_controls";
+@import "./player_controls";
+@import "./video_player";
+@import "./video_wrapper";
+@import "./slideshow";

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

@@ -0,0 +1,5 @@
+@include pageflow-page-type-pictograms("background_image", "pageflow/themes/default/page_type_pictograms/background_image");
+@include pageflow-page-type-pictograms("background_video", "pageflow/themes/default/page_type_pictograms/background_video");
+@include pageflow-page-type-pictograms("video", "pageflow/themes/default/page_type_pictograms/video");
+@include pageflow-page-type-pictograms("audio", "pageflow/themes/default/page_type_pictograms/audio");
+@include pageflow-page-type-pictograms("audio_loop", "pageflow/themes/default/page_type_pictograms/audio_loop");

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

@@ -0,0 +1,9 @@
+@import "./variables";
+
+@import "./functions/icon_font_options";
+
+@import "./mixins/sprite_icons";
+@import "./mixins/typography";
+@import "./mixins/indicator_typography";
+
+@import "./animations";

data/app/assets/stylesheets/pageflow/themes/default/functions/icon_font_options.scss

@@ -0,0 +1,8 @@
+@function widget-icon-font-options($overrides) {
+  $icon-font-options: map-merge(
+    $default-widget-icon-font-options,
+    $widget-icon-font-options
+  );
+
+  @return map-merge($icon-font-options, $overrides);
+}

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

@@ -0,0 +1,28 @@
+////
+/// @group indicators
+////
+
+/// Type of icons to use:
+///
+/// - `"default"`: Use images from default theme.
+///
+/// - `"sprite"`: Custom icons from `icon_sprite.png` in theme
+///   directory.
+///
+/// - `"icon_font"`: Use font icons for icon.
+$indicator-icons: "icon_font" !default;
+
+@import "./indicators/icons/default";
+@import "./indicators/icons/icon_font";
+@import "./indicators/icons/sprite";
+@import "./indicators/typography";
+@import "./indicators/colors";
+@import "./indicators/widget_margins";
+
+@if $indicator-icons == "sprite" {
+  @include indicators-icons-sprite;
+} @else if $indicator-icons == "icon_font" {
+  @include indicators-icons-icon-font;
+} @else {
+  @include indicators-icons-default;
+}

data/app/assets/stylesheets/pageflow/themes/default/indicators/colors.scss

@@ -0,0 +1,47 @@
+////
+/// @group indicators
+////
+
+/// Text color of indicators.
+$indicator-text-color: #e6e6e6 !default;
+
+/// Text color of hovered indicators.
+$indicator-active-text-color: $indicator-text-color !default;
+
+/// Text shadow color of indicators.
+$indicator-text-shadow-color: rgb(43, 43, 43) !default;
+
+/// Text color of indicators on inverted page.
+$indicator-inverted-text-color: #0a0a0a !default;
+
+/// Text color of hovered indicators on inverted page.
+$indicator-inverted-active-text-color: $indicator-inverted-text-color !default;
+
+/// Text shadow color of indicators on inverted page.
+$indicator-inverted-text-shadow-color: #fdfdfd !default;
+
+.slideshow > .indicator {
+  color: $indicator-text-color;
+  text-shadow: 1px 1px 4px $indicator-text-shadow-color;
+
+  &:hover {
+    color: $indicator-active-text-color;
+  }
+
+  @include phone {
+    text-shadow: 1px 1px 1px $indicator-text-shadow-color;
+  }
+
+  &.invert {
+    color: $indicator-inverted-text-color;
+    text-shadow: 1px 1px 4px $indicator-inverted-text-shadow-color;
+
+    &:hover {
+      color: $indicator-inverted-active-text-color;
+    }
+
+    @include phone {
+      text-shadow: 1px 1px 1px $indicator-inverted-text-shadow-color;
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/themes/default/indicators/icons/default.scss

@@ -0,0 +1,45 @@
+@mixin indicators-icons-default {
+  .slideshow {
+    > .indicator {
+      padding-left: 40px;
+      padding-top: 6px;
+      margin-left: -40px;
+
+      &:before {
+        background-size: auto auto;
+        background-position: top left;
+        background-repeat: no-repeat;
+        content: "";
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 1px;
+        position: absolute;
+      }
+    }
+
+    > .scroll_next_indicator {
+      &:before {
+        background-image: image-url("pageflow/themes/default/indicators/scroll_down.png");
+      }
+
+      &.invert {
+        &:before {
+          background-image: image-url("pageflow/themes/default/indicators/scroll_down_invert.png");
+        }
+      }
+    }
+
+    > .hidden_text_indicator {
+      &:before {
+        background-image: image-url("pageflow/themes/default/indicators/hidden_text.png");
+      }
+
+      &.invert {
+        &:before {
+          background-image: image-url("pageflow/themes/default/indicators/hidden_text_invert.png");
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+@mixin indicators-icons-icon-font {
+  .slideshow {
+    > .indicator {
+      @include phone {
+        text-align: right;
+      }
+
+      &:after {
+        content: "";
+        display: inline-block;
+        font-size: 30px;
+        font-weight: bold;
+        vertical-align: middle;
+        padding-left: 15px;
+
+        @include phone {
+          padding-left: 10px;
+        }
+      }
+    }
+
+    > .scroll_next_indicator {
+      @include fa-angle-down-icon($position: "after");
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/themes/default/indicators/icons/sprite.scss

@@ -0,0 +1,38 @@
+@mixin indicators-icons-sprite {
+  .slideshow {
+    > .indicator {
+      padding-left: 60px;
+      padding-top: 10px;
+
+      &:before {
+        @extend %pageflow_sprite_icon;
+        position: absolute;
+        top: 1px;
+        left: 0;
+        content: "";
+        width: 42px;
+        height: 42px;
+      }
+    }
+
+    > .scroll_next_indicator {
+      &:before {
+        @include pageflow-sprite-icon-arrow-down;
+      }
+
+      &:hover:before {
+        @include pageflow-sprite-icon-arrow-down("active");
+      }
+
+      &.invert {
+        &:before {
+          @include pageflow-sprite-icon-arrow-down-invert;
+        }
+
+        &:hover:before {
+          @include pageflow-sprite-icon-arrow-down-invert("active");
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/themes/default/indicators/typography.scss

@@ -0,0 +1,3 @@
+.slideshow > .indicator {
+  @include indicator-typography;
+}

data/app/assets/stylesheets/pageflow/themes/default/indicators/widget_margins.scss

@@ -0,0 +1,3 @@
+.scroll_indicator {
+  @extend %pageflow_widget_margin_right !optional;
+}

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

@@ -0,0 +1,90 @@
+/// Let theme define its own loading spinner.
+$custom-loading-spinner: false !default;
+
+/// Logo to display as loading spinner.
+///
+/// Possible values:
+///
+/// - `"default"`: Use images from default theme.
+/// - `"custom"`: Use images from theme directory.
+///
+/// Custom logo image has to be named `loading_spinner/logo.png`.
+$loading-spinner-logo: "default" !default;
+
+/// Width of the loading spinner image.
+$loading-spinner-logo-width: 130px !default;
+
+/// Height of the loading spinner image.
+$loading-spinner-logo-height: 112px !default;
+
+/// Spinner background color.
+$loading-spinner-background-color: #3b5159 !default;
+
+/// Spinner glow (radiant) color.
+$loading-spinner-glow-color: rgba(117, 149, 160, 0.8) !default;
+
+@if not $custom-loading-spinner {
+  .loading_spinner {
+    // scss-lint:disable ImportantRule
+    // Required to win against inline styles which ensure the loading
+    // spinner already covers the page while css has not been loaded.
+    background-color: $loading-spinner-background-color !important;
+    // scss-lint:enable ImportantRule
+
+    &:before {
+      content: "";
+      @include radial-gradient(circle,
+                               $loading-spinner-glow-color 0%,
+                               $loading-spinner-background-color 140px);
+      background-position: 50% 50%;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      display: inline-block;
+      height: 100%;
+      width: 100%;
+      opacity: 0;
+      @include animation-name(loadingSpinnerGradientAnimation);
+      @include animation-duration(5s);
+      @include animation-iteration-count(infinite);
+      @include animation-timing-function(ease-in);
+    }
+
+    @include keyframes(loadingSpinnerGradientAnimation) {
+      0% {
+        opacity: 0.3;
+      }
+
+      50% {
+        opacity: 1;
+      }
+
+      100% {
+        opacity: 0.3;
+      }
+    }
+
+    .loading_spinner_inner {
+      left: 50%;
+      top: 50%;
+      width: $loading-spinner-logo-width;
+      height: $loading-spinner-logo-height;
+      margin-left: -$loading-spinner-logo-width / 2;
+      margin-top: -$loading-spinner-logo-height / 2;
+      position: absolute;
+
+      div {
+        width: 100%;
+        height: 100%;
+        background-size: $loading-spinner-logo-width $loading-spinner-logo-height;
+        background-repeat: no-repeat;
+        position: absolute;
+
+        @if $loading-spinner-logo == "custom" {
+          background-image: image-url("pageflow/themes/#{$theme-name}/loading_spinner/logo.png");
+        } @else {
+          background-image: image-url("pageflow/themes/default/loading_spinner/logo.png");
+        }
+      }
+    }
+  }
+}