locomotivecms 3.0.0.pre.alpha

data/app/assets/javascripts/locomotive/views/shared/header_view.js.coffee

@@ -0,0 +1,12 @@
+Locomotive.Views.Shared ||= {}
+
+class Locomotive.Views.Shared.HeaderView extends Backbone.View
+
+  el: 'nav.navbar'
+
+  initialize: ->
+
+  render: ->
+
+  height: ->
+    $(@el).outerHeight(true)

data/app/assets/javascripts/locomotive/views/shared/list_item_view.js.coffee

@@ -0,0 +1,22 @@
+Locomotive.Views.Shared ||= {}
+
+class Locomotive.Views.Shared.ListItemView extends Backbone.View
+
+  tagName: 'li'
+
+  events:
+    'click a.remove': 'remove_item'
+
+  template: ->
+    # please overide template
+
+  render: ->
+    $(@el).html(@template()(@model.toJSON()))
+
+    return @
+
+  remove_item: (event) ->
+    event.stopPropagation() & event.preventDefault()
+
+    if confirm $(event.target).closest('a').data('confirm')
+      @model.destroy()

data/app/assets/javascripts/locomotive/views/shared/list_view.js.coffee

@@ -0,0 +1,40 @@
+Locomotive.Views.Shared ||= {}
+
+class Locomotive.Views.Shared.ListView extends Backbone.View
+
+  initialize: ->
+    @sort_url = $(@el).data('sort-url')
+
+  render: ->
+    @make_sortable() if @sort_url?
+
+  make_sortable: ->
+    self = @
+
+    $(@el).sortable
+      items:        '> .item'
+      handle:       '.draggable'
+      axis:         'y'
+      placeholder:  'sortable-placeholder'
+      cursor:       'move'
+      start:        (e, ui) ->
+        ui.placeholder.html('<div class="inner">&nbsp;</div>')
+      update: (event, ui)  ->
+        self.call_sort(ui)
+
+  call_sort: ->
+    $.rails.ajax
+      url:        @sort_url
+      type:       'post'
+      dataType:   'json'
+      data:
+        entries:  _.map $(@el).find('> .item'), (el) -> $(el).data('id')
+        _method:  'put'
+      success:    @.on_successful_sort
+      error:      @.on_failed_sort
+
+  on_successful_sort: (data, status, xhr) ->
+    # $.growl('success', decodeURIComponent $.parseJSON xhr.getResponseHeader('X-Message'))
+
+  on_failed_sort: (data, status, xhr) ->
+    # $.growl('error', decodeURIComponent $.parseJSON xhr.getResponseHeader('X-Message'))

data/app/assets/javascripts/locomotive/views/shared/sidebar_view.js.coffee

@@ -0,0 +1,11 @@
+Locomotive.Views.Shared ||= {}
+
+class Locomotive.Views.Shared.SidebarView extends Backbone.View
+
+  el: 'nav.sidebar'
+
+  initialize: ->
+    @pages_view = new Locomotive.Views.Pages.ListView()
+
+  render: ->
+    @pages_view.render()

data/app/assets/javascripts/locomotive/views/sites/new_view.js.coffee

@@ -0,0 +1,5 @@
+#= require ../shared/form_view
+
+Locomotive.Views.Sites ||= {}
+
+class Locomotive.Views.Sites.NewView extends Locomotive.Views.Shared.FormView

data/app/assets/stylesheets/locomotive/application.scss

@@ -0,0 +1,29 @@
+//= require select2
+//= require select2-bootstrap
+//= require locomotive/cropper
+//= require locomotive/bootstrap-switch
+//= require locomotive/bootstrap-datetimepicker
+//= require locomotive/bootstrap-tagsinput
+
+@import "font-awesome-sprockets";
+@import "font-awesome";
+
+@import "bootstrap-sprockets";
+@import "./globals/bootstrap";
+@import "bootstrap";
+
+@import "./base/all";
+
+@import "layouts/main";
+@import "layouts/responsive";
+
+@import "components/misc";
+@import "components/transitions";
+@import "components/header";
+@import "components/sidebar";
+@import "components/drawer";
+@import "components/main";
+@import "components/list";
+@import "components/content_assets";
+
+@import "components/sites";

data/app/assets/stylesheets/locomotive/base/_all.scss

@@ -0,0 +1,6 @@
+@import "./fonts";
+@import "./form";
+@import "./typography";
+@import "./nav";
+@import "./buttons";
+@import "./iframe";

