eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Run pnpm format

Browse Source
This commit is contained in:
venashial
2022-08-03 00:24:44 -07:00
parent e17eb02341
commit 13c417fcee
21 changed files with 579 additions and 565 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
theseus_gui/src/layout/StatusBar.svelte
View File

@@ -1,71 +1,69 @@
<script lang="ts">
import IconChevronLeft from 'virtual:icons/lucide/chevron-left';
import IconChevronRight from 'virtual:icons/lucide/chevron-right';
import IconCaretRight from 'virtual:icons/carbon/caret-right';
import { page } from '$app/stores'
import IconChevronLeft from 'virtual:icons/lucide/chevron-left';
import IconChevronRight from 'virtual:icons/lucide/chevron-right';
import IconCaretRight from 'virtual:icons/carbon/caret-right';
import { page } from '$app/stores';
let path: string[];
$: path = $page.url.pathname
.substring(1)
.split('/')
let path: string[];
$: path = $page.url.pathname.substring(1).split('/');
</script>
<div class="status-bar">
<div class="page-nav">
<button title="Back" on:click={() => window.history.back()}>
<IconChevronLeft />
</button>
<button title="Forward" on:click={() => window.history.forward()}>
<IconChevronRight />
</button>
</div>
<div class="page-nav">
<button title="Back" on:click={() => window.history.back()}>
<IconChevronLeft />
</button>
<button title="Forward" on:click={() => window.history.forward()}>
<IconChevronRight />
</button>
</div>
<div class="breadcrumbs">
{#each path as crumb, index}
{#if index !== 0}
<IconCaretRight />
{/if}
<a class="breadcrumbs__crumb" href={crumb}>{crumb || 'home'}</a>
{/each}
</div>
<div class="breadcrumbs">
{#each path as crumb, index}
{#if index !== 0}
<IconCaretRight />
{/if}
<a class="breadcrumbs__crumb" href={crumb}>{crumb || 'home'}</a>
{/each}
</div>
<div class="statuses">
<div>Updating 12 mods...</div>
<div>236 mods installed</div>
</div>
<div class="statuses">
<div>Updating 12 mods...</div>
<div>236 mods installed</div>
</div>
</div>
<style lang="postcss">
.status-bar {
display: flex;
padding: 0.75rem;
grid-gap: 0.75rem;
background-color: var(--status-bg);
width: 100%;
height: 100%;
align-items: center;
box-shadow: var(--shadow-raised);
.status-bar {
display: flex;
padding: 0.75rem;
grid-gap: 0.75rem;
background-color: var(--status-bg);
width: 100%;
height: 100%;
align-items: center;
box-shadow: var(--shadow-raised);
}
.breadcrumbs {
display: flex;
grid-gap: 0.25rem;
text-transform: capitalize;
align-items: center;
&__crumb:hover {
text-decoration: underline;
}
.breadcrumbs {
display: flex;
grid-gap: 0.25rem;
text-transform: capitalize;
align-items: center;
&__crumb:hover {
text-decoration: underline;
}
:global(.icon) {
color: var(--color-text-lightest)
}
:global(.icon) {
color: var(--color-text-lightest);
}
}
.statuses {
margin-left: auto;
display: flex;
grid-gap: 1rem;
color: var(--color-text-lightest);
}
.statuses {
margin-left: auto;
display: flex;
grid-gap: 1rem;
color: var(--color-text-lightest);
}
</style>