andrea/probo-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Migrate to Skeleton 2.0

Browse source
This commit is contained in:
andrea 2023-09-07 09:51:36 +02:00
parent c77100d454
commit c41234bdf9
10 changed files with 110 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
data/quizzes/question_1_10.md
View file

@ -1,6 +0,0 @@
Se in un circuito sono presenti una ddp pari a 20 V e una corrente pari a 2 A
* La resistenza complessiva del circuito è pari a 10 ohm
* La resistenza complessiva del circuito è pari a 1 ohm
* La resistenza complessiva del circuito è pari a 10 A (Ampere)
* La resistenza complessiva del circuito è pari a 5 V

64
frontend/package-lock.json generated
View file

@ -10,12 +10,14 @@
"devDependencies": {
"@floating-ui/dom": "^1.4.2",
"@playwright/test": "^1.28.1",
"@skeletonlabs/skeleton": "^1.8.0",
"@skeletonlabs/skeleton": "^2.0.0",
"@skeletonlabs/tw-plugin": "^0.1.0",
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/adapter-static": "^2.0.2",
"@sveltejs/kit": "^1.5.0",
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/typography": "^0.5.9",
"@types/node": "^20.5.9",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
"autoprefixer": "^10.4.14",
@ -627,22 +629,24 @@
"dev": true
},
"node_modules/@skeletonlabs/skeleton": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/@skeletonlabs/skeleton/-/skeleton-1.8.0.tgz",
"integrity": "sha512-dO4ukU34MGUY1yA1Gln+YUFEEew25AHm6GMpbzCOX8p8b9NmVBWiSuF3me9jnbrV15TGJxmUGzdiRN/70b4KIg==",
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@skeletonlabs/skeleton/-/skeleton-2.0.0.tgz",
"integrity": "sha512-8SaDK3kEUU57cSb/5a984EbINgnOPzShlkwPkduAhqc71SEqhRvx+RlLEpe1174NAYi00oi//LguIAYuVrSfBA==",
"dev": true,
"dependencies": {
"esm-env": "1.0.0",
"svelte": "3.58.0"
"esm-env": "1.0.0"
},
"peerDependencies": {
"svelte": "^3.56.0 || ^4.0.0"
}
},
"node_modules/@skeletonlabs/skeleton/node_modules/svelte": {
"version": "3.58.0",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.58.0.tgz",
"integrity": "sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==",
"node_modules/@skeletonlabs/tw-plugin": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/@skeletonlabs/tw-plugin/-/tw-plugin-0.1.0.tgz",
"integrity": "sha512-ufnm4FS+s/khuho4yJ/uqfW91u2YXnH3E5N541MtX9XjmoimQzYIcxWyTIuX9AM/brIPP6M6l0et3nRx17CRoQ==",
"dev": true,
"engines": {
"node": ">= 8"
"peerDependencies": {
"tailwindcss": ">=3.0.0"
}
},
"node_modules/@sveltejs/adapter-auto": {
@ -791,9 +795,9 @@
"dev": true
},
"node_modules/@types/node": {
"version": "20.3.2",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.2.tgz",
"integrity": "sha512-vOBLVQeCQfIcF/2Y7eKFTqrMnizK5lRNQ7ykML/5RuwVXVWxYkgwS7xbt4B6fKCUPgbSL5FSsjHQpaGQP/dQmw==",
"version": "20.5.9",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.9.tgz",
"integrity": "sha512-PcGNd//40kHAS3sTlzKB9C9XL4K0sTup8nbG5lC14kzEteTNuAFh9u5nA0o5TWnSG2r/JNPRXFVcHJIIeRlmqQ==",
"dev": true
},
"node_modules/@types/pug": {
@ -4337,22 +4341,20 @@
"dev": true
},
"@skeletonlabs/skeleton": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/@skeletonlabs/skeleton/-/skeleton-1.8.0.tgz",
"integrity": "sha512-dO4ukU34MGUY1yA1Gln+YUFEEew25AHm6GMpbzCOX8p8b9NmVBWiSuF3me9jnbrV15TGJxmUGzdiRN/70b4KIg==",
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@skeletonlabs/skeleton/-/skeleton-2.0.0.tgz",
"integrity": "sha512-8SaDK3kEUU57cSb/5a984EbINgnOPzShlkwPkduAhqc71SEqhRvx+RlLEpe1174NAYi00oi//LguIAYuVrSfBA==",
"dev": true,
"requires": {
"esm-env": "1.0.0",
"svelte": "3.58.0"
"esm-env": "1.0.0"
}
},
"dependencies": {
"svelte": {
"version": "3.58.0",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.58.0.tgz",
"integrity": "sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==",
"dev": true
}
}
"@skeletonlabs/tw-plugin": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/@skeletonlabs/tw-plugin/-/tw-plugin-0.1.0.tgz",
"integrity": "sha512-ufnm4FS+s/khuho4yJ/uqfW91u2YXnH3E5N541MtX9XjmoimQzYIcxWyTIuX9AM/brIPP6M6l0et3nRx17CRoQ==",
"dev": true,
"requires": {}
},
"@sveltejs/adapter-auto": {
"version": "2.1.0",
@ -4463,9 +4465,9 @@
"dev": true
},
"@types/node": {
"version": "20.3.2",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.2.tgz",
"integrity": "sha512-vOBLVQeCQfIcF/2Y7eKFTqrMnizK5lRNQ7ykML/5RuwVXVWxYkgwS7xbt4B6fKCUPgbSL5FSsjHQpaGQP/dQmw==",
"version": "20.5.9",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.9.tgz",
"integrity": "sha512-PcGNd//40kHAS3sTlzKB9C9XL4K0sTup8nbG5lC14kzEteTNuAFh9u5nA0o5TWnSG2r/JNPRXFVcHJIIeRlmqQ==",
"dev": true
},
"@types/pug": {

4
frontend/package.json
View file

@ -16,12 +16,14 @@
"devDependencies": {
"@floating-ui/dom": "^1.4.2",
"@playwright/test": "^1.28.1",
"@skeletonlabs/skeleton": "^1.8.0",
"@skeletonlabs/skeleton": "^2.0.0",
"@skeletonlabs/tw-plugin": "^0.1.0",
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/adapter-static": "^2.0.2",
"@sveltejs/kit": "^1.5.0",
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/typography": "^0.5.9",
"@types/node": "^20.5.9",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
"autoprefixer": "^10.4.14",

2
frontend/package.json.md5
View file

@ -1 +1 @@
eea8ec923b0db2baba8a6a71055188e7
f664f5ec1c0767f24447a20e228a8bb5

5
frontend/src/app.postcss
View file

@ -1,3 +1,8 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;
/*place global styles here */
html,
body {

22
frontend/src/lib/components/QuizCard.svelte
View file

@ -4,6 +4,8 @@
import { tick } from 'svelte';
import EditIcon from '$lib/svg/EditIcon.svelte'
import DeleteIcon from '$lib/svg/DeleteIcon.svelte'
import { getModalStore } from '@skeletonlabs/skeleton';
import type { ModalSettings } from '@skeletonlabs/skeleton';
export let quiz:models.Quiz
@ -12,12 +14,16 @@
let content: string;
let textarea: HTMLTextAreaElement;
const modalStore = getModalStore();
async function handleKeyDown(event) {
if (event.key === 'Escape') {
editing = false;
try {
if (content != "") {
const clientQuiz: client.Quiz = await QuizFromMarkdown(content)
await UpdateQuiz(clientQuiz, quiz.id)
}
} catch (error) {
console.log("An error occurred:", error)
}
@ -36,12 +42,28 @@
}
async function handleDelete() {
const modal: ModalSettings = {
type: 'confirm',
// Data
title: 'Please Confirm',
body: 'Are you sure you wish to proceed?',
// TRUE if confirm pressed, FALSE if cancel pressed
response: async (r: boolean) => {
if (r) {
try {
await DeleteQuiz(quiz.id)
content = ""
} catch (error) {
console.log("An error occurred:", error)
}
} else {
}
}
};
modalStore.trigger(modal);
}
function handleBlur() {
editing = false;

11
frontend/src/routes/+layout.svelte
View file

@ -1,18 +1,17 @@
<script lang='ts'>
// The ordering of these imports is critical to your app working properly
import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
import '@skeletonlabs/skeleton/styles/skeleton.css';
// Most of your app wide CSS should be put in this file
import '../app.postcss';
import { AppShell, AppBar, AppRail, AppRailTile, AppRailAnchor } from '@skeletonlabs/skeleton';
import { initializeStores } from '@skeletonlabs/skeleton';
import { Modal } from '@skeletonlabs/skeleton';
let currentTile;
initializeStores();
</script>
<Modal/>
<!-- App Shell -->
<AppShell>
<svelte:fragment slot="header">

3
frontend/src/routes/+page.svelte
View file

@ -22,9 +22,8 @@
})
async function handleKeyDown(event: any) {
if (event.key === 'Escape') {
if (event.key === 'Escape' && creatingNewQuiz) {
creatingNewQuiz = false;
try {
const clientQuiz: client.Quiz = await QuizFromMarkdown(newQuizContent)
await CreateQuiz(clientQuiz)

14
frontend/tailwind.config.cjs
View file

@ -1,14 +0,0 @@
import { join } from 'path'
import forms from '@tailwindcss/forms'
import typography from '@tailwindcss/typography'
import skeleton from '@skeletonlabs/skeleton/tailwind/skeleton.cjs'
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class',
content: ['./src/**/*.{html,js,svelte,ts}', join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')],
theme: {
extend: {},
},
plugins: [forms,typography,...skeleton()],
}

31
frontend/tailwind.config.ts Normal file
View file

@ -0,0 +1,31 @@
import { join } from 'path';
import type { Config } from 'tailwindcss';
// 1. Import the Skeleton plugin
import { skeleton } from '@skeletonlabs/tw-plugin';
const config = {
// 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: [
skeleton({
themes: {
// Register each theme within this array:
preset: ["skeleton", "modern", "crimson"]
}
})
]
} satisfies Config;
export default config;