move back button to sidebar

This commit is contained in:
b1ek 2023-08-26 11:49:10 +10:00
parent 32b285c9fe
commit 29cf83a578
Signed by: blek
GPG Key ID: 14546221E3595D0C
4 changed files with 19 additions and 17 deletions

View File

@ -2,9 +2,6 @@
import style from './style.module.scss';
import Jumper from 'svelte-loading-spinners/Jumper.svelte';
import Icon from 'svelte-icons-pack/Icon.svelte';
import VscArrowLeft from "svelte-icons-pack/vsc/VscArrowLeft";
import { invoke } from '@tauri-apps/api/tauri';
import { back } from '../../store/RouteStore';
@ -39,12 +36,6 @@
<div class={style.root}>
<p style='margin:8px'>
<button aria-label="back" class={style.backbtn} on:click={(_) => { back() }}>
<Icon src={VscArrowLeft} color='#b2b2b2' size='17px' />
</button>
</p>
<h1 style='text-align:center;margin-top:40px'>
Homeservers
</h1>
@ -89,11 +80,6 @@
</td>
</tr>
{#each list as server}
<script>
if (!server.open) {
continue
}
</script>
<tr>
<td class={style.server}>
<h1>{server.name}</h1>

View File

@ -40,7 +40,8 @@ export function route(path) {
export function back() {
const history: string[] = store.getState().history;
console.log(history[history.length - 2]);
if (history[history.length - 2] == '/load') return
store.dispatch({ type: 'setPath', path: history[history.length - 2] });
store.dispatch({ type: 'popHistory' });
}

View File

@ -3,11 +3,17 @@
import Icon from 'svelte-icons-pack/Icon.svelte';
import VscHome from 'svelte-icons-pack/vsc/VscHome';
import VscArrowLeft from "svelte-icons-pack/vsc/VscArrowLeft";
import BsGearFill from 'svelte-icons-pack/bs/BsGearFill';
import { route } from '../../store/RouteStore';
import { route, back } from '../../store/RouteStore';
</script>
<div class={style.sidebar}>
<button aria-label="back" class={style.button + ' ' + style.back} on:click={(_) => { back() }}>
<Icon src={VscArrowLeft} color='#b2b2b2' size='17px' />
</button>
<button class={style.button} on:click={() => {route('/')}}>
<Icon src={VscHome} />
</button>

View File

@ -22,6 +22,7 @@
width: calc(var(--sidebar-width) - (var(--sidebar-button-margin) * 2));
height: calc(var(--sidebar-width) - (var(--sidebar-button-margin) * 2));
margin: var(--sidebar-button-margin);
margin-bottom: 0;
border: 3px solid #272222;
&:hover {
@ -42,8 +43,16 @@
width: var(--sidebar-button-icon-size);
}
}
.back {
height: fit-content !important;
border-width: 1px;
padding: calc(var(--sidebar-button-margin) / 2);
svg {
transform: translate(0, 1px);
}
}
.bottom {
position: absolute;
bottom: 0;
bottom: var(--sidebar-button-margin);
}
}