Remove pluggable grid framework

CHANGES.rst

@@ -12,6 +12,11 @@ Changelog
   buildout with ``zcml = plone.app.mosaic-meta:sitelayouts-meta.zcml``
   [datakurre]
 
+- Replaced Deco-Grid styles with Bootstrap mixins form mixins.grid.plone.less
+  Allows to use override grid system using standard mosaic class names.
+  Main purpose is to unify the edit and view of your layout. Fixes #231
+  [agitator]
+
 - Depend on adapterized plone.app.blocks >= 4.0.0 and adopt mosaic to use it.
   [jensens]
 

Makefile

@@ -10,8 +10,14 @@ SOURCE_JS = build.js $(shell find $(STATIC)/js -name "*.js")
 BUNDLE_JS = $(STATIC)/plone-mosaic.js
 SOURCE_LESS = $(shell find $(STATIC)/css -name "*.less")
 BUNDLE_LESS = $(STATIC)/plone-mosaic.css
+BUNDLE_GRID_LESS = $(STATIC)/mosaic-grid.css
 CURRENT_DIR = $(shell pwd)
-LESS_OPTS = '--modify-var=staticPath="$(CURRENT_DIR)"'
+LESS_OPTS = '--modify-var=staticPath="$(CURRENT_DIR)"' \
+            '--modify-var=barcelonetaPath="$(CURRENT_DIR)/components/plonetheme.barceloneta/plonetheme/barceloneta/theme"' \
+            '--modify-var=plone-grid-columns=12' \
+            '--global-var=plone-grid-gutter-width=30px' \
+            '--modify-var=plone-screen-sm-min=768px' \
+            '--modify-var=plone-screen-md-min=992px'
 RJS_OPTIONS = paths.pat-logger=$(CURRENT_DIR)/components/patternslib/src/core/logger paths.logging=$(CURRENT_DIR)/components/logging/src/logging
 
 # if mode variable is empty, setting debug build mode
@@ -23,7 +29,7 @@ endif
 
 all: build
 
-build: $(BUNDLE_JS) $(BUNDLE_LESS)
+build: $(BUNDLE_JS) $(BUNDLE_LESS) $(BUNDLE_GRID_LESS)
 
 install:
 	npm install
@@ -43,11 +49,14 @@ endif
 $(BUNDLE_LESS): $(SOURCE_LESS)
 	lessc $(LESS_OPTS) $(STATIC)/css/mosaic.pattern.less > $(BUNDLE_LESS)
 
+$(BUNDLE_GRID_LESS): $(SOURCE_LESS)
+	lessc $(LESS_OPTS) $(STATIC)/css/mosaic.grid.less > $(BUNDLE_GRID_LESS)
+
 watch:
 	watch make $(STATIC)
 
 clean:
-	rm -f $(BUNDLE_JS) $(BUNDLE_JS).map $(BUNDLE_LESS)
+	rm -f $(BUNDLE_JS) $(BUNDLE_JS).map $(BUNDLE_LESS) $(BUNDLE_GRID_LESS)
 
 watch_instance: bin/instance
 	RELOAD_PATH=src bin/instance fg

bower.json

