locomotivecms 3.0.1 → 3.1.0.rc1

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

@@ -2,10 +2,39 @@ Locomotive.Views.Shared ||= {}
 
 class Locomotive.Views.Shared.SidebarView extends Backbone.View
 
-  el: 'nav.sidebar'
+  el: 'body > .sidebar'
 
   initialize: ->
+    _.bindAll(@, 'close_sidebar_on_mobile')
+
     @pages_view = new Locomotive.Views.Pages.ListView()
 
+    @tokens = [
+      PubSub.subscribe 'application_view.resize', @close_sidebar_on_mobile
+    ]
+
   render: ->
-    @pages_view.render()
+    @pages_view.render()
+    @collapse_in_sections()
+    @close_sidebar_on_mobile()
+
+  toggle_sidebar: (event) ->
+    if @is_sidebar_open() then @close_sidebar() else @show_sidebar()
+
+  is_sidebar_open: ->
+    $('body').hasClass('sidebar-open')
+
+  show_sidebar: ->
+    $('body').removeClass('sidebar-closed').addClass('sidebar-open')
+
+  close_sidebar: ->
+    $('body').removeClass('sidebar-open').addClass('sidebar-closed')
+
+  close_sidebar_on_mobile: ->
+    if @is_sidebar_open() && $(window).width() < 992
+      @close_sidebar()
+
+  collapse_in_sections: ->
+    @$('a[data-toggle="collapse"].is-active').each ->
+      target_id = $(this).attr('href')
+      $(target_id).collapse('show')

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

@@ -4,11 +4,14 @@
 
 // Stylesheet for all account related pages like register, my account, ...
 
+// Bootstrap overrides
+// =============================================================================
+
 // Core variables and mixins
 
-@import "account/variables";
+@import "new/variables";
 @import "bootstrap/mixins";
-@import "account/keyframes";
+@import "new/keyframes";
 
 // Reset and dependencies
 
@@ -19,21 +22,22 @@
 // Core CSS
 
 @import "bootstrap/scaffolding";
-@import "account/type";
-@import "account/forms";
+@import "new/type";
+@import "new/forms";
 @import "bootstrap/buttons";
 
 // Components
 
 @import "bootstrap/alerts";
 @import "bootstrap/dropdowns";
-@import "account/navs";
+@import "new/navs";
 @import "bootstrap/utilities";
 
 // Custom components
+// =============================================================================
 
-@import "account/brand";
-@import "account/files";
-@import "account/navigation";
-@import "account/notify";
-@import "account/public";
+@import "new/brand";
+@import "new/files";
+@import "new/navigation";
+@import "new/notify";
+@import "new/public";

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

@@ -1,39 +1,116 @@
 //= require select2/select2
+//= require eonasdan-bootstrap-datetimepicker/bootstrap-datetimepicker
 //= require select2-bootstrap-css/select2-bootstrap
 //= require bootstrap-tagsinput/bootstrap-tagsinput
 //= require locomotive/cropper
 //= require locomotive/bootstrap-switch
 //= require locomotive/bootstrap-colorpicker
-//= require locomotive/bootstrap-datetimepicker
 //= require locomotive/highlightjs/github
 
+// Bootstrap overrides
+// =============================================================================
+
+// Core variables and mixins
+
+@import "old/variables";
+@import "bootstrap/mixins";
+
+// Reset and dependencies
+
+@import "bootstrap/normalize";
 @import "font-awesome-sprockets";
 @import "font-awesome";
 
