Adding page width, using ilw-margin--side

web-illinois · Sep 3, 2024 · 71ab3b0 · 71ab3b0
1 parent d355698
commit 71ab3b0
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -15,9 +15,9 @@ This is meant to take the place of the old il-image-feature and il-video-feature
 ### Attributes
 * **mode**: the relative size and position of the columns. See below for options.
 * **theme**: `blue`, `orange`, `blue-gradient`, `orange-gradient`, `gray`, `white`. Defaults to white. This is only the background of the columns.
-* **width:** no width attribute will make it fit the container, `full` will break the container and go full width, and `auto` will break the container, but only for the background
-* **gap**: a length / percentage CSS of padding between the columns. Defaults to `0 0 40px 0` to handle padding. 
-* **padding**: standard length / percentage CSS of padding around the grid. Defaults to none. 
+* **width:** no width attribute will make it fit the container, `full` will break the container and go full width, `auto` will break the container, but only for the background, and `page` will contain the contents but allow the background to go full width. 
+* **gap**: a length / percentage CSS of padding between the columns. Defaults to none. 
+* **padding**: standard length / percentage CSS of padding around the grid. Defaults to `0 0 40px 0` to handle padding. 
 * **reverse**: If the columns should reverse, so items on the left will show up on the right. This will have no effect on a smaller container where it stacks. 
 
 ### Mode options

diff --git a/builder/ilw-columns.json b/builder/ilw-columns.json
@@ -7,5 +7,5 @@
     "description": "Creates a single row of items that you can use to display information, with information of different widths.",
     "toolkit-version": "",
     "production-version": "",
-    "development-version": "1.0.0-alpha1"
+    "development-version": "1.0.0-alpha2"
 }
diff --git a/...er/versions/ilw-columns.1.0.0-alpha1.json → ...er/versions/ilw-columns.1.0.0-alpha2.json b/...er/versions/ilw-columns.1.0.0-alpha1.json → ...er/versions/ilw-columns.1.0.0-alpha2.json
@@ -5,10 +5,10 @@
     "type": "web component",
     "element-name": "ilw-columns",
     "description": "Creates a single row of items that you can use to display information, with information of different widths.",
-    "version": "1.0.0-alpha1",
+    "version": "1.0.0-alpha2",
     "date": "07/17/2024",
-    "css": "https://dev.toolkit.illinois.edu/ilw-columns/1.0.0-alpha1/ilw-columns.css",
-    "js": "https://dev.toolkit.illinois.edu/ilw-columns/1.0.0-alpha1/ilw-columns.js",
+    "css": "https://dev.toolkit.illinois.edu/ilw-columns/1.0.0-alpha2/ilw-columns.css",
+    "js": "https://dev.toolkit.illinois.edu/ilw-columns/1.0.0-alpha2/ilw-columns.js",
     "production": false,
     "notes": "",
     "parent-style": "",
@@ -75,7 +75,8 @@
 			"values": [
 				"",
 				"full",
-				"auto"
+				"auto",
+				"page"
 			]
 		},
         {

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
     "description": "Illinois Toolkit: This uses the CSS flexbox to split the container into multiple sections.",
     "repository": "github:web-illinois/ilw-columns",
     "private": false,
-    "version": "1.0.0-alpha1",
+    "version": "1.0.0-alpha2",
     "type": "module",
     "files": [
       "src/**",

diff --git a/samples/nopadding.html b/samples/nopadding.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Columns Component</title>
+    <link rel="stylesheet" href="https://cdn.brand.illinois.edu/illinois.css">
+    <link rel="stylesheet" href="https://dev.toolkit.illinois.edu/ilw-global/3.0.0-alpha/ilw-global.css">
+    <script type="module" src="/src/ilw-columns.js"></script>
+</head>
+
+<style>
+    div.test {
+        background: white;
+        border: thin solid black;
+        padding: 10px;
+    }
+</style>
+
+
+    <script>
+        document.addEventListener("DOMContentLoaded", function(event) {
+          const params = new URLSearchParams(window.location.search);
+          document.querySelectorAll("ilw-columns").forEach(component => {
+            if (params.has('theme')) {
+              component.setAttribute('theme', params.get('theme'));
+            }
+            if (params.has('mode')) {
+              component.setAttribute('mode', params.get('mode'));
+            }
+            if (params.has('width')) {
+              component.setAttribute('width', params.get('width'));
+            }
+            if (params.has('padding')) {
+              component.setAttribute('padding', params.get('padding'));
+            }
+            if (params.has('gap')) {
+              component.setAttribute('gap', params.get('gap'));
+            }
+            if (params.has('reverse')) {
+              component.setAttribute('reverse', params.get('reverse'));
+            }
+          });
+        });
+    </script>
+
+      <body>
+         <ilw-columns id="test-item">
+            <div class="test"><h3>Lorem ipsum dolor sit amet</h3><p>Consectetur adipiscing elit. <div>Donec posuere dui mauris, eu scelerisque mauris mattis in. Nunc sed leo arcu. Nulla non eleifend sapien.</div> </p></div>
+            <div class="test"><h3>Lorem ipsum dolor sit amet</h3><p>Nunc sed leo arcu. Nulla non eleifend sapien. </p></div>
+         </ilw-columns>
+     </body>
+</body>
+
+</html>
diff --git a/src/ilw-columns.css b/src/ilw-columns.css
diff --git a/src/ilw-columns.js b/src/ilw-columns.js
@@ -2,7 +2,6 @@ import { LitElement, html } from 'lit';
 import { map } from 'lit/directives/map.js';
 import styles from './ilw-columns.styles';
 import { ManualSlotController } from './ManualSlotController.js';
-import './ilw-columns.css';
 
 class Columns extends LitElement {
     static shadowRootOptions = {...LitElement.shadowRootOptions, slotAssignment: "manual"};
@@ -73,7 +72,7 @@ class Columns extends LitElement {
     }
 
     get innerWidth() {
-      return this.width == 'auto' ? 'fixed' : '';
+      return this.width == 'auto' || this.width == 'page' ? 'fixed' : '';
     }
 
     render() {

diff --git a/src/ilw-columns.styles.js b/src/ilw-columns.styles.js
@@ -8,7 +8,7 @@ export default css`
   }
 
   div.columns.fixed {
-    margin: var(--ilw-columns--main-margin, 0);
+    margin: 0 var(--ilw-margin--side, 0);
   }
 
   div.columns > div {