Spythere/genera-tor
1
0
Fork 0
mirror of https://github.com/Spythere/genera-tor.git synced 2026-05-03 05:28:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: changed fetching fonts from remote to local; changed sass import rules to use

Browse Source 
chore: updated packages
This commit is contained in:
Spythere
2025-03-20 20:36:19 +01:00
parent f28f1e31c2
commit 42d0d1ddb9
18 changed files with 2461 additions and 2292 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2 -2
View File
@@ -16,10 +16,10 @@
"pinia": "^2.1.7",
"vue": "^3.3.11",
"vue-i18n": "9.8.0",
"vue-router": "^4.2.5",
"vue-tsc": "^1.8.25"
"vue-router": "^4.2.5"
},
"devDependencies": {
"@types/node": "^22.13.10",
"@vitejs/plugin-vue": "^4.5.2",
"@vue/eslint-config-prettier": "^8.0.0",
"@vue/eslint-config-typescript": "^12.0.0",
public/fonts/LibreFranklin-Bold.woff2
BIN
View File
Binary file not shown.
public/fonts/LibreFranklin-Regular.woff2
BIN
View File
Binary file not shown.
public/fonts/LibreFranklin-SemiBold.woff2
BIN
View File
Binary file not shown.
src/App.vue
+6 -14
View File
@@ -23,20 +23,12 @@ import packageInfo from '../package.json';
export default defineComponent({
setup() {
const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW({
immediate: true
});
const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW({ immediate: true });
return {
offlineReady,
needRefresh,
updateServiceWorker
};
return { offlineReady, needRefresh, updateServiceWorker };
},
data() {
return {
appVersion: packageInfo.version,
};
return { appVersion: packageInfo.version };
},
created() {
@@ -46,8 +38,8 @@ export default defineComponent({
</script>
<style lang="scss">
@import './styles/global.scss';
@import './styles/anims.scss';
@use 'styles/anims';
@use 'styles/colors';
#app {
color: white;
@@ -66,7 +58,7 @@ export default defineComponent({
text-align: center;
width: 100%;
background-color: $accentCol;
background-color: colors.$accentCol;
cursor: pointer;
}
src/components/Order.vue
+10 -17
View File
@@ -19,11 +19,7 @@ import OrderSVue from './OrderS.vue';
import OrderFooter from './OrderFooter.vue';
import OrderOVue from './OrderO.vue';
const orderComponents = {
orderN: OrderNVue,
orderS: OrderSVue,
orderO: OrderOVue
};
const orderComponents = { orderN: OrderNVue, orderS: OrderSVue, orderO: OrderOVue };
export default defineComponent({
components: { OrderNVue, OrderSVue, OrderFooter },
@@ -31,9 +27,7 @@ export default defineComponent({
setup() {
const store = useStore();
return {
store
};
return { store };
},
computed: {
@@ -45,9 +39,8 @@ export default defineComponent({
</script>
<style lang="scss">
@import '../styles/global.scss';
@use '../styles/colors';
$darkModeBgCol: $bgColDarker;
$darkModeTextCol: #eee;
.order {
@@ -55,7 +48,7 @@ $darkModeTextCol: #eee;
color: black;
&.dark {
background-color: $darkModeBgCol;
background-color: colors.$bgColDarker;
color: $darkModeTextCol;
}
@@ -70,12 +63,12 @@ $darkModeTextCol: #eee;
}
textarea:focus-visible {
outline: 2px solid $accentCol;
outline: 2px solid colors.$accentCol;
}
input[type='checkbox']:focus-visible,
input[type='radio']:focus-visible {
outline: 2px solid $accentCol;
outline: 2px solid colors.$accentCol;
}
input[type='checkbox'],
@@ -145,7 +138,7 @@ $darkModeTextCol: #eee;
border-bottom: 2px dotted black;
&:focus-visible {
border-bottom: 2px solid $accentCol;
border-bottom: 2px solid colors.$accentCol;
}
&.row-checkbox + input::placeholder {
@@ -160,7 +153,7 @@ $darkModeTextCol: #eee;
color: $darkModeTextCol !important;
&:focus-visible {
border-bottom: 2px solid $accentCol !important;
border-bottom: 2px solid colors.$accentCol !important;
}
&::placeholder {
@@ -173,7 +166,7 @@ $darkModeTextCol: #eee;
border-color: $darkModeTextCol;
&:focus-visible {
border-color: $accentCol;
border-color: colors.$accentCol;
}
}
@@ -181,7 +174,7 @@ $darkModeTextCol: #eee;
textarea {
color: $darkModeTextCol !important;
border-color: $darkModeTextCol !important;
background-color: $bgColDarker !important;
background-color: colors.$bgColDarker !important;
}
.horizontal-bar {
src/components/OrderHelper.vue
+3 -6
View File
@@ -34,16 +34,13 @@ import orderHelperData from '../data/orderHelperData.json';
export default defineComponent({
setup() {
return {
store: useStore(),
orderHelperData
};
return { store: useStore(), orderHelperData };
}
});
</script>
<style lang="scss" scoped>
@import '../styles/global.scss';
@use '../styles/colors';
.content {
width: 100%;
@@ -66,7 +63,7 @@ ul {
li b {
font-size: 1.1em;
color: $accentCol;
color: colors.$accentCol;
}
}
</style>
src/components/OrderList.vue
+7 -7
View File
@@ -105,7 +105,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../styles/global.scss';
@use '../styles/colors';
.list {
&-move,
@@ -146,7 +146,7 @@ h3 {
margin-bottom: 1em;
text-align: center;
background-color: $bgColDarker;
background-color: colors.$bgColDarker;
padding: 1em;
margin-bottom: 0.5em;
}
@@ -155,12 +155,12 @@ li {
text-align: left;
padding: 1em;
margin: 0.5em;
background-color: $bgColDarker;
background-color: colors.$bgColDarker;
cursor: pointer;
&[selected='true'] {
outline: 1px solid $accentCol;
outline: 1px solid colors.$accentCol;
}
&.no-orders-warning {
@@ -171,7 +171,7 @@ li {
}
.wrong-order-indicator {
color: $accentCol;
color: colors.$accentCol;
padding: 0 0.25em;
}
@@ -181,14 +181,14 @@ li {
button {
padding: 0.5em;
background-color: $bgColLighter;
background-color: colors.$bgColLighter;
&:hover {
background-color: #666;
}
&:focus-visible {
outline: 2px solid $accentCol;
outline: 2px solid colors.$accentCol;
}
}
}
src/components/OrderMessage.vue
+2 -2
View File
@@ -254,7 +254,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../styles/global.scss';
@use '../styles/colors';
.order-message {
h3 {
@@ -272,7 +272,7 @@ export default defineComponent({
height: 250px;
overflow: auto;
background-color: $bgColLighter;
background-color: colors.$bgColLighter;
color: white;
text-align: justify;
src/components/OrderTrainPicker.vue
+6 -6
View File
@@ -260,7 +260,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../styles/global.scss';
@use '../styles/colors';
.order-train-picker {
display: flex;
@@ -277,7 +277,7 @@ export default defineComponent({
gap: 0.5em;
select {
background-color: $bgColDarker;
background-color: colors.$bgColDarker;
font-size: 1em;
width: 100%;
@@ -306,23 +306,23 @@ ul.train-list {
li.no-trains {
font-weight: bold;
background-color: $bgColDarker;
background-color: colors.$bgColDarker;
padding: 0.5em;
margin-top: 0.5em;
}
li > button {
width: 100%;
background-color: $bgColDarker;
background-color: colors.$bgColDarker;
padding: 0.5em;
margin-top: 0.5em;
&:hover {
background-color: $bgColLighter;
background-color: colors.$bgColLighter;
}
&:focus-visible {
outline: 1px solid $accentCol;
outline: 1px solid colors.$accentCol;
}
}
}
src/components/SideBar.vue
+4 -4
View File
@@ -61,7 +61,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../styles/global.scss';
@use '../styles/colors';
.sidebar_content {
display: grid;
@@ -81,7 +81,7 @@ export default defineComponent({
align-items: center;
color: white;
background-color: $bgColDarker;
background-color: colors.$bgColDarker;
width: 50px;
height: 85px;
@@ -100,7 +100,7 @@ export default defineComponent({
&[data-selected='true'] .bar {
transform: translateX(0);
background-color: $accentCol;
background-color: colors.$accentCol;
}
&:hover {
@@ -122,7 +122,7 @@ button.option-save {
}
&[data-selected='true'] {
background-color: $accentCol;
background-color: colors.$accentCol;
}
}
src/styles/anims.scss → src/styles/_anims.scss
View File
src/styles/_colors.scss
+6
View File
@@ -0,0 +1,6 @@
$bgCol: #141414;
$bgColLighter: #292929;
$bgColDarker: #080808;
$accentCol: #ff6060;
$warnCol: #ffe02e;
$whiteDimmerCol: #ccc;
src/styles/_fonts.scss
+24
View File
@@ -0,0 +1,24 @@
@font-face {
font-family: 'Libre Franklin';
src: url('/fonts/LibreFranklin-Bold.woff2') format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Libre Franklin';
src: url('/fonts/LibreFranklin-Regular.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Libre Franklin';
src: url('/fonts/LibreFranklin-SemiBold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
src/styles/global.scss → src/styles/_global.scss
+14 -20
View File
@@ -1,11 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;600&display=swap');
$bgCol: #141414;
$bgColLighter: #292929;
$bgColDarker: #080808;
$accentCol: #ff6060;
$warnCol: #ffe02e;
$whiteDimmerCol: #ccc;
@use 'fonts';
@use 'colors';
// Global scrollbar style
::-webkit-scrollbar {
@@ -29,7 +23,7 @@ html {
padding: 0;
margin: 0;
min-height: 100vh;
background-color: $bgCol;
background-color: colors.$bgCol;
font-family: 'Libre Franklin', sans-serif;
font-weight: 500;
@@ -46,7 +40,7 @@ a {
text-decoration: none;
&:hover {
color: $accentCol;
color: colors.$accentCol;
}
}
@@ -68,21 +62,21 @@ button {
button.g-button {
text-align: center;
color: inherit;
transition:
color 100ms ease-in,
background-color 100ms ease-in;
&.action {
background-color: $bgColDarker;
background-color: colors.$bgColDarker;
padding: 0.5em;
&:focus-visible {
outline: 2px solid $accentCol;
outline: 2px solid colors.$accentCol;
}
&:hover:not([data-disabled='true']) {
background-color: $bgColLighter;
background-color: colors.$bgColLighter;
}
}
@@ -98,11 +92,11 @@ button.g-button {
bottom: 0;
width: 100%;
height: 2px;
background-color: $accentCol;
background-color: colors.$accentCol;
}
&[data-active='true'] {
color: $accentCol;
color: colors.$accentCol;
}
}
@@ -110,7 +104,7 @@ button.g-button {
padding: 0;
&:focus-visible {
color: $accentCol;
color: colors.$accentCol;
}
}
}
@@ -118,11 +112,11 @@ button.g-button {
// Text styles
.text {
&--accent {
color: $accentCol;
color: colors.$accentCol;
}
&--warn {
color: $warnCol;
color: colors.$warnCol;
}
}
@@ -146,7 +140,7 @@ select {
}
&:focus-visible {
border-color: $accentCol;
border-color: colors.$accentCol;
}
}
src/styles/rozkaz.scss
View File
vite.config.ts
+11
View File
@@ -2,11 +2,22 @@ import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { VitePWA } from 'vite-plugin-pwa';
import path from 'path';
export default defineConfig({
server: {
port: 8081,
},
css: {
preprocessorOptions: {
scss: { additionalData: `@use '@/styles/global';`, silenceDeprecations: ['legacy-js-api'] },
},
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
plugins: [
vue(),
VitePWA({
yarn.lock
+2366 -2214
View File
File diff suppressed because it is too large Load Diff