pageflow 0.5.0 → 0.6.0

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

@@ -33,6 +33,11 @@
     &.visible {
       opacity: 1;
       @include transition(opacity 0.5s ease 0.5s);
+
+      &.attract {
+        @include animation(bounce 0.5s ease);
+        @include animation-iteration-count(3)
+      }
     }
 
     &.hidden {

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

@@ -1,27 +1,92 @@
+$simulated-media-queries: false !default;
+
 @mixin mobile {
-  @media screen and (max-width: 900px) {
-    @content;
+  @if $simulated-media-queries {
+    .simulate_mobile & {
+      @content;
+    }
+  }
+  @else {
+    @media screen and (max-width: 900px) {
+      @content;
+    }
   }
 }
+
 @mixin phone {
-  @media screen and (max-width: 700px) {
-    @content;
+  @if $simulated-media-queries {
+    .simulate_phone & {
+      @content;
+    }
+  }
+  @else {
+    @media screen and (max-width: 700px) {
+      @content;
+    }
   }
 }
+
 @mixin desktop {
-  @media screen and (min-width: 701px) {
-    @content;
+  @if $simulated-media-queries {
+    .simulate_desktop & {
+      @content;
+    }
+  }
+  @else {
+    @media screen and (min-width: 701px) {
+      @content;
+    }
+  }
+}
+
+@mixin narrow_desktop {
+  @if $simulated-media-queries {
+    .simulate_narrow_desktop & {
+      @content;
+    }
+  }
+  @else {
+    @media screen and (max-width: 1200px) {
+      @content;
+    }
+  }
+}
+
+@mixin wide_desktop {
+  @if $simulated-media-queries {
+    .simulate_wide_desktop & {
+      @content;
+    }
+  }
+  @else {
+    @media screen and (min-width: 1601px) {
+      @content;
+    }
   }
 }
 
 @mixin pad_portrait {
-  @media screen and (max-width: 768px) and (orientation: portrait) {
-    @content;
+  @if $simulated-media-queries {
+    .simulate_pad_portrait & {
+      @content;
+    }
+  }
+  @else {
+    @media screen and (max-width: 768px) and (orientation: portrait) {
+      @content;
+    }
   }
 }
 
 @mixin phone_portrait {
-  @media screen and (max-width: 500px) and (orientation: portrait) {
-    @content;
+  @if $simulated-media-queries {
+    .simulate_phone_portrait & {
+      @content;
+    }
+  }
+  @else {
+    @media screen and (max-width: 500px) and (orientation: portrait) {
+      @content;
+    }
   }
 }

data/app/assets/stylesheets/pageflow/multimedia_alert.css.scss

@@ -112,37 +112,38 @@
   transition: 0s ease !important;
 }
 
-@include phone {
-  @media (orientation: landscape) {
-    .multimedia_alert .multimedia_alert_box {
-      width: 100%;
-      left: 0;
-      top: 50%;
-      height: auto;
-      margin-left: 0;
-      margin-top: 0;
-      font-size: 0.8em;
-      max-width: 100%;
-      @include transform(translate(0,-50%));
-
-
-      .alert_block {
-        display: inline-block;
-        width: 45%;
-        vertical-align: top;
-        position: relative;
-        padding: 0 2%;
-
-        .alert_headline {
-          display: none;
-        }
-        .alert_icon {
+.multimedia_alert  {
+  @include phone {
+    @media (orientation: landscape) {
+      .multimedia_alert_box {
+        width: 100%;
+        left: 0;
+        top: 50%;
+        height: auto;
+        margin-left: 0;
+        margin-top: 0;
+        font-size: 0.8em;
+        max-width: 100%;
+        @include transform(translate(0,-50%));
+
+        .alert_block {
+          display: inline-block;
+          width: 45%;
+          vertical-align: top;
+          position: relative;
+          padding: 0 2%;
+
+          .alert_headline {
+            display: none;
+          }
+          .alert_icon {
           /*margin-top: 10px; */
-        }
-        .close {
-          margin-left: auto;
-          width: 87px;
-          display: block;
+          }
+          .close {
+            margin-left: auto;
+            width: 87px;
+            display: block;
+          }
         }
       }
     }

data/app/assets/stylesheets/pageflow/navigation_bar.css.scss

@@ -205,6 +205,10 @@ $nav-color: #9c9c9c;
         margin: auto;
       }
     }
+
+    .sub_share {
+      display: none;
+    }
   }
 
   .navigation_credits_box {

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

@@ -1,34 +1,36 @@
-@include phone {
-  .navigation {
-    &, & > * {
-      display: none;
+body {
+  @include phone {
+    .navigation {
+      &, & > * {
+        display: none;
+      }
+    }
+    .navigation_mobile {
+      display: block;
     }
   }
-  .navigation_mobile {
-    display: block;
-  }
-}
 
-@include desktop {
-  .navigation, .header {
-    display: block;
-  }
-  .navigation_mobile {
-    &, & > * {
-      display: none;
+  @include desktop {
+    .navigation, .header {
+      display: block;
+    }
+    .navigation_mobile {
+      &, & > * {
+        display: none;
+      }
     }
   }
-}
 
-@include pad_portrait {
-  .navigation {
-    &, & > * {
-      display: none;
+  @include pad_portrait {
+    .navigation {
+      &, & > * {
+        display: none;
+      }
     }
-  }
-  .navigation_mobile {
-    &, & > * {
-      display: block;
+    .navigation_mobile {
+      &, & > * {
+        display: block;
+      }
     }
   }
 }
@@ -45,7 +47,6 @@
   top: 0;
   right: 0;
   bottom: 0;
-  width: 0;
   width: 100%;
   overflow: hidden;
   pointer-events: none;
@@ -77,6 +78,7 @@
     background-size: auto 100%;
     right: 10px;
     pointer-events: all;
+    cursor: pointer;
     @include transition(opacity 500ms, right 250ms);
 
     &.index {
@@ -140,7 +142,6 @@
     }
 
     .heading-1 {
-      display: block;
       height: 40px;
       margin: 10px;
       font-size: 2em;
@@ -195,20 +196,6 @@
         left: 0;
       }
 
-      &:after {
-        content: " ";
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 38px;
-        height: 38px;
-        margin: 38px 85px;
-
-        background-repeat: no-repeat;
-        background-position: 0 0;
-        background-size: 76px 100%;
-      }
-
       &.touched {
         &:after {
           background-position: -38px 0;
@@ -219,6 +206,7 @@
           background-color: #fff;
           opacity: 0.2;
           z-index: 1;
+          pointer-events: none;
         }
       }
 
@@ -263,36 +251,43 @@
       }
     }
 
-    .menu.index {
-      background-position: 0px 0px;
+    .menu.index,
+    &.sharing .menu.sharing,
+    &.imprint .menu.imprint {
+      background-position: 0 0;
     }
+
     &.sharing .menu.index, &.imprint .menu.index {
-      background-position: -45px 0px;
+      background-position: -45px 0;
     }
 
-    &.sharing .menu.sharing {
-      background-position: 0px 0px;
-    }
-    &.imprint .menu.imprint {
-      background-position: 0px 0px;
-    }
-    &.sharing .sharing_mobile {
-      right: 0px;
-      width: 200px;
-      visibility: visible;
-    }
+    &.sharing .sharing_mobile,
     &.imprint .imprint_mobile {
-      right: 0px;
+      right: 0;
       width: 200px;
       visibility: visible;
     }
 
-
     .overview_mobile {
       @include transition-delay(0s);
       width: 200px;
       right: 0;
       visibility: visible;
+
+
+      li:after {
+        content: " ";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 38px;
+        height: 38px;
+        margin: 38px 85px;
+
+        background-repeat: no-repeat;
+        background-position: 0 0;
+        background-size: 76px 100%;
+      }
     }
 
     .sharing_mobile {
@@ -301,15 +296,16 @@
       }
       li {
         width: 200px;
-        height: 88px;
         border-bottom: 1px solid #465b73;
 
-        a {
+        > a {
           margin-left: 78px;
           color: white;
           text-decoration: none;
           font-size: 24px;
           padding-top: 12px;
+          border: 0;
+          height: 80px;
 
           &:before {
             content: "";
@@ -334,6 +330,9 @@
         }
       }
     }
+    .sub_share {
+      display: none;
+    }
   }
 
 }

data/app/assets/stylesheets/pageflow/player_controls.css.scss

@@ -220,8 +220,8 @@
 
   .vjs-default-skin {
     .vjs-loading-spinner {
-      top: 29px;
-      left: 30px;
+      top: 30px;
+      left: 31px;
       opacity: 1;
 
       &:before {

data/app/assets/stylesheets/pageflow/slideshow.css.scss

@@ -65,7 +65,7 @@
     @include transition(0.5s ease);
   }
 
-  .content.hidden {
+  .page.hidden_by_overlay .content {
     opacity: 0;
     pointer-events: 0;
   }
@@ -243,4 +243,7 @@
       }
     }
   }
+}
+.js .slideshow {
+  position: absolute;
 }

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

@@ -0,0 +1,28 @@
+div.sub_share {
+  display: none;
+}
+
+.navigation_share_box 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;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+}
+
+.navigation_mobile div.sub_share a {
+  width: auto;
+  display: block;
+  margin: 1em 1em;
+  padding: 1em 0;
+}
+