jprdonnelly/pyscript
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2026-02-24 11:03:39 -05:00
Code Issues Projects Releases Wiki Activity

See you later tailwind (#452)

Browse Source 
* start removing tailwind and rebuilding some css

* add css to pybox and add class to repl

* set output component visibility

* replace tailwind class with single component class

* add styles to css

* replace classes on  button

* replace classes on input

* replace classes in title

* replace classes on list

* replace classes

* add new style file

* add list element style

* remove tailwind classes from todo example

* revert link on examples files

* remove tailwind config files

* remove commented old code

* add missing ;
This commit is contained in:
Fabio Pliger
2022-06-24 18:30:07 -05:00
committed by GitHub
parent d25e754beb
commit fcaa57307f
19 changed files with 501 additions and 4691 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
pyscriptjs/src/components/pybox.ts
View File

@@ -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 <py-repl> inside the <py-box>
@@ -44,17 +44,20 @@ 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']);
(<HTMLElement>node).style.flex = width;
addClasses((<HTMLElement>node), ['py-box-child']);
});
this.appendChild(mainDiv);

2
pyscriptjs/src/components/pybutton.ts
View File

@@ -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');

2
pyscriptjs/src/components/pyinputbox.ts
View File

@@ -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`;

4
pyscriptjs/src/components/pyloader.ts
View File

@@ -14,12 +14,14 @@ export class PyLoader extends BaseEvalElement {
}
connectedCallback() {
this.innerHTML = `<div id="pyscript_loading_splash" class="fixed top-0 left-0 right-0 bottom-0 w-full h-screen z-50 overflow-hidden bg-gray-600 opacity-75 flex flex-col items-center justify-center">
this.innerHTML = `<div id="pyscript_loading_splash" class="py-overlay">
<div class="py-pop-up">
<div class="smooth spinner"></div>
<div id="pyscript-loading-label" class="label">
<div id="pyscript-operation-details">
</div>
</div>
</div>
</div>`;
this.mount_name = this.id.split('-').join('_');
this.operation = document.getElementById('pyscript-operation');

8
pyscriptjs/src/components/pyrepl.ts
View File

@@ -55,7 +55,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);
}
@@ -88,7 +88,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';
@@ -110,7 +110,7 @@ export class PyRepl extends BaseEvalElement {
this.btnRun.id = 'btnRun';
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>';
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');
@@ -148,7 +148,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');

2
pyscriptjs/src/components/pyscript.ts
View File

@@ -40,7 +40,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')) {

3
pyscriptjs/src/components/pytitle.ts
View File

@@ -20,8 +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(divContent, ['text-3xl', 'font-bold', 'text-gray-800', 'uppercase', 'tracking-tight']);
addClasses(mainDiv, ['py-title']);
divContent.innerHTML = this.label;
mainDiv.id = this.id;