Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit bcb9eb9

Browse files
fpligerfpliger
committed
reorganize UI so with header, footer and left side navbar
1 parent 9554f5b commit bcb9eb9

File tree

5 files changed

+200
-184
lines changed

5 files changed

+200
-184
lines changed

‎pyscriptjs/src/App.svelte

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
<script lang="ts">
22
// import Button from "./Button.svelte";
33
// import Logo from "./Logo.svelte";
4-
import Main from "./Main.svelte";
5-
import Header from "./Header.svelte";
4+
// import Main from "./OldMain.svelte";
5+
// import Header from "./OldHeader.svelte";
66
import Tailwind from "./Tailwind.svelte";
77
import { loadInterpreter } from './interpreter';
8-
import { pyodideLoaded, loadedEnvironments } from './stores';
8+
import { pyodideLoaded, loadedEnvironments, navBarOpen } from './stores';
9+
import Main from "./Main.svelte";
10+
import Header from "./Header.svelte";
11+
import SideNav from "./SideNav.svelte";
912
1013
let pyodideReadyPromise
1114
const initializePyodide = () =>{
@@ -24,6 +27,11 @@
2427
});
2528
// let environments = loadedEnvironments;
2629
// debugger
30+
let showNavBar = false;
31+
let main = document.querySelector("#main");
32+
navBarOpen.subscribe(value => {
33+
showNavBar = value;
34+
});
2735
}
2836
2937
</script>
@@ -46,9 +54,13 @@
4654

4755
<Tailwind />
4856

49-
<div class="min-h-full">
50-
<Header />
5157

52-
<Main />
58+
<div class="flex flex-wrap bg-grey-light min-h-screen">
59+
<SideNav />
60+
61+
<div id="main" class="w-full min-h-full absolute pin-r flex flex-col">
62+
<Header />
63+
<Main />
64+
</div>
5365

5466
</div>

‎pyscriptjs/src/Header.svelte

Lines changed: 93 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -1,165 +1,106 @@
11
<script lang="ts">
2-
import Fa from 'svelte-fa'
3-
import { faCog } from '@fortawesome/free-solid-svg-icons'
4-
import { loadedEnvironments } from './stores';
2+
import Fa from 'svelte-fa';
3+
import { faCog, faBars, faPlay, faTimes } from '@fortawesome/free-solid-svg-icons'
4+
import { pyodideLoaded, loadedEnvironments, navBarOpen } from './stores';
55
6-
export let name = "PyScript";
7-
export let editMode = true;
6+
export let name = "PyScript";
87
9-
$: modeLabel = (editMode == true) ? "edit" : "run";
8+
let showNavBar = false;
9+
navBarOpen.subscribe(value => {
10+
showNavBar = value;
1011
11-
function toggleMode() {
12-
editMode = ! editMode;
13-
}
12+
console.log(showNavBar);
13+
toggleSidebar();
14+
});
1415
15-
function addScript(evt){
16-
// get the main element
17-
const mainEl = document.getElementById("dashboard");
18-
const p = document.createElement("py-script");
19-
mainEl.appendChild(p);
20-
}
21-
22-
function addInterpreter(evt){
23-
console.log("add interpreter");
24-
}
25-
26-
function showSettings(evt){
27-
console.log($loadedEnvironments);
28-
}
29-
30-
31-
let open = true;
16+
function toggleNavBar(evt){
17+
navBarOpen.set(!$navBarOpen);
18+
}
3219
33-
</script>
34-
35-
<nav class="bg-gray-800">
36-
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
37-
<div class="flex items-center justify-between h-16">
38-
<div class="flex items-center">
39-
<div class="flex-shrink-0">
40-
<!-- <img class="h-8 w-8" src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg" alt="Workflow"> -->
41-
<label class="text-gray-300">{name}</label>
42-
</div>
43-
<div class="hidden md:block">
44-
<div class="ml-10 flex items-baseline space-x-4">
45-
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
46-
<a class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium" aria-current="page">Dashboard</a>
4720
48-
<a class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium" on:click={addScript}>+ Script</a>
21+
function toggleSidebar() {
22+
let menuSwitch = document.querySelector("#menu-switch"),
23+
sidebar = document.querySelector("#sidebar"),
24+
main = document.querySelector("#main");
25+
26+
let classesToApplyForSidebar = {
27+
active: [],
28+
inactive: ["sidebar-inactive"]
29+
},
30+
classesToApplyForMain = {
31+
active: ["sm:w-2/3", "lg:w-3/4", 'main-squeezed'],
32+
inactive: []
33+
},
34+
classesToApplyForMenuButton = {
35+
active: ["fa-times-circle", "text-red-light"],
36+
inactive: ["fa-bars"]
37+
};
38+
39+
// let isMenuActive = menuSwitch.getAttribute("data-menu-active") === "true";
40+
41+
if (!menuSwitch){
42+
return;
43+
}
44+
if (!showNavBar) {
45+
// menuSwitch.setAttribute("data-menu-active", null);
46+
47+
menuSwitch.children[0].classList.remove(
48+
...classesToApplyForMenuButton.active
49+
);
50+
menuSwitch.children[0].classList.add(
51+
...classesToApplyForMenuButton.inactive
52+
);
53+
54+
sidebar.classList.remove(...classesToApplyForSidebar.active);
55+
sidebar.classList.add(...classesToApplyForSidebar.inactive);
56+
57+
main.classList.remove(...classesToApplyForMain.active);
58+
main.classList.add(...classesToApplyForMain.inactive);
59+
} else {
60+
// menuSwitch.setAttribute("data-menu-active", true);
61+
62+
menuSwitch.children[0].classList.add(
63+
...classesToApplyForMenuButton.active
64+
);
65+
menuSwitch.children[0].classList.remove(
66+
...classesToApplyForMenuButton.inactive
67+
);
68+
69+
sidebar.classList.add(...classesToApplyForSidebar.active);
70+
sidebar.classList.remove(...classesToApplyForSidebar.inactive);
71+
72+
main.classList.add(...classesToApplyForMain.active);
73+
main.classList.remove(...classesToApplyForMain.inactive);
74+
}
75+
}
76+
</script>
4977

