pageflow 0.8.2 → 0.9.0

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

@@ -8,7 +8,8 @@ ul.outline {
     position: relative;
     background-color: #fff;
 
-    a:first-child {
+    > div:first-child,
+    > a:first-child {
       display: block;
       padding: 10px 10px 10px 70px;
       background-color: #efefef;
@@ -28,8 +29,11 @@ ul.outline {
       background-color: #D2E5FA;
     }
 
-    &.draggable > a {
-      cursor: move;
+    &.draggable {
+      .type_pictogram,
+      .page_thumbnail {
+        cursor: move;
+      }
     }
 
     .type_pictogram {
@@ -42,7 +46,6 @@ ul.outline {
       background-repeat: no-repeat;
       background-position: 3px 45%;
       opacity: 0.2;
-      cursor: move;
     }
 
     .page_thumbnail {
@@ -51,7 +54,6 @@ ul.outline {
       left: 0;
       height: 100%;
       width: 35px;
-      cursor: move;
 
       .thumbnail {
         height: 100%;

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

@@ -0,0 +1,58 @@
+div.page_links {
+  .add_link {
+    @include plus-circled-icon;
+    @include icon-button;
+  }
+
+  ul.links {
+    margin-bottom: 10px;
+  }
+
+  a.edit {
+    @include icon-only-button(#aaa);
+    @include pencil-icon;
+    position: absolute;
+    right: 4px;
+    top: 4px;
+  }
+
+  li {
+    margin-bottom: 2px;
+
+    > div:first-child {
+      padding-left: 45px;
+    }
+
+    .title {
+      cursor: default;
+      padding-right: 30px;
+    }
+
+    .label {
+      margin-top: 10px;
+      color: #666;
+    }
+
+    .thumbnail,
+    .missing_page_thumbnail {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 35px;
+      background-size: cover;
+      background-color: #444;
+    }
+
+    .missing_page_thumbnail {
+      @include attention-icon;
+      @include background-icon-center($color: #fff);
+      display: none;
+      position: absolute;
+    }
+
+    &.dangling .missing_page_thumbnail {
+      display: block;
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+.page_selection {
+  .box {
+    top: 5%;
+    width: 90%;
+    max-width: 400px;
+    max-height: 745px;
+    padding-bottom: 20px;
+    height: 80%;
+  }
+
+  .wrapper {
+    background-color: #fff;
+    padding-right: 10px;
+
+    overflow: hidden;
+    overflow-y: scroll;
+
+    position: absolute;
+    top: 70px;
+    bottom: 70px;
+    left: 0;
+    right: 10px;
+
+    .add_page {
+      display: none;
+    }
+
+    .edit_chapter {
+      cursor: default;
+      outline: none;
+    }
+  }
+
+  .footer {
+    position: absolute;
+    bottom: 20px;
+    right: 10px;
+  }
+}

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

@@ -71,16 +71,18 @@
     }
   }
 
-
+  .check_box_input,
   .radio_input {
     position: relative;
     padding-left: 40px;
+    padding-top: 10px;
   }
 
   label {
     padding: 0;
   }
 
+  input[type=checkbox],
   input[type=radio] {
     position: absolute;
     vertical-align: top;
@@ -88,12 +90,47 @@
     top: 11px;
   }
 
+  input[type=text] {
+    margin-bottom: 5px;
+  }
+
+  .inline_help {
+    top: 5px;
+    right: 0;
+    box-sizing: border-box;
+
+    &:hover {
+      padding: 23px 15px 10px 40px;
+    }
+  }
+
+  .publish_until_fields,
+  .password_fields {
+    padding-left: 40px;
+    padding-top: 10px;
+  }
+
   .publish_until_fields {
     &.disabled {
       opacity: 0.5;
     }
   }
 
+  .password_fields {
+    &.disabled {
+      display: none;
+    }
+
+    p {
+      margin: 10px 0;
+    }
+  }
+
+  .already_published_without_password {
+    @include background-icon-left($left: -30px, $top: 9px);
+    @include attention-icon;
+  }
+
   .save {
     @include icon-button;
     @include check-icon;

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

@@ -108,17 +108,25 @@
       z-index: 0;
     }
   }
-}
 
-.has_mobile_platform .hidden_text_indicator {
-  left: 8%;
-  &:before {
-    background-image: image-url('pageflow/touch_indicator.png');
-  }
+  .hidden_text_indicator {
+    display: none;
+    left: 8%;
 
-  &.invert {
     &:before {
-      background-image: image-url('pageflow/touch_indicator_invert.png');
+      background-image: image-url("pageflow/touch_indicator.png");
     }
+
+    &.invert {
+      &:before {
+        background-image: image-url("pageflow/touch_indicator_invert.png");
+      }
+    }
+  }
+}
+
+.has_mobile_platform .entry {
+  .hidden_text_indicator {
+    display: block;
   }
-}
+}

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

@@ -97,6 +97,10 @@ $nav-color: #9c9c9c;
     &:active {
       outline: none;
     }
+
+    &.filtered {
+      display: none;
+    }
   }
 
   a {

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

@@ -0,0 +1,10 @@
+@import "./page_transitions/scroll";
+@import "./page_transitions/fade";
+
+@import "./page_transitions/fade_to_black";
+@import "./page_transitions/crossfade";
+
+@import "./page_transitions/cut";
+
+@import "./page_transitions/scroll_right";
+@import "./page_transitions/scroll_left";

data/app/assets/stylesheets/pageflow/page_transitions/crossfade.css.scss

@@ -0,0 +1,29 @@
+/* fading background, vertical scrolling content */
+
+section.crossfade {
+  @include transition(1s ease);
+  -webkit-backface-visibility: hidden;
+
+  .blackLayer {
+    display: none;
+  }
+
+  &.animate-in-forwards {
+    z-index: 2;
+    opacity: 0;
+  }
+  &.animate-out-forwards {
+    opacity: 1;
+  }
+  &.animate-in-backwards {
+    z-index: 2;
+    opacity: 0;
+  }
+  &.animate-out-backwards {
+    opacity: 1;
+  }
+
+  &.active {
+    opacity: 1;
+  }
+}

data/app/assets/stylesheets/pageflow/page_transitions/cut.css.scss

@@ -0,0 +1,23 @@
+/* fading background, vertical scrolling content */
+
+section.cut {
+  &.active {
+    display: block;
+  }
+
+  &.animate-in-forwards {
+    display: block;
+  }
+  &.animate-out-forwards {
+    display: block;
+  }
+  &.animate-in-backwards {
+    display: block;
+  }
+  &.animate-out-backwards {
+    display: block;
+  }
+  &.animate-in-backwards, &.animate-in-forwards {
+    z-index: 2;
+  }
+}

data/app/assets/stylesheets/pageflow/page_transitions/fade.css.scss

@@ -0,0 +1,78 @@
+/* fading background, vertical scrolling content */
+
+section.page {
+  background-color: transparent;
+}
+
+section.fade {
+
+  background-color: transparent;
+
+  &.invert {
+    background-color: transparent;
+  }
+
+  .blackLayer {
+    display: none;
+  }
+  .backgroundArea {
+    background-color: black;
+    -webkit-backface-visibility: hidden;
+    @include transition (opacity 1s ease);
+  }
+
+  &.invert .backgroundArea {
+    background-color: white;
+  }
+
+  &.animate-in-forwards .backgroundArea {
+    opacity: 0;
+  }
+  &.animate-out-forwards .backgroundArea{
+    opacity: 1;
+  }
+  &.animate-in-backwards .backgroundArea{
+    opacity: 0;
+  }
+  &.animate-out-backwards .backgroundArea{
+    opacity: 1;
+  }
+
+  &.active .backgroundArea {
+    opacity: 1;
+  }
+
+  .content {
+    @include transition(1s ease);
+    -webkit-backface-visibility: hidden;
+  }
+
+  &.active div.content {
+    @include transform(translate3d(0,0,0));
+  }
+
+  &.animate-in-forwards {
+    z-index: 2;
+
+    .content {
+      @include transform(translate3d(0,100%,0));
+    }
+  }
+  &.animate-out-forwards {
+    .content {
+      @include transform(translate3d(0,-100%,0));
+    }
+  }
+  &.animate-in-backwards {
+    z-index: 2;
+
+    .content {
+      @include transform(translate3d(0,-100%,0));
+    }
+  }
+  &.animate-out-backwards {
+    .content {
+      @include transform(translate3d(0,100%,0));
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/page_transitions/fade_to_black.css.scss

@@ -0,0 +1,107 @@
+/* fading background, vertical scrolling content */
+
+section.fade_to_black {
+
+  background-color: transparent;
+
+  &.invert {
+    background-color: transparent;
+  }
+
+  .blackLayer {
+    @include transition(1s ease);
+    opacity: 0;
+    background-color: black;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+  }
+
+  &.invert .blackLayer {
+    background-color: white;
+  }
+
+  &.active .blackLayer {
+    opacity: 1;
+  }
+
+  &.animate-in-backwards {
+    display: block;
+  }
+
+  &.animate-in-forwards, &.animate-in-backwards, &.active {
+    z-index: 2;
+  }
+
+  .backgroundArea {
+    opacity: 0;
+    background-color: black;
+    -webkit-backface-visibility: hidden;
+    @include transition(opacity 1s ease 1s);
+  }
+
+  &.invert .backgroundArea {
+    background-color: white;
+  }
+
+  &.animate-in-forwards .backgroundArea {
+    opacity: 0;
+  }
+  &.animate-out-forwards .backgroundArea{
+    opacity: 0;
+    @include transition(1s ease);
+  }
+  &.animate-in-backwards .backgroundArea{
+    opacity: 0;
+    @include transition(1s ease 1s);
+  }
+  &.animate-out-backwards .backgroundArea{
+    opacity: 0;
+    @include transition(1s ease);
+  }
+
+  &.active .backgroundArea {
+    opacity: 1;
+    @include transition(1s ease 1s);
+  }
+
+  .content {
+    @include transition(1s ease);
+    -webkit-backface-visibility: hidden;
+    opacity: 0;
+  }
+
+  &.active .backgroundArea {
+    opacity: 1;
+    @include transition(1s ease 1s);
+  }
+
+  &.active div.content {
+    opacity: 1;
+    @include transition(1s ease 1s);
+  }
+
+  &.animate-in-forwards {
+    .content {
+      opacity: 0;
+    }
+  }
+  &.animate-out-forwards {
+    .content {
+      opacity: 0;
+      @include transition(1s ease);
+    }
+  }
+  &.animate-in-backwards {
+    .content {
+      opacity: 0;
+      @include transition(1s ease 1s);
+    }
+  }
+  &.animate-out-backwards {
+    .content {
+      opacity: 0;
+      @include transition(1s ease);
+    }
+  }
+}