pageflow 0.6.0 → 0.7.0

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

@@ -22,7 +22,7 @@
 
   .box {
     position: relative;
-    max-width: 800px;
+    max-width: 1000px;
     max-height: 500px;
     min-height: 200px;
     height: 50%;
@@ -40,74 +40,120 @@
 
   }
 
-  .footer {
-    clear: left;
-    text-align: right;
-  }
-
-  h2, h3 {
+  h2 {
     margin: 0 0 10px 0;
   }
 
-  h4 {
-    margin: 0 0 10px 0;
-    font-weight: bold;
-    font-size: 13;
-    line-height: 23px;
-  }
-
-  p {
-    line-height: 23px;
-    margin: 0 0 10px 0;
-  }
+  nav {
+    position: absolute;
+    width: 200px;
+    left: 10px;
+    top: 60px;
+    bottom: 50px;
+    overflow: auto;
+    padding: 0 5px;
 
-  img {
-    float: right;
-    margin: 5px;
-    border: solid 1px #888;
-    padding: 1px;
-  }
+    ul {
+      margin: 0;
+      padding: 0;
+    }
 
-  ul {
-    width: 15%;
-    margin: 0;
-    padding: 0 5px 20px 0;
-    float: left;
-  }
+    li {
+      margin: 3px 0;
+      list-style: none;
+      font-size: 13px;
+      line-height: 18px;
+    }
 
-  li {
-    list-style: none;
-    font-size: 13px;
-    line-height: 18px;
+    a {
+      display: block;
+      text-decoration: none;
+      color: #000;
+      padding: 5px;
+    }
 
     a:hover {
       background-color: #eee;
     }
 
-    &.active a {
-      font-weight: bold;
+    .expandable > a {
+      @include background-icon-right($top: 6px);
+      @include down-open-mini-icon;
+      padding-right: 30px;
+    }
+
+    .expanded > a {
+      @include up-open-mini-icon;
+      background-color: #eee;
+    }
+
+    .active > a {
       background-color: #D2E5FA;
     }
 
-    a {
+    li ul {
+      display: none;
+      border-bottom: solid 1px #ddd;
+    }
+
+    .expanded ul {
       display: block;
-      text-decoration: none;
-      color: #000;
-      padding: 5px;
+    }
+
+    li li a {
+      padding-left: 25px;
     }
   }
 
   section {
-    float: left;
-    min-height: 200px;
+    position: absolute;
+    left: 220px;
+    bottom: 50px;
+    top: 60px;
+    right: 10px;
+
     overflow: auto;
-    width: 80%;
-    height: 100%;
+
     margin-left: 5px;
-    margin-bottom: 20px;
     padding-left: 20px;
     padding-right: 5px;
     border-left: solid 1px #888;
+
+    h1 {
+      margin: 0 0 10px 0;
+      font-size: 27px;
+    }
+
+    h2 {
+      margin: 25px 0 15px 0;
+      font-weight: bold;
+      font-size: 20px;
+    }
+
+    h3 {
+      margin: 5px 0 0 0;
+      font-weight: bold;
+      font-size: 16px;
+      line-height: 26px;
+    }
+  }
+
+  .footer {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+  }
+
+  p {
+    line-height: 23px;
+    margin: 0 0 10px 0;
+  }
+
+  img {
+    float: right;
+    margin: 5px;
+    border: solid 1px #888;
+    padding: 1px;
   }
 }
 

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

@@ -10,11 +10,11 @@
   .indicator {
     position: absolute;
     bottom: 2%;
-    width: 300px;
-    max-width: 70%;
+    width: 400px;
+    max-width: 80%;
     height: 40px;
     z-index: 5;
-    color: transparent;
+    color: #e6e6e6;
     pointer-events: none;
 
     @include phone {
@@ -25,6 +25,10 @@
     opacity: 0;
 
     text-transform: uppercase;
+    text-shadow: 1px 1px 4px rgba(43, 43, 43, 1);
+    font-size: 0.92em;
+    letter-spacing: 0.2em;
+
     padding-left: 40px;
     font-family: sourcesanspro;
     padding-top: 6px;
@@ -56,16 +60,23 @@
     }
 
     &:before {
-      background-size: 100% auto;
+      background-size: auto auto;
       background-position: top left;
       background-repeat: no-repeat;
       content: "";
       width: 100%;
       height: 100%;
       left: 0;
-      top: 0;
+      top: 1px;
       position: absolute;
     }
+
+    @include phone {
+      text-shadow: 1px 1px 1px rgba(43, 43, 43, 1);
+      font-size: 0.8em;
+      letter-spacing: 0.1em;
+    }
+
   }
 
   .scroll_indicator {
@@ -78,6 +89,8 @@
     }
 
     &.invert {
+      text-shadow: 1px 1px 4px #FDFDFD;
+      color: #0A0A0A;
       &:before {
         background-image: image-url('pageflow/scroll_down_indicator_invert.png');
       }

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

@@ -1,6 +1,7 @@
 @import "jquery-layout-default";
-@import "jquery.ui.slider";
-@import "jquery.ui.datepicker";
+@import "jquery-ui/slider";
+@import "jquery-ui/datepicker";
+@import "jquery-ui/selectmenu";
 
 div.ui-datepicker{
  font-size: 12px;

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

@@ -116,57 +116,59 @@
     padding: 15% 14% 5% 8%;
     width: 100%;
     @include mobile {
-      padding: 15% 12% 5% 8%;
+      padding: 25% 12% 5% 8%;
       width: 100%;
       @media (orientation: landscape) {
-        padding: 7% 12% 5% 8%;
+        padding: 10% 12% 5% 8%;
       }
     }
   }
 
   .close_button {
-    text-indent: -4000px;
     cursor: pointer;
     display: block;
     background-position: -45px 0;
     background-repeat: no-repeat;
     width: 45px;
     height: 45px;
-
     position: absolute;
     top: 20px;
+
     right: 100px;
     z-index: 10;
     background-size: 200% auto;
+    background-image: image-url('pageflow/close_sprite_shadow.png');
 
     &:hover {
       background-position: 0 0;
     }
-    background-image: image-url('pageflow/close_sprite_shadow.png');
 
-    @include phone {
-      right: 10px;
+    .label {
+      text-transform: uppercase;
+      text-shadow: 1px 1px 4px #2b2b2b;
+      font-size: 1.0em;
+      letter-spacing: 0.1em;
+      color: #FFFEFE;
+      position: absolute;
+      margin-right: 115%;
+      text-align: right;
+      right: 0px;
+      margin-top: 14px;
+      margin-left: 1em;
     }
 
-    @include pad_portrait {
-      right: 10px;
+    @include phone {
+      right: 40px;
     }
 
-    &:before {
-      content: " ";
-      position: absolute;
-      top: 10px;
-      right: 48px;
-
-      width: 100px;
-      height: 30px;
-
-      background-image: image-url('pageflow/close_text.png');
+    @include pad_portrait {
+      right: 40px;
     }
   }
 
-  &.invert .close_button:before {
-    background-image: image-url('pageflow/close_text_invert.png');
+  &.invert .close_button .label {
+    color: #2b2b2b;
+    text-shadow: 1px 1px 4px #fff;
   }
 }
 

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

@@ -2,7 +2,7 @@ div.sub_share {
   display: none;
 }
 
-.navigation_share_box div.sub_share a {
+.navigation_share_box div.sub_share a, .navigation_mobile div.sub_share a {
   width: 45%;
   padding: 5px 3px;
   color: white;

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

@@ -7,10 +7,19 @@
     margin-left: auto;
   }
 
+  &.page {
+    h1, h2 span.subtitle, h2 span.tagline, h3, p {
+      margin-left: auto;
+    }
+    h2 .title {
+      margin-left: auto;
+      max-width: 500px;
+    }
+  }
+
   .page_header {
-    max-width: 500px;
     margin-left: auto;
-    width: 60%;
+    width: 100%;
 
     @include mobile {
       width: 100%;

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

@@ -1,41 +1 @@
-$theme-name: "default";
-
-$main-color: #e84d2c;
-$main-color-dark: #b14a08;
-
-$focus-color: #c1c1c1;
-
-$anchor-color: #e84d2c;
-
-$basic-background-color: #353535;
-$basic-background-color-transparent: rgba(53, 53, 53, 0.9);
-$header-background-color: gray;
-
-$addInfobox-text-color: #fff; /* for the description text inside the info box */
-$addInfobox-controls-text-color: #ccc; /* for control text like durations */
-$addInfobox-background-color: #191919;
-$addInfobox-border-color: #505050;
-
-$standard-font: SourceSansPro;
-$standard-font-size: 16px;
-
-@mixin shine-gradient {
-  background: #ffffff; /* Old browsers */
-  background: -moz-linear-gradient(top,  rgba(255,255,255,0.1) 0%,rgba(0, 0, 0, 0.1) 29%,rgba(0,0,0,0.05) 90%,rgba(246,246,246,0.1) 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.1)), color-stop(29%,rgba(0,0,0,0.1)), color-stop(90%,rgba(0,0,0,0.05)), color-stop(100%,rgba(246,246,246,0.1))); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top,  rgba(255,255,255,0.1) 0%,rgba(0, 0, 0, 0.1) 29%,rgba(0,0,0,0.05) 90%,rgba(246,246,246,0.1) 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top,  rgba(255,255,255,0.1) 0%,rgba(0, 0, 0, 0.1) 29%,rgba(0,0,0,0.05) 90%,rgba(246,246,246,0.1) 100%); /* Opera 11.10+ */
-  background: -ms-linear-gradient(top,  rgba(255,255,255,0.1) 0%,rgba(0, 0, 0, 0.1) 29%,rgba(0,0,0,0.05) 90%,rgba(246,246,246,0.1) 100%); /* IE10+ */
-  background: linear-gradient(to bottom,  rgba(255,255,255,0.1) 0%,rgba(0, 0, 0, 0.1) 29%,rgba(0,0,0,0.05) 90%,rgba(246,246,246,0.1) 100%); /* W3C */
-}
-
-@import "bourbon";
-@import "pageflow/mixins";
-@import "pageflow/animations";
-
-@import "./default/anchors";
-@import "./default/loading_spinner";
-@import "./default/page";
-@import "./default/navigation";
-@import "./default/overview";
-@import "./default/player_controls";
+@import "./default/base.css.scss";

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

@@ -0,0 +1,21 @@
+@mixin shine-gradient {
+  background: #ffffff; /* Old browsers */
+  background: -moz-linear-gradient(top,  rgba(255,255,255,0.1) 0%,rgba(0, 0, 0, 0.1) 29%,rgba(0,0,0,0.05) 90%,rgba(246,246,246,0.1) 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.1)), color-stop(29%,rgba(0,0,0,0.1)), color-stop(90%,rgba(0,0,0,0.05)), color-stop(100%,rgba(246,246,246,0.1))); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top,  rgba(255,255,255,0.1) 0%,rgba(0, 0, 0, 0.1) 29%,rgba(0,0,0,0.05) 90%,rgba(246,246,246,0.1) 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top,  rgba(255,255,255,0.1) 0%,rgba(0, 0, 0, 0.1) 29%,rgba(0,0,0,0.05) 90%,rgba(246,246,246,0.1) 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top,  rgba(255,255,255,0.1) 0%,rgba(0, 0, 0, 0.1) 29%,rgba(0,0,0,0.05) 90%,rgba(246,246,246,0.1) 100%); /* IE10+ */
+  background: linear-gradient(to bottom,  rgba(255,255,255,0.1) 0%,rgba(0, 0, 0, 0.1) 29%,rgba(0,0,0,0.05) 90%,rgba(246,246,246,0.1) 100%); /* W3C */
+}
+
+@import "bourbon";
+@import "pageflow/mixins";
+@import "pageflow/animations";
+
+@import "./variables";
+@import "./anchors";
+@import "./loading_spinner";
+@import "./page";
+@import "./navigation";
+@import "./overview";
+@import "./player_controls";

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

@@ -27,6 +27,22 @@ $overview-header-font: $standard-font;
     text-align: center;
     @include shine-gradient;
 
+    .label {
+      text-transform: uppercase;
+      text-shadow: 1px 1px 4px #2b2b2b;
+      font-size: 1.0em;
+      letter-spacing: 0.1em;
+      color: #FFFEFE;
+      position: absolute;
+      margin-right: 130%;
+      text-align: right;
+      width: 500%;
+      right: 0px;
+      margin-top: 0.4em;
+    }
+
+
+
     &:before {
       content: " ";
       position: absolute;
@@ -36,7 +52,6 @@ $overview-header-font: $standard-font;
       width: 100px;
       height: 30px;
 
-      background-image: image-url('pageflow/close_text.png');
     }
     &:after {
       content: "\F00d";