docs: make playground editor take all available space (#8443)

pskelin · web-flow · commit 87a08eb47c99 · 2024-03-14T13:25:42.000+02:00
diff --git a/packages/website/docs/play.md b/packages/website/docs/play.md
diff --git a/packages/website/src/components/Editor/index.js b/packages/website/src/components/Editor/index.js
@@ -219,8 +219,8 @@ ${fixAssetPaths(js)}`,
           ?
             <div style={{width: "100%"}}>
               <Splitter>
-                {editor}
                 {preview}
+                {editor}
               </Splitter>
             </div>
           :
diff --git a/packages/website/src/components/Editor/index.module.css b/packages/website/src/components/Editor/index.module.css
@@ -24,18 +24,23 @@
 
 .copy-status {
 	position: relative;
-	top: -2rem;
-	left: -1rem;
+	top: -0.3rem;
+	left: -4rem;
 	font-size: 0.75rem;
 	font-weight: 700;
 	font-family: Arial;
 	color: var(--ifm-color-primary);
+	z-index: 1;
 }
 
 .container-standalone {
 	display: flex;
 	flex-direction: row-reverse;
 	width: 100%;
+	height: 100vh;
+}
+
+.container-standalone playground-file-editor {
 	height: 100%;
 }
 
diff --git a/packages/website/src/pages/play.tsx b/packages/website/src/pages/play.tsx
@@ -0,0 +1,71 @@
+import Editor from "../components/Editor";
+import Layout from '@theme/Layout';
+
+const html = `<!-- playground-fold -->
+<!DOCTYPE html>
+<head>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor)">
+  <!-- playground-fold-end -->
+
+  <my-element>
+    <h1>UI5 Web Components</h1>
+  </my-element>
+  <!-- playground-fold -->
+  <script type="module" src="main.js"></script>
+</body>
+
+<!-- playground-fold-end -->
+`
+
+const ts = `
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender, { html } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+
+@customElement({
+  tag: "my-element",
+  renderer: litRender,
+})
+export class MyElement extends UI5Element {
+  @property({ type: Integer, defaultValue: 0})
+  count!: number;
+
+  render() {
+    return html \`
+      <slot></slot>
+      <div class="card">
+        <button @click=\${this._onClick} part="button">
+          Count is \${this.count}
+        </button>
+      </div>\`
+  }
+
+  _onClick() {
+    this.count += 2;
+  }
+}
+
+MyElement.define();
+`;
+export default function () {
+  return (
+    <>
+      <Layout>
+
+        <Editor
+          html={html}
+          js={ts}
+          css={''}
+          mainFile={"main.ts"}
+          canShare={true}
+          mainFileSelected={true}
+          standalone={true}
+        />
+      </Layout>
+    </>
+  )
+}

Original file line number	Diff line number	Diff line change
@@ -219,8 +219,8 @@ ${fixAssetPaths(js)}`,
`219`	`219`	`?`
`220`	`220`	`<div style={{width: "100%"}}>`
`221`	`221`	`<Splitter>`
`222`		`- {editor}`
`223`	`222`	`{preview}`
	`223`	`+ {editor}`
`224`	`224`	`</Splitter>`
`225`	`225`	`</div>`
`226`	`226`	`:`