pageflow 0.0.1

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

@@ -0,0 +1,79 @@
+ul.files {
+  margin-top: 10px;
+
+  > li {
+    background-color: #eee;
+    margin-bottom: 2px;
+    position: relative;
+    padding: 37px 10px 0 70px;
+    white-space: nowrap;
+    overflow: hidden;
+    height: 23px;
+  }
+
+  > li.expanded {
+    height: auto;
+  }
+
+  li.blank_slate {
+    text-align: center;
+    padding: 10px 5px 20px 5px;
+    color: #888;
+  }
+
+  .file_thumbnail {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 60px;
+    width: 60px;
+    vertical-align: middle;
+  }
+
+  .file_name {
+    margin-bottom: 10px;
+    display: block;
+  }
+
+  .actions {
+    position: absolute;
+    right: 10px;
+    top: 3px;
+    text-align: right;
+
+    a {
+      float: left;
+      margin-left: 5px;
+    }
+  }
+
+  a.cancel,
+  a.remove,
+  a.retry {
+    @include icon-only-button(#aaa);
+  }
+
+  a.remove {
+    @include trash-icon;
+  }
+
+  a.cancel {
+    @include cancel-icon;
+  }
+
+  a.retry {
+    @include arrows-ccw-icon;
+  }
+
+  a.select {
+    @include button(#590);
+
+    padding-left: 5px;
+    padding-right: 5px;
+    vertical-align: middle;
+
+    position: absolute;
+    top: 3px;
+    left: 70px;
+  }
+}

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

@@ -0,0 +1,38 @@
+.files_explorer {
+
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .entries_panel, .files_panel {
+    display: inline-block;
+    vertical-align: top;
+
+    border: 1px solid #ddd;
+  }
+
+  .entries_panel {
+    width: 20%;
+  }
+
+  .files_panel {
+    width: 77%;
+  }
+
+  .footer {
+    width: 98%;
+    margin-top: 10px;
+  }
+
+  .close {
+    @include cancel-icon;
+    @include icon-button(#888);
+  }
+
+  .ok {
+    @include check-icon;
+    @include icon-button();
+  }
+}

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

@@ -0,0 +1,54 @@
+ul.files_gallery {
+  margin-top: 10px;
+
+  > li {
+    background-color: #eee;
+    margin-bottom: 2px;
+    position: relative;
+    overflow: hidden;
+    float: left;
+    text-align: center;
+    padding: 10px 5px 5px 5px;
+
+    width: 20%;
+    min-width: 110px;
+    max-width: 180px;
+
+    cursor: pointer;
+
+    &.active {
+      background-color: $highlight-color;
+    }
+
+    &.disabled {
+      opacity: 0.5;
+
+      cursor: default;
+
+      @include background-icon-right(#18A507, 22px, 18px);
+      @include check-icon;
+    }
+  }
+
+  li.blank_slate {
+    text-align: center;
+    padding: 10px 5px 20px 5px;
+    color: #888;
+  }
+
+  .file_thumbnail {
+    height: 100px;
+    width: 100px;
+    display: block;
+    margin: auto;
+  }
+
+  .file_name {
+    margin-top: 5px;
+    display: block;
+
+    height: 1.3em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

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

@@ -0,0 +1,266 @@
+label {
+  display: block;
+  position: relative;
+  margin-bottom: 2px;
+  text-transform: uppercase;
+  color: #444;
+  font-size: 11px;
+  font-weight: bold;
+}
+
+/** Make sure the label is on top when an inline help text is displayed */
+label:hover span.name {
+  z-index: 4;
+  position: relative;
+}
+
+select,
+textarea,
+input {
+  font-family: Helvetica, "Sans-Serif";
+  display: block;
+  width: 100%;
+  border: solid 1px #888;
+  line-height: 20px;
+  padding: 2px;
+}
+
+textarea,
+input {
+  padding: 2px;
+  margin: 0 -2px;
+}
+
+.invalid input {
+  border: solid 1px red;
+}
+
+textarea {
+  width: 100%;
+  height: 300px;
+}
+
+textarea.short {
+  height: 100px;
+}
+
+.radio_input,
+.check_box_input {
+  margin: 5px 0;
+  position: relative;
+
+  input {
+    display: inline;
+    width: auto;
+    vertical-align: middle;
+    margin-left: 5px;
+  }
+
+  /** Make sure the input is on top when an inline help text is displayed */
+  &:hover input {
+    z-index: 4;
+    position: relative;
+  }
+
+  label {
+    position: static;
+    display: inline;
+    padding-left: 5px;
+  }
+
+  .inline_help {
+    right: -5px;
+    top: 0;
+  }
+}
+
+.radio_input {
+  padding-top: 10px;
+}
+
+.file_input {
+  position: relative;
+  white-space: nowrap;
+  height: 80px;
+
+  .file_thumbnail {
+    width: 60px;
+    height: 60px;
+    vertical-align: bottom;
+    margin-right: 5px;
+    border: solid 1px #888;
+  }
+
+  div.file_thumbnail {
+    float: left;
+  }
+
+  div.file_name {
+    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;
+  }
+
+  a.edit_positioning {
+    @include icon-only-button();
+    @include doc-landscape-icon;
+
+    position: absolute;
+    top: 53px;
+    left: 70px;
+  }
+
+  .inline_help {
+    white-space: normal;
+  }
+}
+
+.page_reference_input {
+  p {
+    margin: 10px 0;
+    color: #444;
+  }
+
+  ul.chapters {
+    margin-top: 10px;
+
+    > li {
+      margin: 0;
+      padding: 0;
+
+      > a:first-child {
+        cursor: default;
+        margin: 0;
+        padding: 0;
+        background-color: #fff;
+
+        .pictogram {
+          display: none;
+        }
+      }
+    }
+  }
+
+  ul.pages {
+    margin: 5px 0 10px 0;
+
+    .pictogram {
+      opacity: 0.5;
+    }
+
+    .used .pictogram {
+      opacity: 0.2;
+    }
+  }
+
+  .add_page {
+    display: none;
+  }
+}
+
+.configuration_editor {
+  margin: 10px 0;
+
+  > div {
+    padding: 5px 0;
+  }
+}
+
+.chapter_title,
+.page_type {
+  margin-top: 10px;
+}
+
+.form_fields > div {
+  margin-top: 10px;
+}
+
+.slider_input {
+  .slider {
+    margin: 10px 10px 0 40px;
+  }
+
+  .value {
+    font-size: 11px;
+    margin: 7px 0;
+    float: left;
+  }
+}
+
+.validation {
+  margin: 5px -4px 0 -2px;
+  padding: 5px;
+  border: solid 1px #aaa;
+  position: relative;
+
+  &.pending {
+    background-color: #fffdeb;
+  }
+
+  &.failed {
+    background-color: #ffdddd;
+  }
+
+  li {
+    margin: 5px;
+  }
+}
+
+.inline_help {
+  @include background-icon-right($color: #a0c4e0, $font-size: 16px);
+  @include help-circled-icon;
+
+  &:before {
+    top: 3px;
+    right: 3px;
+    width: 20px;
+    height: 17px;
+    text-align: center;
+  }
+
+  position: absolute;
+  top: -7px;
+  right: -6px;
+  width: 30px;
+  height: 0;
+  overflow: hidden;
+
+  padding-top: 23px;
+  margin: 1px;
+
+  &:hover {
+    padding-left: 5px;
+    padding-right: 5px;
+    padding-bottom: 5px;
+    margin: 0;
+    background-color: #e4eef6;
+    border: solid 1px #aaa;
+    width: 100%;
+    height: auto;
+    z-index: 3;
+  }
+
+  font-weight: normal;
+  text-transform: none;
+  font-size: 13px;
+}

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

@@ -0,0 +1,132 @@
+.help {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: none;
+
+  z-index: 5;
+
+  &:before {
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+
+    opacity: 0.2;
+  }
+
+  .box {
+    position: relative;
+    max-width: 800px;
+    max-height: 500px;
+    min-height: 200px;
+    height: 50%;
+    top: 10%;
+    border: solid 1px #aaa;
+    margin: auto;
+    padding: 20px;
+    background-color: #fff;
+    padding-bottom: 100px;
+  }
+
+  a.close {
+    @include cancel-icon;
+    @include icon-button;
+
+  }
+
+  .footer {
+    clear: left;
+    text-align: right;
+  }
+
+  h2, h3 {
+    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;
+  }
+
+  img {
+    float: right;
+    margin: 5px;
+    border: solid 1px #888;
+    padding: 1px;
+  }
+
+  ul {
+    width: 15%;
+    margin: 0;
+    padding: 0 5px 20px 0;
+    float: left;
+  }
+
+  li {
+    list-style: none;
+    font-size: 13px;
+    line-height: 18px;
+
+    a:hover {
+      background-color: #eee;
+    }
+
+    &.active a {
+      font-weight: bold;
+      background-color: #D2E5FA;
+    }
+
+    a {
+      display: block;
+      text-decoration: none;
+      color: #000;
+      padding: 5px;
+    }
+  }
+
+  section {
+    float: left;
+    min-height: 200px;
+    overflow: auto;
+    width: 80%;
+    height: 100%;
+    margin-left: 5px;
+    margin-bottom: 20px;
+    padding-left: 20px;
+    padding-right: 5px;
+    border-left: solid 1px #888;
+  }
+}
+
+.editor .help_button {
+  @include background-icon-left($color: #a0c4e0, $font-size: 16px, $left: 5px);
+  @include help-circled-icon;
+
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  height: 20px;
+  padding: 5px 5px 0px 30px;
+
+  font-family: Helvetica, "Sans-Serif";
+  font-size: 13px;
+
+  border-top: solid 1px #aaa;
+
+  background-color: #fff;
+  cursor: pointer;
+}