-@import "bootstrap-sprockets";
-@import "./globals/variables";
-@import "bootstrap";
+// Core CSS
+
+@import "bootstrap/scaffolding";
+@import "new/type";
+@import "bootstrap/code";
+@import "bootstrap/grid";
+@import "bootstrap/tables";
+@import "bootstrap/forms";
+@import "bootstrap/buttons";
+
+// Components
+
+@import "bootstrap/component-animations";
+@import "bootstrap/dropdowns";
+@import "bootstrap/button-groups";
+@import "bootstrap/input-groups";
+@import "bootstrap/navs";
+@import "bootstrap/navbar";
+@import "bootstrap/breadcrumbs";
+@import "bootstrap/pagination";
+@import "bootstrap/pager";
+@import "bootstrap/labels";
+@import "bootstrap/badges";
+@import "bootstrap/jumbotron";
+@import "bootstrap/thumbnails";
+@import "bootstrap/alerts";
+@import "bootstrap/progress-bars";
+@import "bootstrap/media";
+@import "bootstrap/list-group";
+@import "bootstrap/panels";
+@import "bootstrap/responsive-embed";
+@import "bootstrap/wells";
+@import "bootstrap/close";
+
+// Components w/ JavaScript
+
+@import "bootstrap/modals";
+@import "bootstrap/tooltip";
+@import "bootstrap/popovers";
+@import "bootstrap/carousel";
+
+// Utility classes
+
+@import "bootstrap/utilities";
+@import "bootstrap/responsive-utilities";
+
+// Custom components
+// =============================================================================
+
+// Vendor
 
 @import "nprogress";
 @import "nprogress-bootstrap";
 
-@import "./base/all";
-
-@import "layouts/main";
-@import "layouts/responsive";
-@import "layouts/live_editing";
-
-@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/translations";
-@import "components/live_editing";
-@import "components/dashboard";
-@import "components/activity_feed";
-@import "components/developers";
-@import "components/sites";
+// Layout
+
+@import "new/actionbar";
+@import "new/brand";
+@import "new/content";
+@import "new/drawer";
+@import "old/main";
+@import "new/navigation";
+@import "old/scrollable";
+@import "new/sidebar";
+@import "new/transitions";
+
+@import "old/nav";
+@import "old/buttons";
+
+@import "old/form/base";
+@import "old/form/code";
+@import "old/form/toggle";
+@import "old/form/rte";
+@import "old/form/markdown";
+@import "old/form/select2";
+@import "old/form/file_input";
+@import "old/form/array_input";
+@import "old/form/color_input";
+@import "old/form/popover";
+@import "old/form/document_picker";
+@import "old/form/link";
+@import "old/form/tags";
+@import "new/files";
+
+@import "old/search_bars";
+@import "new/notify";
+@import "old/list";
+@import "old/content_assets";
+@import "old/translations";
+@import "old/live_editing";
+@import "old/dashboard";
+@import "old/activity_feed";
+@import "old/developers";

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

@@ -1,12 +1,56 @@
+// Core variables and mixins
+
+@import "old/variables";
+@import "bootstrap/mixins";
+
+// Reset and dependencies
+
+@import "bootstrap/normalize";
 @import "font-awesome-sprockets";
 @import "font-awesome";
 
-@import "./globals/variables";
-@import "bootstrap";
+// Core CSS
+
+@import "bootstrap/scaffolding";
+@import "new/type";
+@import "bootstrap/code";
+@import "bootstrap/grid";
+@import "bootstrap/tables";
+@import "bootstrap/forms";
+@import "bootstrap/buttons";
+
+// Components
+@import "bootstrap/component-animations";
+@import "bootstrap/dropdowns";
+@import "bootstrap/button-groups";
+@import "bootstrap/input-groups";
+@import "bootstrap/navs";
+@import "bootstrap/navbar";
+@import "bootstrap/breadcrumbs";
+@import "bootstrap/pagination";
+@import "bootstrap/pager";
+@import "bootstrap/labels";
+@import "bootstrap/badges";
+@import "bootstrap/jumbotron";
+@import "bootstrap/thumbnails";
+@import "bootstrap/alerts";
+@import "bootstrap/progress-bars";
+@import "bootstrap/media";
+@import "bootstrap/list-group";
+@import "bootstrap/panels";
+@import "bootstrap/responsive-embed";
+@import "bootstrap/wells";
+@import "bootstrap/close";
 
