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

Poprawki layoutu i responsywności

Browse Source
This commit is contained in:
Spythere
2022-07-29 00:28:00 +02:00
parent a539719f76
commit 767e0839e0
6 changed files with 215 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/InputsSection.vue
+64 -30
View File
@@ -17,7 +17,7 @@
</option>
</select>
<button class="btn" @click="addVehicle" title="Dodaj pojazd">DODAJ</button>
<button class="btn" @click="addVehicle">DODAJ</button>
</div>
<div class="input_list type">
@@ -33,17 +33,34 @@
{{ 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 type">
<div class="input_list cargo">
<select
id="cargo-list"
v-model="store.cargoOptions"
id="cargo-select"
:disabled="
(store.chosenCar && !store.chosenCar.loadable) ||
(store.chosenCar && store.chosenCar.useType == 'car-passenger') ||
!store.chosenCar
"
data-select="cargo"
data-ignore-outside="1"
v-model="store.chosenCargo"
>
<option :value="null" disabled>Wybierz wagon</option>
<option :value="null" v-if="!store.chosenCar || !store.chosenCar.loadable">brak dostępnych ładunków</option>
<option :value="null" v-else>próżny</option>
<option v-for="cargo in store.cargoOptions" >
{{ cargo }}
<option v-for="cargo in store.chosenCar?.cargoList" :value="cargo" :key="cargo.id">
{{ cargo.id }}
</option>
</select>
</div>
@@ -107,13 +124,11 @@ export default defineComponent({
computed: {
locoOptions() {
return this.store.locoDataList
.sort((a, b) => (a.type > b.type ? 1 : -1))
.sort((a) => (a.supportersOnly ? 1 : -1));
return this.store.locoDataList.sort((a, b) => (a.type > b.type ? 1 : -1));
},
carOptions() {
return this.store.carDataList.sort((a, b) => (a.type > b.type ? 1 : -1)).sort((a) => (a.supportersOnly ? 1 : -1));
return this.store.carDataList.sort((a, b) => (a.type > b.type ? 1 : -1));
},
},
@@ -134,7 +149,9 @@ export default defineComponent({
});
},
addVehicle() {
switchVehicles() {
if (this.store.chosenStockListIndex == -1) return;
const vehicle = this.store.chosenVehicle;
if (!vehicle) return;
@@ -153,28 +170,45 @@ export default defineComponent({
supportersOnly: vehicle.supportersOnly,
};
if (this.store.chosenStockListIndex != -1) {
let currentStock = this.store.stockList[this.store.chosenStockListIndex];
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) {
// 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++;
// if (
// !isLocomotive(vehicle) &&
// currentStock &&
// currentStock.type == vehicle.type &&
// currentStock.cargo?.id == this.store.chosenCargo?.id
// ) {
// this.store.stockList[this.store.chosenStockListIndex].count++;
return;
}
// return;
// }
this.store.stockList[this.store.chosenStockListIndex] = stockObj;
return;
}
this.store.stockList[this.store.chosenStockListIndex] = stockObj;
},
addVehicle() {
const vehicle = this.store.chosenVehicle;
if (!vehicle) return;
const stockObj: IStock = {
useType: isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
type: vehicle.type,
length: vehicle.length,
mass: vehicle.mass,
maxSpeed: vehicle.maxSpeed,
isLoco: isLocomotive(vehicle),
cargo:
!isLocomotive(vehicle) && vehicle.loadable && this.store.chosenCargo ? this.store.chosenCargo : undefined,
count: 1,
imgSrc: vehicle.imageSrc,
supportersOnly: vehicle.supportersOnly,
};
const previousStock =
this.store.stockList.length > 0 ? this.store.stockList[this.store.stockList.length - 1] : null;
src/components/ListSection.vue
+17 -27
View File
@@ -53,7 +53,7 @@
<div class="warning" v-if="warnings.tooManyLocos.value">Ten skład posiada za dużo pojazdów trakcyjnych!</div>
</div> -->
<ul ref="list" >
<ul ref="list">
<li v-if="store.stockList.length == 0" class="list-empty">
<div class="item-content">Lista pojazdów jest pusta!</div>
</li>
@@ -61,22 +61,23 @@
<li
v-for="(stock, i) in store.stockList"
:key="stock.type + i"
:class="{ loco: stock.isLoco, selected: store.chosenStockListIndex == i }"
:data-id="i"
:class="{ loco: stock.isLoco }"
tabindex="0"
@focus="onListItemFocus(i)"
ref="itemRefs"
>
<div
class="item-content"
@click="onListItemClick(i)"
@dragstart="onDragStart(i)"
@drop="onDrop($event, i)"
@dragover="allowDrop"
draggable="true"
>
<span class="stock__type" :class="{ supporter: stock.supportersOnly }">
<span class="stock__type">
<span v-if="i == store.chosenStockListIndex">&bull;</span>
{{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
</span>
<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>
@@ -137,23 +138,6 @@ export default defineComponent({
};
},
mounted() {
document.addEventListener('click', (event: Event) => {
if (!event.target) return;
event.stopPropagation();
const targetNode = event.target as HTMLElement;
const attr = targetNode.attributes.getNamedItem('data-ignore-outside');
if (!attr && !/select|option/i.test(targetNode.tagName)) {
console.log(targetNode.tagName);
this.store.chosenStockListIndex = -1;
}
});
},
data: () => ({
icons: {
add: addIcon,
@@ -197,10 +181,16 @@ export default defineComponent({
}, 20);
},
onListItemFocus(vehicleID: number) {
onListItemClick(vehicleID: number) {
const vehicle = this.store.stockList[vehicleID];
// this.store.chosenStockListIndex = vehicleID;
this.store.chosenStockListIndex =
this.store.chosenStockListIndex == vehicleID && this.store.chosenVehicle?.type == vehicle.type ? -1 : vehicleID;
if (this.store.chosenStockListIndex == -1) {
this.store.chosenVehicle = null;
return;
}
if (this.store.chosenVehicle?.imageSrc != vehicle.imgSrc) this.store.imageLoading = true;
@@ -448,7 +438,7 @@ export default defineComponent({
color: $accentColor;
}
&:focus .item-content {
&:focus-visible .item-content {
color: $accentColor;
}
@@ -470,7 +460,7 @@ export default defineComponent({
transition: color 100ms;
span {
> span {
padding: 0.5em;
margin-right: 0.25em;
margin-top: 0.25em;
@@ -511,7 +501,7 @@ export default defineComponent({
button {
margin: 0 0.25em;
&:focus {
&:focus-visible {
outline: 1px solid white;
}
}
src/components/RandomizerCard.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div class="g-card-dimmer" v-if="store.isRandomizerCardOpen" @click="store.isRandomizerCardOpen = false"></div>
<div class="card">
<!-- <button class="btn" @click="closeCard">X</button> -->
<div class="wrapper">
<!-- <h1>LOSUJ SKŁAD <img :src="icons.randomize" alt="losuj skład" /></h1>
src/components/ReadyStockList.vue
+1
View File
@@ -1,4 +1,5 @@
<template>
<div class="g-card-dimmer" v-if="store.isRealStockListCardOpen" @click="store.isRealStockListCardOpen = false"></div>
<div class="ready-stock-list" v-if="store.isRealStockListCardOpen">
<div class="top-sticky">
<button class="btn btn--text exit" @click="store.isRealStockListCardOpen = false">&lt; POWRÓT</button>