dhalucario/esix-client
1
0
Fork 0
Code Activity

WIP add tailwindcss

Browse source
This commit is contained in:
Leon Grünewald 2024-03-17 02:46:07 +01:00
parent 0ab460cd37
commit a6cfdf1973
15 changed files with 960 additions and 1568 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
package.json
View file

@ -10,22 +10,25 @@
"tauri": "tauri" "tauri": "tauri"
}, },
"dependencies": { "dependencies": {
"@smui/button": "7.0.0-beta.16", "@fortawesome/fontawesome-svg-core": "^6.5.1",
"@tauri-apps/api": "^1.5.2", "@fortawesome/free-regular-svg-icons": "^6.5.1",
"svelte-material-ui": "7.0.0-beta.16" "@tauri-apps/api": "^1.5.3"
}, },
"devDependencies": { "devDependencies": {
"@smui/slider": "7.0.0-beta.16", "@skeletonlabs/skeleton": "^2.9.0",
"@smui/textfield": "7.0.0-beta.16", "@skeletonlabs/tw-plugin": "^0.3.1",
"@sveltejs/adapter-auto": "^3.0.0", "@sveltejs/adapter-auto": "^3.1.1",
"@sveltejs/adapter-static": "^3.0.1", "@sveltejs/adapter-static": "^3.0.1",
"@sveltejs/kit": "^2.0.0", "@sveltejs/kit": "^2.5.4",
"@sveltejs/vite-plugin-svelte": "^3.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.2",
"@tauri-apps/cli": "^1.5.8", "@tauri-apps/cli": "^1.5.11",
"sass": "^1.71.0", "autoprefixer": "^10.4.18",
"svelte": "^4.2.7", "postcss": "^8.4.35",
"svelte-check": "^3.6.0", "postcss-load-config": "^5.0.3",
"typescript": "^5.0.0", "svelte": "^4.2.12",
"vite": "^5.0.3" "svelte-check": "^3.6.7",
"tailwindcss": "^3.4.1",
"typescript": "^5.4.2",
"vite": "^5.1.6"
} }
} }

2241
pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff

13
postcss.config.cjs Normal file
View file

@ -0,0 +1,13 @@
const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");
const config = {
plugins: [
//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
tailwindcss(),
//But others, like autoprefixer, need to run after,
autoprefixer,
],
};
module.exports = config;

2
src-tauri/tauri.conf.json
View file

