From 07a332221670f83fe38cd87d0a25bbd40cb22811 Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Sun, 22 May 2022 16:04:11 -0500 Subject: [PATCH 01/17] start removing tailwind and rebuilding some css --- pyscriptjs/examples/hello_world.html | 4 +- pyscriptjs/examples/repl.html | 4 +- pyscriptjs/examples/repl2.html | 2 +- pyscriptjs/src/App.svelte | 108 +++++++++++++++++++++++++- pyscriptjs/src/Tailwind.svelte | 6 +- pyscriptjs/src/components/pyloader.ts | 13 +++- pyscriptjs/src/components/pyrepl.ts | 2 +- 7 files changed, 127 insertions(+), 12 deletions(-) diff --git a/pyscriptjs/examples/hello_world.html b/pyscriptjs/examples/hello_world.html index 7ae6994a12e..c62c0103fc6 100644 --- a/pyscriptjs/examples/hello_world.html +++ b/pyscriptjs/examples/hello_world.html @@ -7,9 +7,9 @@ PyScript Hello World - + - + diff --git a/pyscriptjs/examples/repl.html b/pyscriptjs/examples/repl.html index 5969ad71820..1a51e10d7f7 100644 --- a/pyscriptjs/examples/repl.html +++ b/pyscriptjs/examples/repl.html @@ -7,8 +7,8 @@ REPL - - + + diff --git a/pyscriptjs/examples/repl2.html b/pyscriptjs/examples/repl2.html index c667bd2cd04..75a8913e9cf 100644 --- a/pyscriptjs/examples/repl2.html +++ b/pyscriptjs/examples/repl2.html @@ -23,7 +23,7 @@

Custom REPL

