new advanced example, small fixes
This commit is contained in:
@ -10,7 +10,7 @@
|
||||
"pyscript_py_url": "https://pyscript.net/latest/pyscript.py",
|
||||
"bootstrap_css_url": "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css",
|
||||
"bootstrap_js_url": "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js",
|
||||
"pyscript_bootstrap_templates_wheel_url": "../dist/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl",
|
||||
"pyscript_bootstrap_templates_wheel_url": "../dist/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl",
|
||||
"pwa_bg_color": "#000000",
|
||||
"pwa_theme_color": "#ffffff"
|
||||
}
|
@ -19,9 +19,11 @@
|
||||
<body style="width: 100%; height: 100%">
|
||||
<py-config type="json">
|
||||
{
|
||||
"autoclose_loader": true,
|
||||
"splashscreen": {
|
||||
"autoclose": true
|
||||
},
|
||||
"packages": [
|
||||
"./resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl",
|
||||
"./resources/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl",
|
||||
"numpy"
|
||||
],
|
||||
"paths": []
|
||||
|
@ -1,9 +1,35 @@
|
||||
:not(:defined) {
|
||||
display: none
|
||||
/* py-config - not a component */
|
||||
py-config {
|
||||
display: none;
|
||||
}
|
||||
/* py-{el} - components not defined */
|
||||
py-script: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";
|
||||
py-repl:not(:defined) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
py-title:not(:defined) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
py-inputbox:not(:defined) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
py-button:not(:defined) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
py-box: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;
|
||||
}
|
||||
|
||||
@ -24,6 +50,7 @@ html{
|
||||
border-right: 4px solid rgba(255, 255, 255, 0);
|
||||
animation: spinner 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spinner {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
@ -81,27 +108,68 @@ html{
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.py-box{
|
||||
/* Pop-up second layer end */
|
||||
.alert-banner {
|
||||
position: relative;
|
||||
padding: 0.5rem 1.5rem 0.5rem 0.5rem;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.alert-banner p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.py-error {
|
||||
background-color: #ffe9e8;
|
||||
border: solid;
|
||||
border-color: #f0625f;
|
||||
color: #9d041c;
|
||||
}
|
||||
|
||||
.py-warning {
|
||||
background-color: rgb(255, 244, 229);
|
||||
border: solid;
|
||||
border-color: #ffa016;
|
||||
color: #794700;
|
||||
}
|
||||
|
||||
.alert-banner.py-error > #alert-close-button {
|
||||
color: #9d041c;
|
||||
}
|
||||
|
||||
.alert-banner.py-warning > #alert-close-button {
|
||||
color: #794700;
|
||||
}
|
||||
|
||||
#alert-close-button {
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
top: 0.5rem;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.py-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.py-box div.py-box-child *
|
||||
{
|
||||
.py-box div.py-box-child * {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.py-repl-box{
|
||||
.py-repl-box {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.editor-box{
|
||||
.py-repl-editor {
|
||||
--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-inset: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgba(59, 130, 246, 0.5);
|
||||
@ -113,14 +181,14 @@ html{
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgb(209, 213, 219)
|
||||
border-color: rgb(209, 213, 219);
|
||||
}
|
||||
|
||||
.editor-box:hover button{
|
||||
.editor-box:hover button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.repl-play-button{
|
||||
.py-repl-run-button {
|
||||
opacity: 0;
|
||||
bottom: 0.25rem;
|
||||
right: 0.25rem;
|
||||
@ -154,65 +222,64 @@ html{
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.repl-play-button:hover{
|
||||
.py-repl-run-button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.py-title{
|
||||
.py-title {
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.py-title h1{
|
||||
.py-title h1 {
|
||||
font-weight: 700;
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
||||
.py-input{
|
||||
.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;
|
||||
border-radius: 0.25rem;
|
||||
margin-right: 0.75rem;
|
||||
border-style: solid;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.py-box input.py-input{
|
||||
.py-box input.py-input {
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
|
||||
.central-content{
|
||||
.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;
|
||||
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;
|
||||
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{
|
||||
.py-button {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(255, 255, 255, var(--tw-text-opacity));
|
||||
padding: 0.5rem;
|
||||
@ -222,17 +289,22 @@ input {
|
||||
border-color: rgba(37, 99, 235, var(--tw-border-opacity));
|
||||
border-width: 1px;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.py-li-element p{
|
||||
.py-li-element p {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.py-li-element p{
|
||||
.py-li-element p {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
button, input, optgroup, select, textarea {
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
@ -242,3 +314,19 @@ button, input, optgroup, select, textarea {
|
||||
.line-through {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
/* ===== py-terminal plugin ===== */
|
||||
/* XXX: it would be nice if these rules were stored in e.g. pyterminal.css and
|
||||
bundled together at build time (by rollup?) */
|
||||
|
||||
.py-terminal {
|
||||
min-height: 10em;
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 0.5rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.py-terminal-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
@ -1,5 +1,5 @@
|
||||
|
||||
const pwa_version = "03_numpy_grid_demo_202210161638"
|
||||
const pwa_version = "03_numpy_grid_demo_202306031006"
|
||||
const assets = ["./index.html",
|
||||
"./main.py",
|
||||
"./resources/bootstrap.css",
|
||||
@ -7,7 +7,7 @@ const assets = ["./index.html",
|
||||
"./resources/pyscript.css",
|
||||
"./resources/pyscript.js",
|
||||
"./resources/pyscript.py",
|
||||
"./resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl",
|
||||
"./resources/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl",
|
||||
"./resources/pwa.js",
|
||||
"./site.js",
|
||||
]
|
||||
|
Reference in New Issue
Block a user