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

Start search page + Add i18n & generation base

Browse Source
This commit is contained in:
venashial
2022-05-08 13:03:01 -07:00
parent e553f1fdbd
commit b0a55c9b18
16 changed files with 1062 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
theseus_gui/src/layout/Sidebar.svelte
View File

@@ -127,7 +127,7 @@
grid-gap: 8px;
:global(button) {
width: 34px;
width: 32px;
}
}
}

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

@@ -1,71 +1,91 @@
<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 {
.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);
.page-nav {
display: flex;
gap: 2px;
button {
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;
display: flex;
grid-gap: 0.25rem;
text-transform: capitalize;
align-items: center;
overflow-x: auto;
&__crumb:hover {
text-decoration: underline;
}
/* Hide scrollbar */
&::-webkit-scrollbar {
display: none; /* Chrome, Safari and Opera */
}
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
:global(.icon) {
color: var(--color-text-lightest)
}
&__crumb:hover {
text-decoration: underline;
}
:global(.icon) {
color: var(--color-text-lightest);
}
}
.statuses {
margin-left: auto;
display: flex;
grid-gap: 1rem;
color: var(--color-text-lightest);
margin-left: auto;
align-items: flex-end;
justify-content: flex-end;
display: flex;
grid-gap: 1rem;
color: var(--color-text-lightest);
font-size: 13px;
line-height: 1.2;
text-align: right;
}
}
</style>