Merge pull request #2511 from adumesny/master

update responsive demo to latest options

Author: adumesny

demo/responsive.html

@@ -22,6 +22,8 @@ <h1>Responsive grid demo</h1>
         <option value="moveScale">move + scale</option>
         <option value="move">move</option>
         <option value="scale">scale</option>
+        <option value="list">list</option>
+        <option value="compact">compact</option>
         <option value="none">none</option>
       </select>
       <a onClick="grid.removeAll()" class="btn btn-primary" href="#">Clear</a>
@@ -34,7 +36,7 @@ <h1>Responsive grid demo</h1>
 
   <script type="text/javascript">
     let grid = GridStack.init({
-      cellHeight: 'initial', // start square but will set to % of window width later
+      cellHeight: 'auto', // always square
       animate: false, // show immediate (animate: true is nice for user dragging though)
       disableOneColumnMode: true, // will manually do 1 column
       float: true });
@@ -44,19 +46,19 @@ <h1>Responsive grid demo</h1>
     function resizeGrid() {
       let width = document.body.clientWidth;
       if (width < 700) {
-        grid.column(1, layout).cellHeight('100vw');
+        grid.column(1, layout);
         text.innerHTML = 1;
       } else if (width < 850) {
-        grid.column(3, layout).cellHeight('33.3333vw');
+        grid.column(3, layout);
         text.innerHTML = 3;
       } else if (width < 950) {
-        grid.column(6, layout).cellHeight('16.6666vw');
+        grid.column(6, layout);
         text.innerHTML = 6;
       } else if (width < 1100) {
-        grid.column(8, layout).cellHeight('12.25vw');
+        grid.column(8, layout);
         text.innerHTML = 8;
       } else {
-        grid.column(12, layout).cellHeight('8.3333vw');
+        grid.column(12, layout);
         text.innerHTML = 12;
       }
     };
@@ -70,7 +72,7 @@ <h1>Responsive grid demo</h1>
       {x: 2, y: 0, w: 2, h: 2, content: '1'},
       {x: 5, y: 0, content: '2'},
       {x: 1, y: 3, w: 4, content: '3'},
-      {x: 5, y: 2, w: 2, content: '4'},
+      {x: 5, y: 3, w: 2, content: '4'},
       {x: 0, y: 4, w: 12, content: '5'}
     ];
     grid.load(items);