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

Install omorphia, Start instance settings page (#32)

Browse Source
This commit is contained in:
venashial
2022-04-04 04:59:39 +08:00
committed by GitHub
parent d1070ca213
commit a20f6596ce
20 changed files with 1017 additions and 745 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
theseus_gui/src/components/components/CardRow.svelte → theseus_gui/src/components/CardRow.svelte
View File

2
theseus_gui/src/components/components/Instance.svelte → theseus_gui/src/components/Instance.svelte
View File

@@ -9,7 +9,7 @@
export let image: string;
</script>
<a class="instance" href="/library/instance/{id}"
<a class="instance" href="/library/instance/{id}/settings"
style:background-image="linear-gradient(5deg, hsla(0,0%,0%,0.8) 0%, hsla(0,0%,0%,0) 100%), url('{image}')">
<div class="instance__version">{version}{#if modpack}<IconBadgeCheck />{/if}</div>
<div class="instance__title">{title}</div>

0
theseus_gui/src/components/components/VerticalNav.svelte → theseus_gui/src/components/VerticalNav.svelte
View File

51
theseus_gui/src/components/layout/Page.svelte
View File

@@ -1,51 +0,0 @@
<script lang="ts">
import { Svrollbar } from 'svrollbar'
let viewport: Element
let contents: Element
</script>
<div class="page">
<div bind:this={viewport} class="viewport">
<div bind:this={contents} class="contents">
<slot />
</div>
</div>
<Svrollbar {viewport} {contents} />
</div>
<style>
.page {
position: relative;
width: 100%;
overflow: hidden;
--svrollbar-track-width: 20px;
--svrollbar-track-opacity: 0;
--svrollbar-thumb-width: 8px;
--svrollbar-thumb-background: hsla(216,5%,60%);
--svrollbar-thumb-opacity: 0.9;
}
.viewport {
position: relative;
width: 100%;
height: calc(100vh - 2.5rem);
overflow-y: scroll;
overflow-x: hidden;
/* hide scrollbar */
-ms-overflow-style: none;
scrollbar-width: none;
}
.viewport::-webkit-scrollbar {
/* hide scrollbar */
display: none;
}
:global(.v-thumb) {
margin: 4px auto 4px auto !important;
}
</style>

77
theseus_gui/src/components/layout/Sidebar.svelte
View File

@@ -1,77 +0,0 @@
<script lang="ts">
import VerticalNav from '../components/VerticalNav.svelte'
import IconHome from 'virtual:icons/lucide/home'
import IconSearch from 'virtual:icons/heroicons-outline/search'
import IconLibrary from 'virtual:icons/lucide/library';
import IconSettings from 'virtual:icons/lucide/settings'
import { page } from "$app/stores";
</script>
<div class="sidebar">
<div class="account">
<div class="account__heads">
<img src="https://mc-heads.net/avatar/venashial" alt="Minecraft head"/>
</div>
<a class="account__info" href="/settings/accounts">
<div>venashial</div>
<div class="account__info__manage">Manage accounts</div>
</a>
</div>
<VerticalNav items={[
{
label: 'Home',
href: '',
icon: IconHome,
},
{
label: 'Search',
href: 'search',
icon: IconSearch,
},
{
label: 'Library',
href: 'library',
icon: IconLibrary,
}
]}/>
<a class="nav-item" href="/settings" class:active={$page.url.pathname.startsWith('/settings')}>
<IconSettings />
Settings
</a>
</div>
<style lang="postcss">
.sidebar {
display: flex;
flex-direction: column;
padding: 1rem;
grid-gap: 2rem;
height: 100%;
background-color: var(--sidebar-bg);
.account {
display: flex;
grid-gap: 0.75rem;
&__heads {
img {
width: 2.5rem;
border-radius: var(--rounded-sm);
}
}
&__info {
&__manage {
color: var(--color-text-light)
}
}
}
*:last-child {
margin-top: auto;
}
}
</style>

70
theseus_gui/src/components/layout/StatusBar.svelte
View File

@@ -1,70 +0,0 @@
<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'
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="breadcrumbs">
{#each path as crumb, index}
{#if index !== 0}
<div class="breadcrumbs__separator"><IconCaretRight /></div>
{/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>
<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);
}
.breadcrumbs {
display: flex;
grid-gap: 0.25rem;
text-transform: capitalize;
&__crumb:hover {
text-decoration: underline;
}
&__separator {
color: var(--color-text-lightest)
}
}
.statuses {
margin-left: auto;
display: flex;
grid-gap: 1rem;
color: var(--color-text-lightest);
}
</style>