@@ -17,7 +17,8 @@
   "dependencies": {
     "bootstrap": "~3.3.4",
     "patternslib": "~2.0.11",
-    "jquery": "~1.11.2"
+    "jquery": "~1.11.2",
+    "plonetheme.barceloneta": "https://github.com/plone/plonetheme.barceloneta.git#^1.6.21"
   },
   "devDependencies": {},
   "resolutions": {

src/plone/app/mosaic/browser/static/css/mosaic.grid.less

@@ -1,56 +1,65 @@
-.mosaic-enabled, .mosaic-grid {
+@import (reference) "@{barcelonetaPath}/less/mixin.grid.plone.less";
+
+@columns: @plone-grid-columns;
+// We're using the mixin classes from mixin.grid.plone.less to create the default column styles
+
+.mosaic-enabled, .mosaic-grid, .template-layout {
   /* Grid classes, these can also be nested */
   .mosaic-grid-row {
-    float: left;
-    width: 100%;
-    display: block;
-    position: relative;
-  }
-  .mosaic-grid-cell {
     position: relative;
-    float: left;
-    left: 100%;
+    .make-row(@gutter: @plone-grid-gutter-width)
   }
+}
 
+// grid definition vor editing
+// we don't want responsive styles here
+.mosaic-enabled, .mosaic-grid {
   /* Widths, these are abstracted out so that pixel-based layouts or other
      similar approaches can be retrofitted without changing the markup,
      or if you want to apply rules like the Golden Ratio to your layouts */
   .mosaic-width-full {
-    width: 100%;
+    .make-xs-column((@columns); @gutter: @plone-grid-gutter-width)
   }
   .mosaic-width-half {
-    width: 50%;
+    .make-xs-column((@columns / 2); @gutter: @plone-grid-gutter-width)
   }
   .mosaic-width-quarter {
-    width: 25%;
+    .make-xs-column((@columns / 4); @gutter: @plone-grid-gutter-width);
   }
   .mosaic-width-three-quarters {
-    width: 75%;
+    .make-xs-column((@columns / 4 * 3); @gutter: @plone-grid-gutter-width)
   }
   .mosaic-width-third {
-    width: 33.33%;
+    .make-xs-column((@columns / 3); @gutter: @plone-grid-gutter-width)
   }
   .mosaic-width-two-thirds {
-    width: 66.67%;
+    .make-xs-column((@columns / 3 * 2); @gutter: @plone-grid-gutter-width)
   }
+}
 
-  /* Positioning classes, these are subtracting from a rightmost position */
-  .mosaic-position-leftmost {
-    margin-left: -100%;
+// grid definition vor viewing
+.template-layout {
+  /* Widths, these are abstracted out so that pixel-based layouts or other
+     similar approaches can be retrofitted without changing the markup,
+     or if you want to apply rules like the Golden Ratio to your layouts */
+  .mosaic-width-full {
+    .make-xs-column((@columns); @gutter: @plone-grid-gutter-width)
   }
-  .mosaic-position-third {
-    margin-left: -66.67%;
+  .mosaic-width-half {
+    .make-sm-column((@columns / 2); @gutter: @plone-grid-gutter-width)
   }
-  .mosaic-position-two-thirds {
-    margin-left: -33.33%;
+  .mosaic-width-quarter {
+    .make-sm-column((@columns / 2); @gutter: @plone-grid-gutter-width);
+    .make-md-column((@columns / 4); @gutter: @plone-grid-gutter-width);
   }
-  .mosaic-position-quarter {
-    margin-left: -75%;
+  .mosaic-width-three-quarters {
+    .make-md-column((@columns / 4 * 3); @gutter: @plone-grid-gutter-width)
   }
-  .mosaic-position-half {
-    margin-left: -50%;
+  .mosaic-width-third {
+    .make-md-column((@columns / 3); @gutter: @plone-grid-gutter-width)
   }
-  .mosaic-position-three-quarters {
-    margin-left: -25%;
+  .mosaic-width-two-thirds {
+    .make-md-column((@columns / 3 * 2); @gutter: @plone-grid-gutter-width)
   }
 }
+

src/plone/app/mosaic/browser/static/js/mosaic.layout.js

@@ -1675,8 +1675,7 @@ define([
 
           // Add row open tag
           classNames = $(this).attr("class");
-          body += '      <div class="' + classNames + '"\n';
-          body += '           data-grid=\'{"type": "row"}\'>\n';
+          body += '      <div class="' + classNames + '">\n';
 
           // Loop through rows
           $(this).children(".mosaic-grid-cell").each(function () {
@@ -1726,8 +1725,7 @@ define([
             }
 
             // Add cell start tag
-            body += '        <div class="' + $(this).attr("class") + '"\n';
-            body += '             data-grid=\'{"type": "cell", "info":{"xs": "true", "sm": "true", "lg": "true", "pos": {"x": ' + position + ', "width": ' + size + '}}}\'>\n';  // jshint ignore:line
+            body += '        <div class="' + $(this).attr("class") + '">\n';  // jshint ignore:line
 
             // Loop through tiles
             $(this).children(".mosaic-tile").each(function () {

src/plone/app/mosaic/browser/static/mosaic-grid.css

@@ -0,0 +1,151 @@
+.mosaic-enabled,
+.mosaic-grid,
+.template-layout {
+  /* Grid classes, these can also be nested */
+}
+.mosaic-enabled .mosaic-grid-row,
+.mosaic-grid .mosaic-grid-row,
+.template-layout .mosaic-grid-row {
+  position: relative;
+  margin-left: -15px;
+  margin-right: -15px;
+}
+.mosaic-enabled,
+.mosaic-grid {
+  /* Widths, these are abstracted out so that pixel-based layouts or other
+     similar approaches can be retrofitted without changing the markup,
+     or if you want to apply rules like the Golden Ratio to your layouts */
+}
+.mosaic-enabled .mosaic-width-full,
+.mosaic-grid .mosaic-width-full {
+  position: relative;
+  float: left;
+  width: 100%;
+  min-height: 1px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.mosaic-enabled .mosaic-width-half,
+.mosaic-grid .mosaic-width-half {
+  position: relative;
+  float: left;
+  width: 50%;
+  min-height: 1px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.mosaic-enabled .mosaic-width-quarter,
+.mosaic-grid .mosaic-width-quarter {
+  position: relative;
+  float: left;
+  width: 25%;
+  min-height: 1px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.mosaic-enabled .mosaic-width-three-quarters,
+.mosaic-grid .mosaic-width-three-quarters {
+  position: relative;
+  float: left;
+  width: 75%;
+  min-height: 1px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.mosaic-enabled .mosaic-width-third,
+.mosaic-grid .mosaic-width-third {
+  position: relative;
+  float: left;
+  width: 33.33333333%;
+  min-height: 1px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.mosaic-enabled .mosaic-width-two-thirds,
+.mosaic-grid .mosaic-width-two-thirds {
+  position: relative;
+  float: left;
+  width: 66.66666667%;
+  min-height: 1px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.template-layout {
+  /* Widths, these are abstracted out so that pixel-based layouts or other
+     similar approaches can be retrofitted without changing the markup,
+     or if you want to apply rules like the Golden Ratio to your layouts */
+}
+.template-layout .mosaic-width-full {
+  position: relative;
+  float: left;
+  width: 100%;
+  min-height: 1px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.template-layout .mosaic-width-half {
+  position: relative;
+  min-height: 1px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+@media (min-width: 768px) {
+  .template-layout .mosaic-width-half {
+    float: left;
+    width: 50%;
+  }
+}
+.template-layout .mosaic-width-quarter {
+  position: relative;
+  min-height: 1px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+@media (min-width: 768px) {
+  .template-layout .mosaic-width-quarter {
+    float: left;
+    width: 50%;
+  }
+}
+@media (min-width: 992px) {
+  .template-layout .mosaic-width-quarter {
+    float: left;
+    width: 25%;
+  }
+}
+.template-layout .mosaic-width-three-quarters {
+  position: relative;
+  min-height: 1px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+@media (min-width: 992px) {
+  .template-layout .mosaic-width-three-quarters {
+    float: left;
+    width: 75%;
+  }
+}
+.template-layout .mosaic-width-third {
+  position: relative;
+  min-height: 1px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+@media (min-width: 992px) {
+  .template-layout .mosaic-width-third {
+    float: left;
+    width: 33.33333333%;
+  }
+}
+.template-layout .mosaic-width-two-thirds {
+  position: relative;
+  min-height: 1px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+@media (min-width: 992px) {
+  .template-layout .mosaic-width-two-thirds {
+    float: left;
+    width: 66.66666667%;
+  }
+}

src/plone/app/mosaic/layouts/bs3demo/default.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-gridsystem="bs3">
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">

src/plone/app/mosaic/layouts/bs3demo/jumbotron.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-gridsystem="bs3">
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">