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

Poprawki responsywności i dostępu; usprawniono layout

Browse Source
This commit is contained in:
Spythere
2022-07-31 17:36:11 +02:00
parent 27405485bd
commit 37f35f94c9
7 changed files with 397 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+14 -42
View File
@@ -15,17 +15,11 @@
<img :src="logoImage" alt="logo pojazdownik" />
</header>
<main>
<div id="inputs-area">
<InputsSection />
</div>
<InputsSection />
<div id="list-area">
<ListSection />
</div>
<TrainImageSection />
<div id="image-area">
<TrainImage />
</div>
<ListSection />
</main>
<footer>
<div class="text--grayed" style="margin-bottom: 0.25em">
@@ -49,14 +43,14 @@ import ListSection from './components/ListSection.vue';
import logoImage from './assets/logo.svg';
import { useStore } from './store';
import TrainImage from './components/TrainImageSection.vue';
import TrainImageSection from './components/TrainImageSection.vue';
import RandomizerCard from './components/RandomizerCard.vue';
export default defineComponent({
components: {
ListSection,
InputsSection,
TrainImage,
TrainImageSection,
RandomizerCard,
},
@@ -73,16 +67,6 @@ export default defineComponent({
store,
};
},
mounted() {
window.addEventListener('keydown', (ev) => {
if (this.store.vehiclePreviewSrc == '') return;
if (ev.key.toLowerCase() == 'escape') this.store.vehiclePreviewSrc = '';
// if(ev.key.toLowerCase() == 'enter')
});
// window.focus();
},
});
</script>
@@ -162,24 +146,13 @@ main {
gap: 1em 3em;
width: 100vw;
max-width: 1300px;
max-width: 1200px;
min-height: 75vh;
grid-template-columns: 1fr 2fr;
grid-template-areas: 'inputs list' 'image list';
grid-template-columns: 1fr 3fr;
grid-template-rows: 250px auto;
padding: 0.5em;
#inputs-area {
grid-area: inputs;
}
#list-area {
grid-area: list;
}
#image-area {
grid-area: image;
}
}
/* FOOTER SECTION */
@@ -191,15 +164,14 @@ footer {
/* MOBILE VIEWS */
@media screen and (max-width: 1100px) {
@media screen and (max-width: $breakpointMd) {
main {
display: flex;
flex-direction: column;
grid-template-columns: 1fr;
grid-template-areas: 'inputs' 'image' 'list';
justify-items: center;
grid-template-rows: 1fr;
}
}
@media screen and (max-width: 800px) {
#app {
font-size: calc(0.75vw + 0.6rem);
}
@@ -213,7 +185,7 @@ footer {
}
}
@media screen and (max-width: 650px) {
@media screen and (max-width: $breakpointSm) {
header {
font-size: 0.75em;
src/components/InputsSection.vue
+70 -56
View File
@@ -1,5 +1,5 @@
<template>
<section class="inputs">
<section class="inputs-section">
<div class="input inputs_loco">
<div class="input_container">
<h2 class="input_header">WYBIERZ POJAZDY / WAGONY</h2>
@@ -10,14 +10,14 @@
v-model="store.chosenLoco"
@focus="onVehicleSelect('loco')"
@input="onVehicleSelect('loco')"
@keydown.enter="addVehicle"
@keydown.backspace="removeVehicle"
>
<option :value="null" disabled>Wybierz pojazd trakcyjny</option>
<option v-for="loco in locoOptions" :value="loco" :key="loco.type">
{{ loco.type }}
</option>
</select>
<button class="btn" @click="addVehicle">DODAJ</button>
</div>
<div class="input_list type">
@@ -26,6 +26,8 @@
v-model="store.chosenCar"
@focus="onVehicleSelect('car')"
@input="onVehicleSelect('car')"
@keydown.enter="addVehicle"
@keydown.backspace="removeVehicle"
>
<option :value="null" disabled>Wybierz wagon</option>
@@ -33,15 +35,6 @@
{{ car.type }}
</option>
</select>
<button
class="btn"
@click="switchVehicles"
:disabled="store.chosenStockListIndex == -1"
:data-disabled="store.chosenStockListIndex == -1"
>
ZAMIEŃ
</button>
</div>
<div class="input_list cargo">
@@ -55,6 +48,10 @@
data-select="cargo"
data-ignore-outside="1"
v-model="store.chosenCargo"
@focus="onVehicleSelect('car')"
@input="onVehicleSelect('car')"
@keydown.enter="addVehicle"
@keydown.backspace="removeVehicle"
>
<option :value="null" v-if="!store.chosenCar || !store.chosenCar.loadable">brak dostępnych ładunków</option>
<option :value="null" v-else>próżny</option>
@@ -65,7 +62,20 @@
</select>
</div>
<div class="input_ready-stock">
<div class="input_actions">
<button class="btn" @click="addVehicle">DODAJ NOWY</button>
<button
class="btn"
@click="switchVehicles"
:disabled="store.chosenStockListIndex == -1"
:data-disabled="store.chosenStockListIndex == -1"
>
ZAMIEŃ ZA
<b class="text--accent">
{{ store.chosenStockListIndex == -1 ? '' : `${store.chosenStockListIndex + 1}.` }}
</b>
</button>
<button class="btn" @click="setReadyStockList(true)"><b>REALNE ZESTAWIENIA</b></button>
<ready-stock-list />
</div>
@@ -75,10 +85,10 @@
</template>
<script lang="ts">
import { defineComponent, inject, provide, ref } from 'vue';
import { defineComponent } from 'vue';
import ReadyStockList from './ReadyStockList.vue';
import { IStore, ILocomotive, ICarWagon, IStock } from '../types';
import { IStock } from '../types';
import imageMixin from '../mixins/imageMixin';
import { useStore } from '../store';
import { isLocomotive } from '../utils/vehicleUtils';
@@ -103,24 +113,24 @@ export default defineComponent({
};
},
mounted() {
document.addEventListener('keydown', (ev) => {
const keyName = ev.key.toLowerCase();
if (keyName == 'enter') {
ev.preventDefault();
this.addVehicle();
}
// mounted() {
// document.addEventListener('keydown', (ev) => {
// const keyName = ev.key.toLowerCase();
// if (keyName == 'enter') {
// ev.preventDefault();
// this.addVehicle();
// }
if (keyName == 'backspace') {
if (this.store.stockList.length == 0) return;
// if (keyName == 'backspace') {
// if (this.store.stockList.length == 0) return;
const lastStock = this.store.stockList.slice(-1)[0];
// const lastStock = this.store.stockList.slice(-1)[0];
if (lastStock.count > 1) lastStock.count--;
else this.store.stockList.splice(-1);
}
});
},
// if (lastStock.count > 1) lastStock.count--;
// else this.store.stockList.splice(-1);
// }
// });
// },
computed: {
locoOptions() {
@@ -149,6 +159,15 @@ export default defineComponent({
});
},
removeVehicle() {
if (this.store.stockList.length == 0) return;
const lastStock = this.store.stockList.slice(-1)[0];
if (lastStock.count > 1) lastStock.count--;
else this.store.stockList.splice(-1);
},
switchVehicles() {
if (this.store.chosenStockListIndex == -1) return;
@@ -170,24 +189,6 @@ export default defineComponent({
supportersOnly: vehicle.supportersOnly,
};
let currentStock = this.store.stockList[this.store.chosenStockListIndex];
// if (isLocomotive(vehicle) && currentStock && currentStock.type == vehicle.type) {
// this.store.stockList[this.store.chosenStockListIndex].count++;
// return;
// }
// if (
// !isLocomotive(vehicle) &&
// currentStock &&
// currentStock.type == vehicle.type &&
// currentStock.cargo?.id == this.store.chosenCargo?.id
// ) {
// this.store.stockList[this.store.chosenStockListIndex].count++;
// return;
// }
this.store.stockList[this.store.chosenStockListIndex] = stockObj;
},
@@ -240,20 +241,19 @@ export default defineComponent({
<style lang="scss" scoped>
@import '../styles/global';
.inputs {
.inputs-section {
display: flex;
justify-content: space-between;
grid-row: 1;
grid-column: 1;
&_car {
&.disabled {
opacity: 0.75;
pointer-events: none;
}
}
@media screen and (max-width: 800px) {
flex-direction: column;
}
}
.input {
@@ -263,7 +263,6 @@ export default defineComponent({
&_list {
margin: 0.5em 0;
display: flex;
select:focus {
@@ -293,12 +292,27 @@ export default defineComponent({
}
}
@media screen and (max-width: 800px) {
&_actions {
display: flex;
flex-wrap: wrap;
button {
margin: 0.5em 0.5em 0 0;
}
}
}
@media screen and (max-width: $breakpointMd) {
.inputs-section {
flex-direction: column;
}
.input {
justify-content: center;
margin: 1em 0;
&_header {
_header {
text-align: center;
}
src/components/ListSection.vue
+261 -250
View File
@@ -1,118 +1,139 @@
<template>
<div class="bottom">
<section class="stock-list">
<div class="stock-list_buttons">
<button class="btn" @click="downloadStock">POBIERZ POCIĄG</button>
<button class="btn" @click="resetStock">ZRESETUJ LISTĘ</button>
<span></span>
<button class="btn" @click="shuffleCars">TASUJ WAGONY</button>
<button class="btn" @click="store.isRandomizerCardOpen = true">LOSUJ SKŁAD</button>
</div>
<section class="stock-list-section">
<div class="list_actions">
<button class="btn" @click="downloadStock">POBIERZ POCIĄG</button>
<button class="btn" @click="resetStock">ZRESETUJ LISTĘ</button>
<span class="spacer"></span>
<button class="btn" @click="shuffleCars">TASUJ WAGONY</button>
<button class="btn" @click="store.isRandomizerCardOpen = true">LOSUJ SKŁAD</button>
</div>
<div class="stock-list_specs">
<div>
Masa: <span class="text--accent">{{ store.totalMass }}t</span> | Długość:
<span class="text--accent">{{ store.totalLength }}m</span>
| Vmax pociągu: <span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
</div>
<div class="stock_actions" v-if="chosenStockVehicle">
<b class="no">
POJAZD NR <span class="text--accent">{{ store.chosenStockListIndex + 1 }}</span> &nbsp;
</b>
<!-- <div v-if="store.chosenRealStockName" style="margin-top: 0.25rem">
<b>{{ store.chosenRealStockName.toLocaleUpperCase() }}</b>
</div> -->
</div>
<div class="count">
<button class="action-btn" @click="subStock(store.chosenStockListIndex)">
<img :src="icons.sub" alt="subtract vehicle count" />
1
</button>
<div class="stock-list_string">
<button class="btn--text" v-if="store.stockList.length > 0" @click="copyToClipboard">
Skopiuj pociąg w formie tekstowej do schowka
<input type="number" name="stock-count" id="stock-count" v-model="chosenStockVehicle.count" />
<button class="action-btn" @click="addStock(store.chosenStockListIndex)">
<img :src="icons.add" alt="add vehicle count" />
1
</button>
</div>
<div class="warnings">
<div class="warning" v-if="locoNotSuitable">
Lokomotywy EP07 i EP08 są przeznaczone jedynie do ruchu pasażerskiego!
</div>
<button class="action-btn" @click="moveUpStock(store.chosenStockListIndex)">
<img :src="icons.higher" alt="move up vehicle" />
Przenieś wyżej
</button>
<div class="warning" v-if="trainTooLong && store.isTrainPassenger">
Maksymalna długość składów pasażerskich nie może przekraczać 350m!
</div>
<button class="action-btn" @click="moveDownStock(store.chosenStockListIndex)">
<img :src="icons.lower" alt="move down vehicle" />
Przenieś niżej
</button>
<div class="warning" v-if="trainTooLong && !store.isTrainPassenger">
Maksymalna długość składów innych niż pasażerskie nie może przekraczać 650m!
</div>
<button class="action-btn" @click="removeStock(store.chosenStockListIndex)">
<img :src="icons.remove" alt="remove vehicle" />
Usuń
</button>
</div>
<div class="warning" v-if="trainTooHeavy">
Ten skład jest za ciężki! Sprawdź
<a
target="_blank"
href="https://docs.google.com/spreadsheets/d/1bFXUsHsAu4youmNz-46Q1HslZaaoklvfoBDS553TnNk/edit"
>
dopuszczalne masy składów
</a>
</div>
<div class="stock_actions no-chosen-vehicle" v-else>Wybierz pojazd z listy poniżej, aby pokazać opcje</div>
<div class="warning" v-if="tooManyLocomotives">Ten skład posiada za dużo pojazdów trakcyjnych!</div>
<div class="stock_specs">
<div>
Masa: <span class="text--accent">{{ store.totalMass }}t</span> | Długość:
<span class="text--accent">{{ store.totalLength }}m</span>
| Vmax pociągu: <span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
</div>
<ul ref="list">
<li v-if="store.stockList.length == 0" class="list-empty">
<div class="item-content">Lista pojazdów jest pusta!</div>
</li>
<!-- <div v-if="store.chosenRealStockName" style="margin-top: 0.25rem">
<b>{{ store.chosenRealStockName.toLocaleUpperCase() }}</b>
</div> -->
</div>
<li
v-for="(stock, i) in store.stockList"
:key="stock.type + i"
:class="{ loco: stock.isLoco }"
tabindex="0"
ref="itemRefs"
<div class="stock_clipboard-text">
<button class="btn--text" v-if="store.stockList.length > 0" @click="copyToClipboard">
Skopiuj pociąg w formie tekstowej do schowka
</button>
</div>
<div class="stock_warnings">
<div class="warning" v-if="locoNotSuitable">
Lokomotywy EP07 i EP08 są przeznaczone jedynie do ruchu pasażerskiego!
</div>
<div class="warning" v-if="trainTooLong && store.isTrainPassenger">
Maksymalna długość składów pasażerskich nie może przekraczać 350m!
</div>
<div class="warning" v-if="trainTooLong && !store.isTrainPassenger">
Maksymalna długość składów innych niż pasażerskie nie może przekraczać 650m!
</div>
<div class="warning" v-if="trainTooHeavy">
Ten skład jest za ciężki! Sprawdź
<a
target="_blank"
href="https://docs.google.com/spreadsheets/d/1bFXUsHsAu4youmNz-46Q1HslZaaoklvfoBDS553TnNk/edit"
>
<div
class="item-content"
@click="onListItemClick(i)"
@dragstart="onDragStart(i)"
@drop="onDrop($event, i)"
@dragover="allowDrop"
draggable="true"
>
<span class="stock__type">
<span v-if="i == store.chosenStockListIndex">&bull;</span>
{{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
</span>
dopuszczalne masy składów
</a>
</div>
<span class="stock__cargo" v-if="stock.cargo"> {{ stock.cargo.id }} </span>
<span class="stock__length"> {{ stock.length }}m </span>
<span class="stock__mass">{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t </span>
<span class="stock__speed"> {{ stock.maxSpeed }}km/h </span>
</div>
<div class="warning" v-if="tooManyLocomotives">Ten skład posiada za dużo pojazdów trakcyjnych!</div>
</div>
<div class="item-actions">
<div class="count">
<button class="action-btn" @click="subStock(i)">
<img :src="icons.sub" alt="subtract vehicle count" />
</button>
<ul ref="list">
<li v-if="store.stockList.length == 0" class="list-empty">
<div class="stock-info">Lista pojazdów jest pusta!</div>
</li>
<span>{{ stock.count }} </span>
<li
v-for="(stock, i) in store.stockList"
:key="stock.type + i"
:class="{ loco: stock.isLoco }"
tabindex="0"
@click="onListItemClick(i)"
<button class="action-btn" @click="addStock(i)">
<img :src="icons.add" alt="add vehicle count" />
</button>
</div>
@keydown.enter="onListItemClick(i)"
@keydown.w="moveUpStock(i)"
@keydown.s="moveDownStock(i)"
@keydown.backspace="removeStock(i)"
<button class="action-btn" @click="moveUpStock(i)">
<img :src="icons.higher" alt="move up vehicle" />
</button>
ref="itemRefs"
>
<div
class="stock-info"
@dragstart="onDragStart(i)"
@drop="onDrop($event, i)"
@dragover="allowDrop"
draggable="true"
>
<span class="stock-info__no" :data-selected="i == store.chosenStockListIndex">
<span v-if="i == store.chosenStockListIndex">&bull;&nbsp;</span>
{{ i + 1 }}.
</span>
<button class="action-btn" @click="moveDownStock(i)">
<img :src="icons.lower" alt="move down vehicle" />
</button>
<span class="stock-info__type">
{{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
</span>
<button class="action-btn" @click="removeStock(i)">
<img :src="icons.remove" alt="remove vehicle" />
</button>
</div>
</li>
</ul>
</section>
</div>
<span class="stock-info__cargo" v-if="stock.cargo"> {{ stock.cargo.id }} </span>
<span class="stock-info__length"> {{ stock.length }}m </span>
<span class="stock-info__mass">{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t </span>
<span class="stock-info__speed"> {{ stock.maxSpeed }}km/h </span>
<span class="stock-info__count"> x{{ stock.count }} </span>
</div>
</li>
</ul>
</section>
</template>
<script lang="ts">
@@ -168,14 +189,22 @@ export default defineComponent({
})
.join(';');
},
chosenStockVehicle() {
return this.store.chosenStockListIndex == -1 ? undefined : this.store.stockList[this.store.chosenStockListIndex];
},
},
methods: {
stockHasWarnings() {
return this.tooManyLocomotives || this.trainTooHeavy || this.trainTooLong || this.locoNotSuitable;
},
copyToClipboard() {
// if (Object.values(this.warnings).some((v) => v.value == true)) {
// alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
// return;
// }
if (this.stockHasWarnings()) {
alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
return;
}
navigator.clipboard.writeText(this.stockString);
@@ -206,7 +235,7 @@ export default defineComponent({
this.store.chosenVehicle = chosenLoco;
this.store.chosenLoco = chosenLoco;
this.store.chosenCargo = null;
// this.store.chosenCargo = null;
} else {
const chosenCar = this.store.carDataList.find((v) => v.type == vehicle.type) || null;
this.store.chosenVehicle = chosenCar;
@@ -238,16 +267,22 @@ export default defineComponent({
},
addStock(index: number) {
if (index == -1) return;
this.store.stockList[index].count++;
},
subStock(index: number) {
if (index == -1) return;
if (this.store.stockList[index].count < 2) return;
this.store.stockList[index].count--;
},
removeStock(index: number) {
if (index == -1) return;
this.store.stockList = this.store.stockList.filter((stock, i) => i != index);
},
@@ -258,15 +293,20 @@ export default defineComponent({
this.store.stockList[index] = this.store.stockList[index - 1];
this.store.stockList[index - 1] = tempStock;
this.store.chosenStockListIndex = index - 1;
},
moveDownStock(index: number) {
if (index == -1) return;
if (index > this.store.stockList.length - 2) return;
const tempStock = this.store.stockList[index];
this.store.stockList[index] = this.store.stockList[index + 1];
this.store.stockList[index + 1] = tempStock;
this.store.chosenStockListIndex = index + 1;
},
shuffleCars() {
@@ -290,10 +330,10 @@ export default defineComponent({
},
downloadStock() {
// if (Object.values(this.warnings).some((v) => v.value == true)) {
// alert('Jazda tym pociągiem może być niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
// return;
// }
if (this.stockHasWarnings()) {
alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
return;
}
const fileName = prompt('Nazwij plik:', 'pociag');
@@ -326,6 +366,8 @@ export default defineComponent({
this.store.stockList[vehicleIndex] = this.store.stockList[this.draggedVehicleID];
this.store.stockList[this.draggedVehicleID] = tempVehicle;
this.store.chosenStockListIndex = vehicleIndex;
},
allowDrop(e: DragEvent) {
@@ -338,34 +380,6 @@ export default defineComponent({
<style lang="scss" scoped>
@import '../styles/global';
.bg-dimmer {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(black, 0.85);
z-index: 100;
}
.bottom {
display: flex;
justify-content: space-between;
margin-top: 2.5em;
@media screen and (max-width: 1150px) {
flex-direction: column;
align-items: center;
.image {
display: flex;
padding: 0 0 2em 0;
}
}
}
.warnings {
margin-top: 0.5em;
}
@@ -384,140 +398,146 @@ export default defineComponent({
}
}
.spacer {
flex: 2 1 10%;
.stock-list-section {
grid-row: 1 / 3;
grid-column: 2;
}
.stock-list {
flex-grow: 3;
.list_actions {
display: flex;
width: 100%;
&_string {
margin-top: 1em;
font-weight: bold;
.spacer {
flex-grow: 2;
}
&_buttons {
display: flex;
button {
font-size: 0.9em;
padding: 0.4em 0.55em;
margin-right: 0.5em;
span {
flex-grow: 2;
&:nth-child(5) {
margin-right: 0;
}
button {
font-size: 0.9em;
padding: 0.4em 0.55em;
margin: 0 0.5em 1em 0;
&:nth-child(5) {
margin-right: 0;
}
&:focus {
color: $accentColor;
border-color: $accentColor;
}
&:focus-visible {
color: $accentColor;
border-color: $accentColor;
}
}
}
ul {
margin-top: 1em;
.stock_actions {
display: flex;
justify-content: center;
align-items: center;
max-height: 500px;
overflow: auto;
flex-wrap: wrap;
margin: 1em 0;
&.no-chosen-vehicle {
font-size: 1.05em;
padding: 0.5em;
}
ul li {
input#stock-count {
width: 3em;
margin: 0;
padding: 0.25em;
outline: none;
cursor: pointer;
border: none;
}
&.list-empty {
border: 1px solid whitesmoke;
padding: 0 0.5em;
button {
margin: 0.25em;
padding: 0.25em;
border: 2px solid gray;
border-radius: 0.25em;
&:focus-visible {
outline: 1px solid white;
}
&.selected .item-content {
color: $accentColor;
}
img {
vertical-align: text-bottom;
margin-right: 0.5em;
&:focus-visible .item-content {
color: $accentColor;
}
&:hover .item-content {
color: $accentColor;
}
display: flex;
align-items: center;
justify-content: space-between;
.item-content {
display: flex;
flex-wrap: wrap;
color: white;
font-weight: 700;
margin: 0.5em 0;
transition: color 100ms;
> span {
padding: 0.5em;
margin-right: 0.25em;
margin-top: 0.25em;
}
@media screen and (max-width: 800px) {
span {
padding: 0.25em;
}
}
}
.item-actions {
display: flex;
align-items: center;
.count {
display: flex;
align-items: center;
margin-right: 0.5em;
span {
margin: 0 0.5em;
/* font-size: 1.25em; */
color: $accentColor;
}
}
img {
vertical-align: middle;
width: 1.3em;
height: 1.3em;
}
button {
margin: 0 0.25em;
&:focus-visible {
outline: 1px solid white;
}
}
width: 1.1em;
height: 1.1em;
}
}
}
.stock {
.stock_clipboard-text {
margin-top: 1em;
font-weight: bold;
}
ul {
margin-top: 1em;
max-height: 500px;
overflow: auto;
padding: 0.25em;
border: 2px solid gray;
}
ul > li {
display: flex;
align-items: center;
justify-content: space-between;
outline: none;
cursor: pointer;
&:focus-visible {
outline: 1px solid white;
}
&:hover .item-content {
color: $accentColor;
}
}
li > .stock-info {
display: flex;
color: white;
font-weight: 700;
margin: 0.25em 0;
transition: color 100ms;
& > span {
padding: 0.5em;
margin-right: 0.25em;
display: flex;
justify-content: center;
align-items: center;
}
}
.stock-info {
&__no,
&__type {
background-color: #222;
}
&.supporter {
background-color: #ff887b;
&__count {
background-color: #e04e3e;
}
&__no {
min-width: 3.5em;
text-align: right;
&[data-selected='true'] {
color: $accentColor;
}
}
@@ -532,18 +552,9 @@ export default defineComponent({
}
}
.card-anim {
&-enter {
opacity: 0;
}
&-enter-active,
&-leave-active {
transition: opacity 300ms;
}
&-leave-to {
opacity: 0;
@media screen and (max-width: $breakpointMd) {
li > .stock-info {
font-size: 0.9em;
}
}
</style>
src/components/RandomizerCard.vue
+4 -3
View File
@@ -252,9 +252,7 @@ export default defineComponent({
if (this.store.stockList.length == 0 || !this.store.stockList[0].isLoco) {
this.store.stockList.length = 0;
let locoSet = this.store.locoDataList
.filter((loco) => loco.power == 'loco-e' || loco.power == 'loco-s')
.filter((loco) => (loco.supportersOnly ? false : true));
let locoSet = this.store.locoDataList.filter((loco) => loco.power == 'loco-e' || loco.power == 'loco-s');
if (this.chosenCarTypes.some((car) => this.cargoTypes.includes(car)))
locoSet = locoSet.filter((loco) => !loco.type.startsWith('EP'));
@@ -303,6 +301,9 @@ export default defineComponent({
totalStockMass += randCargo?.totalMass || randCar.mass;
}
this.store.chosenStockListIndex = -1;
this.store.chosenVehicle = null;
this.store.isRandomizerCardOpen = false;
},
src/components/ReadyStockList.vue
+3
View File
@@ -129,6 +129,9 @@ export default defineComponent({
this.addVehicle(vehicle);
});
this.store.chosenStockListIndex = -1;
this.store.chosenVehicle = null;
this.store.isRealStockListCardOpen = false;
},
src/components/TrainImageSection.vue
+42 -36
View File
@@ -1,5 +1,5 @@
<template>
<section class="train-image">
<section class="train-image-section">
<div class="train-image__wrapper">
<div class="train-image__content">
<div class="no-img" v-if="!store.chosenVehicle">PODGLĄD WYBRANEGO POJAZDU</div>
@@ -12,35 +12,36 @@
@click="onImageClick"
/>
</div>
</div>
<div class="image__info" v-if="store.chosenVehicle">
<b class="text--accent">{{ store.chosenVehicle.type }} </b>
<div class="train-image__info" v-if="store.chosenVehicle">
<b class="text--accent">{{ store.chosenVehicle.type }} </b>
<div style="color: #ccc">
<b>{{
vehicleTypes[
isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType || 'loco-e'
]
}}</b>
<div style="color: #ccc">
<b>{{
vehicleTypes[
isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType || 'loco-e'
]
}}</b>
<div>
{{ store.chosenVehicle.length }}m | {{ store.chosenVehicle.mass }}t | {{ store.chosenVehicle.maxSpeed }} km/h
</div>
<div>
{{ store.chosenVehicle.length }}m | {{ store.chosenVehicle.mass }}t |
{{ store.chosenVehicle.maxSpeed }} km/h
</div>
<div v-if="isLocomotive(store.chosenVehicle)">Typ kabiny: {{ store.chosenVehicle.cabinType }}</div>
<div v-if="isLocomotive(store.chosenVehicle)">Typ kabiny: {{ store.chosenVehicle.cabinType }}</div>
<div v-else>
{{
store.chosenVehicle.useType == 'car-cargo'
? carUsage[store.chosenVehicle.constructionType]
: 'Typ konstrukcji: ' + store.chosenVehicle.constructionType
}}
<div v-else>
{{
store.chosenVehicle.useType == 'car-cargo'
? carUsage[store.chosenVehicle.constructionType]
: 'Typ konstrukcji: ' + store.chosenVehicle.constructionType
}}
</div>
</div>
</div>
</div>
<div class="image__info" v-else>Wybierz pojazd lub wagon, aby zobaczyć jego podgląd powyżej</div>
<div class="train-image__info" v-else>Wybierz pojazd lub wagon, aby zobaczyć jego podgląd powyżej</div>
</div>
</section>
</template>
@@ -96,27 +97,29 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.train-image {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
@import '../styles/global.scss';
margin-top: 2.5em;
.train-image-section {
grid-row: 2;
grid-column: 1;
display: flex;
}
.train-image {
&__wrapper {
max-width: 380px;
width: 22em;
height: 13em;
text-align: center;
}
&__content {
border: 1px solid white;
position: relative;
height: 100%;
width: 22em;
height: 13em;
margin: 0 auto;
&.supporter {
border: 1px solid salmon;
@@ -150,11 +153,8 @@ export default defineComponent({
}
}
.image__info {
text-align: center;
.train-image__info {
margin: 1em 0;
font-size: 1.1em;
b {
@@ -165,5 +165,11 @@ export default defineComponent({
margin: 0.25em 0;
}
}
@media screen and (max-width: $breakpointMd) {
.train-image-section {
justify-content: center;
}
}
</style>
src/styles/global.scss
+3
View File
@@ -1,5 +1,8 @@
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
$breakpointMd: 960px;
$breakpointSm: 550px;
$bgColor: #2c3149;
$textColor: #fff;
$accentColor: #ffd600;