Skip to content

Commit 27a3f5f

Browse files
author
Alain Dumesny
committed
fixed oneColumnMode css
* fix for #1132 where some demos had incorrect 1 column layout. * the CSS for `.grid-stack-1` is now part of default css (was in extra.css) * also tweaked SASS to only generate 2-11 columns for extra.css and documentation changes.
1 parent ec2598e commit 27a3f5f

File tree

6 files changed

+39
-30
lines changed

6 files changed

+39
-30
lines changed

‎README.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -201,15 +201,13 @@ $('.grid-stack').gridstack( {column: N} );
201201
<div class="grid-stack grid-stack-N">...</div>
202202
```
203203

204-
Note `grid-stack-N` class was added, and extra CSS.
205-
206-
`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).
204+
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).
207205

208206
See example: [2 grids demo](http://gridstack.github.io/gridstack.js/demo/two.html) with 6 columns
209207

210208
## Custom columns CSS
211209

212-
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"]`.
210+
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"]`.
213211

214212
For instance for 3-column grid you need to rewrite CSS to be:
215213

@@ -255,6 +253,9 @@ Better yet, here is a SASS code snippet which can make life much easier (Thanks
255253
}
256254
```
257255

256+
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
257+
and also have the `.grid-stack-N` prefix to support letting the user change columns dynamically.
258+
258259
## Override resizable/draggable options
259260

260261
You can override default `resizable`/`draggable` options. For instance to enable other then bottom right resizing handle

‎demo/column.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<title>Column grid demo</title>
88

9-
<link rel="stylesheet" href="../demo/demo.css"/>
9+
<link rel="stylesheet" href="demo.css"/>
1010
<link rel="stylesheet" href="../dist/gridstack-extra.css"/>
1111

1212
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

‎demo/index.html

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,19 @@
55
<title>Demo</title>
66
</head>
77
<body>
8+
<h1>Demos</h1>
89
<ul>
9-
<li><a href="advance.html">Advance demo</a></li>
10-
<li><a href="anijs.html">AniJS demo</a></li>
11-
<li><a href="column.html">Column demo</a></li>
12-
<li><a href="float.html">Float grid demo</a></li>
13-
<li><a href="knockout.html">Knockout.js demo</a></li>
14-
<li><a href="knockout2.html">Knockout.js demo (2)</a></li>
15-
<li><a href="nested.html">Nested grids demo</a></li>
16-
<li><a href="responsive.html">Resize grid (responsive) demo</a></li>
17-
<li><a href="right-to-left(rtl).html">Right-To-Left (RTL) demo</a></li>
18-
<li><a href="serialization.html">Serialization demo</a></li>
19-
<li><a href="two.html">Two grids demo</a></li>
10+
<li><a href="advance.html">Advance</a></li>
11+
<li><a href="anijs.html">AniJS</a></li>
12+
<li><a href="column.html">Column</a></li>
13+
<li><a href="float.html">Float grid</a></li>
14+
<li><a href="knockout.html">Knockout.js</a></li>
15+
<li><a href="knockout2.html">Knockout.js (2)</a></li>
16+
<li><a href="nested.html">Nested grids</a></li>
17+
<li><a href="responsive.html">Responsive</a></li>
18+
<li><a href="right-to-left(rtl).html">Right-To-Left (RTL)</a></li>
19+
<li><a href="serialization.html">Serialization</a></li>
20+
<li><a href="two.html">Two grids</a></li>
2021
</ul>
2122
</body>
2223
</html>

‎doc/CHANGES.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ Change log
3030

3131
## v0.6.2-dev (upcoming changes)
3232

33-
- TBD
33+
- fix [#1132](https://github.com/gridstack/gridstack.js/issues/1132) oneColumnMode missing CSS to do layout
3434

3535
## v0.6.2 (2020-02-03)
3636

‎src/gridstack-extra.scss

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11
/*!
2-
* gridstack extra CSS for [1-11] columns (non default)
2+
* gridstack 0.6.2-dev extra CSS for [2-11] columns (non default)
33
* https://gridstackjs.com/
44
* (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov
55
* gridstack.js may be freely distributed under the MIT license.
66
*/
77

8-
$gridstack-columns: 12 !default;
8+
$gridstack-columns: 11 !default;
99

10-
@mixin grid-stack-items($gridstack-columns) {
11-
.grid-stack.grid-stack-#{$gridstack-columns} {
10+
@mixin grid-stack-items($columns) {
11+
.grid-stack.grid-stack-#{$columns} {
1212

1313
> .grid-stack-item {
14-
min-width: 100% / $gridstack-columns;
14+
min-width: 100% / $columns;
1515

16-
@for $i from 1 through $gridstack-columns {
17-
&[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
18-
&[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
19-
&[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
20-
&[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
16+
@for $i from 1 through $columns {
17+
&[data-gs-width='#{$i}'] { width: (100% / $columns) * $i; }
18+
&[data-gs-x='#{$i}'] { left: (100% / $columns) * $i; }
19+
&[data-gs-min-width='#{$i}'] { min-width: (100% / $columns) * $i; }
20+
&[data-gs-max-width='#{$i}'] { max-width: (100% / $columns) * $i; }
2121
}
2222
}
2323
}
2424
}
2525

26-
@for $j from 1 through $gridstack-columns {
26+
@for $j from 2 through $gridstack-columns {
2727
@include grid-stack-items($j)
2828
}

‎src/gridstack.scss

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* required gridstack 0.6.2-dev CSS for default 12 column size
2+
* required gridstack 0.6.2-dev CSS for default 12 and 1 columnMode size. Use gridstack-extra.css for others
33
* https://gridstackjs.com/
44
* (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov
55
* gridstack.js may be freely distributed under the MIT license.
@@ -95,7 +95,6 @@ $animation_speed: .3s !default;
9595
@include vendor(transform, rotate(-45deg));
9696
}
9797

98-
9998
> .ui-resizable-nw { cursor: nw-resize; width: 20px; height: 20px; left: 10px; top: 0; }
10099
> .ui-resizable-n { cursor: n-resize; height: 10px; top: 0; left: 25px; right: 25px; }
101100
> .ui-resizable-ne { cursor: ne-resize; width: 20px; height: 20px; right: 10px; top: 0; }
@@ -119,6 +118,14 @@ $animation_speed: .3s !default;
119118
}
120119
}
121120

121+
&.grid-stack-1>.grid-stack-item {
122+
min-width: 100%;
123+
&[data-gs-width='1'] { width: 100%; }
124+
&[data-gs-x='1'] { left: 100%; }
125+
&[data-gs-min-width='1'] { min-width: 100%; }
126+
&[data-gs-max-width='1'] { max-width: 100%; }
127+
}
128+
122129
&.grid-stack-animate,
123130
&.grid-stack-animate .grid-stack-item {
124131
@include vendor(transition, left $animation_speed, top $animation_speed, height $animation_speed, width $animation_speed);

0 commit comments

Comments
 (0)