@ -34,7 +34,7 @@
}, },
"windows": [ "windows": [
{ {
"fullscreen": true, "fullscreen": false,
"resizable": true, "resizable": true,
"title": "esix-client", "title": "esix-client",
"width": 800, "width": 800,

2
src/app.html
View file

@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover" data-themem="skeleton">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

4
src/app.pcss Normal file
View file

@ -0,0 +1,4 @@
/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@tailwind utilities;

3
src/lib/components/BackButton.svelte Normal file
View file

@ -0,0 +1,3 @@
<button class="btn" on:click|preventDefault={() => {
history.back();
}}>Back</button>

36
src/lib/components/ImageGrid.svelte
View file

@ -3,47 +3,19 @@
export let columns = 8; export let columns = 8;
</script> </script>
<div class="image-grid" style:grid-template-columns={`repeat(${columns}, 1fr)`}> <div class="grid gap-3" style={`grid-template-columns: repeat(${columns}, minmax(0, 1fr))`}>
{#each posts as post} {#each posts as post}
<a href={`/posts/${post.id}`} class="post"> <a href={`/posts/${post.id}`} class="flex flex-col place-items-center place-content-end border-2 underline hover:no-underline border-blue-200">
<div class="post-main"> <div class="post-main">
<img src={post.preview.url} <img src={post.preview.url}
loading="lazy" loading="lazy"
alt={`Post ${post.id}`} /> alt={`Post ${post.id}`} />
</div> </div>
<div class="post-meta"> <div class="post-meta">
<p>{post.id} {post.file.ext} {post.rating}</p> <p class="text-blue-200">{post.id} {post.file.ext} {post.rating}</p>
</div> </div>
</a> </a>
{/each} {/each}
</div> </div>
<style lang="scss"> <style lang="postcss"></style>
.image-grid {
width: 100%;
display: grid;
gap: 1rem;
}
.post-main {
display: flex;
justify-content: center;
}
.post {
border: 1px solid white;
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
img {
width: 100%;
margin: 0 auto;
object-fit: contain;
}
p {
text-align: center;
}
}
</style>

4
src/lib/components/index.js
View file

@ -1,5 +1,7 @@
import ImageGrid from "./ImageGrid.svelte"; import BackButton from './BackButton.svelte'
import ImageGrid from './ImageGrid.svelte';
export { export {
BackButton,
ImageGrid, ImageGrid,
} }

4
src/lib/stores.js
View file

@ -1,13 +1,13 @@
import {writable} from 'svelte/store'; import {writable} from 'svelte/store';
export const lastSearch = writable(window.localStorage.getItem('lastSearch') ?? ''); export const lastSearch = writable(window.localStorage.getItem('lastSearch') ?? '');
export const gridColumns = writable(window.localStorage.getItem('gridColumns') ?? 8); export const gridColumns = writable(Number(window.localStorage.getItem('gridColumns')) ?? 8);
lastSearch.subscribe((value) => { lastSearch.subscribe((value) => {
window.localStorage.setItem('lastSearch', value); window.localStorage.setItem('lastSearch', value);
}); });
gridColumns.subscribe((value) => { gridColumns.subscribe((value) => {
window.localStorage.setItem('gridColumns', value); window.localStorage.setItem('gridColumns', value.toString());
}); });

20
src/routes/+layout.svelte
View file

@ -1,22 +1,12 @@
<script> <script>
import '../app.pcss';
import {initializeStores} from '@skeletonlabs/skeleton';
initializeStores();
</script> </script>
<div class="container"> <div class="min-h-dvh bg-blue-950">
<slot /> <slot />
</div> </div>
<style lang="scss"> <style lang="postcss"></style>
:global(:root) {
--background-color: rgb(1, 46, 86);
--text-color: white;
}
:global(body) {
background-color: var(--background-color);
}
:global(p, a, h1, h2, h3, h4, h5, h6, input, label) {
color: var(--text-color);
}
</style>

104
src/routes/+page.svelte
View file

@ -2,86 +2,76 @@
import { ImageGrid } from '$lib/components'; import { ImageGrid } from '$lib/components';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { invoke } from '@tauri-apps/api/tauri' import { invoke } from '@tauri-apps/api/tauri'
import Textfield from '@smui/textfield'; import { lastSearch, gridColumns } from '$lib/stores';
import Slider from '@smui/slider'; import { AppBar, AppShell, Drawer, RangeSlider, getDrawerStore } from '@skeletonlabs/skeleton';
import Button from '@smui/button';
import {lastSearch, gridColumns} from '$lib/stores'; const drawerStore = getDrawerStore();
let data = null; let data = null;
let query = ''; let query = '';
let showAside = false;
let columns = 8;
onMount(async () => { onMount(async () => {
query = $lastSearch; query = $lastSearch;
columns = $gridColumns;
onSearch(); onSearch();
}); });
function onSearch() { function onSearch() {
$lastSearch = query; $lastSearch = query;
data = invoke('get_posts', { query }); data = invoke('get_posts', { query });
console.log(data)
} }
</script> </script>
<aside class:show={showAside}>
<Textfield bind:value={query} label="Query" />
<Button on:click={() => {onSearch()}}>Search</Button>
<Slider tickMarks={true} discrete={true} min="1" max="12" bind:value={columns} />
<button id="asideToggle" on:click={() => { showAside = !showAside; }}> <Drawer class="w-full lg:w-6/12">
{#if showAside} <div class="bg-gray-400 min-h-dvh">
&lt;&lt; <div class="m-2">
{:else} <div class="flex flex-row">
&gt;&gt; <label class="label flex-grow">
{/if} <span class="font-bold">Query</span>
</button> <input type="text" bind:value={query} />
</aside> </label>
<main> <button class="btn variant-filled flex-grow" type="button" on:click={() => {onSearch()}}>Search</button>
</div>
<RangeSlider name="grid-columns" min={1} max={12} bind:value={$gridColumns}>
<div class="flex justify-between items-center">
<div class="font-bold">Grid Columns</div>
<div class="text-xs">{$gridColumns} / {12}</div>
</div>
</RangeSlider>
<label class="label">
<span class="font-bold">Preview type</span>
<select class="select">
<option value="preview">Preview</option>
<option value="sample">Sample</option>
<option value="file">File</option>
</select>
</label>
</div>
</div>
</Drawer>
<AppShell>
<svelte:fragment slot="header">
<AppBar>
<button class="btn variant" on:click|preventDefault={() => {
drawerStore.open();
}}>|||</button>
eSix Client
</AppBar>
</svelte:fragment>
<svelte:fragment>
<div class="m-2">
{#if data} {#if data}
{#await data} {#await data}
<p>Loading...</p> <p>Loading...</p>
{:then result} {:then result}
<ImageGrid {columns} posts={result} /> <ImageGrid columns={$gridColumns} posts={result} />
{:catch err} {:catch err}
<p>Error: {err}</p> <p>Error: {err}</p>
{/await} {/await}
{/if} {/if}
</main> </div>
</svelte:fragment>
</AppShell>
<style lang="scss"> <style lang="postcss"></style>
aside, main {
padding: 1rem;
}
aside {
position: fixed;
top: 0;
left: 0;
height: 100vh;
transform: translateX(-100%);
transition: transform 0.35s ease-in-out;
background-color: var(--background-color);
&.show {
transform: translateX(0);
}
}
main {
padding: 1rem;
overflow: scroll;
}
#asideToggle {
position: absolute;
top: 1rem;
right: 0;
transform: translateX(120%);
}
</style>

12
src/routes/posts/[post_id]/+page.svelte
View file

@ -1,8 +1,14 @@
<script> <script>
import { BackButton } from '$lib/components';
export let data; export let data;
</script> </script>
<p>{data.postId}</p> <BackButton />
<div>
<p>{data.postId}</p>
<pre>
{JSON.stringify(data)}
</pre>
</div>
<style lang="scss"> <style lang="postcss"></style>
</style>

8
svelte.config.js
View file

@ -1,12 +1,12 @@
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"; import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
import adapter from '@sveltejs/adapter-static'; import adapter from "@sveltejs/adapter-static";
export default { export default {
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
// for more information about preprocessors // for more information about preprocessors
preprocess: vitePreprocess(), preprocess: [vitePreprocess({})],
kit: { kit: {
adapter: adapter() adapter: adapter(),
} },
}; };

28
tailwind.config.cjs Normal file
View file

@ -0,0 +1,28 @@
// @ts-check
import { join } from 'path';
// 1. Import the Skeleton plugin
import { skeleton } from '@skeletonlabs/tw-plugin';
/** @type {import('tailwindcss').Config} */
export default {
// 2. Opt for dark mode to be handled via the class method
darkMode: 'class',
content: [
'./src/**/*.{html,js,svelte,ts}',
// 3. Append the path to the Skeleton package
join(require.resolve(
'@skeletonlabs/skeleton'),
'../**/*.{html,js,svelte,ts}'
)
],
theme: {
extend: {},
},
plugins: [
// 4. Append the Skeleton plugin (after other plugins)
skeleton({
themes: ['skeleton']
})
]
}