From 5eec7423dcde30908e63c09e2a5347032da07d2b Mon Sep 17 00:00:00 2001 From: Travis Reeder Date: Wed, 16 Sep 2026 13:19:08 -0700 Subject: [PATCH] fix(demo): make demo pages responsive and mobile friendly --- demo/components/expressive-component.js | 5 +-- demo/components/styles.js | 11 +++++++ demo/css/styles.css | 44 +++++++++++++++++++++++++ demo/date-picker-demo.html | 10 ++++++ demo/index.html | 8 ++--- demo/time-picker-demo.html | 10 ++++++ snackbar/snackbar.js | 6 ++-- 7 files changed, 85 insertions(+), 9 deletions(-) diff --git a/demo/components/expressive-component.js b/demo/components/expressive-component.js index 32f556b..257bae4 100644 --- a/demo/components/expressive-component.js +++ b/demo/components/expressive-component.js @@ -28,6 +28,7 @@ class ExpressiveComponent extends LitElement { css` md-card { width: 300px; + max-width: 100%; background: var(--md-sys-color-surface); overflow: hidden; } @@ -130,7 +131,7 @@ class ExpressiveComponent extends LitElement { -
+
console.log('Switch changed', e.target.selected, e.target.value)}> @@ -161,7 +162,7 @@ class ExpressiveComponent extends LitElement { >
-
+
search diff --git a/demo/components/styles.js b/demo/components/styles.js index b9b8c50..c0c50ef 100644 --- a/demo/components/styles.js +++ b/demo/components/styles.js @@ -1,6 +1,17 @@ import { css } from 'lit' export const styles = css` + *, + *::before, + *::after { + box-sizing: border-box; + } + :host { + display: block; + width: 100%; + min-width: 0; + max-width: 100%; + } .circle { border-radius: 50%; } diff --git a/demo/css/styles.css b/demo/css/styles.css index a3fb46e..6976bd5 100644 --- a/demo/css/styles.css +++ b/demo/css/styles.css @@ -1,9 +1,16 @@ @import url(light.css); @import url(dark.css) (prefers-color-scheme: dark); +*, +*::before, +*::after { + box-sizing: border-box; +} + html, body { margin: 0; + overflow-x: hidden; } :root { @@ -19,6 +26,8 @@ body { a { color: var(--md-sys-color-primary); text-decoration: none; + overflow-wrap: break-word; + word-break: break-word; } a:hover { @@ -37,6 +46,10 @@ a:hover { .gte-medium { display: none; } + + md-snackbar { + --md-snackbar-bottom: 96px; + } } @media (width >=600px) { @@ -70,13 +83,44 @@ a:hover { } } +.layout-container { + width: 100%; + min-width: 0; +} + +.content-container { + flex: 1; + min-width: 0; + width: 100%; + max-width: 100%; +} + +.search-container { + max-width: 1200px; + width: 100%; + margin: 0 auto; + padding: 0 1rem; +} + .main { margin: 0 auto; max-width: 1200px; + width: 100%; + min-width: 0; padding: 1rem; /* overflow-y: auto; */ } +.main > .flex.col { + width: 100%; + min-width: 0; +} + +md-carousel { + max-width: 100%; + min-width: 0; +} + .circle { border-radius: 50%; } diff --git a/demo/date-picker-demo.html b/demo/date-picker-demo.html index 522b7cc..874bf71 100644 --- a/demo/date-picker-demo.html +++ b/demo/date-picker-demo.html @@ -82,6 +82,16 @@ font-weight: 500; color: var(--md-sys-color-primary, #6750a4); } + + @media (max-width: 600px) { + body { + padding: 16px 12px; + } + .demo-section { + padding: 16px 12px; + border-radius: 16px; + } + } diff --git a/demo/index.html b/demo/index.html index e853931..60ce383 100644 --- a/demo/index.html +++ b/demo/index.html @@ -72,7 +72,7 @@ -
+
@@ -103,7 +103,7 @@
-
+
-
+
@@ -213,7 +213,7 @@

Loading Indicator (M3 Expressive)

-
+

Carousel (M3 Multi-Browse)

diff --git a/snackbar/snackbar.js b/snackbar/snackbar.js index 28abb31..718e48c 100644 --- a/snackbar/snackbar.js +++ b/snackbar/snackbar.js @@ -44,7 +44,7 @@ class SnackBar extends LitElement { position: fixed; z-index: 1000; left: 50%; - bottom: 30px; + bottom: var(--md-snackbar-bottom, 30px); height: 48px; } @@ -75,14 +75,14 @@ class SnackBar extends LitElement { opacity: 0; } to { - bottom: 30px; + bottom: var(--md-snackbar-bottom, 30px); opacity: 1; } } @keyframes fadeout { from { - bottom: 30px; + bottom: var(--md-snackbar-bottom, 30px); opacity: 1; } to {