data/app/assets/stylesheets/locomotive/base/_buttons.scss

@@ -0,0 +1,13 @@
+.btn {
+  border-width: 0px;
+  border-bottom-width: 2px;
+}
+
+.btn-group-vertical > .btn {
+  &:first-child:not(:last-child) {
+    border-top-right-radius: 3px;
+  }
+  &:last-child:not(:first-child) {
+    border-bottom-left-radius: 3px;
+  }
+}

data/app/assets/stylesheets/locomotive/base/_fonts.scss

@@ -0,0 +1,29 @@
+@import "compass/css3";
+
+// Noto Sans
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Noto Sans'), local('NotoSans'), url(http://themes.googleusercontent.com/static/fonts/notosans/v4/LeFlHvsZjXu2c3ZRgBq9nLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
+}
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/notosans/v4/PIbvSEyHEdL91QLOQRnZ16RDOzjiPcYnFooOUGCOsRk.woff) format('woff');
+}
+
+// Muli
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Muli Light'), local('Muli-Light'), url(http://themes.googleusercontent.com/static/fonts/muli/v5/TgrecWq39GVsTOFonFwGXQLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
+}
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Muli'), url(http://themes.googleusercontent.com/static/fonts/muli/v5/minRpKQdEvXRRS8oAbAtWvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
+}

data/app/assets/stylesheets/locomotive/base/_form.scss

@@ -0,0 +1,13 @@
+@import "../globals/all";
+
+@import "./form/base";
+@import "./form/code";
+@import "./form/toggle";
+@import "./form/date";
+@import "./form/rte";
+@import "./form/select2";
+@import "./form/file_input";
+@import "./form/array_input";
+@import "./form/api_key";
+@import "./form/popover";
+@import "./form/document_picker";

data/app/assets/stylesheets/locomotive/base/_iframe.scss

@@ -0,0 +1,4 @@
+.embed-page {
+  height: 100%;
+  padding-bottom: 0px;
+}

data/app/assets/stylesheets/locomotive/base/_nav.scss

@@ -0,0 +1,38 @@
+$nav-tabs-link-color: #a6a6a6;
+
+.nav-tabs {
+
+  border-bottom: 2px solid $nav-tabs-border-color;
+
+  > li {
+    margin-bottom: -2px;
+
+    &:first-child a {
+      padding-left: 0px;
+      padding-right: 0px;
+    }
+
+    > a {
+      border: none;
+      border-bottom: 2px solid transparent;
+
+      color: $nav-tabs-link-color;
+      font-size: 12px;
+      text-transform: uppercase;
+
+      &:hover {
+        border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
+      }
+    }
+
+    &.active > a {
+      &,
+      &:hover,
+      &:focus {
+        border: none;
+        border-bottom: 2px solid $nav-tabs-active-link-hover-border-color;
+      }
+    }
+  }
+
+}

data/app/assets/stylesheets/locomotive/base/_typography.scss

@@ -0,0 +1,5 @@
+@import "../globals/all";
+
+h1 {
+  font-family: $alt-font-family-sans-serif;
+}

data/app/assets/stylesheets/locomotive/base/form/_api_key.scss

@@ -0,0 +1,25 @@
+.simple_form {
+
+  fieldset .input.api_key {
+
+    .form-wrapper {
+      border: none;
+      background: none;
+
+      code {
+        display: block;
+        background: white;
+        margin-bottom: 10px;
+        padding: $padding-base-vertical $padding-base-horizontal;
+
+        font-size: 14px;
+
+        border: $form_input_control_border_size solid $form_input_control_border_color;
+        @include border-radius($form_input_control_border_size);
+
+      }
+    }
+
+  }
+
+}

data/app/assets/stylesheets/locomotive/base/form/_array_input.scss

