From fdfde89216756f2da0ca2a6d5abf0d0662a45340 Mon Sep 17 00:00:00 2001 From: Princiya Sequeira Date: Wed, 13 Apr 2022 21:48:26 +0200 Subject: [PATCH] updated css for repl2 demo --- pyscriptjs/examples/repl2.html | 16 +++++++++------- pyscriptjs/src/components/pyrepl.ts | 6 +++--- pyscriptjs/tailwind.config.js | 4 +++- 3 files changed, 15 insertions(+), 11 deletions(-) diff --git a/pyscriptjs/examples/repl2.html b/pyscriptjs/examples/repl2.html index 145ee91..5f048cd 100644 --- a/pyscriptjs/examples/repl2.html +++ b/pyscriptjs/examples/repl2.html @@ -12,14 +12,16 @@ - -
-
-
-
+ +
+
+

REPL Demo

+ +
+
+

Output

+
- - diff --git a/pyscriptjs/src/components/pyrepl.ts b/pyscriptjs/src/components/pyrepl.ts index 5c38e29..51b5140 100644 --- a/pyscriptjs/src/components/pyrepl.ts +++ b/pyscriptjs/src/components/pyrepl.ts @@ -111,12 +111,12 @@ export class PyRepl extends HTMLElement { }) let mainDiv = document.createElement('div'); - addClasses(mainDiv, ["parentBox", "flex", "flex-col", "border-4", "border-dashed", "border-gray-200", "rounded-lg"]) + addClasses(mainDiv, ["parentBox", "group", "flex", "flex-col", "mt-10", "border-2", "border-gray-200", "rounded-lg"]) // add Editor to main PyScript div // Butons DIV var eDiv = document.createElement('div'); - addClasses(eDiv, "buttons-box relative top-0 right-0 flex flex-row-reverse space-x-reverse space-x-4 font-mono text-white text-sm font-bold leading-6 dev-buttons-group".split(" ")) + addClasses(eDiv, "buttons-box opacity-0 group-hover:opacity-100 relative top-0 right-0 flex flex-row-reverse space-x-reverse space-x-4 font-mono text-white text-sm font-bold leading-6 dev-buttons-group".split(" ")) eDiv.setAttribute("role", "group"); // Play Button @@ -212,7 +212,7 @@ export class PyRepl extends HTMLElement { }else{ output = pyodide.runPython(source); } - + if (output !== undefined){ let Element = pyodide.globals.get('Element'); let out = Element(this.editorOut.id); diff --git a/pyscriptjs/tailwind.config.js b/pyscriptjs/tailwind.config.js index 48a1a22..68e5866 100644 --- a/pyscriptjs/tailwind.config.js +++ b/pyscriptjs/tailwind.config.js @@ -21,7 +21,9 @@ module.exports = { } }, variants: { - extend: {}, + extend: { + display: ['group-hover'] + }, }, plugins: [], };