Changes
6 changed files (+244/-9)
-
-
@@ -0,0 +1,56 @@/* * SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> * SPDX-License-Identifier: AGPL-3.0-only */ :not(:is(style, script)) { all: unset; box-sizing: border-box; } :host { display: block; width: 100cqw; height: 100cqh; box-sizing: border-box; overflow-y: auto; } .identity, .contents { padding: var(--space-px-5) var(--space-px-7); } .identity { display: block; font-weight: var(--font-bold); font-size: var(--font-sm); color: oklch(var(--color-fg) / var(--alpha-fg-strong)); } .contents { display: flex; flex-direction: column; margin-block-start: var(--space-px-10); } @container (min-width: 80rem) { :host { display: grid; grid-template-columns: minmax(0, 1fr) 40rem; gap: var(--space-px-4); padding: var(--space-px-8); } .identity { place-self: center; } .contents { grid-column: 2 / 3; align-self: center; justify-self: stretch; margin-block-start: 0; } }
-
-
-
@@ -0,0 +1,37 @@// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> // SPDX-License-Identifier: AGPL-3.0-only import { html, render } from "lit-html"; import { wrapElement, YamoriElement } from "../../element.ts"; import css from "./single-section-layout.css?inline"; export const YamoriSingleSectionLayout = wrapElement({ tagName: "yamori-single-section-layout", constructor: class extends YamoriElement { constructor() { super(); const shadow = this.attachShadow({ mode: "open" }); render( html` <style>${css}</style> <div class="identity"> <!-- TODO: Icon logo --> Yamori </div> <slot class="contents"></slot> `, shadow, ); } override connectedCallback() { super.connectedCallback(); } }, });
-
-
-
@@ -10,7 +10,10 @@ colorScheme?: "dark" | "light";contrast?: "more" | "no-preference"; } const { colorScheme, contrast, title, padding, ...rest } = Astro.props; const { colorScheme, contrast, size, title, padding, ...rest } = Astro.props; const style = size ? `--_width:${size[0]}px;--_height:${size[1]}px` : undefined; const canvasStyle = size ? `aspect-ratio:${size[0]} / ${size[1]}` : undefined; --- <style>
-
@@ -34,13 +37,51 @@ border-radius: 0;z-index: 999; } .canvas { --_grid-color-value: oklch( var(--color-border) / var(--alpha-border-subtle) ); flex: 1; display: block; box-sizing: border-box; } .preview.fullscreen > .canvas { min-height: 0; height: auto !important; flex-basis: 100% !important; background-image: linear-gradient( var(--_grid-color-value) 0.5px, transparent 0.5px, transparent calc(100% - 0.5px), var(--_grid-color-value) calc(100% - 0.5px) ), linear-gradient( 90deg, var(--_grid-color-value) 0.5px, transparent 0.5px, transparent calc(100% - 0.5px), var(--_grid-color-value) calc(100% - 0.5px) ); background-size: var(--space-px-12) var(--space-px-12); } .preview.fullscreen > .canvas:has(.override.container) { position: relative; aspect-ratio: auto !important; overflow: auto; } .override { flex: 1; display: block; font-size: 1rem; line-height: 1.5; font-family: var(--font-sans); font-weight: var(--font-regular); box-sizing: border-box; background-color: oklch(var(--color-bg)); color: oklch(var(--color-fg) / var(--alpha-fg-medium));
-
@@ -50,6 +91,29 @@ .override.padded {padding: var(--space-px-7); } .override.container { container-type: size; width: var(--_width); height: var(--_height); transform-origin: top left; } .preview.fullscreen .override:not(.container) { width: 100%; height: 100%; } .preview.fullscreen .override.container { position: absolute; top: 50%; left: 50%; box-shadow: var(--space-px-1) var(--space-px-1) var(--space-px-6) oklch(0% 0% 0deg / 15%); transform: translate(-50%, -50%) !important; } .header { display: block; padding: var(--space-px-5);
-
@@ -179,6 +243,41 @@ });} }); } function resizeOverride(el) { if (!el) { return; } const width = parseInt(el.getAttribute("data-width"), 10); const height = parseInt(el.getAttribute("data-height"), 10); const rect = el.getBoundingClientRect(); const parent = el.parentElement.getBoundingClientRect(); const scale = parent.width / width; el.style.transform = `scale(${scale})`; const canvasHeight = height * scale; el.parentElement.style.flexBasis = `${canvasHeight}px`; el.parentElement.style.height = `${canvasHeight}px`; } const observer = new ResizeObserver((entries) => { for (const entry of entries) { resizeOverride( entry.target.querySelector("docs-theme-override.override.container"), ); } }); for (const container of document.querySelectorAll( "docs-theme-override.override.container", )) { resizeOverride(container); observer.observe(container.parentElement.parentElement); } </script> <div {...rest} class="preview">
-
@@ -189,13 +288,18 @@ {title}</div> ) } <ThemeOverride class:list={["override", { padded: padding !== "no" }]} color-scheme={colorScheme} contrast={contrast} > <slot /> </ThemeOverride> <div class="canvas" style={canvasStyle}> <ThemeOverride class:list={["override", { padded: padding !== "no", container: !!size }]} color-scheme={colorScheme} contrast={contrast} style={style} data-width={size?.[0]} data-height={size?.[1]} > <slot /> </ThemeOverride> </div> <div class="footer"> <button class="fullscreen-button" title="全画面表示"> <span class="fullscreen-button-icon">←→</span>
-
-
-
@@ -37,6 +37,7 @@ matrix.map((overrides) => (<Preview title={Astro.props.title} padding={Astro.props.padding} size={Astro.props.size} {...overrides} > <slot />
-
-
-
@@ -105,6 +105,9 @@ </NavBarItem><NavBarItem href="/components/empty/"> Empty </NavBarItem> <NavBarItem href="/components/single-section-layout/"> Single Section Layout </NavBarItem> </NavBarGroup> <NavBarGroup title="Widgets"> <NavBarItem href="/widgets/workspace-list/">
-
-
-
@@ -0,0 +1,34 @@--- // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> // SPDX-License-Identifier: AGPL-3.0-only import DocsLayout from "../../layouts/DocsLayout.astro"; import Document from "../../components/Document.astro"; import Preview from "../../components/Preview.astro"; import ThemeMatrixPreview from "../../components/ThemeMatrixPreview.astro"; --- <script> import { YamoriSingleSectionLayout } from "../../../components/single-section-layout/single-section-layout.ts"; YamoriSingleSectionLayout.register(); </script> <DocsLayout title="Button"> <Document> <p> ログインページやスプラッシュスクリーンのように、ユーザのとれるアクションが 1~2 に限定された状況で表示する UI レイアウト。 </p> <ThemeMatrixPreview title="320x500" padding="no" size={[320, 500]}> <yamori-single-section-layout> CONTENTS </yamori-single-section-layout> </ThemeMatrixPreview> <Preview title="1280x720" padding="no" size={[1280, 720]}> <yamori-single-section-layout> CONTENTS </yamori-single-section-layout> </Preview> </Document> </DocsLayout>
-