8000 updated styles for repl2, styled the play button · sudhircw/pyscript@091d109 · GitHub
[go: up one dir, main page]
Skip to content

Commit 091d109

Browse files
princiyaprinciya
committed
updated styles for repl2, styled the play button
1 parent 0ac2d4d commit 091d109

File tree

3 files changed

+43
-35
lines changed

3 files changed

+43
-35
lines changed

‎pyscriptjs/examples/repl2.html

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,25 @@
1010
<link rel="stylesheet" href="../build/pyscript.css" />
1111

1212
<script defer src="../build/pyscript.js"></script>
13+
14+
<style>
15+
#output > div {
16+
font-family: 'monospace';
17+
background-color: #e5e5e5;
18+
border: 1px solid lightgray;
19+
border-top: 0;
20+
font-size: 0.875rem;
21+
padding: 0.5rem;
22+
}
23+
24+
#output > div:first-child {
25+
border-top: 1px solid lightgray;
26+
}
27+
28+
#output > div:nth-child(even) {
29+
border: 0;
30+
}
31+
</style>
1332
</head>
1433

1534
<py-env>
@@ -24,9 +43,9 @@
2443
<h1 class="font-semibold text-2xl ml-5">Custom REPL</h1>
2544
<py-box widths="2/3;1/3">
2645
<py-repl id="my-repl" auto-generate="true" std-out="output" std-err="err-div"> </py-repl>
27-
<div id="output"></div>
46+
<div id="output" class="p-4"></div>
2847
</py-box>
29-
<footer id="err-div" class="bg-red-700 text-white text-center border-t-4 border-gree-500 fixed inset-x-0 bottom-0 p-4 hidden">
48+
<footer id="err-div" class="bg-red-700 text-white text-center border-t-4 border-green-500 fixed inset-x-0 bottom-0 p-4 hidden">
3049
</footer>
3150
</body>
3251
</html>

‎pyscriptjs/src/App.svelte

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,3 @@
1-
<style>
2-
:global(div.buttons-box) {
3-
margin-top: -25px;
4-
}
5-
6-
:global(.parentBox:hover .buttons-box) {
7-
visibility: visible;
8-
}
9-
</style>
10-
111
<script lang="ts">
122
import Tailwind from './Tailwind.svelte';
133
import { loadInterpreter } from './interpreter';

‎pyscriptjs/src/components/pyrepl.ts

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -103,20 +103,19 @@ export class PyRepl extends BaseEvalElement {
103103
});
104104

105105
let mainDiv = document.createElement('div');
106-
addClasses(mainDiv, ["parentBox", "group", "flex", "flex-col", "mt-2", "mx-8"])
106+
addClasses(mainDiv, ["parentBox", "group", "flex", "flex-col", "mt-2", "mx-8", "relative"])
107107
// add Editor to main PyScript div
108108

109109
// Butons DIV
110110
var eDiv = document.createElement('div');
111-
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 -mt-2 first-of-type:m-0".split(" "))
111+
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 relative z-10 top-4".split(" "))
112112
eDiv.setAttribute("role", "group");
113113

114114
// Play Button
115115
this.btnRun = document.createElement('button');
116-
this.btnRun.innerHTML = '<svg id="" class="svelte-fa svelte-ps5qeg" style="height:1em;vertical-align:-.125em;transform-origin:center;overflow:visible" viewBox="0 0 384 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(192 256)" transform-origin="96 0"><g transform="translate(0,0) scale(1,1)"><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z" fill="currentColor" transform="translate(-192 -256)"></path></g></g></svg>';
117-
let buttonClasses = ["mr-2", "block", "py-2", "px-4", "rounded-full"];
116+
this.btnRun.innerHTML = '<svg id="" class="svelte-fa svelte-ps5qeg" style="height:20px;width:20px;vertical-align:-.125em;transform-origin:center;overflow:visible;color:green" viewBox="0 0 384 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(192 256)" transform-origin="96 0"><g transform="translate(0,0) scale(1,1)"><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z" fill="currentColor" transform="translate(-192 -256)"></path></g></g></svg>';
117+
let buttonClasses = ["mr-2", "block"];
118118
addClasses(this.btnRun, buttonClasses);
119-
addClasses(this.btnRun, ["bg-green-500"])
120119
eDiv.appendChild(this.btnRun);
121120

122121
this.btnRun.onclick = wrap(this);
@@ -129,24 +128,24 @@ export class PyRepl extends BaseEvalElement {
129128
}
130129

131130
// Settings button
132-
this.btnConfig = document.createElement('button');
133-
this.btnConfig.innerHTML =
134-
'<svg id="" class="svelte-fa svelte-ps5qeg" style="height:1em;vertical-align:-.125em;transform-origin:center;overflow:visible" viewBox="0 0 512 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(256 256)" transform-origin="128 0"><g transform="translate(0,0) scale(1,1)"><path d="M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z" fill="currentColor" transform="translate(-256 -256)"></path></g></g></svg>';
135-
this.btnConfig.onclick = function toggleNavBar(evt) {
136-
console.log('clicked');
137-
componentDetailsNavOpen.set(!propertiesNavOpen);
138-
139-
currentComponentDetails.set([
140-
{ key: 'auto-generate', value: true },
141-
{ key: 'output', value: 'default' },
142-
{ key: 'source', value: 'self' },
143-
{ key: 'output-mode', value: 'clear' },
144-
]);
145-
};
146-
147-
addClasses(this.btnConfig, buttonClasses);
148-
addClasses(this.btnConfig, ['bg-blue-500']);
149-
eDiv.appendChild(this.btnConfig);
131+
// this.btnConfig = document.createElement('button');
132+
// this.btnConfig.innerHTML =
133+
// '<svg id="" class="svelte-fa svelte-ps5qeg" style="height:1em;vertical-align:-.125em;transform-origin:center;overflow:visible" viewBox="0 0 512 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(256 256)" transform-origin="128 0"><g transform="translate(0,0) scale(1,1)"><path d="M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z" fill="currentColor" transform="translate(-256 -256)"></path></g></g></svg>';
134+
// this.btnConfig.onclick = function toggleNavBar(evt) {
135+
// console.log('clicked');
136+
// componentDetailsNavOpen.set(!propertiesNavOpen);
137+
138+
// currentComponentDetails.set([
139+
// { key: 'auto-generate', value: true },
140+
// { key: 'output', value: 'default' },
141+
// { key: 'source', value: 'self' },
142+
// { key: 'output-mode', value: 'clear' },
143+
// ]);
144+
// };
145+
146+
// addClasses(this.btnConfig, buttonClasses);
147+
// addClasses(this.btnConfig, ['bg-blue-500']);
148+
// eDiv.appendChild(this.btnConfig);
150149

151150
mainDiv.appendChild(eDiv);
152151
mainDiv.appendChild(this.editorNode);

0 commit comments

Comments
 (0)
0