Merge pull request #1133 from adumesny/develop

fixed oneColumnMode css
gridstack · Feb 5, 2020 · 9e9443b · 9e9443b
2 parents fc8723b + 27a3f5f
commit 9e9443b
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -201,15 +201,13 @@ $('.grid-stack').gridstack( {column: N} );
 <div class="grid-stack grid-stack-N">...</div>
 ```
 
-Note `grid-stack-N` class was added, and extra CSS.
-
-`gridstack-extra.css` (and `gridstack-extra.min.css`) defines CSS for grids with custom [1-12] columns. Anything more and you'll need to generate the SASS/CSS yourself (see next).
+Note: we added `grid-stack-N` class and `gridstack-extra.css` which defines CSS for grids with custom [1-12] columns. Anything more and you'll need to generate the SASS/CSS yourself (see next).
 
 See example: [2 grids demo](http://gridstack.github.io/gridstack.js/demo/two.html) with 6 columns
 
 ## Custom columns CSS
 
-If you need > 12 columns or want to generate the CSS manually (else see above) you will need to generate CSS rules for `.grid-stack-item[data-gs-width="X"]` and `.grid-stack-item[data-gs-x="X"]`.
+If you need > 12 columns or want to generate the CSS manually you will need to generate CSS rules for `.grid-stack-item[data-gs-width="X"]` and `.grid-stack-item[data-gs-x="X"]`.
 
 For instance for 3-column grid you need to rewrite CSS to be:
 
@@ -255,6 +253,9 @@ Better yet, here is a SASS code snippet which can make life much easier (Thanks
 }
 ```
 
+you can also look at the SASS [src/gridstack-extra.scss](https://github.com/gridstack/gridstack.js/blob/develop/src/gridstack-extra.scss) and modify to add more columns
+and also have the `.grid-stack-N` prefix to support letting the user change columns dynamically.
+
 ## Override resizable/draggable options
 
 You can override default `resizable`/`draggable` options. For instance to enable other then bottom right resizing handle

diff --git a/demo/column.html b/demo/column.html
@@ -6,7 +6,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Column grid demo</title>
 
- <link rel="stylesheet" href="../demo/demo.css"/>
+ <link rel="stylesheet" href="demo.css"/>
  <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

diff --git a/demo/index.html b/demo/index.html
@@ -5,18 +5,19 @@
  <title>Demo</title>
 </head>
 <body>
+ <h1>Demos</h1>
  <ul>
- <li><a href="advance.html">Advance demo</a></li>
- <li><a href="anijs.html">AniJS demo</a></li>
- <li><a href="column.html">Column demo</a></li>
- <li><a href="float.html">Float grid demo</a></li>
- <li><a href="knockout.html">Knockout.js demo</a></li>
- <li><a href="knockout2.html">Knockout.js demo (2)</a></li>
- <li><a href="nested.html">Nested grids demo</a></li>
- <li><a href="responsive.html">Resize grid (responsive) demo</a></li>
- <li><a href="right-to-left(rtl).html">Right-To-Left (RTL) demo</a></li>
- <li><a href="serialization.html">Serialization demo</a></li>
- <li><a href="two.html">Two grids demo</a></li>
+ <li><a href="advance.html">Advance</a></li>
+ <li><a href="anijs.html">AniJS</a></li>
+ <li><a href="column.html">Column</a></li>
+ <li><a href="float.html">Float grid</a></li>
+ <li><a href="knockout.html">Knockout.js</a></li>
+ <li><a href="knockout2.html">Knockout.js (2)</a></li>
+ <li><a href="nested.html">Nested grids</a></li>
+ <li><a href="responsive.html">Responsive</a></li>
+ <li><a href="right-to-left(rtl).html">Right-To-Left (RTL)</a></li>
+ <li><a href="serialization.html">Serialization</a></li>
+ <li><a href="two.html">Two grids</a></li>
  </ul>
 </body>
 </html>
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -30,7 +30,7 @@ Change log
 
 ## v0.6.2-dev (upcoming changes)
 
-- TBD
+- fix [#1132](https://github.com/gridstack/gridstack.js/issues/1132) oneColumnMode missing CSS to do layout
 
 ## v0.6.2 (2020-02-03)
 

diff --git a/src/gridstack-extra.scss b/src/gridstack-extra.scss
@@ -1,28 +1,28 @@
 /*!
- * gridstack extra CSS for [1-11] columns (non default)
+ * gridstack 0.6.2-dev extra CSS for [2-11] columns (non default)
  * https://gridstackjs.com/
  * (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov
  * gridstack.js may be freely distributed under the MIT license.
 */
 
-$gridstack-columns: 12 !default;
+$gridstack-columns: 11 !default;
 
-@mixin grid-stack-items($gridstack-columns) {
- .grid-stack.grid-stack-#{$gridstack-columns} {
+@mixin grid-stack-items($columns) {
+ .grid-stack.grid-stack-#{$columns} {
 
  > .grid-stack-item {
- min-width: 100% / $gridstack-columns;
+ min-width: 100% / $columns;
 
- @for $i from 1 through $gridstack-columns {
- &[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
- &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
- &[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
- &[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
+ @for $i from 1 through $columns {
+ &[data-gs-width='#{$i}'] { width: (100% / $columns) * $i; }
+ &[data-gs-x='#{$i}'] { left: (100% / $columns) * $i; }
+ &[data-gs-min-width='#{$i}'] { min-width: (100% / $columns) * $i; }
+ &[data-gs-max-width='#{$i}'] { max-width: (100% / $columns) * $i; }
  }
  }
  }
 }
 
-@for $j from 1 through $gridstack-columns {
+@for $j from 2 through $gridstack-columns {
  @include grid-stack-items($j)
 }
diff --git a/src/gridstack.scss b/src/gridstack.scss
@@ -1,5 +1,5 @@
 /*!
- * required gridstack 0.6.2-dev CSS for default 12 column size
+ * required gridstack 0.6.2-dev CSS for default 12 and 1 columnMode size. Use gridstack-extra.css for others
  * https://gridstackjs.com/
  * (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov
  * gridstack.js may be freely distributed under the MIT license.
@@ -95,7 +95,6 @@ $animation_speed: .3s !default;
  @include vendor(transform, rotate(-45deg));
  }
 
-
  > .ui-resizable-nw { cursor: nw-resize; width: 20px; height: 20px; left: 10px; top: 0; }
  > .ui-resizable-n { cursor: n-resize; height: 10px; top: 0; left: 25px; right: 25px; }
  > .ui-resizable-ne { cursor: ne-resize; width: 20px; height: 20px; right: 10px; top: 0; }
@@ -119,6 +118,14 @@ $animation_speed: .3s !default;
  }
  }
 
+ &.grid-stack-1>.grid-stack-item {
+ min-width: 100%;
+ &[data-gs-width='1'] { width: 100%; }
+ &[data-gs-x='1'] { left: 100%; }
+ &[data-gs-min-width='1'] { min-width: 100%; }
+ &[data-gs-max-width='1'] { max-width: 100%; }
+ }
+
  &.grid-stack-animate,
  &.grid-stack-animate .grid-stack-item {
  @include vendor(transition, left $animation_speed, top $animation_speed, height $animation_speed, width $animation_speed);