caboose-cms 0.9.229 → 1.0.1

data/app/assets/stylesheets/caboose/admin/page_edit/block_overlays.scss

@@ -0,0 +1,182 @@
+#block_overlays_container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  
+  #block_overlays {  
+    position: relative;
+    
+    .section_width_overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 100;
+      border-left:  #3893E5 1px dashed;
+      border-right: #3893E5 1px dashed;
+    }
+    
+    .block_overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 100;
+      /*
+      border: #ff0000 1px dashed;
+      */
+      &.section_block_overlay {
+        border-bottom: #ff0000 1px dashed;
+      }      
+      .message {
+        width: 100%;
+        height: 100%;
+        display: table;                
+      }
+      .caboose_note {        
+        width: 100%;
+        height: 100%;
+        display: table-cell;
+        vertical-align: middle;
+        text-align: center;
+        padding: 10px 20px; background: #d07f7f; color: #fff; font-size: 16px; 
+      }      
+      &.selected { 
+        background: #fff799;
+        border: #ff0000 2px solid;
+        background: transparent;
+      }            
+             
+      $dt1: 1px dotted #666666;            
+      $dt3: 2px solid #00ff00 !important;
+    
+      &.drop_target_active        { /* border: $dt1; */ }
+      &.drop_target_hover_all     { border-top: $dt3; border-right: $dt3; border-bottom: $dt3; border-left: $dt3; }
+      &.drop_target_hover_top     { border-top: $dt3; }
+      &.drop_target_hover_bottom  { border-bottom: $dt3; }
+      &.drop_target_hover_left    { border-left: $dt3; }
+      &.drop_target_hover_right   { border-right: $dt3; }
+      
+      &.anchor_source_top    { border-top:    #00ff00 2px solid !important; }
+      &.anchor_source_right  { border-right:  #00ff00 2px solid !important; }
+      &.anchor_source_bottom { border-bottom: #00ff00 2px solid !important; }
+      &.anchor_source_left   { border-left:   #00ff00 2px solid !important; }
+      
+      &.anchor_target_top    { border-bottom: #00ff00 2px solid !important; }
+      &.anchor_target_right  { border-left:   #00ff00 2px solid !important; }
+      &.anchor_target_bottom { border-top:    #00ff00 2px solid !important; }
+      &.anchor_target_left   { border-right:  #00ff00 2px solid !important; }      
+            
+      .overlay_controls {
+        display: none;
+      }      
+       
+      &.over,
+      &.anchor_drag {
+        /*
+        background: #e3e3e3 !important;
+        background-color: rgba(0,0,0,0.1) !important;
+        */
+        border: #ff0000 1px dashed;
+        &.selected {
+          border: #ff0000 2px solid;
+        }
+        .overlay_controls {
+          display: block;
+          a {
+            position: absolute;
+            top: -26px;
+            display: block;
+            width: 25px;
+            height: 25px;
+            background-image: url('/assets/caboose/admin/overlay_nav.png');
+            background-repeat: no-repeat;
+            background-position: top left;            
+            border: #10151b 1px solid;
+            
+            &.content             { right: 125px; background-position: -450px 0; border-width: 1px 0px 1px 1px; width: 50px; height: 27px; }
+            &.anchors             { right:  99px; background-position: -450px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+            &.layers              { right:  74px; background-position: -350px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+            &.duplicate           { right:  49px; background-position: -375px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+            &.save                { right:  24px; background-position: -300px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+            &.delete              { right:  -1px; background-position: -325px 0; border-width: 1px 1px 1px 1px; width: 27px; height: 27px; }
+            
+            &.content {              
+              background: #4f5e72;              
+              span {
+                padding: 2px 4px 0 0;
+                display: block;
+                text-align: center;
+                color: #fff;
+              }              
+            }
+            
+            /*
+            &.align_left          { right: 25px; background-position: 50px 0; }          
+            &.align_right         { right: 25px; background-position: 50px 0; }
+            &.align_bottom        { right: 25px; background-position: 50px 0; }
+            &.align_top           { right: 25px; background-position: 50px 0; }
+            &.align_horizontally  { right: 25px; background-position: 50px 0; }
+            &.align_vertically    { right: 25px; background-position: 50px 0; }
+            &.center_horiontally  { right: 25px; background-position: 50px 0; }
+            &.center_vertically   { right: 25px; background-position: 50px 0; }
+            */                        
+          }
+        }
+        &.section_block_overlay {
+          .overlay_controls {                    
+            a {            
+              top: -1px;
+            }                        
+          }
+        }
+      }
+    }
+
+    /*
+    .over > .content_handle   { display: block; position: relative; z-index: 3; }
+    .over > .anchors_handle   { display: block; position: relative; z-index: 3; }
+    .over > .layers_handle    { display: block; position: relative; z-index: 3; }
+    .over > .duplicate_handle { display: block; position: relative; z-index: 3; }
+    .over > .save_handle      { display: block; position: relative; z-index: 3; }
+    .over > .delete_handle    { display: block; position: relative; z-index: 3; }
+          
+    .over > .content_handle   span { position: absolute; top: 0; right: 200px; width: 100px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
+    .over > .anchors_handle   span { position: absolute; top: 0; right:  72px; width:  18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
+    .over > .layers_handle    span { position: absolute; top: 0; right:  54px; width:  18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
+    .over > .duplicate_handle span { position: absolute; top: 0; right:  36px; width:  18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
+    .over > .save_handle      span { position: absolute; top: 0; right:  18px; width:  18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
+    .over > .delete_handle    span { position: absolute; top: 0; right:   0px; width:  18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
+    */
+    
+    .highlight {
+      border: rgba(255, 255, 0, 0.5) 2px solid !important;
+      background-color: rgba(255, 255, 0, 0.5); 
+    }  
+    /*
+    .block_overlay_flex_grid {   
+      border: #ff0000 1px dashed;            
+    }
+    .block_overlay_flex_unit {      
+      border: #ff0000 1px dashed;      
+    }
+    */
+    
+    .guide {
+    	display: none;
+    	position: absolute;
+    	left: 0;
+    	top: 0;
+      background: #ff0000 !important;
+      z-index: 20000;
+    }
+    
+    #guide-h {
+    	border-top: 1px dashed #55f !important;
+    	width: 100%;    	    	
+    }
+    
+    #guide-v {
+    	border-left: 1px dashed #55f !important;
+    	height: 100%;    	
+    }
+  }
+}

data/app/assets/stylesheets/caboose/admin/page_edit/device_selector.scss

@@ -0,0 +1,65 @@
+
+#select_device_wrapper {
+  
+  table {
+    margin: 0 auto;  
+    width: 100%;
+    
+    td {
+      text-align: center;      
+    }
+    
+    tr#device_selector {      
+      td {    
+        margin: 0;
+        padding: 0;        
+
+        a {
+          display: block;
+          text-decoration: none;        
+          width: 74px;
+          height: 54px !important;
+          margin: 0 auto;
+          padding: 0;
+          position: relative;          
+                                                 
+          span.icon {
+            position: absolute;
+            top: 0px;
+            left: 0px;
+            display: block;
+            width: 74px;
+            height: 54px;
+            background-image: url('/assets/caboose/admin/admin_device_icons.gif');
+            background-position: center center;
+          }
+          span.text {
+            display: block;
+            position: absolute;
+            top: 36px;
+            left: 0;
+            width: 74px;
+            height: 16px;
+            color: #333 !important;
+            text-transform: uppercase;
+            font-size: 10px;
+            text-align: center;
+          }
+          &:hover {                             
+            span.text { color: white !important; }
+          }      
+        }  
+        &.selected {
+          border-bottom: none;
+          a, a:hover {        
+            span.text { color: white !important; }
+          }        
+        }
+        
+        &.breakpoint3 /* Mobile  */ { a { span.icon { background-position: -74px    0px; } &:hover { span.icon { background-position: -148px    0px; }}} &.selected { a, a:hover { span.icon { background-position: 0    0px; }}}}
+        &.breakpoint2 /* Tablet  */ { a { span.icon { background-position: -74px  -54px; } &:hover { span.icon { background-position: -148px  -54px; }}} &.selected { a, a:hover { span.icon { background-position: 0  -54px; }}}}
+        &.breakpoint1 /* Desktop */ { a { span.icon { background-position: -74px -108px; } &:hover { span.icon { background-position: -148px -108px; }}} &.selected { a, a:hover { span.icon { background-position: 0 -108px; }}}}
+      }
+    }
+  }
+}

data/app/assets/stylesheets/caboose/admin/page_edit/froala.scss

@@ -0,0 +1,81 @@
+/****************************************/
+/* Heading Froala editor
+/****************************************/
+
+.fr-box.fr-basic .fr-wrapper {
+  background: transparent !important;
+}
+.fr-box.fr-basic.fr-top .fr-wrapper {
+  box-shadow        : none !important;
+  -webkit-box-shadow: none !important;
+}
+
+.heading-froala > .fr-toolbar.fr-desktop.fr-top {
+  position: absolute;
+  top: -40px;
+  width: 500px;
+}
+
+.fr-box.fr-basic .fr-wrapper {
+  text-align: center;
+}
+
+.fr-box.fr-basic .fr-element {
+  padding: 0 !important;
+  overflow-x: hidden !important;
+  height: 100% !important;
+}
+
+.fr-element.fr-viewer {
+  margin: 0;
+}
+
+/* Fake highlighting */
+.sp-text-selected, .sp-text-selected span{
+  /* color: #000 !important; */
+  background-color: #ACCEF7;
+}
+
+/* Selection show text color */
+.fr-element > h1::selection {
+  color: inherit;
+}
+
+.fr-element > h1::-moz-selection {
+  color: inherit;
+}
+
+.fr-element > h1 > span::selection {
+  color: inherit;
+}
+
+.fr-element > h1 > span::-moz-selection {
+  color: inherit;
+}
+
+/****************************************/
+/* Richtext Froala editor
+/****************************************/
+
+.richtext-froala > .fr-toolbar.fr-desktop.fr-top {
+  position: absolute;
+  top: -80px;
+  width: 600px;
+}
+
+/* Selection show text color */
+.fr-element::selection {
+  color: inherit;
+}
+
+.fr-element::-moz-selection {
+  color: inherit;
+}
+
+.fr-element > span::selection {
+  color: inherit;
+}
+
+.fr-element > span::-moz-selection {
+  color: inherit;
+}

data/app/assets/stylesheets/caboose/admin/page_edit/group_overlay.scss

@@ -0,0 +1,115 @@
+.group_overlay {
+  border: #0000ff 1px dotted;    
+  position: absolute;
+  
+  .caboose_note {        
+    width: 100%;
+    height: 100%;
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+    padding: 10px 20px;
+    background: #d07f7f;
+    color: #fff;
+    font-size: 16px; 
+  }
+  
+  .group_controls {
+    position: absolute;
+    top: -20px;    
+    height: 20px;
+    a {
+      float: right;
+      width: 20px;
+      &.hover { background: #ff0000; }    
+    }
+    #align_top     {}
+    #align_bottom  {}
+    #align_left    {}
+    #align_right   {}
+    #evenly_dist_h {}
+    #evenly_dist_v {}
+    #create_group  {}
+    #clear_group   {}
+  }
+  
+  .overlay_controls {
+    position: absolute;
+    left: -1px;
+    top: -2px; 
+    box-sizing: border-box;
+    display: block;
+    a {
+      position: absolute;
+      top: -25px;
+      display: block;
+      width: 26px;
+      height: 26px;
+      background-image: url('/assets/caboose/admin/overlay_nav.png');
+      background-repeat: no-repeat;
+      background-position: top left;
+      background-color: #ff0000;
+      border: #10151b 1px solid;
+      color: #fff;
+      
+      /*
+      &.layers              { right: 74px; background-position: -250px 0; background-color: #3c4c62; border-width: 1px 0px 1px 1px; }
+      &.duplicate           { right: 49px; background-position: -275px 0; background-color: #3c4c62; border-width: 1px 0px 1px 1px; }
+      */
+      
+      span {
+        display: block;
+        color: #fff;
+        padding-top: 4px;         
+        background: #4f5e72;
+        font-size: 12px;
+      }
+      &.align                     { left:   0px; background: #4f5e72;           border-width: 1px 0px 1px 1px; width: 50px; height: 27px; text-align: center; }
+      &.distribute                { left:  50px; background: #4f5e72;           border-width: 1px 0px 1px 1px; width: 75px; height: 27px; text-align: center; }
+      &.save                      { left: 125px; background-position: -300px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+      &.delete                    { left: 151px; background-position: -325px 0; border-width: 1px 1px 1px 1px; width: 27px; height: 27px; }
+       
+      &.align_top_edges           { top: 0; left:   0px; background-position:    0px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+      &.align_vertical_centers    { top: 0; left:  25px; background-position:  -25px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+      &.align_bottom_edges        { top: 0; left:  50px; background-position:  -50px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }        
+      &.align_left_edges          { top: 0; left:  75px; background-position:  -75px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+      &.align_horizontal_centers  { top: 0; left: 100px; background-position: -100px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+      &.align_right_edges         { top: 0; left: 125px; background-position: -125px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+
+      &.dist_top_edges            { top: 0; left:   0px; background-position: -150px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+      &.dist_vertical_centers     { top: 0; left:  25px; background-position: -175px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+      &.dist_bottom_edges         { top: 0; left:  50px; background-position: -200px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+      &.dist_left_edges           { top: 0; left:  75px; background-position: -225px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+      &.dist_horizontal_centers   { top: 0; left: 100px; background-position: -250px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+      &.dist_right_edges          { top: 0; left: 125px; background-position: -275px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+      &.dist_padding_vertically   { top: 0; left: 150px; background-position: -300px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+      &.dist_padding_horizontally { top: 0; left: 175px; background-position: -325px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
+    }
+    #align_controls {
+      position: absolute;
+      top: -25px;      
+      left: 50px;
+      width: 0;
+      height: 27px;
+      overflow: hidden;
+      background: #ff0000;
+    }
+    #distribute_controls {
+      position: absolute;
+      top: -25px;      
+      left: 125px;
+      width: 0;
+      height: 27px;
+      overflow: hidden;
+      background: #ff0000;
+    }
+  }
+}
+
+#multiselect {
+  position:absolute;
+  z-index: 9000;  
+  background-color:rgba(73, 144, 225, 0.3);
+  border: 1px solid #4990E1;  
+  cursor: default !important;
+}

data/app/assets/stylesheets/caboose/admin/page_edit/layout.scss

@@ -0,0 +1,128 @@
+
+body {
+  padding-bottom: 500px;
+}
+
+#loco-loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255,255,255,0.85);
+  z-index: 9999;
+  text-align: center;
+  img {
+    display: inline-block;
+    margin-bottom: 20px;
+  }
+  h1 {
+    margin-bottom: 0;
+    font-size: 18px;
+    color: #4990E1;
+    font-family: "Open Sans";
+  }
+}
+
+#admin_subnav_toggle {    
+  position: absolute;
+  top: 0;
+  left: 0;
+  
+  a {
+    display: block;
+    width: 20px;
+    height: 54px;
+    background-image: url('/assets/caboose/admin/left_arrow.png');
+    background-position: center center;
+    background-repeat: no-repeat;    
+    
+    span { display: none; }
+  }
+  &.no_left_nav { 
+    a {
+      background-image: url('/assets/caboose/admin/right_arrow.png');
+    }
+  }
+}
+
+#admin_content_wrapper {
+  // height: calc(100vh - 54px);
+  // overflow: scroll;
+}
+#admin_content_body {
+  background: #f3f3f3;
+  padding: 0 !important;
+}
+#admin_content_body #page_content {  
+  /*max-width: calc(100vw - 390px);*/  
+  margin: 0 0 0 1px; /*20px auto*/  
+  &.desktop { width: 1080px; }  
+  &.tablet  { width: 570px;  }
+  &.mobile  { width: 315px;  }
+}
+
+#admin_content_body {
+  text-align: center;
+  position: relative;
+}
+
+@import url('https://fonts.googleapis.com/css?family=Open+Sans');
+
+.flex-grid-container.ui-droppable, .flex-grid-unit.ui-droppable {
+  border: 1px dashed #cccccc;
+  &.block_over {
+    border-color: #4990E1;
+  }
+}
+
+#page_content {
+  background: #fff;
+    
+  .new_block_link { position: relative; width: 100%; }
+  .new_block_link .line { position: absolute; top: -11px; width: 100%; height: 2px; background: transparent; }
+  .new_block_link a { position: absolute; top: -20px; left: 45%; background: transparent; color: transparent !important; display: block; padding: 4px 8px; }
+  .new_block_link_over { position: relative; width: 100%; }
+  .new_block_link_over .line { position: absolute; top: -11px; width: 100%; height: 2px; background: #ccc; }
+  .new_block_link_over a { position: absolute; top: -22px; left: 45%; color: #fff; background: #666; display: block; padding: 2px 4px; text-decoration: none; font-size: 12px; }
+  
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  
+  $dt1: 1px dotted #666666;
+  $dt2: none;
+  $dt3: 2px solid #ff0000;
+    
+  .drop_target_active                                     { border: $dt1; }
+  .drop_target_hover_all                                  { border-top: $dt3; border-right: $dt3; border-bottom: $dt3; border-left: $dt3; }
+  .drop_target_hover_top                                  { border-top: $dt3; border-right: $dt1; border-bottom: $dt1; border-left: $dt1; }
+  .drop_target_hover_bottom                               { border-top: $dt1; border-right: $dt1; border-bottom: $dt3; border-left: $dt1; }
+  .drop_target_hover_left                                 { border-top: $dt1; border-right: $dt1; border-bottom: $dt1; border-left: $dt3; }
+  .drop_target_hover_right                                { border-top: $dt1; border-right: $dt3; border-bottom: $dt1; border-left: $dt1; }      
+}
+
+.magic_header {
+  padding: 4px 8px;
+  font-size: 10px;    
+}
+
+.move {
+  width : 25px;
+  height: 25px;
+  right : 0;
+}
+
+.move_up {
+  margin-top: 25px;
+}
+
+.move_down {
+  margin-top: 50px;
+}
+
+/****************************************/
+
+.selected {
+  border-bottom: #505e72 4px solid;
+}