Spythere/pojazdownik
1
0
Fork 0
mirror of https://github.com/Spythere/pojazdownik.git synced 2026-05-03 05:18:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

restruct: updated scss @import rules to @use; package upgrade

Browse Source
This commit is contained in:
Spythere
2025-03-04 16:16:28 +01:00
parent 91803d3fef
commit c9459eb8f4
18 changed files with 10669 additions and 2430 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+5 -9
View File
@@ -1,7 +1,7 @@
<template>
<AppModals />
<ImageFullscreenPreview v-if="store.vehiclePreviewSrc" />
<router-view></router-view>
</template>
@@ -15,9 +15,7 @@ import AppModals from './components/app/AppModals.vue';
export default defineComponent({
components: { ImageFullscreenPreview, AppContainerView, AppModals },
data() {
return {
store: useStore(),
};
return { store: useStore() };
},
async created() {
@@ -28,21 +26,19 @@ export default defineComponent({
</script>
<style lang="scss">
@import './styles/global.scss';
/* APP */
#app {
margin: 0 auto;
color: $textColor;
color: global.$textColor;
font-size: 1em;
padding: 0;
@media screen and (max-width: $breakpointMd) {
@media screen and (max-width: global.$breakpointMd) {
font-size: calc(0.7rem + 0.75vw);
}
@media screen and (orientation: landscape) and (max-width: $breakpointMd) {
@media screen and (orientation: landscape) and (max-width: global.$breakpointMd) {
font-size: calc(0.75rem + 0.4vw);
}
}
src/components/app/MainContainer.vue
+2 -4
View File
@@ -20,8 +20,6 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/global.scss';
main {
display: grid;
gap: 1em;
@@ -32,7 +30,7 @@ main {
grid-template-columns: 1fr 2fr;
grid-template-rows: auto 360px minmax(300px, 1fr);
background-color: darken($color: $bgColor, $amount: 5);
background-color: global.$bgColorDarker;
border-radius: 1em;
min-height: 950px;
@@ -40,7 +38,7 @@ main {
padding: 1em;
}
@media screen and (max-width: $breakpointMd) {
@media screen and (max-width: global.$breakpointMd) {
main {
display: flex;
flex-direction: column;
src/components/cards/RealStockCard.vue
+4 -6
View File
@@ -220,8 +220,6 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/global.scss';
.action-exit {
display: flex;
background-color: #333;
@@ -249,7 +247,7 @@ export default defineComponent({
z-index: 100;
@media screen and (max-width: $breakpointSm) {
@media screen and (max-width: global.$breakpointSm) {
height: 80vh;
}
}
@@ -281,7 +279,7 @@ export default defineComponent({
width: 35%;
}
@media screen and (max-width: $breakpointSm) {
@media screen and (max-width: global.$breakpointSm) {
flex-wrap: wrap;
input {
@@ -309,7 +307,7 @@ ul {
padding: 0.1em;
&[data-last-selected='true'] .stock-title {
border: 1px solid $accentColor;
border: 1px solid global.$accentColor;
}
.stock-title {
@@ -325,7 +323,7 @@ ul {
background: #222;
}
@media screen and (max-width: $breakpointSm) {
@media screen and (max-width: global.$breakpointSm) {
grid-template-columns: 1fr;
// grid-template-rows: 1fr 1fr;
}
src/components/sections/InputsSection.vue
+10 -30
View File
@@ -134,33 +134,15 @@ export default defineComponent({
data: () => ({
store: useStore(),
locomotiveTypeList: [
{
id: 'loco-electric',
desc: 'ELEKTRYCZNE',
},
{
id: 'loco-diesel',
desc: 'SPALINOWE',
},
{
id: 'unit-electric',
desc: 'ELEKTR. ZESPOŁY TRAKCYJNE',
},
{
id: 'unit-diesel',
desc: 'SPAL. ZESPOŁY TRAKCYJNE',
},
{ id: 'loco-electric', desc: 'ELEKTRYCZNE' },
{ id: 'loco-diesel', desc: 'SPALINOWE' },
{ id: 'unit-electric', desc: 'ELEKTR. ZESPOŁY TRAKCYJNE' },
{ id: 'unit-diesel', desc: 'SPAL. ZESPOŁY TRAKCYJNE' },
] as { id: LocoGroupType; desc: string }[],
carTypeList: [
{
id: 'wagon-passenger',
desc: 'PASAŻERSKIE',
},
{
id: 'wagon-freight',
desc: 'TOWAROWE',
},
{ id: 'wagon-passenger', desc: 'PASAŻERSKIE' },
{ id: 'wagon-freight', desc: 'TOWAROWE' },
] as { id: WagonGroupType; desc: string }[],
}),
@@ -240,8 +222,6 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/global';
.inputs-section {
display: flex;
justify-content: center;
@@ -264,7 +244,7 @@ button.btn--choice {
padding: 0.3em 0.6em;
&[data-selected='true'] {
background-color: $accentColor;
background-color: global.$accentColor;
color: black;
}
@@ -282,12 +262,12 @@ button.btn--choice {
display: block;
font-weight: bold;
color: $accentColor;
color: global.$accentColor;
margin-bottom: 0.3em;
}
select:focus {
border-color: $accentColor;
border-color: global.$accentColor;
}
}
@@ -308,7 +288,7 @@ button.btn--choice {
margin-bottom: 0.5em;
}
@media screen and (max-width: $breakpointMd) {
@media screen and (max-width: global.$breakpointMd) {
.inputs-section {
justify-content: center;
text-align: center;
src/components/sections/LogoSection.vue
+3 -11
View File
@@ -21,14 +21,8 @@ export default {
data() {
return {
localeActions: [
{
name: 'POLSKI',
locale: 'pl',
},
{
name: 'ENGLISH',
locale: 'en',
},
{ name: 'POLSKI', locale: 'pl' },
{ name: 'ENGLISH', locale: 'en' },
],
};
},
@@ -46,8 +40,6 @@ export default {
</script>
<style lang="scss" scoped>
@import '../../styles/global.scss';
.logo-section {
grid-row: 1;
grid-column: 1;
@@ -66,7 +58,7 @@ export default {
button[data-selected='true'] {
font-weight: bold;
color: $accentColor;
color: global.$accentColor;
text-decoration: underline;
}
}
src/components/sections/StockSection.vue
+1 -1
View File
@@ -57,7 +57,7 @@ onMounted(() => {
</script>
<style lang="scss">
@import '../../styles/global.scss';
// Tab change animation
.tab-change {
src/components/sections/TrainImageSection.vue
+8 -8
View File
@@ -152,7 +152,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/global';
.train-image-section {
display: flex;
@@ -178,11 +178,11 @@ img {
}
&[data-sponsor-only='true'] {
border: 1px solid $sponsorColor;
border: 1px solid global.$sponsorColor;
}
&[data-team-only='true'] {
border: 1px solid $teamColor;
border: 1px solid global.$teamColor;
}
}
@@ -216,25 +216,25 @@ img {
width: 100%;
max-width: 380px;
background-color: $secondaryColor;
background-color: global.$secondaryColor;
font-weight: bold;
}
.placeholder {
height: 250px;
background-color: $bgColor;
background-color: global.$bgColor;
}
.sponsor-only {
color: $sponsorColor;
color: global.$sponsorColor;
}
.team-only {
color: $teamColor;
color: global.$teamColor;
}
@media screen and (max-width: $breakpointMd) {
@media screen and (max-width: global.$breakpointMd) {
.train-image-section {
justify-content: center;
}
src/components/tabs/NumberGeneratorTab.vue
+5 -5
View File
@@ -224,8 +224,8 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
</script>
<style lang="scss" scoped>
@import '../../styles/tab.scss';
@import '../../styles/global.scss';
.category-select {
select {
@@ -264,7 +264,7 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
margin: 0.5em 0;
padding: 0.5em;
background-color: $secondaryColor;
background-color: global.$secondaryColor;
}
.category-rules {
@@ -282,13 +282,13 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
margin: 0.25em 0;
}
@media screen and (max-width: $breakpointMd) {
@media screen and (max-width: global.$breakpointMd) {
.number-generator {
min-height: 100vh;
}
}
@media screen and (max-width: $breakpointSm) {
@media screen and (max-width: global.$breakpointSm) {
.regions-select {
flex-wrap: wrap;
}
src/components/tabs/StockGeneratorTab.vue
+6 -13
View File
@@ -227,16 +227,10 @@ export default defineComponent({
return acc;
},
[] as {
constructionType: string;
carPool: { carWagon: ICarWagon; cargo?: ICargo }[];
}[]
[] as { constructionType: string; carPool: { carWagon: ICarWagon; cargo?: ICargo }[] }[]
);
let bestGeneration: { stockList: IStock[]; value: number } = {
stockList: [],
value: 0,
};
let bestGeneration: { stockList: IStock[]; value: number } = { stockList: [], value: 0 };
for (let i = 0; i < 10; i++) {
this.store.stockList.splice(
@@ -324,8 +318,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/global.scss';
@import '../../styles/tab.scss';
@use '@/styles/tab';
h2 {
margin-top: 0;
@@ -346,7 +339,7 @@ h2 {
text-transform: uppercase;
font-weight: bold;
background-color: $secondaryColor;
background-color: global.$secondaryColor;
&[data-excluded='true'] {
background-color: gray;
@@ -360,7 +353,7 @@ h2 {
padding: 5px;
transform: translate(-8px, -50%);
background-color: $bgColor;
background-color: global.$bgColor;
color: white;
}
}
@@ -401,7 +394,7 @@ h2 {
}
.generator_warning {
background-color: $accentColor;
background-color: global.$accentColor;
padding: 0.5em;
text-align: justify;
font-weight: bold;
src/components/tabs/StockListTab.vue
+9 -9
View File
@@ -521,8 +521,8 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/global';
@import '../../styles/tab.scss';
@use '@/styles/tab';
.tab_content {
display: flex;
@@ -533,7 +533,7 @@ export default defineComponent({
.warning {
padding: 0.25em;
margin: 0.25em 0;
background: $accentColor;
background: global.$accentColor;
color: black;
font-weight: bold;
@@ -600,7 +600,7 @@ export default defineComponent({
}
.list-empty {
background-color: $secondaryColor;
background-color: global.$secondaryColor;
border-radius: 0.5em;
padding: 0.75em;
font-weight: bold;
@@ -643,14 +643,14 @@ li > .stock-info {
.stock-info-no,
.stock-info-type {
background-color: $secondaryColor;
background-color: global.$secondaryColor;
&[data-team-only='true'] {
color: $teamColor;
color: global.$teamColor;
}
&[data-sponsor-only='true'] {
color: $sponsorColor;
color: global.$sponsorColor;
}
}
@@ -659,7 +659,7 @@ li > .stock-info {
text-align: right;
&[data-selected='true'] {
color: $accentColor;
color: global.$accentColor;
}
}
@@ -694,7 +694,7 @@ li > .stock-info {
}
}
@media screen and (max-width: $breakpointMd) {
@media screen and (max-width: global.$breakpointMd) {
ul {
min-height: auto;
}
src/components/tabs/WikiListTab.vue
+4 -4
View File
@@ -248,7 +248,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/tab.scss';
@use '@/styles/tab';
.actions {
display: grid;
@@ -322,7 +322,7 @@ export default defineComponent({
}
.sponsor-only {
color: $sponsorColor;
color: global.$sponsorColor;
&::after {
content: '*';
@@ -330,7 +330,7 @@ export default defineComponent({
}
.team-only {
color: $teamColor;
color: global.$teamColor;
&::after {
content: '*';
@@ -347,7 +347,7 @@ export default defineComponent({
background-color: #161c2e;
}
@media screen and (max-width: $breakpointSm) {
@media screen and (max-width: global.$breakpointSm) {
.actions-panel {
align-items: stretch;
flex-direction: column;
src/components/utils/StockThumbnails.vue
+3 -3
View File
@@ -173,7 +173,7 @@ const getVehicleThumbnails = (vehicleString: string) => {
</script>
<style lang="scss" scoped>
@import '../../styles/global.scss';
.stock-thumbnails {
overflow: auto;
@@ -201,11 +201,11 @@ ul {
}
&[data-sponsor-only='true'] > b {
color: $sponsorColor;
color: global.$sponsorColor;
}
&[data-team-only='true'] > b {
color: $teamColor;
color: global.$teamColor;
}
img {
src/styles/global.scss → src/styles/_global.scss
+1
View File
@@ -2,6 +2,7 @@ $breakpointMd: 960px;
$breakpointSm: 550px;
$bgColor: #2b3552;
$bgColorDarker: #1f263b;
$textColor: #fff;
$secondaryColor: #1b1b1b;
$accentColor: #e4c428;
src/styles/tab.scss → src/styles/_tab.scss
+2 -2
View File
@@ -1,4 +1,4 @@
@import './global.scss';
@use 'global';
.tab {
height: 100%;
@@ -7,7 +7,7 @@
&_header {
padding: 0.5em 1em;
background-color: $secondaryColor;
background-color: global.$secondaryColor;
text-align: center;
h2 {