- +
diff --git a/pyscriptjs/src/App.svelte b/pyscriptjs/src/App.svelte index ab118c58c6c..9baa6b097a5 100644 --- a/pyscriptjs/src/App.svelte +++ b/pyscriptjs/src/App.svelte @@ -30,10 +30,116 @@ font-size: 0.8rem; margin-top: 6rem; } + + /* Pop-up second layer begin */ + + .py-overlay { + position: fixed; + display: flex; + justify-content: center; + align-items: center; + color: white; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.5); + transition: opacity 500ms; + visibility: hidden; + color: visible; + opacity: 1; + } + + .py-overlay { + visibility: visible; + opacity: 1; + } + + .py-pop-up { + text-align: center; + width: 600px; + } + + .py-pop-up p { + margin: 5px; + } + + .py-pop-up a { + position: absolute; + color: white; + text-decoration: none; + font-size: 200%; + top: 3.5%; + right: 5%; + } + + .editor-box{ + --tw-border-opacity: 1; + border-color: rgba(209, 213, 219, var(--tw-border-opacity)); + border-width: 1px; + position: relative; + --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgba(59, 130, 246, 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + position: relative; + + box-sizing: border-box; + border-width: 1px; + border-style: solid; + border-color: rgb(209, 213, 219) + } + + .editor-box:hover button{ + opacity: 1; + } + + .repl-play-button{ + opacity: 0; + bottom: 0.25rem; + right: 0.25rem; + position: absolute; + padding: 0; + line-height: inherit; + color: inherit; + cursor: pointer; + background-color: transparent; + background-image: none; + -webkit-appearance: button; + text-transform: none; + font-family: inherit; + font-size: 100%; + margin: 0; + text-rendering: auto; + letter-spacing: normal; + word-spacing: normal; + line-height: normal; + text-transform: none; + text-indent: 0px; + text-shadow: none; + display: inline-block; + text-align: center; + align-items: flex-start; + cursor: default; + box-sizing: border-box; + background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59)); + margin: 0em; + padding: 1px 6px; + border: 0; + } + + .repl-play-button:hover{ + opacity: 1; + } + + /* Pop-up second layer end */ - + diff --git a/pyscriptjs/src/Tailwind.svelte b/pyscriptjs/src/Tailwind.svelte index b7fa654a31d..4f7ebf259e3 100644 --- a/pyscriptjs/src/Tailwind.svelte +++ b/pyscriptjs/src/Tailwind.svelte @@ -1,5 +1,5 @@ diff --git a/pyscriptjs/src/components/pyloader.ts b/pyscriptjs/src/components/pyloader.ts index e8909331c78..c5e6f184e3d 100644 --- a/pyscriptjs/src/components/pyloader.ts +++ b/pyscriptjs/src/components/pyloader.ts @@ -14,13 +14,22 @@ export class PyLoader extends BaseEvalElement { } connectedCallback() { - this.innerHTML = `
+ // this.innerHTML = `
+ // + //
+ //
+ //
+ //
+ //
`; + this.innerHTML = `
+
-
`; +
+
` this.mount_name = this.id.split('-').join('_'); this.operation = document.getElementById('pyscript-operation'); this.details = document.getElementById('pyscript-operation-details'); diff --git a/pyscriptjs/src/components/pyrepl.ts b/pyscriptjs/src/components/pyrepl.ts index 85fe6afe69a..fc6db667d3e 100644 --- a/pyscriptjs/src/components/pyrepl.ts +++ b/pyscriptjs/src/components/pyrepl.ts @@ -114,7 +114,7 @@ export class PyRepl extends BaseEvalElement { this.btnRun.id = 'btnRun'; this.btnRun.innerHTML = ''; - addClasses(this.btnRun, ['absolute', 'right-1', 'bottom-1', 'opacity-0', 'group-hover:opacity-100']); + addClasses(this.btnRun, ['absolute', 'repl-play-button']); // Play Button Label const btnLabel = document.createElement('label'); From c689dea27625e772eac85fffba907fe7b8322485 Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Mon, 23 May 2022 15:54:17 -0500 Subject: [PATCH 02/17] add css to pybox and add class to repl --- pyscriptjs/examples/repl.html | 2 +- pyscriptjs/examples/repl2.html | 4 ++-- pyscriptjs/src/App.svelte | 4 ++-- pyscriptjs/src/components/pybox.ts | 12 ++++++++---- pyscriptjs/src/components/pyrepl.ts | 2 +- 5 files changed, 14 insertions(+), 10 deletions(-) diff --git a/pyscriptjs/examples/repl.html b/pyscriptjs/examples/repl.html index 1a51e10d7f7..2eadfa2f24b 100644 --- a/pyscriptjs/examples/repl.html +++ b/pyscriptjs/examples/repl.html @@ -7,7 +7,7 @@ REPL - + diff --git a/pyscriptjs/examples/repl2.html b/pyscriptjs/examples/repl2.html index 75a8913e9cf..0f971b1e15a 100644 --- a/pyscriptjs/examples/repl2.html +++ b/pyscriptjs/examples/repl2.html @@ -7,10 +7,10 @@ Custom REPL Example - + - + diff --git a/pyscriptjs/src/App.svelte b/pyscriptjs/src/App.svelte index 9baa6b097a5..e550ddab1d3 100644 --- a/pyscriptjs/src/App.svelte +++ b/pyscriptjs/src/App.svelte @@ -138,8 +138,8 @@ /* Pop-up second layer end */ - --> diff --git a/pyscriptjs/src/components/pybox.ts b/pyscriptjs/src/components/pybox.ts index 6c3782c2e1d..12aa4f45618 100644 --- a/pyscriptjs/src/components/pybox.ts +++ b/pyscriptjs/src/components/pybox.ts @@ -18,7 +18,7 @@ export class PyBox extends HTMLElement { connectedCallback() { const mainDiv = document.createElement('div'); - addClasses(mainDiv, ['flex', 'mx-8']); + addClasses(mainDiv, ['py-box']); // Hack: for some reason when moving children, the editor box duplicates children // meaning that we end up with 2 editors, if there's a inside the @@ -44,17 +44,21 @@ export class PyBox extends HTMLElement { // now we need to set widths this.widths = []; + if (this.hasAttribute('widths')) { for (const w of this.getAttribute('widths').split(';')) { - this.widths.push(`w-${w}`); + if (w.includes('/')) this.widths.push(w.split('/')[0]) + else this.widths.push(w) } } else { - this.widths = [...this.widths, ...[`w-1/${mainDiv.childNodes.length}`]]; + this.widths = Array(mainDiv.children.length).fill('1 1 0') } this.widths.forEach((width, index) => { const node: ChildNode = mainDiv.childNodes[index]; - addClasses(node as HTMLElement, [width, 'mx-1']); + // addClasses(node as HTMLElement, [width, 'mx-1']); + (node).style.flex = width; + addClasses((node), ['py-box-child']); }); this.appendChild(mainDiv); diff --git a/pyscriptjs/src/components/pyrepl.ts b/pyscriptjs/src/components/pyrepl.ts index fc6db667d3e..03021da2787 100644 --- a/pyscriptjs/src/components/pyrepl.ts +++ b/pyscriptjs/src/components/pyrepl.ts @@ -92,7 +92,7 @@ export class PyRepl extends BaseEvalElement { }); const mainDiv = document.createElement('div'); - addClasses(mainDiv, ['parentBox', 'flex', 'flex-col', 'mt-2', 'mx-8', 'relative']); + addClasses(mainDiv, ['py-repl-box']); // Styles that we use to hide the labels whilst also keeping it accessible for screen readers const labelStyle = 'overflow:hidden; display:block; width:1px; height:1px'; From 48d7f77f58e1a0d8c7b668a7b78c5053b3bdfd4e Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Wed, 25 May 2022 13:24:39 -0500 Subject: [PATCH 03/17] set output component visibility --- pyscriptjs/src/components/base.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/pyscriptjs/src/components/base.ts b/pyscriptjs/src/components/base.ts index 274da6e0934..b49cdec4087 100644 --- a/pyscriptjs/src/components/base.ts +++ b/pyscriptjs/src/components/base.ts @@ -163,6 +163,7 @@ export class BaseEvalElement extends HTMLElement { this.errorElement.children[this.errorElement.children.length - 1].setAttribute('error', '') this.errorElement.hidden = false; this.errorElement.style.display = 'block'; + this.errorElement.style.visibility = 'visible'; } } // end evaluate From b750da175743d4d566716fcd05977004aac7360f Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Wed, 25 May 2022 13:25:32 -0500 Subject: [PATCH 04/17] replace tailwind class with single component class --- pyscriptjs/src/components/pyrepl.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pyscriptjs/src/components/pyrepl.ts b/pyscriptjs/src/components/pyrepl.ts index 03021da2787..a2e2f6aba67 100644 --- a/pyscriptjs/src/components/pyrepl.ts +++ b/pyscriptjs/src/components/pyrepl.ts @@ -59,7 +59,7 @@ export class PyRepl extends BaseEvalElement { // add an extra div where we can attach the codemirror editor this.editorNode = document.createElement('div'); - addClasses(this.editorNode, ['editor-box', 'border', 'border-gray-300', 'group', 'relative']); + addClasses(this.editorNode, ['editor-box']); this.shadow.appendChild(this.wrapper); } @@ -157,7 +157,7 @@ export class PyRepl extends BaseEvalElement { // In this case neither output or std-out have been provided so we need // to create a new output div to output to this.outputElement = document.createElement('div'); - this.outputElement.classList.add('output', 'font-mono', 'ml-8', 'text-sm'); + this.outputElement.classList.add('output'); this.outputElement.hidden = true; this.outputElement.id = this.id + '-' + this.getAttribute('exec-id'); From bfc71e2a567516871ea5b4dda4a2f9fa89dfcf8b Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Wed, 25 May 2022 18:22:05 -0500 Subject: [PATCH 05/17] add styles to css --- pyscriptjs/src/App.svelte | 361 ++++++++++++++++++++++++-------------- 1 file changed, 227 insertions(+), 134 deletions(-) diff --git a/pyscriptjs/src/App.svelte b/pyscriptjs/src/App.svelte index e550ddab1d3..1c92fcba4dd 100644 --- a/pyscriptjs/src/App.svelte +++ b/pyscriptjs/src/App.svelte @@ -1,139 +1,232 @@ From ba90de899c23e71bc5ad4115f734d0f65a2ae432 Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Wed, 25 May 2022 18:23:34 -0500 Subject: [PATCH 06/17] replace classes on button --- pyscriptjs/src/components/pybutton.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pyscriptjs/src/components/pybutton.ts b/pyscriptjs/src/components/pybutton.ts index 0d1d3484e5b..9c0297d753e 100644 --- a/pyscriptjs/src/components/pybutton.ts +++ b/pyscriptjs/src/components/pybutton.ts @@ -13,7 +13,7 @@ export class PyButton extends BaseEvalElement { constructor() { super(); - this.defaultClass = ['p-2', 'text-white', 'bg-blue-600', 'border', 'border-blue-600', 'rounded']; + this.defaultClass = ['py-button']; if (this.hasAttribute('label')) { this.label = this.getAttribute('label'); From b0054b0b0a85bf716235c8ec47242b3d42d313c0 Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Wed, 25 May 2022 18:23:51 -0500 Subject: [PATCH 07/17] replace classes on input --- pyscriptjs/src/components/pyinputbox.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pyscriptjs/src/components/pyinputbox.ts b/pyscriptjs/src/components/pyinputbox.ts index e86a721fb12..5a98d7ee531 100644 --- a/pyscriptjs/src/components/pyinputbox.ts +++ b/pyscriptjs/src/components/pyinputbox.ts @@ -24,7 +24,7 @@ export class PyInputBox extends BaseEvalElement { const mainDiv = document.createElement('input'); mainDiv.type = 'text'; - addClasses(mainDiv, ['border', 'flex-1', 'w-full', 'mr-3', 'border-gray-300', 'p-2', 'rounded']); + addClasses(mainDiv, ['py-input']); mainDiv.id = this.id; this.id = `${this.id}-container`; From 8562d1e45efa75255961f8788bd13918af5af9f2 Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Wed, 25 May 2022 18:24:44 -0500 Subject: [PATCH 08/17] replace classes in title --- pyscriptjs/src/components/pytitle.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pyscriptjs/src/components/pytitle.ts b/pyscriptjs/src/components/pytitle.ts index ba9687d382c..ca3bb933020 100644 --- a/pyscriptjs/src/components/pytitle.ts +++ b/pyscriptjs/src/components/pytitle.ts @@ -20,7 +20,7 @@ export class PyTitle extends BaseEvalElement { const mainDiv = document.createElement('div'); const divContent = document.createElement('h1'); - addClasses(mainDiv, ['text-center', 'w-full', 'mb-8']); + addClasses(mainDiv, ['py-title']); addClasses(divContent, ['text-3xl', 'font-bold', 'text-gray-800', 'uppercase', 'tracking-tight']); divContent.innerHTML = this.label; From de478e2dc107c4157161d1625d0f63936ad6f9af Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Wed, 25 May 2022 18:25:19 -0500 Subject: [PATCH 09/17] replace classes on list --- pyscriptjs/src/pyscript.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pyscriptjs/src/pyscript.py b/pyscriptjs/src/pyscript.py index b57e5022258..18171e06ccf 100644 --- a/pyscriptjs/src/pyscript.py +++ b/pyscriptjs/src/pyscript.py @@ -262,7 +262,7 @@ def create(self): f""" """ ) @@ -296,7 +296,7 @@ def render_content(self): class PyListTemplate: - theme = PyWidgetTheme("flex flex-col-reverse mt-8 mx-8") + theme = PyWidgetTheme("py-li-element") item_class = PyItemTemplate def __init__(self, parent): From 576d9df6a4439e5786a7cf9647dbbd94efed19bd Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Tue, 31 May 2022 03:55:16 -0500 Subject: [PATCH 10/17] replace classes --- pyscriptjs/src/components/pyscript.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pyscriptjs/src/components/pyscript.ts b/pyscriptjs/src/components/pyscript.ts index bf13da167f4..f67650f3cf1 100644 --- a/pyscriptjs/src/components/pyscript.ts +++ b/pyscriptjs/src/components/pyscript.ts @@ -44,7 +44,7 @@ export class PyScript extends BaseEvalElement { this.innerHTML = ''; const mainDiv = document.createElement('div'); - addClasses(mainDiv, ['parentBox', 'flex', 'flex-col', 'mx-8']); + addClasses(mainDiv, ['output']); // add Editor to main PyScript div if (this.hasAttribute('output')) { From 304ecffb33188b8023e67258773d74da3cb93d8b Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Sat, 11 Jun 2022 19:06:53 -0500 Subject: [PATCH 11/17] add new style file --- pyscriptjs/src/main.ts | 1 + pyscriptjs/src/styles/pyscript_base.css | 228 ++++++++++++++++++++++++ 2 files changed, 229 insertions(+) create mode 100644 pyscriptjs/src/styles/pyscript_base.css diff --git a/pyscriptjs/src/main.ts b/pyscriptjs/src/main.ts index 6c0f4c0701d..0e3574443bf 100644 --- a/pyscriptjs/src/main.ts +++ b/pyscriptjs/src/main.ts @@ -1,4 +1,5 @@ import App from './App.svelte'; +import './styles/pyscript_base.css'; import { PyScript } from './components/pyscript'; import { PyRepl } from './components/pyrepl'; diff --git a/pyscriptjs/src/styles/pyscript_base.css b/pyscriptjs/src/styles/pyscript_base.css new file mode 100644 index 00000000000..f90f6abafe7 --- /dev/null +++ b/pyscriptjs/src/styles/pyscript_base.css @@ -0,0 +1,228 @@ +:not(:defined) { + display: none +} + +html{ + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + line-height: 1.5; +} + +.spinner::after { + content: ''; + box-sizing: border-box; + width: 40px; + height: 40px; + position: absolute; + top: calc(40% - 20px); + left: calc(50% - 20px); + border-radius: 50%; +} + +.spinner.smooth::after { + border-top: 4px solid rgba(255, 255, 255, 1); + border-left: 4px solid rgba(255, 255, 255, 1); + border-right: 4px solid rgba(255, 255, 255, 0); + animation: spinner 0.6s linear infinite; +} +@keyframes spinner { + to { + transform: rotate(360deg); + } +} + +.label { + text-align: center; + width: 100%; + display: block; + color: rgba(255, 255, 255, 0.8); + font-size: 0.8rem; + margin-top: 6rem; +} + +/* Pop-up second layer begin */ + +.py-overlay { + position: fixed; + display: flex; + justify-content: center; + align-items: center; + color: white; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.5); + transition: opacity 500ms; + visibility: hidden; + color: visible; + opacity: 1; +} + +.py-overlay { + visibility: visible; + opacity: 1; +} + +.py-pop-up { + text-align: center; + width: 600px; +} + +.py-pop-up p { + margin: 5px; +} + +.py-pop-up a { + position: absolute; + color: white; + text-decoration: none; + font-size: 200%; + top: 3.5%; + right: 5%; +} + +.py-box{ + display: flex; + flex-direction: row; + justify-content: flex-start; +} + +.py-box div.py-box-child * +{ + max-width: 100%; +} + +.py-repl-box{ + flex-direction: column; +} + +.editor-box{ + --tw-border-opacity: 1; + border-color: rgba(209, 213, 219, var(--tw-border-opacity)); + border-width: 1px; + position: relative; + --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgba(59, 130, 246, 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + position: relative; + + box-sizing: border-box; + border-width: 1px; + border-style: solid; + border-color: rgb(209, 213, 219) +} + +.editor-box:hover button{ + opacity: 1; +} + +.repl-play-button{ + opacity: 0; + bottom: 0.25rem; + right: 0.25rem; + position: absolute; + padding: 0; + line-height: inherit; + color: inherit; + cursor: pointer; + background-color: transparent; + background-image: none; + -webkit-appearance: button; + text-transform: none; + font-family: inherit; + font-size: 100%; + margin: 0; + text-rendering: auto; + letter-spacing: normal; + word-spacing: normal; + line-height: normal; + text-transform: none; + text-indent: 0px; + text-shadow: none; + display: inline-block; + text-align: center; + align-items: flex-start; + cursor: default; + box-sizing: border-box; + background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59)); + margin: 0em; + padding: 1px 6px; + border: 0; +} + +.repl-play-button:hover{ + opacity: 1; +} + +.py-title{ + text-transform: uppercase; + text-align: center; +} + +.py-title h1{ + font-weight: 700; + font-size: 1.875rem; +} + +.py-input{ + padding: 0.5rem; + --tw-border-opacity: 1; + border-color: rgba(209, 213, 219, var(--tw-border-opacity)); + border-width: 1px; + border-radius: 0.25rem; + margin-right: 0.75rem; + border-style: solid; + width: -webkit-fill-available; +} + +.central-content{ + max-width: 20rem; + margin-left: auto; + margin-right: auto; +} + +input { + text-rendering: auto; + color: -internal-light-dark(black, white); + letter-spacing: normal; + word-spacing: normal; + line-height: normal; + text-transform: none; + text-indent: 0px; + text-shadow: none; + display: inline-block; + text-align: start; + appearance: auto; + -webkit-rtl-ordering: logical; + cursor: text; + background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59)); + margin: 0em; + padding: 1px 2px; + border-width: 2px; + border-style: inset; + border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133)); + border-image: initial; +} + +.py-button{ + --tw-text-opacity: 1; + color: rgba(255, 255, 255, var(--tw-text-opacity)); + padding: 0.5rem; + --tw-bg-opacity: 1; + background-color: rgba(37, 99, 235, var(--tw-bg-opacity)); + --tw-border-opacity: 1; + border-color: rgba(37, 99, 235, var(--tw-border-opacity)); + border-width: 1px; + border-radius: 0.25rem; +} + +button, input, optgroup, select, textarea { + font-family: inherit; + font-size: 100%; + line-height: 1.15; + margin: 0; +} From 4a35fb54570adede8121c967a5e7cd8083f89198 Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Mon, 13 Jun 2022 17:09:49 -0500 Subject: [PATCH 12/17] add list element style --- pyscriptjs/src/pyscript.py | 6 +++--- pyscriptjs/src/styles/pyscript_base.css | 12 ++++++++++++ 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/pyscriptjs/src/pyscript.py b/pyscriptjs/src/pyscript.py index 87af7e15b9e..b22024d1a33 100644 --- a/pyscriptjs/src/pyscript.py +++ b/pyscriptjs/src/pyscript.py @@ -262,15 +262,15 @@ def register_parent(self, parent): def create(self): console.log("creating section") - new_child = create("section", self._id, "task bg-white my-1") + new_child = create("div", self._id, "py-li-element") console.log("creating values") console.log("creating innerHtml") new_child._element.innerHTML = dedent( f""" -