50-
<a class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium" on:click={addInterpreter}>+ Interpreter</a>
78+
<style>
79+
:global(div.main-squeezed) {
80+
transform: translateX(33.3333%);
81+
}
5182
52-
<!-- <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Calendar</a>
83+
:global(.logo-title){
84+
font-family: FreeMono, monospace;
85+
}
86+
</style>
5387

54-
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Reports</a> -->
55-
</div>
56-
</div>
88+
<aside id="navbar" class="flex flex-column w-full text-lg p-6 bg-grey-lighter shadow-md slow-moves">
89+
<button id="menu-switch" class="focus:outline-none" on:click={toggleNavBar}>
90+
<div class:hidden={showNavBar}>
91+
<Fa icon={faBars} />
5792
</div>
58-
<div class="hidden md:block">
59-
<div class="ml-4 flex items-center md:ml-6">
60-
61-
<label class="text-gray-300" on:click={toggleMode}>Mode: { modeLabel }</label>
62-
63-
64-
<!-- Profile dropdown -->
65-
<div class="ml-3 relative">
66-
<button type="button" on:click={showSettings} class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
67-
<span class="sr-only">View notifications</span>
68-
<!-- Settings Icon -->
69-
<Fa icon={faCog} />
70-
</button>
71-
72-
<!-- <div>
73-
<button type="button" class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
74-
<span class="sr-only">Open user menu</span>
75-
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
76-
</button>
77-
</div> -->
78-
79-
<!--
80-
Dropdown menu, show/hide based on menu state.
81-
82-
Entering: "transition ease-out duration-100"
83-
From: "transform opacity-0 scale-95"
84-
To: "transform opacity-100 scale-100"
85-
Leaving: "transition ease-in duration-75"
86-
From: "transform opacity-100 scale-100"
87-
To: "transform opacity-0 scale-95"
88-
-->
89-
<!-- <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1"> -->
90-
<!-- Active: "bg-gray-100", Not Active: "" -->
91-
<!-- <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
92-
93-
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
94-
95-
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
96-
</div> -->
97-
</div>
98-
</div>
93+
<div class:hidden={!showNavBar}>
94+
<Fa icon={faTimes} color="red" />
9995
</div>
100-
<div class="-mr-2 flex md:hidden">
101-
<!-- Mobile menu button -->
102-
<button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
103-
<span class="sr-only">Open main menu</span>
104-
<!--
105-
Heroicon name: outline/menu
106-
107-
Menu open: "hidden", Menu closed: "block"
108-
-->
109-
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
110-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
111-
</svg>
112-
<!--
113-
Heroicon name: outline/x
114-
115-
Menu open: "block", Menu closed: "hidden"
116-
-->
117-
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
118-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
119-
</svg>
120-
</button>
121-
</div>
122-
</div>
123-
</div>
124-
125-
<!-- Mobile menu, show/hide based on menu state. -->
126-
<div class="md:hidden" id="mobile-menu">
127-
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
128-
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
129-
<a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Dashboard</a>
130-
131-
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">+ Script</a>
132-
133-
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">+ Interpreter</a>
134-
135-
<!-- <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>
136-
137-
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Reports</a> -->
138-
</div>
139-
<div class="pt-4 pb-3 border-t border-gray-700">
140-
<div class="flex items-center px-5">
141-
<!-- <div class="flex-shrink-0">
142-
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
143-
</div>
144-
<div class="ml-3">
145-
<div class="text-base font-medium leading-none text-white">Tom Cook</div>
146-
<div class="text-sm font-medium leading-none text-gray-400">[email protected]</div>
147-
</div> -->
148-
<button type="button" class="ml-auto bg-gray-800 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
149-
<span class="sr-only">View notifications</span>
150-
<!-- Heroicon name: outline/bell -->
151-
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
152-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
153-
</svg>
154-
</button>
155-
</div>
156-
<!-- <div class="mt-3 px-2 space-y-1">
157-
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Your Profile</a>
158-
159-
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Settings</a>
160-
161-
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign out</a>
162-
</div> -->
163-
</div>
96+
</button>
97+
<p class="w-full logo-title text-center">{name}</p>
98+
<div class="flex flex-column">
99+
<button class="mr-6">
100+
<Fa icon={faPlay} color="black" />
101+
</button>
102+
<button class="">
103+
<Fa icon={faCog} color="black" />
104+
</button>
164105
</div>
165-
</nav>
106+
</aside>

