alihan/pyscript-python-html
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2022-05-01 19:47:48 +03:00
Code Issues Projects Releases Wiki Activity

fix left side navbar and add button to add componente to the page

Browse Source
This commit is contained in:
Fabio Pliger
2022-03-10 17:28:39 -06:00
parent 87c396adaf
commit 2f019d317b
4 changed files with 71 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
pyscriptjs/src/App.svelte
View File

@@ -1,8 +1,7 @@
<script lang="ts">
// import Button from "./Button.svelte";
// import Logo from "./Logo.svelte";
// import Main from "./OldMain.svelte";
// import Header from "./OldHeader.svelte";
import Fa from 'svelte-fa';
import { faPlusCircle } from '@fortawesome/free-solid-svg-icons'
import Tailwind from "./Tailwind.svelte";
import { loadInterpreter } from './interpreter';
import { pyodideLoaded, loadedEnvironments, navBarOpen } from './stores';
@@ -10,10 +9,19 @@
import Header from "./Header.svelte";
import SideNav from "./SideNav.svelte";
let iconSize = 2;
let pyodideReadyPromise
function bumpSize(evt){
iconSize = 4;
}
function downSize(evt){
iconSize = 2;
}
const initializePyodide = () =>{
// @ts-ignore
// pyodideLoaded.set('loaded', true);
pyodideReadyPromise = loadInterpreter();
// @ts-ignore
let newEnv = {
@@ -25,8 +33,7 @@
loadedEnvironments.update((value: any): any => {
value[newEnv['id']] = newEnv;
});
// let environments = loadedEnvironments;
// debugger
let showNavBar = false;
let main = document.querySelector("#main");
navBarOpen.subscribe(value => {
@@ -56,11 +63,16 @@
<div class="flex flex-wrap bg-grey-light min-h-screen">
<SideNav />
<div>
<SideNav />
</div>
<div id="main" class="w-full min-h-full absolute pin-r flex flex-col">
<Header />
<div id="add-component" class="lex flex-column w-full text-lg">
<div style="margin-left: 50%;" on:mouseenter={bumpSize} on:mouseleave={downSize}>
<Fa icon={faPlusCircle} class="grow-icon"style="transform: scale({iconSize});"/>
</div>
</div>
<Main />
</div>
</div>

2
pyscriptjs/src/Header.svelte
View File

@@ -28,7 +28,7 @@
inactive: ["sidebar-inactive"]
},
classesToApplyForMain = {
active: ["sm:w-2/3", "lg:w-3/4", 'main-squeezed'],
active: [], //["sm:w-2/3", "lg:w-3/4"],
inactive: []
},
classesToApplyForMenuButton = {

38
pyscriptjs/src/Main.svelte
View File

@@ -1,31 +1,27 @@
<script lang="ts">
import Fa from 'svelte-fa';
import { faWandMagic, faPlusCircle, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
import SideNav from "./SideNav.svelte";
</script>
<div class="flex content-between flex-wrap min-h-full flex-grow">
<main class="w-full p-6">
<div role="alert" class="w-full p-2 rounded-full bg-teal-light text-teal-darker text-lg">
<py-script auto-generate target="page:mydiv" source='./mycode.py'>
sum([1, 2, 3, 4, 5])
</py-script>
</div>
</main>
<div id="add-component" class="w-full p-6 bg-white text-black flex space-between">
<Fa icon={faPlusCircle} style="transform: scale(2);"/>
<main class="w-full p-6">
<div role="alert" class="w-full p-2 rounded-full bg-teal-light text-teal-darker text-lg">
<py-script auto-generate target="page:mydiv" source='./mycode.py'>
sum([1, 2, 3, 4, 5])
</py-script>
</div>
<footer class="w-full p-6 bg-black text-white flex space-between">
<p class="logo-title text-center">PyScript</p>
<p class="w-full ml-6 text-center sm:text-left">Copyright &copy; 2019</p>
</main>
<aside class="w-full sm:w-auto text-center sm:text-right">
<a href="https://github.com/SlawomirChabowski" title="My Github page" class="text-white block">
<Fa icon={faInfoCircle} style="transform: scale(2);"/>
</a>
</aside>
</footer>
<footer class="w-full p-6 bg-black text-white flex space-between">
<p class="logo-title text-center">PyScript</p>
<p class="w-full ml-6 text-center sm:text-left">Copyright &copy; 2019</p>
<aside class="w-full sm:w-auto text-center sm:text-right">
<a href="https://github.com/SlawomirChabowski" title="My Github page" class="text-white block">
<Fa icon={faInfoCircle} style="transform: scale(2);"/>
</a>
</aside>
</footer>
</div>

46
pyscriptjs/src/SideNav.svelte
View File

@@ -1,35 +1,51 @@
<script lang="ts">
import { pyodideLoaded, loadedEnvironments, navBarOpen } from './stores';
import Fa from 'svelte-fa';
import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'
// let menuSwitch = document.querySelector("#menu-switch"),
// sidebar = document.querySelector("#sidebar"),
// main = document.querySelector("#main");
let showNavBar = false;
navBarOpen.subscribe(value => {
showNavBar = value;
navBarOpen.subscribe(value => {
showNavBar = value;
console.log(showNavBar);
});
console.log("showNav");
console.log(showNavBar);
console.log(showNavBar);
});
function toggleNavBar(evt){
navBarOpen.set(!$navBarOpen);
}
</script>
<style>
:global(div.slow-moves) {
transition: 0.3s;
transition: 2s;
}
.sidebar-inactive {
transform: translateX(-100%);
left: -250px;
transition: left 2s;
}
.sidebar{
width: 250px;
position: -250px
/* transition: right 2s; */
}
.slide-right{
transition: right 2s;
}
</style>
<nav id="sidebar" class="fixed z-10 pin-y bg-grey-lightest shadow-md w-full slow-moves sm:w-1/3 lg:w-1/4" class:sidebar-inactive="{ !showNavBar }">
<h1 class="text-lg p-6 bg-grey-lighter border-grey-light border-b text-grey-darkest">Components Catalog</h1>
<nav id="sidebar" class="fixed z-10 h-full mb-6 left-0 pin-y bg-white shadow-md sidebar" class:sidebar-inactive="{ !showNavBar }" class:slide-right="{ showNavBar }">
<div class="flex flex-column w-full text-lg p-4 bg-grey-lighter shadow-md">
<button id="menu-switch" class="focus:outline-none" on:click={toggleNavBar}>
<Fa icon={faArrowLeft} />
</button>
<div>
<h1 class="text-lg p-2 pl-6 bg-grey-lighter border-grey-light border-b text-grey-darkest">Components Catalog</h1>
</div>
</div>
<ul class="list-reset">
<li class="hover:bg-teal">