Merge pull request #8 from web-illinois/jonker/BugFixes

Jonker/bug fixes
web-illinois · Oct 8, 2024 · 1d0f14c · 1d0f14c
2 parents 7b2ef8b + 0d83fdb
commit 1d0f14c
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 9 deletions.
diff --git a/builder/versions/ilw-columns.1.0-beta.json b/builder/versions/ilw-columns.1.0-beta.json
@@ -6,10 +6,10 @@
     "element-name": "ilw-columns",
     "description": "Creates a single row of items that you can use to display information, with information of different widths.",
     "builder-version": "1.0-beta",
-	"version": "1.0.0-beta",
-    "date": "9/13/2024",
-    "css": "https://dev.toolkit.illinois.edu/ilw-columns/1.0.0-beta/ilw-columns.css",
-    "js": "https://dev.toolkit.illinois.edu/ilw-columns/1.0.0-beta/ilw-columns.js",
+    "version": "1.0.1-beta",
+    "date": "10/08/2024",
+    "css": "https://dev.toolkit.illinois.edu/ilw-columns/1.0.1-beta/ilw-columns.css",
+    "js": "https://dev.toolkit.illinois.edu/ilw-columns/1.0.1-beta/ilw-columns.js",
     "production": false,
     "notes": "",
     "parent-style": "",
@@ -90,7 +90,6 @@
 			]
 		}
     ],
-
     "classes-fixed": [],
     "classes": [],
     "css-variables": [

diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
     "repository": "github:web-illinois/ilw-columns",
     "private": false,
     "license": "MIT",
-    "version": "1.0.0-beta",
+    "version": "1.0.1-beta",
     "type": "module",
     "files": [
         "src/**",

diff --git a/src/ilw-columns.js b/src/ilw-columns.js
@@ -65,7 +65,7 @@ class Columns extends LitElement {
     }
 
     get gapStyle() {
-        return this.gap == '' ? '' : 'column-gap: ' + this.gap + ';';
+        return this.gap == '' ? '0' : this.gap;
     }
 
     get outerWidth() {
@@ -78,6 +78,7 @@ class Columns extends LitElement {
 
     render() {
       return html`
+      <style>:host { --ilw-columns-gap: ${this.gapStyle}; } </style>
       <div class="columns-outer ${this.theme} ${this.outerWidth}">
           <div class="columns ${this.innerWidth} ${this.columnsClass} ${this.reverseClass}" style="${this.paddingStyle} ${this.gapStyle}">
             ${map(Array.from(this.children), () => html`<div><slot></slot></div>`)}

diff --git a/src/ilw-columns.styles.js b/src/ilw-columns.styles.js
@@ -3,6 +3,7 @@ import { css } from 'lit';
 export default css`
   div.columns {
     display: flex;
+    column-gap: var(--ilw-columns-gap, 0);
   }
 
   div.columns.fixed {
@@ -35,13 +36,15 @@ export default css`
 
   @media (max-width: 700px) {
     div.columns {
-      display: block;
+      flex-direction: column;
+      row-gap: var(--ilw-columns-gap, 0);
     }
   }
 
   @container (max-width: 700px) {
     div.columns {
-      display: block;
+      flex-direction: column;
+      row-gap: var(--ilw-columns-gap, 0);
     }
   }