diff --git a/.gitignore b/.gitignore index 9ffe02b..a07b7ca 100644 --- a/.gitignore +++ b/.gitignore @@ -109,3 +109,6 @@ Temporary Items /api/tests/_* /api/tests/*.suite.yml /api/.env +/ui/static/print.css* +/ui/static/global.css* +/ui/static/bundle.css* diff --git a/ui/public/less/global.less b/ui/less/global.less similarity index 100% rename from ui/public/less/global.less rename to ui/less/global.less diff --git a/ui/public/less/lesslib/basics.less b/ui/less/lesslib/basics.less similarity index 100% rename from ui/public/less/lesslib/basics.less rename to ui/less/lesslib/basics.less diff --git a/ui/public/less/lesslib/colors.less b/ui/less/lesslib/colors.less similarity index 100% rename from ui/public/less/lesslib/colors.less rename to ui/less/lesslib/colors.less diff --git a/ui/public/less/lesslib/fonts.less b/ui/less/lesslib/fonts.less similarity index 100% rename from ui/public/less/lesslib/fonts.less rename to ui/less/lesslib/fonts.less diff --git a/ui/public/less/lesslib/layout.less b/ui/less/lesslib/layout.less similarity index 63% rename from ui/public/less/lesslib/layout.less rename to ui/less/lesslib/layout.less index d0bd78a..0c280e1 100644 --- a/ui/public/less/lesslib/layout.less +++ b/ui/less/lesslib/layout.less @@ -5,50 +5,66 @@ html { body { background: @mainColorLight; - > header, > footer { - color: @mainColorDark; - background: @mainColor; - font-family: serif; - h1 { - font-size: 3rem; - text-align: center; - } - p { - text-indent: inherit; - &:first-letter { - font-size: inherit; + div { + > header, > footer { + color: @mainColorDark; + background: @mainColor; + font-family: serif; + + h1 { + font-size: 3rem; + text-align: center; + } + + p { + text-indent: inherit; + + &:first-letter { + font-size: inherit; + } + + font-style: italic; } - font-style: italic; } - } - > header h1 { - margin: 1rem auto; - } - > footer { - color: contrast(@mainColorDark); - } - & > nav { - ul { - background: darken(@mainColorLight,33%,relativ); - li { - font-weight: bold; - &:not(:first-child) { - border-left: @mainColorDark solid thin; - } - a { - text-decoration: none; - color: @mainColorDark; - } - &:hover { - background: lighten(@mainColor,20%,relativ); - a { - color: lighten(@mainColor,66%,relativ); + + > header h1 { + margin: 1rem auto; + } + + > footer { + color: contrast(@mainColorDark); + } + + & > nav { + ul { + background: darken(@mainColorLight, 33%, relativ); + + li { + font-weight: bold; + + &:not(:first-child) { + border-left: @mainColorDark solid thin; } - } - &.selected, &.selected:hover { - background: lighten(@mainColor,10%,relativ); + a { - color: lighten(@mainColor,66%,relativ); + text-decoration: none; + color: @mainColorDark; + } + + &:hover { + background: lighten(@mainColor, 20%, relativ); + + a { + color: lighten(@mainColor, 66%, relativ); + } + } + + &.selected, &.selected:hover { + background: lighten(@mainColor, 10%, relativ); + + a { + color: lighten(@mainColor, 66%, relativ); + } } } } @@ -63,15 +79,19 @@ main { border-color: @mainColorDark; border-width: medium; } + section { @sectionMargin: 1rem; + h1, h2 { margin: @sectionMargin; } + p, ul, ol, dl { margin: @sectionMargin; text-indent: @sectionMargin * 2; } + table { thead { tr:last-child { @@ -79,7 +99,9 @@ main { border-bottom: @mainColor solid thin; } } - }; + } + ; + tbody { td.absence-time { color: @redColor; @@ -87,15 +109,23 @@ main { text-decoration-style: dashed; } } + tfoot { + * { + border: initial; + } + } } + form { @formLabelWidth: 10rem; @formItemWidth: 40rem; + nav.menu { width: @formItemWidth + @formLabelWidth + 4rem; border-color: @mainColor; border-bottom-style: solid; margin: 1rem auto; + span { border-color: @mainColor; border-style: solid solid none; @@ -103,73 +133,89 @@ main { display: inline-block; font-weight: bolder; margin-right: 1rem; + &:first-child { margin-left: 1.5rem; } + &:hover { - background-color: darken(@mainColorLight,10%,relativ); + background-color: darken(@mainColorLight, 10%, relativ); } + &.active { - background-color: darken(@mainColorLight,20%,relativ); + background-color: darken(@mainColorLight, 20%, relativ); } } } + fieldset { width: @formItemWidth + @formLabelWidth + 2rem; margin: 1rem auto; - border-style: solid ; + border-style: solid; border-color: @mainColor; padding: @sectionMargin; + &.tasten { border: none; background-color: @mainColorLight; } + legend { margin: @sectionMargin; margin-left: @sectionMargin * 2; } + div { - & > label { + & > label { width: @formLabelWidth; display: inline-block; margin: 0.5rem; } + input { display: inline-block; width: @formItemWidth; padding: 0.25rem; margin-bottom: 1.0rem; - border-style: solid; + border-style: solid; border-width: thin; } } } } + button { - .button(@mainColor, spin(lighten(@mainColor,66%,relativ),@subColor)); + .button(@mainColor, spin(lighten(@mainColor, 66%, relativ), @subColor)); + &.sub-button { - .button(lighten(@mainColor,20%,relativ), spin(@mainColor,@subColor)); + .button(lighten(@mainColor, 20%, relativ), spin(@mainColor, @subColor)); } } + footer { text-align: right; padding: 0; + p { padding: 0.5rem; display: inline-block; margin: inherit; text-indent: inherit; + &:first-letter { font-size: inherit; } - background: @mainColorLight ; - color: @mainColor ; + + background: @mainColorLight; + color: @mainColor; font-style: italic; font-size: 85%; } + nav li { padding: 0.5rem; } + border-bottom-style: solid; } } diff --git a/ui/public/less/lesslib/media_queries.less b/ui/less/lesslib/media_queries.less similarity index 98% rename from ui/public/less/lesslib/media_queries.less rename to ui/less/lesslib/media_queries.less index 0b57d01..78d7375 100644 --- a/ui/public/less/lesslib/media_queries.less +++ b/ui/less/lesslib/media_queries.less @@ -5,7 +5,7 @@ font-size: 10pt; } header, footer, main, nav, aside { - body > & { + body div > & { width: 19cm; margin: auto; .border-box(); @@ -15,7 +15,7 @@ padding: 0.5rem; ; } - body { + body div { & > header { font-size: 200%; font-weight: bolder; @@ -71,7 +71,7 @@ @media screen and (min-width: 831px) { header, footer, main, nav, aside { - body > & { + body div > & { width: @breiteMainBereich; margin: auto; .border-box(); @@ -80,7 +80,7 @@ header, footer{ padding: 0.5rem; } - body { + body div { & > header { font-size: 200%; font-weight: bolder; @@ -139,7 +139,7 @@ } @media screen and (max-width: 830px) { - html body { + html body div { @boxHeight: 5rem; & > header { height: @boxHeight; @@ -267,7 +267,7 @@ } } @media screen and (max-width: 720px) { - html body { + html body div { @boxHeight: 2.5rem; & > header { height: @boxHeight; diff --git a/ui/public/less/lesslib/mixins.framework.less b/ui/less/lesslib/mixins.framework.less similarity index 100% rename from ui/public/less/lesslib/mixins.framework.less rename to ui/less/lesslib/mixins.framework.less diff --git a/ui/public/less/lesslib/mixins.less b/ui/less/lesslib/mixins.less similarity index 100% rename from ui/public/less/lesslib/mixins.less rename to ui/less/lesslib/mixins.less diff --git a/ui/public/less/lesslib/print/basics.less b/ui/less/lesslib/print/basics.less similarity index 99% rename from ui/public/less/lesslib/print/basics.less rename to ui/less/lesslib/print/basics.less index 63acfce..f464f04 100644 --- a/ui/public/less/lesslib/print/basics.less +++ b/ui/less/lesslib/print/basics.less @@ -2,7 +2,7 @@ html { font-size: 100%; } -body { +body div { color: #000; font-size: 1em; font-family: OpenSans, "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif; diff --git a/ui/public/less/lesslib/print/colors.less b/ui/less/lesslib/print/colors.less similarity index 100% rename from ui/public/less/lesslib/print/colors.less rename to ui/less/lesslib/print/colors.less diff --git a/ui/public/less/lesslib/print/layout.less b/ui/less/lesslib/print/layout.less similarity index 98% rename from ui/public/less/lesslib/print/layout.less rename to ui/less/lesslib/print/layout.less index 0864ddf..864ebe6 100644 --- a/ui/public/less/lesslib/print/layout.less +++ b/ui/less/lesslib/print/layout.less @@ -1,5 +1,5 @@ html { - body { + body div { > header, > footer { background: none; font-family: serif; @@ -59,7 +59,7 @@ main { } } } - tbody { + tbody div { th { font-weight: bold; text-align: center; diff --git a/ui/public/less/print.less b/ui/less/print.less similarity index 100% rename from ui/public/less/print.less rename to ui/less/print.less diff --git a/ui/package.json b/ui/package.json index 567b320..72fecdd 100644 --- a/ui/package.json +++ b/ui/package.json @@ -1,31 +1,36 @@ { - "private": true, - "name": "svelte-demo", - "scripts": { - "build": "rollup -c", - "autobuild": "rollup -c -w", - "dev": "run-p start:dev autobuild", - "start": "sirv public --single", - "start:dev": "sirv public --dev --single" - }, - "dependencies": { - "ganalytics": "^3.1.2", - "navaid": "^1.0.2", - "open-iconic": "^1.1.1" - }, - "devDependencies": { - "@iconify-icons/oi": "^1.1.0", - "@iconify/svelte": "^1.0.4", - "@rollup/plugin-commonjs": "^15.0.0", - "@rollup/plugin-node-resolve": "^9.0.0", - "@rollup/plugin-replace": "^2.3.0", - "dotenv": "^8.2.0", - "npm-run-all": "^4.1.3", - "rollup": "^2.30.0", - "rollup-plugin-svelte": "^6.0.0", - "rollup-plugin-terser": "^7.0.0", - "sirv-cli": "^1.0.8", - "svelte": "^3.4.4", - "svelte-paginate": "^0.1.0" - } + "private": true, + "name": "svelte-demo", + "type": "module", + "scripts": { + "dev": "vite dev", + "build": "vite build", + "preview": "vite preview", + "prepare": "svelte-kit sync || echo ''", + "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", + "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch" + }, + "dependencies": { + "ganalytics": "^3.1.2", + "navaid": "^1.0.2", + "open-iconic": "^1.1.1" + }, + "devDependencies": { + "@sveltejs/adapter-auto": "^6.0.0", + "@sveltejs/kit": "^2.16.0", + "@sveltejs/vite-plugin-svelte": "^5.0.0", + "svelte": "^5.0.0", + "svelte-check": "^4.0.0", + "typescript": "^5.0.0", + "vite": "^6.2.6", + "dotenv": "^8.2.0", + "wx-svelte-grid": "^2.1.5", + "@iconify-icons/oi": "^1.1.0", + "@iconify/svelte": "^5.0.0" + }, + "exports": { + ".": { + "svelte": "./puplic/index.js" + } + } } diff --git a/ui/public/index.html b/ui/public/index.html deleted file mode 100644 index a48646e..0000000 --- a/ui/public/index.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - Svelte app - - - - - - - - - - - - diff --git a/ui/rollup.config.js b/ui/rollup.config.js deleted file mode 100644 index 7b165f5..0000000 --- a/ui/rollup.config.js +++ /dev/null @@ -1,51 +0,0 @@ -import svelte from 'rollup-plugin-svelte'; -import replace from '@rollup/plugin-replace'; -import resolve from '@rollup/plugin-node-resolve'; -import commonjs from '@rollup/plugin-commonjs'; -import { terser } from 'rollup-plugin-terser'; -import {config} from 'dotenv'; - -const production = !process.env.ROLLUP_WATCH; - -export default { - input: 'src/index.js', - output: { - name: 'app', - format: 'esm', - sourcemap: true, - dir: 'public', - }, - preserveEntrySignatures: false, - plugins: [ - svelte({ - // enable run-time checks when not in production - dev: !production, - // we'll extract any component CSS out into - // a separate file — better for performance - css: css => { - css.write('bundle.css'); - } - }), - - // If you have external dependencies installed from - // npm, you'll most likely need these plugins. In - // some cases you'll need additional configuration — - // consult the documentation for details: - // https://github.com/rollup/rollup-plugin-commonjs - resolve(), - commonjs(), - - replace({ - 'process.env.NODE_ENV': JSON.stringify(production ? 'production' : 'development'), - 'env': JSON.stringify({...config().parsed /* attached the .env config*/}) - }), - - // If we're building for production (npm run build - // instead of npm run dev), minify - production && terser() - ], - - watch: { - clearScreen: false - } -}; diff --git a/ui/src/app.html b/ui/src/app.html new file mode 100644 index 0000000..025cb9c --- /dev/null +++ b/ui/src/app.html @@ -0,0 +1,23 @@ + + + + + + + + Svelte app + + + + + %sveltekit.head% + + + + + +
+ %sveltekit.body% +
+ + diff --git a/ui/src/components/App.svelte b/ui/src/components/App.svelte deleted file mode 100644 index 0577043..0000000 --- a/ui/src/components/App.svelte +++ /dev/null @@ -1,57 +0,0 @@ -
- Arbeitszeiten -
-