@@ -0,0 +1,137 @@
+.simple_form {
+
+  fieldset .input.array {
+
+    .form-wrapper {
+      padding: 0px $padding-base-horizontal;
+
+      .list {
+        & > .item {
+          padding-top: 6px;
+          padding-bottom: 6px;
+          border-bottom: $form_input_array_border_size solid $form_input_array_border_color;
+
+          .inner-row {
+            @include display-flex;
+            @include flex-align(center);
+
+            min-height: $form_input_array_item_height;
+
+            > .icon {
+              line-height: $line-height-computed;
+              margin-right: $padding-base-horizontal;
+
+              .img-circle {
+                width: 35px;
+                border: 1px solid $form_input_array_media_border_color;
+              }
+            }
+
+            > .draggable {
+              margin-right: $padding-base-horizontal;
+              color: $form_input_array_draggable_color;
+              font-size: 16px;
+              @include draggable;
+            }
+
+            > .buttons {
+              margin-left: auto;
+            }
+          }
+
+          &.ui-sortable-helper {
+            background: #fff;
+            border: $form_input_array_border_size solid $form_input_array_border_color;
+          }
+        }
+
+        &.new-input-disabled > .item:last-child,
+        &.new-input-disabled > .item.last-child
+         {
+          border-bottom: none;
+        }
+
+        .sortable-placeholder {
+          background-color: $form_input_array_placeholder_background;
+          @include make-row();
+          height: $form_input_array_placeholder_height + $form_input_array_placeholder_margin * 2;
+
+          .inner {
+            background-color: $form_input_array_placeholder;
+            @include border-radius($form_input_array_placeholder_height / 2);
+            border: none;
+            margin-top: $form_input_array_placeholder_margin - ($form_input_array_border_size / 2);
+            margin-bottom: $form_input_array_placeholder_margin;
+            margin-left: $form_input_array_border_size;
+            margin-right: $form_input_array_border_size;
+            height: $form_input_array_placeholder_height
+          }
+
+        }
+
+      }
+
+      .new-field {
+
+        .field, .button {
+          height: 44px;
+          line-height: 44px;
+        }
+
+        .field {
+          padding-left: $form_input_control_border_size;
+
+          input[type=text] {
+            @include box-shadow(none);
+            padding-left: $padding-base-horizontal - $form_input_control_border_size;
+          }
+        }
+
+        .form-control.select2-container {
+          background: transparent;
+          border: none;
+          @include border-radius(0px);
+          left: -$form_input_control_border_size - 1px;
+          padding: $select2-vertical-padding $form_input_control_border_size * 2;
+
+          &.select2-dropdown-open {
+            padding-top: $select2-vertical-padding;
+            padding-bottom: $select2-vertical-padding + 1px;
+          }
+
+          &.select2-dropdown-open.select2-drop-above {
+            padding-top: $select2-vertical-padding;
+            padding-bottom: $select2-vertical-padding;
+          }
+        }
+
+      }
+    }
+  }
+}
+
+@media (max-width: $screen-sm-min) {
+
+  .simple_form {
+    fieldset .input.array {
+      .form-wrapper {
+        .list {
+          & > .item {
+            .inner-row {
+              @include flex-wrap;
+
+              > .text {
+                margin-right: $padding-base-horizontal;
+              }
+
+              > .buttons {
+                margin-left: 0px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+}

data/app/assets/stylesheets/locomotive/base/form/_base.scss

@@ -0,0 +1,70 @@
+.simple_form {
+
+  padding-bottom: 40px;
+
+  fieldset {
+    padding-top: 20px;
+
+    legend {
+      display: none;
+    }
+
+    > .input {
+      background: $form_input_background_color;
+      padding: $form_input_padding;
+      @include border-radius($form_input_radius);
+
+      header {
+        a.action {
+          font-size: 13px;
+        }
+      }
+
+      .control-label {
+        display: inline-block;
+        font-size: $form_input_label_size;
+        font-weight: bold;
+        text-transform: uppercase;
+        color: $form_input_label_color;
+
+        abbr {
+          margin-left: 5px;
+        }
+      }
+
+      .help-inline, .error-inline {
+        margin-left: 10px;
+        font-family: $alt-font-family-sans-serif;
+      }
+
+      .help-inline {
+        color: $form_input_help_color;
+        font-size: $form_input_help_size;
+      }
+
+      .error-inline {
+        color: $state-danger-text;
+      }
+
+      .form-wrapper {
+        margin-top: 12px;
+        display: block;
+        background: $form_input_wrapper_background_color;
+        border: $form_input_control_border_size solid $form_input_control_border_color;
+        @include border-radius($form_input_control_border_size);
+
+        > input, > select {
+          border: none;
+          @include border-radius(0px);
+        }
+      }
+
+    }
+
+    .has-error {
+      @include form-control-validation($text-color, $input-border, $state-danger-bg);
+    }
+  }
+}
+
+