Little work on the user page
This commit is contained in:
Fabian Stamm
parent
df017833a4
commit
e4d08dcbf9
|
|
@ -1,37 +1,44 @@
|
|||
<style>
|
||||
.main {
|
||||
padding: 2rem;
|
||||
}
|
||||
.main {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 1rem;
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
li>a {
|
||||
text-decoration: none;
|
||||
}
|
||||
li > a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="main">
|
||||
<h1>Home Page</h1>
|
||||
<h1>Home Page</h1>
|
||||
|
||||
<h2>About</h2>
|
||||
<p>
|
||||
OpenAuth is a Service to provide simple Authentication to a veriaty of Applications.
|
||||
With a simple to use API and different Strategies, it can be easily integrated
|
||||
into most Applications.
|
||||
</p>
|
||||
<h2>About</h2>
|
||||
<p>
|
||||
OpenAuth is a Service to provide simple Authentication to a veriaty of
|
||||
Applications. With a simple to use API and different Strategies, it can be
|
||||
easily integrated into most Applications.
|
||||
</p>
|
||||
|
||||
<h2>QickLinks</h2>
|
||||
<p>
|
||||
If you want to manage your Account, click <a href="user.html">here</a>
|
||||
</p>
|
||||
<h2>QickLinks</h2>
|
||||
<p>
|
||||
If you want to manage your Account, click
|
||||
<a href="user.html">here</a>
|
||||
</p>
|
||||
|
||||
<h2> Applications using OpenAuth </h2>
|
||||
<h2>Applications using OpenAuth</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://ebook.stamm.me">EBook Store and Reader</a></li>
|
||||
<li><a href="https://notes.hibas123.de">Secure and Simple Notes application</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://ebook.stamm.me">EBook Store and Reader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://notes.hibas123.de">
|
||||
Secure and Simple Notes application
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,195 +1,207 @@
|
|||
<script>
|
||||
import AccountPage from "./Pages/Account.svelte";
|
||||
import SecurityPage from "./Pages/Security.svelte";
|
||||
import {
|
||||
slide,
|
||||
fade
|
||||
} from 'svelte/transition';
|
||||
import AccountPage from "./Pages/Account.svelte";
|
||||
import SecurityPage from "./Pages/Security.svelte";
|
||||
import { slide, fade } from "svelte/transition";
|
||||
|
||||
const pages = [{
|
||||
id: "account",
|
||||
title: "Account",
|
||||
icon: "",
|
||||
component: AccountPage
|
||||
},
|
||||
{
|
||||
id: "security",
|
||||
title: "Security",
|
||||
icon: "",
|
||||
component: SecurityPage
|
||||
}
|
||||
];
|
||||
const pages = [
|
||||
{
|
||||
id: "account",
|
||||
title: "Account",
|
||||
icon:
|
||||
"data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyIgdmlld0JveD0iMCAwIDUwMCA1MDAiIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiPjx0aXRsZT4wMSBAZnVsbHdpZHRoPC90aXRsZT48ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz48ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj48ZyBza2V0Y2g6dHlwZT0iTVNBcnRib2FyZEdyb3VwIiBmaWxsPSIjMDAwMDAwIj48cGF0aCBkPSJNNDU3LjUsMjUwIEM0NTcuNSwxMzUuOTUzMTk5IDM2NS4wNDY4MDEsNDMuNSAyNTEsNDMuNSBDMTM2Ljk1MzE5OSw0My41IDQ0LjUsMTM1Ljk1MzE5OSA0NC41LDI1MCBDNDQuNSwzNjQuMDQ2ODAxIDEzNi45NTMxOTksNDU2LjUgMjUxLDQ1Ni41IEMzNjUuMDQ2ODAxLDQ1Ni41IDQ1Ny41LDM2NC4wNDY4MDEgNDU3LjUsMjUwIFogTTU3LjUsMjUwIEM1Ny41LDE0My4xMzI5MDEgMTQ0LjEzMjkwMSw1Ni41IDI1MSw1Ni41IEMzNTcuODY3MDk5LDU2LjUgNDQ0LjUsMTQzLjEzMjkwMSA0NDQuNSwyNTAgQzQ0NC41LDM1Ni44NjcwOTkgMzU3Ljg2NzA5OSw0NDMuNSAyNTEsNDQzLjUgQzE0NC4xMzI5MDEsNDQzLjUgNTcuNSwzNTYuODY3MDk5IDU3LjUsMjUwIFoiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD48cGF0aCBkPSJNMjUxLjUsMjUyLjkzMzk2MiBDMTk2Ljg1NDE5LDI1Mi45MzM5NjIgMTUyLjUsMjk2LjM2MDgwOSAxNTIuNSwzNTAgQzE1Mi41LDM1My41ODk4NTEgMTU1LjQxMDE0OSwzNTYuNSAxNTksMzU2LjUgTDM0NCwzNTYuNSBDMzQ3LjU4OTg1MSwzNTYuNSAzNTAuNSwzNTMuNTg5ODUxIDM1MC41LDM1MCBDMzUwLjUsMjk2LjM2MDgwOSAzMDYuMTQ1ODEsMjUyLjkzMzk2MiAyNTEuNSwyNTIuOTMzOTYyIFogTTE2NS41LDM0My41MDAwMDEgQzE2NS41LDMwMy42MDI3MDggMjAzLjk3MzEzMSwyNjUuOTMzOTYyIDI1MS41LDI2NS45MzM5NjIgQzI5OS4wMjY4NjksMjY1LjkzMzk2MiAzMzcuNSwzMDMuNjAyNzA4IDMzNy40OTk5OTcsMzQzLjUwMDAwMSBMMTY1LjUsMzQzLjUwMDAwMSBaIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+PHBhdGggZD0iTTMwNC4yNSwxOTMuMzk2MjI2IEMzMDQuMjUsMTY1LjgwODIwMiAyODEuNDY1NDI0LDE0My41IDI1My40MjcwODMsMTQzLjUgQzIyNS4zODg3NDIsMTQzLjUgMjAyLjYwNDE2NywxNjUuODA4MjAyIDIwMi42MDQxNjcsMTkzLjM5NjIyNiBDMjAyLjYwNDE2NywyMjAuOTg0MjUgMjI1LjM4ODc0MiwyNDMuMjkyNDUzIDI1My40MjcwODMsMjQzLjI5MjQ1MyBDMjgxLjQ2NTQyNCwyNDMuMjkyNDUzIDMwNC4yNSwyMjAuOTg0MjUgMzA0LjI1LDE5My4zOTYyMjYgWiBNMjE1LjYwNDE2NywxOTMuMzk2MjI2IEMyMTUuNjA0MTY3LDE3My4wNTAxMDIgMjMyLjUwNzY4MywxNTYuNSAyNTMuNDI3MDgzLDE1Ni41IEMyNzQuMzQ2NDg0LDE1Ni41IDI5MS4yNSwxNzMuMDUwMTAyIDI5MS4yNSwxOTMuMzk2MjI2IEMyOTEuMjUsMjEzLjc0MjM1MSAyNzQuMzQ2NDg0LDIzMC4yOTI0NTMgMjUzLjQyNzA4MywyMzAuMjkyNDUzIEMyMzIuNTA3NjgzLDIzMC4yOTI0NTMgMjE1LjYwNDE2NywyMTMuNzQyMzUxIDIxNS42MDQxNjcsMTkzLjM5NjIyNiBaIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+PC9nPjwvZz48L3N2Zz4=",
|
||||
component: AccountPage
|
||||
},
|
||||
{
|
||||
id: "security",
|
||||
title: "Security",
|
||||
icon:
|
||||
"data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGQ9Ik00NDUuOCwzNy4zYy0xLjItMC43LTIuNy0wLjgtMy45LTAuMWMtNC4zLDIuMi0xMS42LDMuNC0yMS45LDMuNGMtMzMuNiwwLTkwLjgtMTIuNC0xMjguNy0yMC41Yy0xNC0zLTI2LjEtNS42LTM0LjEtNyAgIGMtMC40LTAuMS0wLjktMC4xLTEuNCwwYy03LjIsMS4yLTE4LjUsMy42LTMxLjcsNi4zQzE4NC4zLDI3LjYsMTI0LjIsNDAsOTAuNiw0MGMtMTEuNiwwLTE3LTEuNS0xOS41LTIuOCAgIGMtMS4yLTAuNi0yLjctMC42LTMuOSwwLjFzLTEuOSwyLTEuOSwzLjRjMCw3My4xLDMuOCwxNjguNCwzMy45LDI1Ny43YzE0LjMsNDIuOCwzMy41LDgwLjcsNTcuMSwxMTIuNyAgIGMyNi42LDM2LDU5LjcsNjUuNyw5OC4zLDg4LjNjMC42LDAuNCwxLjMsMC41LDIsMC41czEuNC0wLjIsMi0wLjVjMzguNi0yMi42LDcxLjYtNTIuMyw5OC4yLTg4LjNjMjMuNi0zMiw0Mi45LTY5LjksNTcuMS0xMTIuNyAgIGMyOS41LTg3LjYsMzMuNy0xNzkuNCwzMy45LTI1Ny43QzQ0Ny43LDM5LjQsNDQ3LDM4LjEsNDQ1LjgsMzcuM3ogTTQwNi4zLDI5NS45Yy0yOS4zLDg4LjEtNzkuNywxNTMuOC0xNDkuOCwxOTUuNCAgIEMxODYuNCw0NDkuNywxMzYsMzg0LDEwNi43LDI5NS45Qzc3LjgsMjEwLDczLjQsMTE4LjEsNzMuMiw0Ni40YzQuNSwxLjEsMTAuMiwxLjYsMTcuMywxLjZjMCwwLDAsMCwwLDAgICBjMzQuNSwwLDk1LjEtMTIuNiwxMzUuMi0yMC45YzEyLjctMi42LDIzLjYtNC45LDMwLjctNi4xYzcuOCwxLjQsMTkuNSwzLjksMzMuMSw2LjhDMzMwLDM2LjYsMzg1LjUsNDguNiw0MjAsNDguNiAgIGM4LjEsMCwxNC43LTAuNywxOS43LTJDNDM5LjMsMTIyLjksNDM0LjcsMjExLjUsNDA2LjMsMjk1Ljl6Ij48L3BhdGg+PHBhdGggZD0iTTI1Ni41LDIxNy44YzQ1LDAsODEuNi0zNi42LDgxLjYtODEuNmMwLTQ1LTM2LjYtODEuNi04MS42LTgxLjZjLTQ1LDAtODEuNiwzNi42LTgxLjYsODEuNiAgIEMxNzQuOSwxODEuMiwyMTEuNSwyMTcuOCwyNTYuNSwyMTcuOHogTTI1Ni41LDYyLjZjNDAuNiwwLDczLjYsMzMsNzMuNiw3My42YzAsNDAuNi0zMyw3My42LTczLjYsNzMuNmMtNDAuNiwwLTczLjYtMzMtNzMuNi03My42ICAgQzE4Mi45LDk1LjYsMjE1LjksNjIuNiwyNTYuNSw2Mi42eiI+PC9wYXRoPjxwYXRoIGQ9Ik0zMDkuMiwyMjguOUgyMDMuOGMtMjYuNSwwLTQ4LDIxLjUtNDgsNDh2NzljMCwyLjIsMS44LDQsNCw0aDE5My40YzIuMiwwLDQtMS44LDQtNHYtNzkgICBDMzU3LjIsMjUwLjQsMzM1LjYsMjI4LjksMzA5LjIsMjI4Ljl6IE0zNDkuMiwzNTEuOUgxNjMuOHYtNzVjMC0yMiwxNy45LTQwLDQwLTQwaDEwNS40YzIyLjEsMCw0MCwxNy45LDQwLDQwTDM0OS4yLDM1MS45ICAgTDM0OS4yLDM1MS45eiI+PC9wYXRoPjwvZz48L3N2Zz4=",
|
||||
component: SecurityPage
|
||||
}
|
||||
];
|
||||
|
||||
function getPage() {
|
||||
let pageid = window.location.hash.slice(1);
|
||||
return pages.find(e => e.id === pageid) || pages[0];
|
||||
}
|
||||
function getPage() {
|
||||
let pageid = window.location.hash.slice(1);
|
||||
return pages.find(e => e.id === pageid) || pages[0];
|
||||
}
|
||||
|
||||
let page = getPage();
|
||||
window.addEventListener("hashchange", () => {
|
||||
let page = getPage();
|
||||
window.addEventListener("hashchange", () => {
|
||||
page = getPage();
|
||||
});
|
||||
// $: title = pages.find(e => e.id === page).title;
|
||||
|
||||
const mq = window.matchMedia("(min-width: 45rem)");
|
||||
let sidebar_button = !mq.matches;
|
||||
mq.addEventListener("change", ev => {
|
||||
sidebar_button = !ev.matches;
|
||||
});
|
||||
|
||||
let sidebar_active = false;
|
||||
|
||||
function setPage(pageid) {
|
||||
let pg = pages.find(e => e.id === pageid);
|
||||
if (!pg) {
|
||||
throw new Error("Invalid Page " + pageid);
|
||||
} else {
|
||||
let url = new URL(window.location.href);
|
||||
url.hash = pg.id;
|
||||
window.history.pushState({}, pg.title, url);
|
||||
page = getPage();
|
||||
})
|
||||
// $: title = pages.find(e => e.id === page).title;
|
||||
}
|
||||
|
||||
sidebar_active = false;
|
||||
}
|
||||
|
||||
const mq = window.matchMedia("(min-width: 45rem)");
|
||||
let sidebar_button = !mq.matches;
|
||||
mq.addEventListener("change", (ev) => {
|
||||
sidebar_button = !ev.matches;
|
||||
})
|
||||
let loading = true;
|
||||
|
||||
let sidebar_active = false;
|
||||
|
||||
|
||||
|
||||
function setPage(pageid) {
|
||||
let pg = pages.find(e => e.id === pageid)
|
||||
if (!pg) {
|
||||
throw new Error("Invalid Page " + pageid);
|
||||
} else {
|
||||
let url = new URL(window.location.href);
|
||||
url.hash = pg.id;
|
||||
window.history.pushState({}, pg.title, url);
|
||||
page = getPage();
|
||||
}
|
||||
|
||||
sidebar_active = false;
|
||||
}
|
||||
|
||||
|
||||
let loading = true;
|
||||
|
||||
import NavigationBar from "./NavigationBar.svelte";
|
||||
import NavigationBar from "./NavigationBar.svelte";
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.loading {
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
filter: blur(10px);
|
||||
}
|
||||
|
||||
:root {
|
||||
--sidebar-width: 250px;
|
||||
}
|
||||
|
||||
.root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
grid-template-columns: auto 100%;
|
||||
grid-template-rows: 60px auto 60px;
|
||||
grid-template-areas:
|
||||
"sidebar header"
|
||||
"sidebar mc"
|
||||
"sidebar footer";
|
||||
}
|
||||
|
||||
.header {
|
||||
grid-area: header;
|
||||
background-color: var(--primary);
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header > h1 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
color: white;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.header > button {
|
||||
height: 36px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.header > button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.151);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
grid-area: sidebar;
|
||||
transition: width 0.2s;
|
||||
background-color: lightgrey;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidebar-visible {
|
||||
width: var(--sidebar-width);
|
||||
transition: width 0.2s;
|
||||
box-shadow: 10px 0px 10px 2px rgba(0, 0, 0, 0.52);
|
||||
}
|
||||
|
||||
.content {
|
||||
grid-area: mc;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
grid-area: footer;
|
||||
}
|
||||
|
||||
@media (min-width: 45rem) {
|
||||
.container {
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: var(--sidebar-width);
|
||||
transition: all 0.2s;
|
||||
box-shadow: 10px 0px 10px 2px rgba(0, 0, 0, 0.52);
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.loader_container {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class:loading class="root">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
{#if sidebar_button}
|
||||
<button on:click={()=>sidebar_active = !sidebar_active}>
|
||||
<svg id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/></svg>
|
||||
</button>
|
||||
{/if}
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
{#if sidebar_button}
|
||||
<button on:click={() => (sidebar_active = !sidebar_active)}>
|
||||
<svg
|
||||
id="Layer_1"
|
||||
style="enable-background:new 0 0 32 32;"
|
||||
version="1.1"
|
||||
viewBox="0 0 32 32"
|
||||
width="32px"
|
||||
xml:space="preserve"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<path
|
||||
d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z
|
||||
M28,14H4c-1.104,0-2,0.896-2,2
|
||||
s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z
|
||||
M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2
|
||||
S29.104,22,28,22z" />
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
<h1>{page.title}</h1>
|
||||
</div>
|
||||
<div class="sidebar" class:sidebar-visible={sidebar_active}>
|
||||
<NavigationBar open={setPage} pages={pages} />
|
||||
</div>
|
||||
<div class="content">
|
||||
<svelte:component this={page.component} bind:loading />
|
||||
</div>
|
||||
<div class="footer"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar" class:sidebar-visible={sidebar_active}>
|
||||
<NavigationBar open={setPage} {pages} active={page} />
|
||||
</div>
|
||||
<div class="content">
|
||||
<svelte:component this={page.component} bind:loading />
|
||||
</div>
|
||||
<div class="footer" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<div class="loader_container">
|
||||
<div class="loader_box">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="loader_container">
|
||||
<div class="loader_box">
|
||||
<div class="loader" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.loading {
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
filter: blur(10px);
|
||||
}
|
||||
|
||||
:root {
|
||||
--sidebar-width: 250px;
|
||||
}
|
||||
|
||||
.root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
grid-template-columns: auto 100%;
|
||||
grid-template-rows: 60px auto 60px;
|
||||
grid-template-areas:
|
||||
"sidebar header"
|
||||
"sidebar mc"
|
||||
"sidebar footer"
|
||||
}
|
||||
|
||||
.header {
|
||||
grid-area: header;
|
||||
background-color: var(--primary);
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header > h1 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
color: white;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.header>button {
|
||||
height: 36px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.header>button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.151)
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
grid-area: sidebar;
|
||||
transition: width .2s;
|
||||
background-color: lightgrey;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidebar-visible {
|
||||
width: var(--sidebar-width);
|
||||
transition: width .2s;
|
||||
box-shadow: 10px 0px 10px 2px rgba(0, 0, 0, 0.52);
|
||||
}
|
||||
|
||||
.content {
|
||||
grid-area: mc;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
grid-area: footer;
|
||||
}
|
||||
|
||||
@media (min-width: 45rem) {
|
||||
.container {
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: var(--sidebar-width);
|
||||
transition: all .2s;
|
||||
box-shadow: 10px 0px 10px 2px rgba(0, 0, 0, 0.52);
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.loader_container {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<script>
|
||||
export let open;
|
||||
export let active;
|
||||
export let pages = [];
|
||||
</script>
|
||||
|
||||
|
|
@ -17,6 +18,10 @@
|
|||
/* justify-content: center; */
|
||||
}
|
||||
|
||||
.active {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.icon {
|
||||
/* float: left; */
|
||||
width: calc(var(--rel-size) * 3);
|
||||
|
|
@ -36,9 +41,11 @@
|
|||
</style>
|
||||
|
||||
{#each pages as page}
|
||||
<div class="container" on:click={() => open(page.id)}>
|
||||
<div
|
||||
class={'container' + (page === active ? ' active' : '')}
|
||||
on:click={() => open(page.id)}>
|
||||
<div class="icon">
|
||||
<img src={page.icon} />
|
||||
<img alt={page.title} src={page.icon} />
|
||||
</div>
|
||||
<h3 class="title">{page.title}</h3>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@
|
|||
import request from "../../request.ts";
|
||||
|
||||
export let loading = false;
|
||||
let error = undefined;
|
||||
let account_error = undefined;
|
||||
let contact_error = undefined;
|
||||
|
||||
const genderMap = new Map();
|
||||
genderMap.set(0, "None");
|
||||
|
|
@ -36,6 +37,7 @@
|
|||
{},
|
||||
"GET",
|
||||
undefined,
|
||||
true,
|
||||
true
|
||||
);
|
||||
|
||||
|
|
@ -47,14 +49,32 @@
|
|||
: undefined;
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
error = err.message;
|
||||
account_error = err.message;
|
||||
}
|
||||
}
|
||||
|
||||
let email = ["mail@fabianstamm.de", "fabian.stamm.koe@gmail.com"];
|
||||
let phone = ["+1 1233 123123123", "+21 1233 123 123 1"];
|
||||
let email = [];
|
||||
let phone = [];
|
||||
|
||||
async function loadContact() {}
|
||||
async function loadContact() {
|
||||
try {
|
||||
let { contact } = await request(
|
||||
"/api/user/contact",
|
||||
{},
|
||||
"GET",
|
||||
undefined,
|
||||
true,
|
||||
true
|
||||
);
|
||||
|
||||
email = contact.mails.map(e => e.mail);
|
||||
phone = contact.phones.map(e => e.phone);
|
||||
contact_error = undefined;
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
contact_error = err.message;
|
||||
}
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading = true;
|
||||
|
|
@ -128,8 +148,8 @@
|
|||
|
||||
<Box>
|
||||
<h1>Profile</h1>
|
||||
{#if error}
|
||||
<p class="error">{error}</p>
|
||||
{#if account_error}
|
||||
<p class="error">{account_error}</p>
|
||||
{/if}
|
||||
<BoxItem name="Name" value={name}>
|
||||
<div class="input-container">
|
||||
|
|
@ -160,6 +180,9 @@
|
|||
|
||||
<Box>
|
||||
<h1>Contact</h1>
|
||||
<BoxItem name="E-Mail" value={email} />
|
||||
<BoxItem name="Phone" value={phone} />
|
||||
{#if contact_error}
|
||||
<p class="error">{contact_error}</p>
|
||||
{/if}
|
||||
<BoxItem name="E-Mail" value={email} noOpen={true} />
|
||||
<BoxItem name="Phone" value={phone} noOpen={true} />
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -1,97 +1,94 @@
|
|||
<script>
|
||||
import {
|
||||
slide
|
||||
} from 'svelte/transition';
|
||||
import NextIcon from "./NextIcon.svelte"
|
||||
export let name = "";
|
||||
export let value = "";
|
||||
export let open = false;
|
||||
export let highlight = false;
|
||||
import { slide } from "svelte/transition";
|
||||
import NextIcon from "./NextIcon.svelte";
|
||||
export let name = "";
|
||||
export let value = "";
|
||||
export let noOpen = false;
|
||||
export let open = false;
|
||||
export let highlight = false;
|
||||
|
||||
function toggleOpen(ev) {
|
||||
|
||||
}
|
||||
function toggleOpen(ev) {}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.root:hover {
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.root:hover {
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.values {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: calc(100% - var(--default-font-size) - 16px);
|
||||
}
|
||||
|
||||
.values > div:first-child {
|
||||
transform-origin: left;
|
||||
transform: scale(0.95);
|
||||
margin-right: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.values > div:nth-child(2) {
|
||||
color: black;
|
||||
}
|
||||
|
||||
:global(svg) {
|
||||
margin: auto 8px auto 8px;
|
||||
height: var(--default-font-size);
|
||||
min-width: var(--default-font-size);
|
||||
}
|
||||
|
||||
.body {
|
||||
box-sizing: border-box;
|
||||
padding: 0.1px;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 45rem) {
|
||||
.values {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.values {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: calc(100% - var(--default-font-size) - 16px);
|
||||
}
|
||||
.values > div:first-child {
|
||||
transform: unset;
|
||||
flex-basis: 120px;
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.values>div:first-child {
|
||||
transform-origin: left;
|
||||
transform: scale(0.95);
|
||||
margin-right: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.values>div:nth-child(2) {
|
||||
color: black;
|
||||
}
|
||||
|
||||
:global(svg) {
|
||||
margin: auto 8px auto 8px;
|
||||
height: var(--default-font-size);
|
||||
min-width: var(--default-font-size);
|
||||
}
|
||||
|
||||
.body {
|
||||
box-sizing: border-box;
|
||||
padding: .1px;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 45rem) {
|
||||
.values {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.values>div:first-child {
|
||||
transform: unset;
|
||||
flex-basis: 120px;
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight-element {
|
||||
background-color: #7bff003b;
|
||||
}
|
||||
.highlight-element {
|
||||
background-color: #7bff003b;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="root" class:highlight-element={highlight}>
|
||||
<div class="container" on:click={()=>open=!open}>
|
||||
<div class="values">
|
||||
<div>{name}</div>
|
||||
<div>
|
||||
{#if Array.isArray(value)}
|
||||
{#each value as v, i}
|
||||
{v}
|
||||
{#if i < value.length - 1}
|
||||
<br/>
|
||||
{/if}
|
||||
{/each}
|
||||
{:else}
|
||||
{value}
|
||||
<div class="container" on:click={() => (open = !open)}>
|
||||
<div class="values">
|
||||
<div>{name}</div>
|
||||
<div>
|
||||
{#if Array.isArray(value)}
|
||||
{#each value as v, i}
|
||||
{v}
|
||||
{#if i < value.length - 1}
|
||||
<br />
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
{:else}{value}{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if !noOpen}
|
||||
<NextIcon rotation={open ? -90 : 90} />
|
||||
</div>
|
||||
{#if open}
|
||||
<div class="body" transition:slide>
|
||||
<slot></slot>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if open && !noOpen}
|
||||
<div class="body" transition:slide>
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
undefined,
|
||||
"DELETE",
|
||||
undefined,
|
||||
true,
|
||||
true
|
||||
);
|
||||
loadTwoFactor();
|
||||
|
|
@ -33,6 +34,7 @@
|
|||
undefined,
|
||||
undefined,
|
||||
undefined,
|
||||
true,
|
||||
true
|
||||
);
|
||||
twofactor = res.methods;
|
||||
|
|
@ -46,6 +48,7 @@
|
|||
undefined,
|
||||
"DELETE",
|
||||
undefined,
|
||||
true,
|
||||
true
|
||||
);
|
||||
loadToken();
|
||||
|
|
@ -58,6 +61,7 @@
|
|||
undefined,
|
||||
undefined,
|
||||
undefined,
|
||||
true,
|
||||
true
|
||||
);
|
||||
token = res.token;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
:root {
|
||||
--primary: #1E88E5;
|
||||
--primary: #1e88e5;
|
||||
--mdc-theme-primary: var(--primary);
|
||||
--mdc-theme-primary-bg: var(--mdc-theme--primary);
|
||||
--mdc-theme-on-primary: white;
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
}
|
||||
|
||||
* {
|
||||
font-family: 'Roboto', 'Helvetica', sans-serif;
|
||||
font-family: "Roboto", "Helvetica", sans-serif;
|
||||
}
|
||||
|
||||
html,
|
||||
|
|
@ -29,7 +29,7 @@ body {
|
|||
min-height: 45px;
|
||||
}
|
||||
|
||||
.floating>input {
|
||||
.floating > input {
|
||||
font-size: 1.2rem;
|
||||
padding: 10px 10px 10px 5px;
|
||||
appearance: none;
|
||||
|
|
@ -46,13 +46,13 @@ body {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.floating>input:focus {
|
||||
.floating > input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Label */
|
||||
|
||||
.floating>label {
|
||||
.floating > label {
|
||||
color: #999;
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
|
|
@ -65,10 +65,10 @@ body {
|
|||
|
||||
/* active */
|
||||
|
||||
.floating>input:focus~label,
|
||||
.floating>input.used~label {
|
||||
top: -.75em;
|
||||
transform: scale(.75);
|
||||
.floating > input:focus ~ label,
|
||||
.floating > input.used ~ label {
|
||||
top: -0.75em;
|
||||
transform: scale(0.75);
|
||||
left: -2px;
|
||||
/* font-size: 14px; */
|
||||
color: var(--primary);
|
||||
|
|
@ -85,7 +85,7 @@ body {
|
|||
|
||||
.bar:before,
|
||||
.bar:after {
|
||||
content: '';
|
||||
content: "";
|
||||
height: 2px;
|
||||
width: 0;
|
||||
bottom: 1px;
|
||||
|
|
@ -104,8 +104,8 @@ body {
|
|||
|
||||
/* active */
|
||||
|
||||
.floating>input:focus~.bar:before,
|
||||
.floating>input:focus~.bar:after {
|
||||
.floating > input:focus ~ .bar:before,
|
||||
.floating > input:focus ~ .bar:after {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
|
|
@ -123,7 +123,7 @@ body {
|
|||
|
||||
/* active */
|
||||
|
||||
.floating>input:focus~.highlight {
|
||||
.floating > input:focus ~ .highlight {
|
||||
animation: inputHighlighter 0.3s ease;
|
||||
}
|
||||
|
||||
|
|
@ -140,7 +140,6 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.btn {
|
||||
position: relative;
|
||||
|
||||
|
|
@ -153,12 +152,12 @@ body {
|
|||
border-width: 0;
|
||||
outline: none;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
|
||||
|
||||
background-color: #cccccc;
|
||||
color: #ecf0f1;
|
||||
|
||||
transition: background-color .3s;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
height: 48px;
|
||||
|
||||
|
|
@ -172,7 +171,7 @@ body {
|
|||
filter: brightness(90%);
|
||||
}
|
||||
|
||||
.btn>* {
|
||||
.btn > * {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -194,7 +193,7 @@ body {
|
|||
|
||||
border-radius: 100%;
|
||||
|
||||
background-color: rgba(236, 240, 241, .3);
|
||||
background-color: rgba(236, 240, 241, 0.3);
|
||||
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-moz-transform: translate(-50%, -50%);
|
||||
|
|
@ -207,7 +206,7 @@ body {
|
|||
width: 120%;
|
||||
padding-top: 120%;
|
||||
|
||||
transition: width .2s ease-out, padding-top .2s ease-out;
|
||||
transition: width 0.2s ease-out, padding-top 0.2s ease-out;
|
||||
}
|
||||
|
||||
.loader_box {
|
||||
|
|
@ -242,4 +241,8 @@ body {
|
|||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#content {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,12 +2,6 @@
|
|||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"allowSyntheticDefaultImports": true
|
||||
// "noImplicitAny": true,
|
||||
// "removeComments": true,
|
||||
// "preserveConstEnums": true,
|
||||
// "sourceMap": true
|
||||
},
|
||||
"include": [
|
||||
"build.ts"
|
||||
]
|
||||
}
|
||||
"include": ["build.ts"]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue