pageflow 0.8.2 → 0.9.0

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

@@ -25,6 +25,16 @@
     cursor: default;
   }
 
+  span.password_protected {
+    @include background-icon-center($font-size: 13px, $color: #555);
+    @include lock-icon;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    vertical-align: bottom;
+    border-bottom: none;
+  }
+
   .legend {
     float: left;
     position: relative;

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

@@ -2,3 +2,4 @@
 @import "animations/bounce";
 @import "animations/fade";
 @import "animations/scroll";
+@import "animations/loading";

data/app/assets/stylesheets/pageflow/animations/loading.css.scss

@@ -0,0 +1,8 @@
+@include keyframes(loading) {
+  0%, 40%, 100% {
+    @include transform(scaleY(0.4));
+  }
+  20% {
+    @include transform(scaleY(1));
+  }
+}

data/app/assets/stylesheets/pageflow/animations/scroll.css.scss

@@ -33,3 +33,21 @@
     @include transform(translateY(100%));
   }
 }
+
+@include keyframes(scroll-in-left) {
+  0%   { @include transform(translate(-100%,0)); }
+  100% { @include transform(translate(0,0)); }
+}
+
+@include keyframes(scroll-in-right) {
+  0%   { @include transform(translate(100%,0)); }
+  100% { @include transform(translate(0,0)); }
+}
+@include keyframes(scroll-out-left) {
+  0%   { @include transform(translate(0,0)); }
+  100% { @include transform(translate(-100%,0)); }
+}
+@include keyframes(scroll-out-right) {
+  0%   { @include transform(translate(0,0)); }
+  100% { @include transform(translate(100%,0)); }
+}

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

