Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit091d109

Browse files
committed
updated styles for repl2, styled the play button
1 parent0ac2d4d commit091d109

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
<linkrel="stylesheet"href="../build/pyscript.css"/>
1111

1212
<scriptdefersrc="../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
<h1class="font-semibold text-2xl ml-5">Custom REPL</h1>
2544
<py-boxwidths="2/3;1/3">
2645
<py-replid="my-repl"auto-generate="true"std-out="output"std-err="err-div"></py-repl>
27-
<divid="output"></div>
46+
<divid="output"class="p-4"></div>
2847
</py-box>
29-
<footerid="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+
<footerid="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
<scriptlang="ts">
122
importTailwindfrom'./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
letmainDiv=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
vareDiv=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-grouprelative 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 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-
letbuttonClasses=["mr-2","block","py-2","px-4","rounded-full"];
116+
this.btnRun.innerHTML='<svg 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+
letbuttonClasses=["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=functiontoggleNavBar(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)
[8]ページ先頭
©2009-2025 Movatter.jp