8000 fix left side navbar and add button to add componente to the page · shihabuddin413/pyscript@2f019d3 · GitHub
[go: up one dir, main page]
Skip to content

Commit 2f019d3

Browse files
fpligerfpliger
committed
fix left side navbar and add button to add componente to the page
1 parent 87c396a commit 2f019d3

File tree

4 files changed

+71
-47
lines changed

4 files changed

+71
-47
lines changed

‎pyscriptjs/src/App.svelte

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,27 @@
11
<script lang="ts">
2-
// import Button from "./Button.svelte";
3-
// import Logo from "./Logo.svelte";
4-
// import Main from "./OldMain.svelte";
5-
// import Header from "./OldHeader.svelte";
2+
3+
import Fa from 'svelte-fa';
4+
import { faPlusCircle } from '@fortawesome/free-solid-svg-icons'
65
import Tailwind from "./Tailwind.svelte";
76
import { loadInterpreter } from './interpreter';
87
import { pyodideLoaded, loadedEnvironments, navBarOpen } from './stores';
98
import Main from "./Main.svelte";
109
import Header from "./Header.svelte";
1110
import SideNav from "./SideNav.svelte";
1211
12+
let iconSize = 2;
1313
let pyodideReadyPromise
14+
15+
function bumpSize(evt){
16+
iconSize = 4;
17+
}
18+
19+
function downSize(evt){
20+
iconSize = 2;
21+
}
22+
1423
const initializePyodide = () =>{
1524
// @ts-ignore
16-
// pyodideLoaded.set('loaded', true);
1725
pyodideReadyPromise = loadInterpreter();
1826
// @ts-ignore
1927
let newEnv = {
@@ -25,8 +33,7 @@
2533
loadedEnvironments.update((value: any): any => {
2634
value[newEnv['id']] = newEnv;
2735
});
28-
// let environments = loadedEnvironments;
29-
// debugger
36+
3037
let showNavBar = false;
3138
let main = document.querySelector("#main");
3239
navBarOpen.subscribe(value => {
@@ -56,11 +63,16 @@
5663

5764

5865
<div class="flex flex-wrap bg-grey-light min-h-screen">
59-
<SideNav />
60-
66+
<div>
67+
<SideNav />
68+
</div>
6169
<div id="main" class="w-full min-h-full absolute pin-r flex flex-col">
6270
<Header />
71+
<div id="add-component" class="lex flex-column w-full text-lg">
72+
<div style="margin-left: 50%;" on:mouseenter={bumpSize} on:mouseleave={downSize}>
73+
<Fa icon={faPlusCircle} class="grow-icon"style="transform: scale({iconSize});"/>
74+
</div>
75+
</div>
6376
<Main />
6477
</div>
65-
6678
</div>

‎pyscriptjs/src/Header.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
inactive: ["sidebar-inactive"]
2929
},
3030
classesToApplyForMain = {
31-
active: ["sm:w-2/3", "lg:w-3/4", 'main-squeezed'],
31+
active: [], //["sm:w-2/3", "lg:w-3/4"],
3232
inactive: []
3333
},
3434
classesToApplyForMenuButton = {

‎pyscriptjs/src/Main.svelte

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,27 @@
11
<script lang="ts">
2-
32
import Fa from 'svelte-fa';
43
import { faWandMagic, faPlusCircle, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
4+
import SideNav from "./SideNav.svelte";
55
66
</script>
77

88
<div class="flex content-between flex-wrap min-h-full flex-grow">
9-
<main class="w-full p-6">
10-
11-
<div role="alert" class="w-full p-2 rounded-full bg-teal-light text-teal-darker text-lg">
12-
<py-script auto-generate target="page:mydiv" source='./mycode.py'>
13-
sum([1, 2, 3, 4, 5])
14-
</py-script>
15-
</div>
16-
17-
</main>
18-
<div id="add-component" class="w-full p-6 bg-white text-black flex space-between">
19-
<Fa icon={faPlusCircle} style="transform: scale(2);"/>
9+
<main class="w-full p-6">
10+
<div role="alert" class="w-full p-2 rounded-full bg-teal-light text-teal-darker text-lg">
11+
<py-script auto-generate target="page:mydiv" source='./mycode.py'>
12+
sum([1, 2, 3, 4, 5])
1 1E0A 3+
</py-script>
2014
</div>
21-
<footer class="w-full p-6 bg-black text-white flex space-between">
22-
<p class="logo-title text-center">PyScript</p>
23-
<p class="w-full ml-6 text-center sm:text-left">Copyright &copy; 2019</p>
15+
</main>
16+
17+
<footer class="w-full p-6 bg-black text-white flex space-between">
18+
<p class="logo-title text-center">PyScript</p>
19+
<p class="w-full ml-6 text-center sm:text-left">Copyright &copy; 2019</p>
2420

25-
<aside class="w-full sm:w-auto text-center sm:text-right">
26-
<a href="https://github.com/SlawomirChabowski" title="My Github page" class="text-white block">
27-
<Fa icon={faInfoCircle} style="transform: scale(2);"/>
28-
</a>
29-
</aside>
30-
</footer>
21+
<aside class="w-full sm:w-auto text-center sm:text-right">
22+
<a href="https://github.com/SlawomirChabowski" title="My Github page" class="text-white block">
23+
<Fa icon={faInfoCircle} style="transform: scale(2);"/>
24+
</a>
25+
</aside>
26+
</footer>
3127
</div>

‎pyscriptjs/src/SideNav.svelte

Lines changed: 31 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,51 @@
11

22
<script lang="ts">
33
import { pyodideLoaded, loadedEnvironments, navBarOpen } from './stores';
4+
import Fa from 'svelte-fa';
5+
import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'
46
5-
6-
// let menuSwitch = document.querySelector("#menu-switch"),
7-
// sidebar = document.querySelector("#sidebar"),
8-
// main = document.querySelector("#main");
97
let showNavBar = false;
10-
navBarOpen.subscribe(value => {
11-
showNavBar = value;
8+
navBarOpen.subscribe(value => {
9+
showNavBar = value;
1210
13-
console.log(showNavBar);
14-
});
15-
console.log("showNav");
16-
console.log(showNavBar);
11+
console.log(showNavBar);
12+
});
13+
14+
function toggleNavBar(evt){
15+
navBarOpen.set(!$navBarOpen);
16+
}
1717
</script>
1818

1919
<style>
2020
:global(div.slow-moves) {
21-
transition: 0.3s;
21+
transition: 2s;
2222
}
2323
2424
.sidebar-inactive {
25-
transform: translateX(-100%);
25+
left: -250px;
26+
transition: left 2s;
2627
}
2728
28-
</style>
29+
.sidebar{
30+
width: 250px;
31+
position: -250px
32+
/* transition: right 2s; */
33+
}
2934
30-
<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 }">
35+
.slide-right{
36+
transition: right 2s;
37+
}
38+
</style>
3139

32-
<h1 class="text-lg p-6 bg-grey-lighter border-grey-light border-b text-grey-darkest">Components Catalog</h1>
40+
<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 }">
41+
<div class="flex flex-column w-full text-lg p-4 bg-grey-lighter shadow-md">
42+
<button id="menu-switch" class="focus:outline-none" on:click={toggleNavBar}>
43+
<Fa icon={faArrowLeft} />
44+
</button>
45+
<div>
46+
<h1 class="text-lg p-2 pl-6 bg-grey-lighter border-grey-light border-b text-grey-darkest">Components Catalog</h1>
47+
</div>
48+
</div>
3349

3450
<ul class="list-reset">
3551
<li class="hover:bg-teal">

0 commit comments

Comments
 (0)
0