mirror of
https://github.com/markuryy/shark.git
synced 2025-12-12 19:51:01 +00:00
ui: mockup layout
This commit is contained in:
@@ -1,4 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import { beforeNavigate } from '$app/navigation';
|
||||||
|
|
||||||
const icons = {
|
const icons = {
|
||||||
back: '/icons/leftarrow.png',
|
back: '/icons/leftarrow.png',
|
||||||
forward: '/icons/rightarrow.png',
|
forward: '/icons/rightarrow.png',
|
||||||
@@ -6,13 +8,56 @@
|
|||||||
search: '/icons/internet.png',
|
search: '/icons/internet.png',
|
||||||
globe: '/icons/github.svg'
|
globe: '/icons/github.svg'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
let history: string[] = $state([]);
|
||||||
|
let currentIndex = $state(-1);
|
||||||
|
|
||||||
|
beforeNavigate((navigation) => {
|
||||||
|
if (navigation.to?.url.pathname) {
|
||||||
|
// Remove any forward history when navigating to a new page
|
||||||
|
history = history.slice(0, currentIndex + 1);
|
||||||
|
history.push(navigation.to.url.pathname);
|
||||||
|
currentIndex = history.length - 1;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function goBack() {
|
||||||
|
if (currentIndex > 0) {
|
||||||
|
currentIndex--;
|
||||||
|
window.history.back();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function goForward() {
|
||||||
|
if (currentIndex < history.length - 1) {
|
||||||
|
currentIndex++;
|
||||||
|
window.history.forward();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
if (history.length === 0 && typeof window !== 'undefined') {
|
||||||
|
history = [window.location.pathname];
|
||||||
|
currentIndex = 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="toolbar">
|
<div class="toolbar">
|
||||||
<button class="toolbar-button" disabled title="Back">
|
<button
|
||||||
|
class="toolbar-button"
|
||||||
|
disabled={currentIndex <= 0}
|
||||||
|
title="Back"
|
||||||
|
onclick={goBack}
|
||||||
|
>
|
||||||
<img src={icons.back} alt="Back" />
|
<img src={icons.back} alt="Back" />
|
||||||
</button>
|
</button>
|
||||||
<button class="toolbar-button" disabled title="Forward">
|
<button
|
||||||
|
class="toolbar-button"
|
||||||
|
disabled={currentIndex >= history.length - 1}
|
||||||
|
title="Forward"
|
||||||
|
onclick={goForward}
|
||||||
|
>
|
||||||
<img src={icons.forward} alt="Forward" />
|
<img src={icons.forward} alt="Forward" />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|||||||
@@ -4,7 +4,143 @@
|
|||||||
import ToolBar from "$lib/ToolBar.svelte";
|
import ToolBar from "$lib/ToolBar.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<TitleBar />
|
<div class="app-container">
|
||||||
<MenuBar />
|
<TitleBar />
|
||||||
<ToolBar />
|
<MenuBar />
|
||||||
<slot />
|
<ToolBar />
|
||||||
|
|
||||||
|
<div class="main-layout">
|
||||||
|
<aside class="sidebar sunken-panel">
|
||||||
|
<nav class="sidebar-nav">
|
||||||
|
<a href="/" class="nav-item">
|
||||||
|
<img src="/icons/home-car.png" alt="" class="nav-icon" />
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
<a href="/library" class="nav-item">
|
||||||
|
<img src="/icons/laptop.png" alt="" class="nav-icon" />
|
||||||
|
Library
|
||||||
|
</a>
|
||||||
|
<details class="nav-collapsible">
|
||||||
|
<summary class="nav-item">
|
||||||
|
<img src="/icons/cassette-tape.png" alt="" class="nav-icon" />
|
||||||
|
Playlists
|
||||||
|
</summary>
|
||||||
|
<div class="nav-submenu">
|
||||||
|
<a href="/playlists/favorites" class="nav-item nav-subitem">
|
||||||
|
<img src="/icons/eighthnote-white.svg" alt="" class="nav-icon" />
|
||||||
|
Favorites
|
||||||
|
</a>
|
||||||
|
<a href="/playlists/recently-played" class="nav-item nav-subitem">
|
||||||
|
<img src="/icons/eighthnote-white.svg" alt="" class="nav-icon" />
|
||||||
|
Recently Played
|
||||||
|
</a>
|
||||||
|
<a href="/playlists/workout" class="nav-item nav-subitem">
|
||||||
|
<img src="/icons/eighthnote-white.svg" alt="" class="nav-icon" />
|
||||||
|
Workout Mix
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
<a href="/services" class="nav-item">
|
||||||
|
<img src="/icons/world-star.png" alt="" class="nav-icon" />
|
||||||
|
Services
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="content-area sunken-panel">
|
||||||
|
<slot />
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="status-text">Ready</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.app-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-layout {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 8px 8px 0 8px;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
width: 200px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 2px 4px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: light-dark(#222, #ddd);
|
||||||
|
font-family: "Pixelated MS Sans Serif", Arial;
|
||||||
|
font-size: 11px;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item:hover {
|
||||||
|
background: light-dark(silver, #2b2b2b);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
image-rendering: pixelated;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-collapsible {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-collapsible summary {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-collapsible summary::-webkit-details-marker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-submenu {
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-subitem {
|
||||||
|
padding-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-area {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 8px;
|
||||||
|
font-family: "Pixelated MS Sans Serif", Arial;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-text {
|
||||||
|
padding: 6px 8px 10px 10px;
|
||||||
|
font-family: "Pixelated MS Sans Serif", Arial;
|
||||||
|
font-size: 11px;
|
||||||
|
color: light-dark(#222, #ddd);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,102 +1,19 @@
|
|||||||
<script lang="ts">
|
<div>
|
||||||
import { invoke } from "@tauri-apps/api/core";
|
<h2>Welcome to Shark!</h2>
|
||||||
|
<p>Your music library manager and player.</p>
|
||||||
|
|
||||||
let name = $state("");
|
<section class="quick-stats">
|
||||||
let greetMsg = $state("");
|
<div class="field-row-stacked">
|
||||||
|
</div>
|
||||||
async function greet(event: Event) {
|
</section>
|
||||||
event.preventDefault();
|
</div>
|
||||||
// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
|
|
||||||
greetMsg = await invoke("greet", { name });
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<h1>Welcome to Tauri + Svelte</h1>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<a href="https://vite.dev" target="_blank">
|
|
||||||
<img src="/vite.svg" class="logo vite" alt="Vite Logo" />
|
|
||||||
</a>
|
|
||||||
<a href="https://tauri.app" target="_blank">
|
|
||||||
<img src="/tauri.svg" class="logo tauri" alt="Tauri Logo" />
|
|
||||||
</a>
|
|
||||||
<a href="https://svelte.dev" target="_blank">
|
|
||||||
<img src="/svelte.svg" class="logo svelte-kit" alt="SvelteKit Logo" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<p>Click on the Tauri, Vite, and SvelteKit logos to learn more.</p>
|
|
||||||
|
|
||||||
<fieldset>
|
|
||||||
<legend>Greet</legend>
|
|
||||||
<form class="field-row" onsubmit={greet}>
|
|
||||||
<label for="greet-input">Name:</label>
|
|
||||||
<input id="greet-input" type="text" placeholder="Enter a name..." bind:value={name} />
|
|
||||||
<button type="submit">Greet</button>
|
|
||||||
</form>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
{#if greetMsg}
|
|
||||||
<div class="status-bar">
|
|
||||||
<p class="status-bar-field">{greetMsg}</p>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
main {
|
h2 {
|
||||||
padding: 20px;
|
margin-top: 0;
|
||||||
max-width: 800px;
|
}
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
.quick-stats {
|
||||||
height: 4em;
|
margin-top: 20px;
|
||||||
padding: 1em;
|
}
|
||||||
will-change: filter;
|
|
||||||
transition: 0.75s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo.vite:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #747bff);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo.svelte-kit:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #ff3e00);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo.tauri:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #24c8db);
|
|
||||||
}
|
|
||||||
|
|
||||||
.row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1em;
|
|
||||||
margin: 1em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 2rem;
|
|
||||||
margin: 1em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-row {
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
margin: 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-bar {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user