WIP add tailwindcss
This commit is contained in:
Leon Grünewald
parent
0ab460cd37
commit
a6cfdf1973
15 changed files with 960 additions and 1568 deletions
31
package.json
31
package.json
|
|
@ -10,22 +10,25 @@
|
|||
"tauri": "tauri"
|
||||
},
|
||||
"dependencies": {
|
||||
"@smui/button": "7.0.0-beta.16",
|
||||
"@tauri-apps/api": "^1.5.2",
|
||||
"svelte-material-ui": "7.0.0-beta.16"
|
||||
"@fortawesome/fontawesome-svg-core": "^6.5.1",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.5.1",
|
||||
"@tauri-apps/api": "^1.5.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@smui/slider": "7.0.0-beta.16",
|
||||
"@smui/textfield": "7.0.0-beta.16",
|
||||
"@sveltejs/adapter-auto": "^3.0.0",
|
||||
"@skeletonlabs/skeleton": "^2.9.0",
|
||||
"@skeletonlabs/tw-plugin": "^0.3.1",
|
||||
"@sveltejs/adapter-auto": "^3.1.1",
|
||||
"@sveltejs/adapter-static": "^3.0.1",
|
||||
"@sveltejs/kit": "^2.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"@tauri-apps/cli": "^1.5.8",
|
||||
"sass": "^1.71.0",
|
||||
"svelte": "^4.2.7",
|
||||
"svelte-check": "^3.6.0",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^5.0.3"
|
||||
"@sveltejs/kit": "^2.5.4",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.2",
|
||||
"@tauri-apps/cli": "^1.5.11",
|
||||
"autoprefixer": "^10.4.18",
|
||||
"postcss": "^8.4.35",
|
||||
"postcss-load-config": "^5.0.3",
|
||||
"svelte": "^4.2.12",
|
||||
"svelte-check": "^3.6.7",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5.4.2",
|
||||
"vite": "^5.1.6"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
2241
pnpm-lock.yaml
2241
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
13
postcss.config.cjs
Normal file
13
postcss.config.cjs
Normal 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;
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
},
|
||||
"windows": [
|
||||
{
|
||||
"fullscreen": true,
|
||||
"fullscreen": false,
|
||||
"resizable": true,
|
||||
"title": "esix-client",
|
||||
"width": 800,
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<body data-sveltekit-preload-data="hover" data-themem="skeleton">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
4
src/app.pcss
Normal file
4
src/app.pcss
Normal 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
3
src/lib/components/BackButton.svelte
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<button class="btn" on:click|preventDefault={() => {
|
||||
history.back();
|
||||
}}>Back</button>
|
||||
|
|
@ -3,47 +3,19 @@
|
|||
export let columns = 8;
|
||||
</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}
|
||||
<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">
|
||||
<img src={post.preview.url}
|
||||
loading="lazy"
|
||||
alt={`Post ${post.id}`} />
|
||||
</div>
|
||||
<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>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.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>
|
||||
<style lang="postcss"></style>
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
import ImageGrid from "./ImageGrid.svelte";
|
||||
import BackButton from './BackButton.svelte'
|
||||
import ImageGrid from './ImageGrid.svelte';
|
||||
|
||||
export {
|
||||
BackButton,
|
||||
ImageGrid,
|
||||
}
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
import {writable} from 'svelte/store';
|
||||
|
||||
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) => {
|
||||
window.localStorage.setItem('lastSearch', value);
|
||||
});
|
||||
|
||||
gridColumns.subscribe((value) => {
|
||||
window.localStorage.setItem('gridColumns', value);
|
||||
window.localStorage.setItem('gridColumns', value.toString());
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,12 @@
|
|||
<script>
|
||||
import '../app.pcss';
|
||||
import {initializeStores} from '@skeletonlabs/skeleton';
|
||||
|
||||
initializeStores();
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="min-h-dvh bg-blue-950">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
: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>
|
||||
<style lang="postcss"></style>
|
||||
|
|
@ -2,86 +2,76 @@
|
|||
import { ImageGrid } from '$lib/components';
|
||||
import { onMount } from 'svelte';
|
||||
import { invoke } from '@tauri-apps/api/tauri'
|
||||
import Textfield from '@smui/textfield';
|
||||
import Slider from '@smui/slider';
|
||||
import Button from '@smui/button';
|
||||
import {lastSearch, gridColumns} from '$lib/stores';
|
||||
import { lastSearch, gridColumns } from '$lib/stores';
|
||||
import { AppBar, AppShell, Drawer, RangeSlider, getDrawerStore } from '@skeletonlabs/skeleton';
|
||||
|
||||
const drawerStore = getDrawerStore();
|
||||
|
||||
let data = null;
|
||||
let query = '';
|
||||
let showAside = false;
|
||||
let columns = 8;
|
||||
|
||||
onMount(async () => {
|
||||
query = $lastSearch;
|
||||
columns = $gridColumns;
|
||||
onSearch();
|
||||
});
|
||||
|
||||
function onSearch() {
|
||||
$lastSearch = query;
|
||||
data = invoke('get_posts', { query });
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
</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; }}>
|
||||
{#if showAside}
|
||||
<<
|
||||
{:else}
|
||||
>>
|
||||
{/if}
|
||||
</button>
|
||||
</aside>
|
||||
<main>
|
||||
{#if data}
|
||||
{#await data}
|
||||
<p>Loading...</p>
|
||||
{:then result}
|
||||
<ImageGrid {columns} posts={result} />
|
||||
{:catch err}
|
||||
<p>Error: {err}</p>
|
||||
{/await}
|
||||
{/if}
|
||||
</main>
|
||||
<Drawer class="w-full lg:w-6/12">
|
||||
<div class="bg-gray-400 min-h-dvh">
|
||||
<div class="m-2">
|
||||
<div class="flex flex-row">
|
||||
<label class="label flex-grow">
|
||||
<span class="font-bold">Query</span>
|
||||
<input type="text" bind:value={query} />
|
||||
</label>
|
||||
<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}
|
||||
{#await data}
|
||||
<p>Loading...</p>
|
||||
{:then result}
|
||||
<ImageGrid columns={$gridColumns} posts={result} />
|
||||
{:catch err}
|
||||
<p>Error: {err}</p>
|
||||
{/await}
|
||||
{/if}
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</AppShell>
|
||||
|
||||
<style lang="scss">
|
||||
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>
|
||||
<style lang="postcss"></style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,14 @@
|
|||
<script>
|
||||
import { BackButton } from '$lib/components';
|
||||
export let data;
|
||||
</script>
|
||||
|
||||
<p>{data.postId}</p>
|
||||
<BackButton />
|
||||
<div>
|
||||
<p>{data.postId}</p>
|
||||
<pre>
|
||||
{JSON.stringify(data)}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
<style lang="postcss"></style>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
|
||||
import adapter from '@sveltejs/adapter-static';
|
||||
import adapter from "@sveltejs/adapter-static";
|
||||
|
||||
export default {
|
||||
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
|
||||
// for more information about preprocessors
|
||||
preprocess: vitePreprocess(),
|
||||
preprocess: [vitePreprocess({})],
|
||||
|
||||
kit: {
|
||||
adapter: adapter()
|
||||
}
|
||||
adapter: adapter(),
|
||||
},
|
||||
};
|
||||
|
|
|
|||
28
tailwind.config.cjs
Normal file
28
tailwind.config.cjs
Normal 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']
|
||||
})
|
||||
]
|
||||
}
|
||||
Loading…
Reference in a new issue