pageflow 0.0.1

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

@@ -0,0 +1,119 @@
+@import "bourbon";
+@import "pageflow/mixins";
+@import "pageflow/animations";
+
+@import 'pageflow/jquery_ui';
+@import "./dialogs";
+@import "./colors";
+@import "./embedded";
+@import "./image_positioning";
+@import "./files_explorer";
+@import "./locked";
+@import "./help";
+
+.editor {
+  font-family: Helvetica, "Sans-Serif";
+  font-size: 13px;
+
+  padding: 0;
+  display: block;
+  background-color: #ddd;
+  overflow: hidden;
+
+  * {
+    margin: 0;
+    padding: 0;
+  }
+
+  h2 {
+    font-size: 11px;
+    text-transform: uppercase;
+    font-weight: normal;
+    color: #444;
+    margin: 15px 0 5px 0;
+  }
+
+  ul {
+    list-style: none;
+    min-height: 10px;
+  }
+
+  a {
+    color: #000;
+    text-decoration: none;
+  }
+
+  @import "./forms";
+  @import "./outline";
+  @import "./failures";
+  @import "./menu";
+  @import "./manage_files";
+  @import "./files";
+  @import "./files_gallery";
+  @import "./file_meta_data";
+  @import "./file_stages";
+  @import "./file_thumbnails";
+  @import "./wysihtml5";
+  @import "./tabs_view";
+  @import "./notifications";
+  @import "./publish_entry";
+  @import "./other_entry_item";
+  @import "./select_button";
+
+  a.publish {
+    @include eye-icon;
+    @include icon-button;
+    float: right;
+  }
+
+  a.close {
+    @include cancel-icon;
+    @include icon-button(#888);
+  }
+
+  a.back {
+    @include left-open-icon;
+    @include icon-button(#888);
+  }
+
+  a.add_chapter,
+  a.add_page {
+    @include plus-circled-icon;
+    @include icon-button;
+  }
+
+  a.destroy {
+    @include icon-button(#d00);
+    @include trash-icon;
+    float: right;
+  }
+
+  a.upload {
+    @include icon-button;
+    @include up-icon;
+    float: right;
+  }
+
+  .scrolling {
+    padding: 10px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 25px;
+    overflow: auto;
+  }
+}
+
+main.ui-layout-pane {
+  padding: 0;
+  overflow-x: hidden;
+}
+
+main > .container {
+  height: 100%;
+}
+
+form#upload {
+  visibility: hidden;
+}

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

@@ -0,0 +1 @@
+$highlight-color: #D2E5FA;

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

@@ -0,0 +1,41 @@
+.dialog {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 5;
+
+  &:before {
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+    opacity: 0.5;
+  }
+
+  .box {
+    position: relative;
+    border: solid 1px #aaa;
+    margin: auto;
+    padding: 20px;
+    background-color: #fff;
+  }
+
+  h2, h3 {
+    margin: 0 0 10px 0;
+  }
+
+  .footer {
+    clear: left;
+    text-align: right;
+  }
+
+  a.close {
+    @include cancel-icon;
+    @include icon-button;
+  }
+}

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

@@ -0,0 +1,104 @@
+.page_links li {
+  position: relative;
+  cursor: pointer;
+
+  .placeholder {
+    display: none;
+  }
+
+  .title {
+    pointer-events: none;
+  }
+
+  .reset {
+    @include icon-only-button(white);
+    @include cancel-icon;
+    position: absolute;
+    display: none;
+    z-index: 1;
+    top: 5px;
+    right: 15px;
+    background-color: #fff;
+    border: solid 1px #888;
+  }
+
+  @import "./file_thumbnails";
+
+  .pictogram {
+    pointer-events: none;
+    background-color: #444;
+    position: absolute !important;
+    bottom: 0;
+  }
+
+  &.editable {
+    cursor: default;
+
+    &:hover .reset {
+      display: block;
+    }
+
+    &.unassigned {
+      .reset {
+        display: none;
+      }
+
+      .placeholder {
+        display: block;
+      }
+    }
+
+    %highlight {
+      z-index: 0;
+      position: relative;
+      outline: solid 1px #000;
+
+      &:before {
+        content: "";
+        position: absolute;
+        top: -1px;
+        left: -1px;
+        width: 100%;
+        height: 100%;
+        border: solid 1px #fff;
+        @include animation(blink 3s linear infinite);
+        z-index: 1;
+      }
+    }
+  }
+
+  &.droppable %highlight {
+    background-color: rgba(0, 0, 0, 0.3);
+
+    &:before {
+      background-color: rgba(255, 255, 255, 0.6);
+    }
+  }
+
+  &.editable.highlighted %highlight,
+  &.over %highlight {
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(255, 255, 255, 0.6);
+    }
+  }
+
+  .placeholder,
+  .thumbnail {
+    @extend %highlight;
+  }
+
+  &.dragged {
+    .thumbnail {
+      background-image: none !important;
+    }
+
+    .pictogram {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+.failure {
+  @include background-icon-left($color: #d00, $top: 25px);
+  @include attention-icon;
+
+  padding: 10px 0 0 40px;
+  display: none;
+
+  .retry {
+    text-decoration: underline;
+  }
+
+  p {
+    margin-bottom: 5px;
+  }
+}
+
+.failed > .failure {
+  display: block;
+}
+
+.failure_icon {
+  @include attention-icon;
+  @include background-icon-center($color: #d00);
+
+  display: none;
+  position: absolute;
+  right: 25px;
+  top: 2px;
+  width: 30px;
+  height: 30px;
+}
+
+.failed > ul.menu > li > .failure_icon,
+.failed > a > .failure_icon {
+  display: block;
+}

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

@@ -0,0 +1,31 @@
+.file_meta_data {
+  margin-left: -65px;
+
+  table {
+    margin-bottom: 5px;
+    width: 100%;
+  }
+
+  th {
+    width: 45px;
+    padding: 5px 20px 5px 0;
+    font-weight: normal;
+    text-align: right;
+    font-size: 11px;
+    color: #888;
+  }
+
+  td {
+    padding: 5px 5px 5px 0;
+  }
+
+  a {
+    text-decoration: underline;
+  }
+
+  input[type="text"] {
+    display: block;
+    line-height: 15px;
+    margin: -5px 0;
+  }
+}

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

@@ -0,0 +1,49 @@
+.file_stage_items {
+  border-top: solid 1px #aaa;
+  border-bottom: solid 1px #aaa;
+  padding-bottom: 5px;
+  margin-bottom: 5px;
+}
+
+.file_stage_item {
+  @include background-icon-center($left: 20px, $color: #bbb);
+  margin-left: -60px;
+  padding: 10px 0 5px 60px;
+  white-space: normal;
+
+  &.active {
+    @include background-icon-color(#444);
+    @include background-icon-animation(blink);
+  }
+
+  &.finished {
+    @include background-icon-color(#444);
+  }
+
+  &.failed {
+    @include background-icon-color(#c22);
+  }
+
+  .percent {
+    color: #444;
+    font-size: 12px;
+    font-weight: bold;
+  }
+
+  .error_message {
+    margin-top: 5px;
+  }
+
+  &.uploading {
+    @include up-bold-icon;
+  }
+
+  &.uploading_to_s3 {
+    @include cloud-icon;
+  }
+
+  &.processing,
+  &.encoding {
+    @include cog-icon;
+  }
+}

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

@@ -0,0 +1,79 @@
+.file_thumbnail {
+  background-size: cover;
+
+  .pictogram {
+    width: 100%;
+    height: 100%;
+  }
+
+  .pictogram:hover {
+    background-color: #333;
+  }
+
+  .pictogram {
+    background-color: #444;
+    @include background-icon-center($color: #eee, $font-size: 30px);
+
+    &.audio {
+      @include note-icon;
+    }
+
+    &.uploading {
+      @include up-bold-icon;
+      @include background-icon-animation(blink);
+    }
+
+    &.uploading_to_s3 {
+      @include cloud-icon;
+      @include background-icon-animation(blink);
+    }
+
+    &.processing,
+    &.encoding {
+      @include cog-icon;
+      @include background-icon-animation(blink);
+    }
+
+    &.empty {
+      @include picture-icon;
+    }
+
+    &.failed {
+      @include background-icon-animation(none);
+      @include attention-icon;
+    }
+  }
+
+  &.ready {
+    .pictogram {
+      display: none;
+    }
+  }
+
+  &.always_picogram {
+    .pictogram {
+      display: block;
+    }
+  }
+}
+
+.expandable {
+  .file_thumbnail {
+    @include background-icon-left($color: #fff, $left: 70%, $top: 85%);
+    @include down-open-icon;
+
+    &:before {
+      z-index: 1;
+      opacity: 0.4;
+      text-shadow: #000 1px 0px 4px;
+    }
+
+    &:hover:before {
+      opacity: 1;
+    }
+  }
+
+  .expanded .file_thumbnail {
+    @include up-open-icon;
+  }
+}