Merge pull request #2315 from adumesny/master

fix gs-h|x="1"
gridstack · May 13, 2023 · 669c670 · 669c670
2 parents 7a56e8f + 9178fe5
commit 669c670
Show file tree

Hide file tree

Showing 8 changed files with 157 additions and 156 deletions.
diff --git a/README.md b/README.md
@@ -222,14 +222,14 @@ If you need > 12 columns or want to generate the CSS manually you will need to g
 For instance for 4-column grid you need to write CSS to be:
 
 ```css
-.grid-stack-4 > .grid-stack-item { min-width: 25% }
-.grid-stack-4 > .grid-stack-item[gs-w="4"]  { width: 100% }
-.grid-stack-4 > .grid-stack-item[gs-w="3"]  { width: 75% }
-.grid-stack-4 > .grid-stack-item[gs-w="2"]  { width: 50% }
-
-.grid-stack-4 > .grid-stack-item[gs-x="3"]  { left: 75% }
-.grid-stack-4 > .grid-stack-item[gs-x="2"]  { left: 50% }
-.grid-stack-4 > .grid-stack-item[gs-x="1"]  { left: 25% }
+.gs-4 > .grid-stack-item[gs-x="1"]  { left: 25% }
+.gs-4 > .grid-stack-item[gs-x="2"]  { left: 50% }
+.gs-4 > .grid-stack-item[gs-x="3"]  { left: 75% }
+
+.gs-4 > .grid-stack-item { width: 25% }
+.gs-4 > .grid-stack-item[gs-w="2"]  { width: 50% }
+.gs-4 > .grid-stack-item[gs-w="3"]  { width: 75% }
+.gs-4 > .grid-stack-item[gs-w="4"]  { width: 100% }
 ```
 
 Better yet, here is a SASS code snippet, you can use sites like [sassmeister.com](https://www.sassmeister.com/) to generate the CSS for you instead:
@@ -239,9 +239,9 @@ $columns: 20;
 @function fixed($float) {
   @return calc(round($float * 100) / 100); // total 4 digits being %
 }
-.grid-stack-#{$columns} > .grid-stack-item {
+.gs-#{$columns} > .grid-stack-item {
 
-  min-width: fixed(calc(100% / $columns));
+  width: fixed(calc(100% / $columns));
 
   @for $i from 1 through $columns - 1 {
     &[gs-x='#{$i}'] { left: fixed(calc(100% / $columns) * $i); }

diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -5,6 +5,7 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
+- [8.1.1 (2023-05-13)](#811-2023-05-13)
 - [8.1.0 (2023-05-06)](#810-2023-05-06)
 - [8.0.1 (2023-04-29)](#801-2023-04-29)
 - [8.0.0 (2023-04-29)](#800-2023-04-29)
@@ -85,6 +86,10 @@ Change log
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
+## 8.1.1 (2023-05-13)
+* fix: [#2314](https://github.com/gridstack/gridstack.js/issues/2314) fix issue with having min-height/width instead of height/width for gs-h|x="1"
+also further compressed CSS multi column rules (use `.gs-# > .grid-stack-item` instead of `.grid-stack-# > .grid-stack-item`)
+
 ## 8.1.0 (2023-05-06)
 * break: remove `GridStackOptions.minWidth` obsolete since 5.1, use `oneColumnSize` instead
 * optimize: CSS files now even 25% smaller (after being halfed in 8.0.0) by removing `.grid-stack` prefix for anything already gs based, and 3 digit rounding.

diff --git a/karma.conf.js b/karma.conf.js
@@ -14,7 +14,7 @@ module.exports = function(config) {
       //     }
       //   }
       // },
-      exclude: ["demo"] // ignore dummy demo .ts files
+      exclude: ["demo", "dist/ng"] // ignore dummy demo .ts files
     },
 
     // base path that will be used to resolve all patterns (eg. files, exclude)
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,7 +14,7 @@ module.exports = function(config) { @@
           //     }
           //   }
           // },
-          exclude: ["demo"] // ignore dummy demo .ts files
+          exclude: ["demo", "dist/ng"] // ignore dummy demo .ts files
         },
         // base path that will be used to resolve all patterns (eg. files, exclude)
@@ Expand Down @@