‎pyscriptjs/src/Main.svelte

Lines changed: 21 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,28 @@
11
<script lang="ts">
2-
import {EditorState, EditorView , basicSetup} from "@codemirror/basic-setup"
3-
4-
import { python } from "@codemirror/lang-python"
5-
import { keymap } from "@codemirror/view";
6-
import { defaultKeymap } from "@codemirror/commands";
7-
import { oneDarkTheme } from "@codemirror/theme-one-dark";
82
3+
import Fa from 'svelte-fa';
4+
import { faWandMagic, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
95
106
</script>
11-
<header class="bg-white shadow">
12-
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
13-
<h1 class="text-3xl font-bold text-gray-900">Dashboard</h1>
14-
</div>
15-
</header>
16-
<main>
17-
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
18-
<!-- Replace with your content -->
19-
<div class="px-4 py-6 sm:px-0">
20-
<div id="dashboard" class="border-4 border-dashed border-gray-200 rounded-lg h-96">
21-
<py-repl>
22-
<py-script auto-generate target="page:mydiv" source='./mycode.py'>
23-
sum([1, 2, 3, 4, 5])
24-
</py-script>
25-
</py-repl>
26-
</div>
7+
8+
<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>
2715
</div>
2816

29-
17+
</main>
18+
<footer class="w-full p-6 bg-black text-white flex space-between">
19+
<p class="logo-title text-center">PyScript</p>
20+
<p class="w-full ml-6 text-center sm:text-left">Copyright &copy; 2019</p>
3021

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

0 commit comments

Comments
 (0)