From b9264511599d9d81240c47fe045b5861c93fb464 Mon Sep 17 00:00:00 2001 From: Elliott Marquez <5981958+e111077@users.noreply.github.com> Date: Mon, 11 Dec 2023 18:45:23 -0800 Subject: [PATCH] Remove page chrome and fullscreen stories --- catalog/site/css/stories.css | 28 +++++ catalog/site/stories/stories.html | 123 +++++++++++++--------- catalog/src/components/drag-playground.ts | 6 ++ 3 files changed, 110 insertions(+), 47 deletions(-) create mode 100644 catalog/site/css/stories.css diff --git a/catalog/site/css/stories.css b/catalog/site/css/stories.css new file mode 100644 index 00000000000..0334f1932ca --- /dev/null +++ b/catalog/site/css/stories.css @@ -0,0 +1,28 @@ +#dragbar { + max-width: 100%; + max-height: 100%; +} + +#editor { + margin-block: 0; + height: 100%; + box-sizing: border-box; +} + +#editor-wrapper { + height: 100%; + overflow: hidden; +} + +body { + height: 100dvh; +} + +#preview { + position: relative; +} + +#preview md-circular-progress { + inset: 50%; + transform: translate(-50%, -50%); +} diff --git a/catalog/site/stories/stories.html b/catalog/site/stories/stories.html index 8969c909ff6..a0ae3b59cd3 100644 --- a/catalog/site/stories/stories.html +++ b/catalog/site/stories/stories.html @@ -14,55 +14,84 @@ collections: ["stories"], eleventyComputed: { dirname: ({component}) => component.data.dirname, - name: ({component}) => component.data.name, - tabUrl: ({component}) => component.data.page.url, } } --- -{% extends 'default.html' %} {% block head %} - - - - - - -{% endblock %} {% block content %} - - - - - - -
- -
- -{% endblock %} + + + + + +
+ +
+ + + diff --git a/catalog/src/components/drag-playground.ts b/catalog/src/components/drag-playground.ts index d03b7c3ae24..72c895c7e14 100644 --- a/catalog/src/components/drag-playground.ts +++ b/catalog/src/components/drag-playground.ts @@ -65,9 +65,15 @@ export class DragPlayground extends LitElement { user-select: none; } + #drag-bar:hover { + background-color: var(--md-sys-color-surface-container-high); + cursor: grab; + } + #drag-bar.isDragging { background-color: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); + cursor: grabbing; } `;