-@import "./base/fonts";
-@import "./base/typography";
+// Components w/ JavaScript
+@import "bootstrap/modals";
+@import "bootstrap/tooltip";
+@import "bootstrap/popovers";
+@import "bootstrap/carousel";
 
+// Utility classes
+@import "bootstrap/utilities";
+@import "bootstrap/responsive-utilities";
 
 .container {
   padding-top: 100px;

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

@@ -7,7 +7,6 @@ $button-color:          #fff;
 $fa-font-path:          'font-awesome';
 $fa-version:            '4_4_0';
 
-
 @font-face {
   font-family: 'LocomotiveFontAwesome';
   src: url(font-path('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}'));
@@ -35,7 +34,6 @@ $fa-version:            '4_4_0';
 }
 
 #locomotive-highlighter-actions {
-
   > a {
     background: $button-background;
     background-image: none;

data/app/assets/stylesheets/locomotive/new/_actionbar.scss

@@ -0,0 +1,83 @@
+// =============================================================================
+// Actionbar
+// =============================================================================
+
+// The actionbar wrapper class. Is also used in _transitions.scss for closing
+// and opening animations.
+
+.actionbar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
+  width: 100%;
+  max-width: 500px;
+  background: $white;
+  border-right: 1px solid $border-color-base;
+  transition: left $base-transition-speed linear;
+  .scrollable {
+    margin-top: 173px;
+    &.no-editable-elements {
+      margin-top: 105px;
+    }
+    fieldset.inputs {
+      padding-top: 0;
+    }
+  }
+  .main .header-row {
+    padding: 15px 0;
+  }
+  .info-row {
+    p {
+      margin-bottom: 0;
+      line-height: 30px;
+      color: $gray-darkest;
+      a {
+        color: $gray-darkest;
+      }
+      button {
+        margin-left: 20px;
+      }
+    }
+    fieldset.inputs {
+      .form-group.input {
+        margin-bottom: 0;
+      }
+    }
+  }
+  .editable-elements fieldset:first-child {
+    padding-top: 0;
+  }
+}
+
+// The trigger button on the top right side in the actionbar.
+
+.actionbar-trigger {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 105;
+  width: 30px;
+  height: 30px;
+  padding-top: 5px;
+  text-align: center;
+  cursor: pointer;
+  background: $gray-darker;
+  transition: all $base-transition-speed linear;
+  .fa {
+    color: $white;
+  }
+  &:hover {
+    background: $gray-darkest;
+  }
+}
+
+// Responsive
+// =============================================================================
+
+@media (max-width: $screen-sm-min) {
+  .actionbar {
+    box-shadow: 1px 0 10px rgba($black, .2);
+  }
+}

data/app/assets/stylesheets/locomotive/new/_content.scss

@@ -0,0 +1,65 @@
+// =============================================================================
+// Content
+// =============================================================================
+
+// The main content wrapper which also moves during transitions.
+
+.content-main {
+  position: fixed;
+  top: 52px;
+  right: 0;
+  bottom: 0;
+  left: 300px;
+  transition: left $base-transition-speed linear, right $base-transition-speed linear;
+}
+
+// Inner content wrapper for non-live-edit pages.
+
+.content {
+  position: relative;
+  height: 100%;
+}
+
+// Content overlay when sidebar is open when viewport is smaller then md and
+// when sidebar is open on live edit pages.
+
+.content-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 110;
+  max-width: 0;
+  overflow: hidden;
+  background: rgba($black, .4);
+  opacity: 0;
+  transition: opacity $base-transition-speed linear;
+}
+
+// Content wrapper for live edit pages.
+
+.content-preview {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 500px;
+  z-index: 90;
+  transition: left $base-transition-speed linear;
+}
+
+// Responsive
+// =============================================================================
+
+@media (max-width: $screen-md-min) {
+  .content-main {
+    left: 0;
+  }
+}
+
+@media (max-width: $screen-sm-min) {
+  .content-preview {
+    left: 0;
+  }
+}