Separating editor statics from project styles

fancypages/static/fancypages/js/assets.js

@@ -7,7 +7,7 @@ fancypages.assets = {
             dataType: 'json',
             done: function (e, data) {
                 if (data.result.success) {
-                    $("#asset-gallery").append(data.result.images[0].thumbnailMarkup);
+                    $("#fp-asset-gallery").append(data.result.images[0].thumbnailMarkup);
                     uploadProgress.addClass("hide");
                 } else {
                     parent.fancypages.partials.messages.error(data.reason);
@@ -35,10 +35,5 @@ fancypages.assets = {
             );
         });
 
-        //Enlarge the height of the asset scrollbar
-        var modalHeight = $('#fullscreen-modal', window.parent.document).height() - 100;
-        $('#asset-gallery').closest('.modal-body').css('max-height', modalHeight);
-
-
     }
 };

fancypages/static/fancypages/js/dashboard.js

@@ -47,7 +47,6 @@ fancypages.dashboard = {
                     $(this).removeAttr('data-old-position');
                 }
             });
-            $('.tree li:last-child').addClass('last');
         }
     }
 };

fancypages/static/fancypages/js/editor.js

@@ -264,7 +264,7 @@ fancypages.editor = {
 
     setSelectedAsset: function (assetType, assetId, assetUrl) {
         $('#fullscreen-modal').modal('hide');
-        var assetInput = $(".asset-input.editing");
+        var assetInput = $(".fp-asset-input.editing");
         assetInput.removeClass('editing');
         $("input[name$='_id']", assetInput).attr('value', assetId);
         $("input[name$='_type']", assetInput).attr('value', assetType);
@@ -300,11 +300,11 @@ fancypages.editor = {
         var pageHeight = $(window).height(),
             navBarTop = $('.navbar-accounts').outerHeight(),
             subBarTop = $('.navbar-primary').outerHeight(),
-            buttonsTop = $('.button-nav').outerHeight(),
-            buttonsBottom = $('.form-actions.fixed').outerHeight();
+            buttonsTop = $('.fp-editor-controls').outerHeight(),
+            buttonsBottom = $('.fp-editor-actions').outerHeight();
 
-        $('.sidebar-content').css('height', pageHeight - buttonsTop - buttonsBottom);
-        $('.sidebar-content').jScrollPane();
+        $('.fp-scroll-content').css('height', pageHeight - buttonsTop - buttonsBottom);
+        $('.fp-scroll-content').jScrollPane();
     },
     /*
     * Checks for carousels, initiates viewable items based on where the
@@ -417,7 +417,7 @@ fancypages.editor = {
                 fancypages.eventHandlers.loadIframeModal
             );
             $("#fullscreen-modal").on('hide', function () {
-                $("#fullscreen-modal .modal-body").html('');
+                $("#fullscreen-modal .fp-modal-body").html('');
             });
         },
         /*

fancypages/static/fancypages/js/event-handlers.js

@@ -34,18 +34,18 @@ fancypages.eventHandlers = {
             return;
         }
 
-        $(this).parents('.asset-input').addClass('editing');
+        $(this).parents('.fp-asset-input').addClass('editing');
         var fullscreenModal = $("#fullscreen-modal");
-        var iframeHtml = "<iframe id='" + iframeId + "' frameborder='0' width='100%' height='100%'></iframe>";
-        $(".modal-body", fullscreenModal).html(iframeHtml);
+        var iframeHtml = "<iframe id='" + iframeId + "' frameborder='0' width='99%' height='360'></iframe>";
+        $(".fp-modal-body", fullscreenModal).html(iframeHtml);
         fullscreenModal.modal('show');
 
         var assetManager = $('#' + iframeId),
             modalHeight = fullscreenModal.height() - 100;
+            heading = $(this).data('heading');
         assetManager.attr('src', $(this).data('iframe-src'));
+        fullscreenModal.find('.fp-modal-header h3').text(heading);
 
-        // Set height of the Asset IFrame
-        assetManager.attr('height', modalHeight);
     },
 
     /**
@@ -60,8 +60,9 @@ fancypages.eventHandlers = {
                 container: $(elem).data('container-id')
             },
             success: function (data) {
-                var target = $($(elem).data('target'));
-                target.parents('.modal').modal('show');
+                var target = $($(elem).data('target')),
+                    heading = $(elem).data('heading');
+                target.parents('.fp-modal').modal('show').find('.fp-modal-header h3').text(heading);
                 target.html(data.rendered_form);
 
                 // prevent collapse events within the modal from closing the modal

fancypages/static/fancypages/js/ui.js

@@ -32,5 +32,5 @@ function initFlexSlider() {
 $(document).ready(function() {
     resetCarousel();
     initFitvids();
-    //initFlexSlider();
+    initFlexSlider();
 });

fancypages/static/fancypages/less/assets.less

@@ -1,61 +1,43 @@
 @import "bootstrap/variables.less";
 @import "bootstrap/mixins.less";
 
-//Assest Manager
-#asset-modal-label {
-  border-bottom:1px solid @grayLight;
-  margin-bottom:@baseLineHeight;
-  span {
-    font-size:18px;
-  }
-}
-.assets {
+//fp-thumbnails
+@import "thumbnail.less";
+//Use fp-btn as default class
+@import "buttons.less";
+
+//Assest Manager Modal
+.fp-assets-page {
   background:transparent;
+  padding:0;
+  margin:0;
+}
+.fp-assets {
+  .clearfix();
+}
+.fp-asset-upload {
+  width:20%;
+}
+.fp-asset-upload,
+.fp-modal-body {
+  float:left;
 }
-.asset-fluid {
-  margin: 0;
+.fp-modal-body {
+  width:78%;
+  margin-left:2%;
+  max-height:360px;
   padding:0;
-  max-width: none;
-  .page_inner {
-    padding:0;
-  }
+  overflow-y: auto;
 }
-.thumbnails {
-  .thumbnail {
+#fp-asset-gallery {
+  > li {
+    width: 140px;
     height:180px;
-    background:#fff;
-    &:hover {
-      border-color: #08C;
-      -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
-      -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
-      box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
-      cursor:pointer;
-    }
-  }
-  [class*="span"],
-  [class*="span"]:first-child {
-    margin-left:2.564102564102564% / 2.5;
-    margin-right:2.564102564102564% / 2.5;
+    cursor:pointer;
   }
-  text-align: center;
-  .caption {
-    h6 {
-      width: 100%;
-      white-space: nowrap;
-      overflow: hidden;
-      margin:0;
+  .fp-thumbnail {
+    img {
+      max-height:130px;
     }
   }
-}
-.image_container {
-  background:#fff;
-  border: ;
-  min-height:130px;
-  line-height:130px;
-  margin-bottom: 0;
-  text-align:center;
-  img {
-    max-height:130px;
-    width: 100%;
-  }
-}
+}

fancypages/static/fancypages/less/bootstrap/variables.less

@@ -57,6 +57,24 @@
 @headingsFontWeight:    bold;    // instead of browser default, bold
 @headingsColor:         inherit; // empty to use BS default, @textColor
 
+
+// Component sizing
+// -------------------------
+// Based on 14px font-size and 20px line-height
+
+@fontSizeLarge:         @baseFontSize * 1.25; // ~18px
+@fontSizeSmall:         @baseFontSize * 0.85; // ~12px
+@fontSizeMini:          @baseFontSize * 0.75; // ~11px
+
+@paddingLarge:          11px 19px; // 44px
+@paddingSmall:          2px 10px;  // 26px
+@paddingMini:           0 6px;   // 22px
+
+@baseBorderRadius:      4px;
+@borderRadiusLarge:     6px;
+@borderRadiusSmall:     3px;
+
+
 // Tables
 // -------------------------
 @tableBackground:                   transparent; // overall background-color
@@ -68,7 +86,7 @@
 // -------------------------
 @btnBackground:                     @white;
 @btnBackgroundHighlight:            darken(@white, 10%);
-@btnBorder:                         #bbb;
+@btnBorder:                         #ccc;
 
 @btnPrimaryBackground:              @linkColor;
 @btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 20%);
@@ -93,9 +111,11 @@
 // -------------------------
 @inputBackground:               @white;
 @inputBorder:                   #ccc;
-@inputBorderRadius:             3px;
+@inputBorderRadius:             @baseBorderRadius;
 @inputDisabledBackground:       @grayLighter;
 @formActionsBackground:         #f5f5f5;
+@inputHeight:                   @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
+
 
 // Dropdowns
 // -------------------------
@@ -106,7 +126,7 @@
 
 @dropdownLinkColor:             @grayDark;
 @dropdownLinkColorHover:        @white;
-@dropdownLinkColorActive:       @dropdownLinkColor;
+@dropdownLinkColorActive:       @white;
 
 @dropdownLinkBackgroundActive:  @linkColor;
 @dropdownLinkBackgroundHover:   @dropdownLinkBackgroundActive;
@@ -116,6 +136,7 @@
 // COMPONENT VARIABLES
 // --------------------------------------------------
 
+
 // Z-index master list
 // -------------------------
 // Used for a bird's eye view of components dependent on the z-axis
@@ -157,6 +178,7 @@
 // Navbar
 // -------------------------
 @navbarCollapseWidth:             979px;
+@navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;
 
 @navbarHeight:                    40px;
 @navbarBackgroundHighlight:       #ffffff;
@@ -276,4 +298,4 @@
 
 // 768px-979px
 @fluidGridColumnWidth768:      percentage(@gridColumnWidth768/@gridRowWidth768);
-@fluidGridGutterWidth768:      percentage(@gridGutterWidth768/@gridRowWidth768);
+@fluidGridGutterWidth768:      percentage(@gridGutterWidth768/@gridRowWidth768);