@@ -53,6 +53,7 @@ a {
 @import "./entries";
 @import "./page";
 @import "./page_types";
+@import "./page_transitions";
 @import "./slideshow";
 @import "./navigation_bar";
 @import "./navigation_mobile";
@@ -64,4 +65,5 @@ a {
 @import "./text_variants";
 @import "./multimedia_alert";
 @import "./hide_text";
-@import "./subshare";
+@import "./subshare";
+@import "./delayed_text_fade_in";

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

@@ -0,0 +1,49 @@
+section.active {
+
+  &.delayed_text_fade_in_short {
+    .page_header {
+      opacity: 0;
+
+      @include animation(fade_in ease forwards 2s 1s);
+    }
+    .shadow_wrapper {
+      opacity: 0;
+
+      @include animation(fade_in ease forwards 2s 0s);
+    }
+    .contentText {
+      opacity: 0;
+      @include animation(fade_in ease forwards 2s 2s);
+    }
+  }
+
+  &.delayed_text_fade_in_medium {
+    .page_header {
+      opacity: 0;
+      @include animation(fade_in ease forwards 2s 3s);
+    }
+    .shadow_wrapper {
+      opacity: 0;
+      @include animation(fade_in ease forwards 2s 2s);
+    }
+    .contentText {
+      opacity: 0;
+      @include animation(fade_in ease forwards 2s 4s);
+    }
+  }
+
+  &.delayed_text_fade_in_long {
+    .page_header {
+      opacity: 0;
+      @include animation(fade_in ease forwards 2s 5s);
+    }
+    .shadow_wrapper {
+      opacity: 0;
+      @include animation(fade_in ease forwards 2s 4s);
+    }
+    .contentText {
+      opacity: 0;
+      @include animation(fade_in ease forwards 2s 6s);
+    }
+  }
+}

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

@@ -6,11 +6,13 @@
 @import "./blank_entry";
 @import "./dialogs";
 @import "./colors";
-@import "./embedded";
 @import "./background_positioning";
+@import "./page_selection";
 @import "./files_explorer";
 @import "./locked";
 @import "./help";
+@import "./indicators";
+@import "./disabled_atmo_indicator";
 
 .editor {
   @extend %pageflow-ui;
@@ -46,9 +48,13 @@
     text-decoration: none;
   }
 
+  @import "./list";
+  @import "./drop_down_button";
+
   @import "./outline";
   @import "./failures";
   @import "./menu";
+  @import "./inputs";
   @import "./manage_files";
   @import "./files";
   @import "./confirm_encoding";
@@ -64,6 +70,8 @@
   @import "./quotas";
   @import "./back_button_decorator";
   @import "./widgets";
+  @import "./page_links";
+  @import "./loading";
 
   a.publish {
     @include eye-icon;
@@ -114,10 +122,15 @@ main.ui-layout-pane {
   padding: 0;
   overflow: hidden;
   border: 0;
+  background-color: #000;
 }
 
-main > .container {
+main > div {
   height: 100%;
+
+  > .container {
+    height: 100%;
+  }
 }
 
 #help_entries_seed {

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

@@ -0,0 +1,13 @@
+.disabled_atmo_indicator {
+  @include background-icon-center($color: #fff, $font-size: 30px);
+  @include mute-icon;
+
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 5px;
+  width: 50px;
+  height: 50px;
+
+  &:hover {
+    opacity: 0.5;
+  }
+}

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

@@ -0,0 +1,54 @@
+.drop_down_button {
+  display: inline-block;
+  position: relative;
+
+  > button {
+    @include icon-button;
+  }
+}
+
+.drop_down_button_menu.is_visible {
+  @include transition(visibility 0ms, opacity 100ms);
+  visibility: visible;
+  pointer-events: all;
+  opacity: 1;
+}
+
+.drop_down_button_list {
+  position: relative;
+  background-color: #eee;
+  border: 1px solid #ccc;
+}
+
+.drop_down_button_menu {
+  visibility: hidden;
+  pointer-events: none;
+  opacity: 0;
+  @include transition(visibility 100ms, opacity 100ms);
+
+  position: absolute;
+  z-index: 1;
+  padding: 1px;
+  border: solid 1px #aaa;
+  background-color: #eee;
+}
+
+.drop_down_button_item {
+  a {
+    display: block;
+    padding: 7px 15px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #ddd;
+    }
+  }
+
+  &.is_disabled a {
+    color: #ddd;
+
+    &:hover {
+      background-color: inherit;
+    }
+  }
+}

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

@@ -33,6 +33,12 @@
 
   .entries_panel {
     width: 20%;
+
+    li.blank_slate {
+      text-align: center;
+      padding: 10px 5px 20px 5px;
+      color: #888;
+    }
   }
 
   .files_panel {

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

@@ -0,0 +1,5 @@
+#editor_indicators {
+  position: absolute;
+  top: 100px;
+  right: 100px;
+}

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

@@ -0,0 +1 @@
+@import "./inputs/reference";

data/app/assets/stylesheets/pageflow/editor/inputs/reference.css.scss

@@ -0,0 +1,51 @@
+.reference_input {
+  position: relative;
+  white-space: nowrap;
+  height: 80px;
+
+  .model_thumbnail {
+    width: 60px;
+    height: 60px;
+    vertical-align: bottom;
+    margin-right: 5px;
+    border: solid 1px #888;
+  }
+
+  div.model_thumbnail {
+    float: left;
+  }
+
+  .file_thumbnail {
+    height: 100%;
+  }
+
+  div.title {
+    position: absolute;
+    top: 20px;
+    left: 70px;
+    right: 20px;
+    overflow: hidden;
+  }
+
+  a.choose {
+    @include icon-only-button;
+    @include pencil-icon;
+
+    position: absolute;
+    top: 53px;
+    right: 0;
+  }
+
+  a.unset {
+    @include icon-only-button($base-color: #d00);
+    @include cancel-circled-icon;
+
+    position: absolute;
+    top: 53px;
+    right: 35px;
+  }
+
+  .inline_help {
+    white-space: normal;
+  }
+}

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

@@ -0,0 +1,108 @@
+.list {
+  .list_items {
+    margin-bottom: 10px;
+  }
+
+  .list_blank_slate {
+    background-color: #efefef;
+    color: #888;
+    padding: 10px;
+  }
+
+  .list_item {
+    background-color: #efefef;
+    cursor: default;
+    padding: 10px 10px 10px 45px;
+    position: relative;
+    margin-bottom: 2px;
+  }
+
+  &.with_type_pictogram .list_item {
+    padding-left: 70px;
+  }
+
+  .list_item_thumbnail,
+  .list_item_missing_thumbnail {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 35px;
+    height: 100%;
+    background-size: cover;
+    background-color: #444;
+  }
+
+  .list_item_thumbnail .thumbnail {
+    height: 100%;
+  }
+
+  .list_item_thumbnail .pictogram:before {
+    font-size: 20px;
+  }
+
+  .list_item_missing_thumbnail {
+    @include attention-icon;
+    @include background-icon-center($color: #fff);
+    display: none;
+    position: absolute;
+  }
+
+  .list_item.is_invalid .list_item_missing_thumbnail {
+    display: block;
+  }
+
+  .list_item_type_pictogram {
+    display: none;
+    content: ' ';
+    position: absolute;
+    top: 0;
+    left: 37px;
+    height: 100%;
+    width: 35px;
+    background-repeat: no-repeat;
+    background-position: 3px 45%;
+    opacity: 0.2;
+  }
+
+  &.with_type_pictogram .list_item_type_pictogram {
+    display: block;
+  }
+
+  .list_item_title {
+    padding-right: 30px;
+  }
+
+  .list_item_description {
+    margin-top: 10px;
+    color: #666;
+  }
+
+  .list_item_buttons {
+    position: absolute;
+    right: 4px;
+    top: 4px;
+    white-space: nowrap;
+  }
+
+  .list_item_buttons > a {
+    display: none;
+
+    &.is_available {
+      display: inline-block;
+    }
+  }
+
+  .list_item_edit_button {
+    @include icon-only-button(#aaa);
+    @include pencil-icon;
+  }
+
+  .list_item_remove_button {
+    @include icon-only-button(#aaa);
+    @include trash-icon;
+  }
+
+  .sortable-placeholder {
+    height: 35px;
+  }
+}

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

@@ -0,0 +1,31 @@
+.spinner > div {
+  background-color: #ddd;
+  height: 100%;
+  width: 6px;
+  display: inline-block;
+  @include animation(loading 1.2s infinite ease-in-out);
+}
+
+.loading .spinner {
+  margin: 20px auto;
+  width: 50px;
+  height: 40px;
+  text-align: center;
+  font-size: 10px;
+
+  .rect2 {
+    @include animation-delay(-1.1s);
+  }
+
+  .rect3 {
+    @include animation-delay(-1.0s);
+  }
+
+  .rect4 {
+    @include animation-delay(-0.9s);
+  }
+
+  .rect5 {
+    @include animation-delay(-0.8s);
+  }
+}