pageflow-progress-navigation-bar 0.4.0 → 0.5.0

data/app/assets/stylesheets/pageflow/progress_navigation_bar/cross_dependant_styles.scss

@@ -0,0 +1,37 @@
+// Make room for narrow progress navigation bar that is displayed
+// during page transitions.
+
+body .widget_progress_navigation_bar_present .navigation_mobile {
+  .menu.index {
+    right: 20px;
+  }
+
+  &.active .menu.index {
+    right: 200px;
+  }
+
+  .parent_page {
+    right: 70px;
+  }
+
+  &.active .parent_page {
+    right: 250px;
+  }
+}
+
+// Progress navigation bar is not compatible with touch interfaces.
+// Use default mobile navigation instead. Since the mobile navigation
+// comes with its own parent page widget, hide the parent page box
+// which would otherwise also be displayed on iPad landscape.
+
+body.has_mobile_platform .widget_progress_navigation_bar_present,
+body.has_mobile_platform .widget_progress_navigation_bar_horizontal_present {
+  .navigation_mobile,
+  .navigation_mobile > * {
+    display: block;
+  }
+
+  .parent_page_box {
+    display: none;
+  }
+}

data/app/assets/stylesheets/pageflow/progress_navigation_bar/horizontal.scss

@@ -0,0 +1,234 @@
+$thumbnail-width: 125px;
+$thumbnail-small-width: 50px;
+
+.js.progress_navigation_bar.horizontal {
+  top: 0;
+  left: 0;
+  height: 30px;
+  width: 100%;
+
+  @include pageflow-progress-mobile-variant {
+    display: none;
+  }
+
+  &:before {
+    display: none;
+  }
+
+  &.hover, &:hover, &:focus, &.focus {
+    .navigation_button_area {
+      height: 100px;
+    }
+  }
+
+  .navigation_button_area {
+    width: 100%;
+    height: 0;
+    top: 29px;
+    left: 0;
+    border: 0;
+    border-top: 1px solid transparent;
+
+    @include pageflow-progress-navigation-bar-small-width {
+      height: $thumbnail-small-width;
+    }
+
+    .navigation_bar_buttons {
+      height: 100%;
+      width: 100%;
+      text-align: center;
+      white-space: nowrap;
+
+      &:after {
+        background: none;
+        opacity: 0;
+      }
+
+      .navigation_credits_box {
+        p {
+          display: none;
+        }
+      }
+
+      .navigation_share_box {
+        right: -62.5px;
+      }
+
+      .navigation_credits_box {
+        right: 0;
+      }
+
+      .navigation_share_box, .navigation_credits_box {
+        top: 100px;
+
+        @include pageflow-progress-navigation-bar-small-width {
+          top: 70px;
+        }
+      }
+
+      li.menu_li {
+        display: none;
+      }
+
+      li.navigation_menu.mute {
+        height: 100%;
+
+        @include pageflow-progress-navigation-bar-small-width {
+          width: $thumbnail-width;
+        }
+
+        .navigation_volume_box {
+          position: absolute;
+          width: 100%;
+
+          .volume-control {
+            text-align: center;
+            display: inline-block;
+            margin: 30px 0 0 0;
+
+            .volume-slider {
+              display: inline-block;
+              position: relative;
+              left: -2px;
+              top: 0;
+              width: 78px;
+              height: 4px;
+              background-color: gray;
+            }
+
+            .volume-level {
+              height: 100%;
+              max-width: 62px;
+
+              &:before {
+                display: block;
+                content: "";
+                background-position: -66px top;
+                top: -9px;
+                width: 18px;
+                height: 16px;
+                right: -18px;
+              }
+            }
+          }
+        }
+      }
+
+      li {
+        display: inline-block;
+        height: 100%;
+        width: $thumbnail-width;
+        border: 0;
+
+        @include pageflow-progress-navigation-bar-small-width {
+          width: $thumbnail-small-width;
+        }
+
+        .button {
+          top: 20%;
+          left: 0;
+          padding: 0;
+          margin: 0 auto;
+          position: relative;
+        }
+
+        .navi_hint {
+          top: 70px;
+          left: 0;
+          padding: 0;
+          margin: 0;
+          width: 100%;
+          position: absolute;
+          @include pageflow-progress-navigation-bar-small-width {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+
+  &.header_active .navigation_button_area {
+    opacity: 0;
+  }
+
+  .scroller {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    &:after {
+      background-color: transparent;
+      opacity: 0.9;
+    }
+
+    li {
+      &.animate_in {
+        &.moving_forwards {
+          @include animation(pageflow-progress-navigation-bar-slide-in-from-bottom2 0.4s ease-out);
+        }
+
+        &.moving_backwards {
+          @include animation(pageflow-progress-navigation-bar-slide-in-from-top2 0.4s ease-out);
+        }
+
+        &.moving_down {
+          @include animation(pageflow-progress-navigation-bar-slide-in-from-right2 0.4s ease-out);
+        }
+
+        &.moving_up {
+          @include animation(pageflow-progress-navigation-bar-slide-in-from-left2 0.4s ease-out);
+        }
+      }
+
+      &.animate_out {
+        &.moving_forwards {
+          @include animation(pageflow-progress-navigation-bar-slide-out-to-top2 0.4s ease-in);
+          opacity: 0;
+        }
+
+        &.moving_backwards {
+          @include animation(pageflow-progress-navigation-bar-slide-out-to-bottom2 0.4s ease-in);
+          opacity: 0;
+        }
+
+        &.moving_down {
+          @include animation(pageflow-progress-navigation-bar-slide-out-to-left2 0.4s ease-in);
+          @include transform(translate3d(0, -50px, 0));
+        }
+
+        &.moving_up {
+          @include animation(pageflow-progress-navigation-bar-slide-out-to-right2 0.4s ease-in);
+          @include transform(translate3d(0, 50px, 0));
+        }
+      }
+    }
+  }
+
+  .navigation_dots {
+    width: 100%;
+    height: 100%;
+    left: 0;
+    margin: 6px 0 0 0;
+    text-align: center;
+    white-space: nowrap;
+
+    li {
+      width: 20px;
+      height: 18px;
+      margin-right: 1px;
+      display: inline-block;
+      @include box-sizing(border-box);
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .navigation_site_detail {
+    width: 170px;
+    top: 30px;
+    right: 0;
+  }
+}

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

@@ -0,0 +1,54 @@
+@mixin pageflow-progress-navigation-bar-small-height {
+  @media screen and (max-height: 870px) {
+    @content;
+  }
+}
+
+@mixin pageflow-progress-navigation-bar-small-width {
+  @media screen and (max-width: 1070px) {
+    @content;
+  }
+}
+
+@mixin pageflow-progress-mobile-variant {
+  .has_mobile_platform & {
+    @content;
+  }
+
+  @include phone {
+    @content;
+  }
+
+  @include pad_portrait {
+    @content;
+  }
+}
+
+@mixin pageflow-progress-navigation-bar-transparent-background {
+  &:after {
+    height: 100%;
+    background-image: none;
+    width: 100%;
+    top: 0;
+    position: absolute;
+    z-index: -1;
+    content: "";
+  }
+}
+
+@mixin pageflow-progress-navigation-bar-box($margin-top, $right) {
+  visibility: hidden;
+  margin-top: $margin-top;
+  background-color: $bg-color;
+  border: 2px solid $nav-color;
+  position: absolute;
+  right: $right;
+  padding: 15px;
+  height: auto;
+  left: initial;
+
+  hr {
+    border: 0;
+    border-bottom: 1px solid $nav-color;
+  }
+}

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

@@ -0,0 +1,273 @@
+/// Type of icons to use:
+///
+/// - `"icon-font"`: Circular buttons with font awesome icons.
+///
+/// - `"sprite"`: Custom icons from `icon_sprite.png` in theme
+///   directory.
+$progress-navigation-bar-icons: $widget-icons !default;
+
+/// Display button to toggle header
+$progress-navigation-bar-display-header-button: $navigation-display-header-button !default;
+
+/// Display social share menu
+$progress-navigation-bar-display-share-button: $navigation-display-share-button !default;
+
+/// Display hide text menu button
+$progress-navigation-bar-display-hide-text-button: $navigation-display-hide-text-button !default;
+
+// Legacy
+
+$nav-color: $main-color;
+
+$nav-active-chapter: desaturate($main-color, 50%);
+$nav-active-page: $main-color;
+
+$nav-active-chapter-beginning: desaturate($main-color, 40%);
+
+$nav-hint-color: #A9A9A9 !default;
+
+$nav-chapter-beginning: #afafaf;
+$nav-dot-even: #9B9B9B;
+$nav-dot-odd: #afafaf;
+
+$nav-bg-color: $basic-background-color;
+$bg-color: $nav-bg-color;
+$nav-bg-color-transparent: $basic-background-color-transparent;
+
+@import "../mixins";
+@import "./default/widget_margin";
+
+.progress_navigation_bar {
+  @import "./default/buttons";
+  @import "./default/credits";
+  @import "./default/icons/icon_font";
+  @import "./default/icons/sprite";
+  @import "./default/menu_boxes";
+  @import "./default/share_box";
+  @import "./default/typography";
+
+  @if $progress-navigation-bar-icons == "sprite" {
+    @include progress-navigation-bar-icons-sprite;
+  } @else {
+    @include progress-navigation-bar-icons-icon-font;
+  }
+
+  .navigation_site_detail .thumbnail {
+    @if $progress-navigation-bar-pictogram-visibility == visible {
+      @extend %pageflow_page_type_thumbnail;
+    }
+
+    position: relative;
+    width: 170px;
+    height: 95px;
+    margin-top: 12px;
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 28px;
+      left: 66px;
+      width: 38px;
+      height: 38px;
+      background-size: 76px 38px;
+      background-repeat: no-repeat;
+    }
+  }
+
+  @if $progress-navigation-bar-display-header-button {
+    &.horizontal .scroller .navigation_dots {
+      width: calc(100% - 40px);
+    }
+
+    .header_button {
+      display: block;
+      position: absolute;
+      right: 7px;
+      top: 2px;
+      width: 26px;
+      height: 26px;
+
+      a {
+        display: block;
+        text-decoration: none;
+        padding: 0;
+
+        .button {
+          width: 28px;
+          height: 28px;
+          background-image: image-url("pageflow/progress_navigation_bar/indicator.png");
+          background-position: 0 0;
+        }
+
+        .button.close {
+          background-position: -28px 0;
+        }
+      }
+    }
+
+    .navigation_button_area .navigation_bar_buttons li {
+      height: 11.11%;
+
+      &.mute {
+        height: 22.22%;
+      }
+    }
+
+    &.with_home_button {
+      .navigation_button_area .navigation_bar_buttons li {
+        height: 10%;
+
+        &.mute {
+          height: 20%;
+        }
+      }
+    }
+  } @else {
+    .navigation_button_area .navigation_bar_buttons li {
+      height: 12.25%;
+
+      &.menu_li {
+        display: none;
+      }
+
+      &.mute {
+        height: 25%;
+      }
+    }
+
+    &.with_home_button {
+      .navigation_button_area .navigation_bar_buttons li {
+        height: 11.11%;
+
+        &.mute {
+          height: 22.22%;
+        }
+      }
+    }
+  }
+
+  @if not $progress-navigation-bar-display-share-button {
+    .navigation_menu.share {
+      display: none;
+    }
+  }
+
+  @if not $progress-navigation-bar-display-hide-text-button {
+    .hide_text {
+      display: none;
+    }
+  }
+
+  &.horizontal.js {
+    background-color: $nav-bg-color-transparent;
+
+    .navigation_button_area .navigation_bar_buttons {
+      background: $nav-bg-color-transparent;
+
+      @if not $progress-navigation-bar-display-share-button {
+        .navigation_menu.share {
+          display: none;
+        }
+      }
+
+      @if not $progress-navigation-bar-display-hide-text-button {
+        .hide_text {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .navigation_button_area .navigation_bar_buttons {
+    &:after {
+      background-color: $nav-bg-color-transparent;
+    }
+
+    &.js .navigation_bar_bottom li.fullscreen {
+      height: auto;
+    }
+
+    &.js a.scroll_indicator {
+      background-image: image-url('pageflow/themes/default/scroll_indicator_sprite.png');
+    }
+
+    .navigation_share_box {
+      a {
+        text-align: center;
+      }
+
+      a.active,
+      a:hover {
+        p {
+          color: $nav-color;
+        }
+
+        .share_google, .share_facebook, .share_twitter {
+          &:before {
+            color: $nav-color;
+          }
+        }
+      }
+    }
+  }
+
+  &.js .scroller:after {
+    background-color: $nav-bg-color-transparent;
+  }
+
+  .scroller ul, &.js .scroller ul {
+    a {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      background-color: $nav-dot-even;
+      border-bottom: 1px solid $nav-bg-color-transparent;
+      @include box-sizing(border-box);
+
+      &.in_active_chapter {
+        background-color: $nav-active-chapter;
+      }
+
+      &.active {
+        cursor: default;
+        background-color: $nav-active-page;
+
+        img {
+          border-left: 5px solid $nav-active-page;
+        }
+      }
+    }
+
+    li.chapter_beginning a {
+      background-color: $nav-chapter-beginning;
+
+      &.in_active_chapter {
+        background-color: $nav-active-chapter-beginning;
+      }
+
+      &.active {
+        background-color: $main-color;
+      }
+    }
+
+    img {
+      display: block;
+    }
+
+    &.no_chapters {
+      li.chapter_beginning a, li a.in_active_chapter, li.chapter_beginning a.in_active_chapter {
+        background-color: $nav-dot-even;
+
+        &.active {
+          background-color: $nav-active-page;
+        }
+      }
+    }
+  }
+
+  &.js .volume-control .volume-level {
+    background-color: $nav-color;
+  }
+}