Updates to UI
ci/woodpecker/push/build Pipeline failed
Details
ci/woodpecker/push/build Pipeline failed
Details
This commit is contained in:
parent
be2feb1079
commit
43d10ef705
|
@ -18,8 +18,10 @@
|
||||||
--large-curve: 0.9375rem;
|
--large-curve: 0.9375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
|
@ -2,13 +2,10 @@
|
||||||
import {onMount} from "svelte";
|
import {onMount} from "svelte";
|
||||||
import {getUser} from "~/api/login";
|
import {getUser} from "~/api/login";
|
||||||
import LazyDelay from "~/lib/LazyDelay.svelte";
|
import LazyDelay from "~/lib/LazyDelay.svelte";
|
||||||
|
import type {ProfileData} from "~/stores/login";
|
||||||
|
|
||||||
export let id: "@me" | number;
|
export let id: "@me" | number;
|
||||||
let user: {
|
let user: ProfileData;
|
||||||
email: string;
|
|
||||||
username: string;
|
|
||||||
display_name: string;
|
|
||||||
};
|
|
||||||
let userIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==";
|
let userIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==";
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
|
|
|
@ -0,0 +1,50 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import LazyDelay from "~/lib/LazyDelay.svelte";
|
||||||
|
import {profileStore} from "~/stores/login";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="settings-widget">
|
||||||
|
<div class="settings-content">
|
||||||
|
{#if $profileStore}
|
||||||
|
<div>Honestly I'm just too lazy to make this yet</div>
|
||||||
|
{:else}
|
||||||
|
<LazyDelay delayMs={500}>Loading...</LazyDelay>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import "../../assets/panel.scss";
|
||||||
|
|
||||||
|
.settings-widget {
|
||||||
|
@include panel;
|
||||||
|
|
||||||
|
> .settings-content {
|
||||||
|
background: var(--bg-panel);
|
||||||
|
border-radius: var(--large-curve);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 12px 24px;
|
||||||
|
|
||||||
|
> .icon {
|
||||||
|
margin: 0 auto 12px auto;
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
border-radius: var(--small-curve);
|
||||||
|
}
|
||||||
|
|
||||||
|
> .displayName {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .username {
|
||||||
|
color: #8e8e8e;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .email {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -7,19 +7,34 @@
|
||||||
|
|
||||||
let open = false;
|
let open = false;
|
||||||
|
|
||||||
function handleClick() {
|
|
||||||
open = !open;
|
|
||||||
}
|
|
||||||
|
|
||||||
function logoutAction() {
|
function logoutAction() {
|
||||||
loginStore.set(null);
|
loginStore.set(null);
|
||||||
navigate("/");
|
navigate("/");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function clickOutside(element, callbackFunction) {
|
||||||
|
function onClick(event) {
|
||||||
|
if (!element.contains(event.target)) {
|
||||||
|
callbackFunction();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.addEventListener("click", onClick);
|
||||||
|
|
||||||
|
return {
|
||||||
|
update(newCallbackFunction) {
|
||||||
|
callbackFunction = newCallbackFunction;
|
||||||
|
},
|
||||||
|
destroy() {
|
||||||
|
document.body.removeEventListener("click", onClick);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="dropdown {open ? 'dropdown-open' : ''}">
|
<div class="dropdown {open ? 'dropdown-open' : ''}" use:clickOutside={() => (open = false)}>
|
||||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||||
<div class="dropdown-header" on:click={handleClick}>
|
<div class="dropdown-header" on:click={() => (open = !open)}>
|
||||||
<div class="dropdown-title">
|
<div class="dropdown-title">
|
||||||
{#if profile.icon == "0"}
|
{#if profile.icon == "0"}
|
||||||
<img
|
<img
|
||||||
|
@ -68,6 +83,10 @@
|
||||||
|
|
||||||
&.dropdown-open {
|
&.dropdown-open {
|
||||||
background-color: var(--bg-panel-action);
|
background-color: var(--bg-panel-action);
|
||||||
|
|
||||||
|
-webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
|
||||||
|
-moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
|
||||||
|
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
> .dropdown-header {
|
> .dropdown-header {
|
||||||
|
@ -78,10 +97,6 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--bg-panel);
|
|
||||||
}
|
|
||||||
|
|
||||||
> .dropdown-title {
|
> .dropdown-title {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import Settings from "~/components/settings/Settings.svelte";
|
||||||
import Page from "~/lib/Page.svelte";
|
import Page from "~/lib/Page.svelte";
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Page>
|
<Page>
|
||||||
|
<Settings />
|
||||||
</Page>
|
</Page>
|
||||||
|
|
|
@ -21,6 +21,7 @@ export interface ProfileData {
|
||||||
icon: string;
|
icon: string;
|
||||||
display_name: string;
|
display_name: string;
|
||||||
username: string;
|
username: string;
|
||||||
|
email: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const profileStore = writable<ProfileData>(undefined);
|
export const profileStore = writable<ProfileData>(undefined);
|
||||||
|
|
Reference in New Issue