ulinja/fastapi-svelte-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(frontend): replace SVG icons with components

Browse source
This commit is contained in:
Julian Lobbes 2023-05-22 12:16:41 +02:00
parent 1ad5cd5547
commit bd191cd420
4 changed files with 53 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/README.md Normal file
View file

@ -0,0 +1,10 @@
# Frontend
Sveltekit and TailwindCSS.
## Development
Used libraries:
- [svelte-hero-icons](https://github.com/JustinVoitel/svelte-hero-icons)
- uses icons from [heroicons](https://heroicons.com/)

34
frontend/package-lock.json generated
View file

@ -18,6 +18,7 @@
"sass": "^1.62.1",
"svelte": "^3.54.0",
"svelte-check": "^3.0.1",
"svelte-hero-icons": "^5.0.0",
"svelte-material-ui": "^7.0.0-beta.8",
"tailwindcss": "^3.3.2",
"tslib": "^2.4.1",
@ -1904,6 +1905,12 @@
"svelte2tsx": "^0.6.10"
}
},
"node_modules/@steeze-ui/heroicons": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/@steeze-ui/heroicons/-/heroicons-2.2.2.tgz",
"integrity": "sha512-VUkgSAbjLzsEuF4kDQDESANb/NNxqhkOMnrzD1VhB3tSGr7wVZ5FKS7aM2QZcKXjziwR6dbt7Nhs3fpZhqOi1A==",
"dev": true
},
"node_modules/@sveltejs/adapter-node": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-1.2.4.tgz",
@ -3509,6 +3516,18 @@
"svelte": "^3.55.0"
}
},
"node_modules/svelte-hero-icons": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/svelte-hero-icons/-/svelte-hero-icons-5.0.0.tgz",
"integrity": "sha512-xKMI/Z0f/6831I0R1YKJjVbAw9VBD6XKysvng6LtomlS4n3ZD1lZNAfLrrCmnc1pmiLr/8sVeQA8kgHLQwYlRg==",
"dev": true,
"dependencies": {
"@steeze-ui/heroicons": "^2.2.2"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/svelte-hmr": {
"version": "0.15.1",
"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.1.tgz",
@ -5516,6 +5535,12 @@
"svelte2tsx": "^0.6.10"
}
},
"@steeze-ui/heroicons": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/@steeze-ui/heroicons/-/heroicons-2.2.2.tgz",
"integrity": "sha512-VUkgSAbjLzsEuF4kDQDESANb/NNxqhkOMnrzD1VhB3tSGr7wVZ5FKS7aM2QZcKXjziwR6dbt7Nhs3fpZhqOi1A==",
"dev": true
},
"@sveltejs/adapter-node": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-1.2.4.tgz",
@ -6650,6 +6675,15 @@
"typescript": "^5.0.3"
}
},
"svelte-hero-icons": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/svelte-hero-icons/-/svelte-hero-icons-5.0.0.tgz",
"integrity": "sha512-xKMI/Z0f/6831I0R1YKJjVbAw9VBD6XKysvng6LtomlS4n3ZD1lZNAfLrrCmnc1pmiLr/8sVeQA8kgHLQwYlRg==",
"dev": true,
"requires": {
"@steeze-ui/heroicons": "^2.2.2"
}
},
"svelte-hmr": {
"version": "0.15.1",
"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.1.tgz",

1
frontend/package.json
View file

@ -17,6 +17,7 @@
"sass": "^1.62.1",
"svelte": "^3.54.0",
"svelte-check": "^3.0.1",
"svelte-hero-icons": "^5.0.0",
"svelte-material-ui": "^7.0.0-beta.8",
"tailwindcss": "^3.3.2",
"tslib": "^2.4.1",

21
frontend/src/routes/users/+page.svelte
View file

@ -1,5 +1,9 @@
<script lang='ts'>
import { onMount } from 'svelte';
import {
Icon,
ChevronRight, ChevronLeft, ChevronDoubleRight, ChevronDoubleLeft,
} from 'svelte-hero-icons';
type Item = {
id: number;
@ -200,14 +204,10 @@
</tbody>
</table>
<button on:click={handleGotoFirstPage} disabled={gotoFirstPageDisabled}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
<path fill-rule="evenodd" d="M15.79 14.77a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L11.832 10l3.938 3.71a.75.75 0 01.02 1.06zm-6 0a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L5.832 10l3.938 3.71a.75.75 0 01.02 1.06z" clip-rule="evenodd" />
</svg>
<Icon src={ChevronDoubleLeft} mini class="w-6 h-6" />
</button>
<button on:click={handleGotoPrevPage} disabled={gotoPrevPageDisabled}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
<path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
</svg>
<Icon src={ChevronLeft} mini class="w-6 h-6" />
</button>
<input
type=number bind:value={selectedCurrentPage} min=0 max={lastPage} disabled={lastPage === 0}
@ -215,15 +215,10 @@
>
<span>of {lastPage + 1}</span>
<button on:click={handleGotoNextPage} disabled={gotoNextPageDisabled}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
</svg>
<Icon src={ChevronRight} mini class="w-6 h-6" />
</button>
<button on:click={handleGotoLastPage} disabled={gotoLastPageDisabled}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
<path fill-rule="evenodd" d="M10.21 14.77a.75.75 0 01.02-1.06L14.168 10 10.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M4.21 14.77a.75.75 0 01.02-1.06L8.168 10 4.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
</svg>
<Icon src={ChevronDoubleRight} mini class="w-6 h-6" />
</button>
<select bind:value={selectedItemsPerPage} on:change={handleItemsPerPageChange}>
{#each itemsPerPageOptions as option}