Spythere/pojazdownik
1
0
Fork 0
mirror of https://github.com/Spythere/pojazdownik.git synced 2026-05-04 20:18:12 +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/App.vue
+12 -7
View File
@@ -152,13 +152,14 @@ main {
display: grid; display: grid;
gap: 1em 3em; gap: 1em 3em;
width: 100%; width: 100vw;
max-width: 1200px; max-width: 1300px;
grid-template-columns: 1fr 2fr; grid-template-columns: 1fr 2fr;
grid-template-areas: 'inputs list' 'image list'; grid-template-areas: 'inputs list' 'image list';
padding: 0.5em;
#inputs-area { #inputs-area {
grid-area: inputs; grid-area: inputs;
} }
@@ -181,15 +182,19 @@ footer {
/* MOBILE VIEWS */ /* MOBILE VIEWS */
@media screen and (max-width: 1100px) {
main {
grid-template-columns: 1fr;
grid-template-areas: 'inputs' 'image' 'list';
justify-items: center;
}
}
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
#app { #app {
font-size: calc(0.75vw + 0.6rem); font-size: calc(0.75vw + 0.6rem);
} }
main {
margin-top: 3.5em;
}
header { header {
font-size: 0.85em; font-size: 0.85em;
src/components/InputsSection.vue
+64 -30
View File
@@ -17,7 +17,7 @@
</option> </option>
</select> </select>
<button class="btn" @click="addVehicle" title="Dodaj pojazd">DODAJ</button> <button class="btn" @click="addVehicle">DODAJ</button>
</div> </div>
<div class="input_list type"> <div class="input_list type">
@@ -33,17 +33,34 @@
{{ car.type }} {{ car.type }}
</option> </option>
</select> </select>
<button
class="btn"
@click="switchVehicles"
:disabled="store.chosenStockListIndex == -1"
:data-disabled="store.chosenStockListIndex == -1"
>
ZAMIEŃ
</button>
</div> </div>
<div class="input_list type"> <div class="input_list cargo">
<select <select
id="cargo-list" id="cargo-select"
v-model="store.cargoOptions" :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" > <option v-for="cargo in store.chosenCar?.cargoList" :value="cargo" :key="cargo.id">
{{ cargo }} {{ cargo.id }}
</option> </option>
</select> </select>
</div> </div>
@@ -107,13 +124,11 @@ export default defineComponent({
computed: { computed: {
locoOptions() { locoOptions() {
return this.store.locoDataList return this.store.locoDataList.sort((a, b) => (a.type > b.type ? 1 : -1));
.sort((a, b) => (a.type > b.type ? 1 : -1))
.sort((a) => (a.supportersOnly ? 1 : -1));
}, },
carOptions() { 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; const vehicle = this.store.chosenVehicle;
if (!vehicle) return; if (!vehicle) return;
@@ -153,28 +170,45 @@ export default defineComponent({
supportersOnly: vehicle.supportersOnly, 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) { // if (isLocomotive(vehicle) && currentStock && currentStock.type == vehicle.type) {
this.store.stockList[this.store.chosenStockListIndex].count++; // this.store.stockList[this.store.chosenStockListIndex].count++;
return; // return;
} // }
if ( // if (
!isLocomotive(vehicle) && // !isLocomotive(vehicle) &&
currentStock && // currentStock &&
currentStock.type == vehicle.type && // currentStock.type == vehicle.type &&
currentStock.cargo?.id == this.store.chosenCargo?.id // currentStock.cargo?.id == this.store.chosenCargo?.id
) { // ) {
this.store.stockList[this.store.chosenStockListIndex].count++; // this.store.stockList[this.store.chosenStockListIndex].count++;
return; // return;
} // }
this.store.stockList[this.store.chosenStockListIndex] = stockObj; this.store.stockList[this.store.chosenStockListIndex] = stockObj;
return; },
}
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 = const previousStock =
this.store.stockList.length > 0 ? this.store.stockList[this.store.stockList.length - 1] : null; 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 class="warning" v-if="warnings.tooManyLocos.value">Ten skład posiada za dużo pojazdów trakcyjnych!</div>
</div> --> </div> -->
<ul ref="list" > <ul ref="list">
<li v-if="store.stockList.length == 0" class="list-empty"> <li v-if="store.stockList.length == 0" class="list-empty">
<div class="item-content">Lista pojazdów jest pusta!</div> <div class="item-content">Lista pojazdów jest pusta!</div>
</li> </li>
@@ -61,22 +61,23 @@
<li <li
v-for="(stock, i) in store.stockList" v-for="(stock, i) in store.stockList"
:key="stock.type + i" :key="stock.type + i"
:class="{ loco: stock.isLoco, selected: store.chosenStockListIndex == i }" :class="{ loco: stock.isLoco }"
:data-id="i"
tabindex="0" tabindex="0"
@focus="onListItemFocus(i)"
ref="itemRefs" ref="itemRefs"
> >
<div <div
class="item-content" class="item-content"
@click="onListItemClick(i)"
@dragstart="onDragStart(i)" @dragstart="onDragStart(i)"
@drop="onDrop($event, i)" @drop="onDrop($event, i)"
@dragover="allowDrop" @dragover="allowDrop"
draggable="true" 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) }} {{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
</span> </span>
<span class="stock__cargo" v-if="stock.cargo"> {{ stock.cargo.id }} </span> <span class="stock__cargo" v-if="stock.cargo"> {{ stock.cargo.id }} </span>
<span class="stock__length"> {{ stock.length }}m </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__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: () => ({ data: () => ({
icons: { icons: {
add: addIcon, add: addIcon,
@@ -197,10 +181,16 @@ export default defineComponent({
}, 20); }, 20);
}, },
onListItemFocus(vehicleID: number) { onListItemClick(vehicleID: number) {
const vehicle = this.store.stockList[vehicleID]; 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; if (this.store.chosenVehicle?.imageSrc != vehicle.imgSrc) this.store.imageLoading = true;
@@ -448,7 +438,7 @@ export default defineComponent({
color: $accentColor; color: $accentColor;
} }
&:focus .item-content { &:focus-visible .item-content {
color: $accentColor; color: $accentColor;
} }
@@ -470,7 +460,7 @@ export default defineComponent({
transition: color 100ms; transition: color 100ms;
span { > span {
padding: 0.5em; padding: 0.5em;
margin-right: 0.25em; margin-right: 0.25em;
margin-top: 0.25em; margin-top: 0.25em;
@@ -511,7 +501,7 @@ export default defineComponent({
button { button {
margin: 0 0.25em; margin: 0 0.25em;
&:focus { &:focus-visible {
outline: 1px solid white; outline: 1px solid white;
} }
} }
src/components/RandomizerCard.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template> <template>
<div class="g-card-dimmer" v-if="store.isRandomizerCardOpen" @click="store.isRandomizerCardOpen = false"></div>
<div class="card"> <div class="card">
<!-- <button class="btn" @click="closeCard">X</button> -->
<div class="wrapper"> <div class="wrapper">
<!-- <h1>LOSUJ SKŁAD <img :src="icons.randomize" alt="losuj skład" /></h1> <!-- <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> <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="ready-stock-list" v-if="store.isRealStockListCardOpen">
<div class="top-sticky"> <div class="top-sticky">
<button class="btn btn--text exit" @click="store.isRealStockListCardOpen = false">&lt; POWRÓT</button> <button class="btn btn--text exit" @click="store.isRealStockListCardOpen = false">&lt; POWRÓT</button>
src/styles/global.scss
+119 -100
View File
@@ -1,168 +1,187 @@
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap"); @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
$bgColor: #2C3149; $bgColor: #2c3149;
$textColor: #fff; $textColor: #fff;
$accentColor: #FFD600; $accentColor: #ffd600;
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 0.5rem; width: 0.5rem;
height: 0.5rem; height: 0.5rem;
&-track { &-track {
background: #222; background: #222;
border-radius: 0.5rem; border-radius: 0.5rem;
} }
&-thumb { &-thumb {
border-radius: 1rem; border-radius: 1rem;
background: #777; background: #777;
} }
} }
body, body,
html { html {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: "Lato", sans-serif; font-family: 'Lato', sans-serif;
background-color: $bgColor; background-color: $bgColor;
width: 100vw; width: 100vw;
overflow-x: hidden; overflow-x: hidden;
} }
*, *,
*::before, *::before,
*::after { *::after {
box-sizing: border-box; box-sizing: border-box;
} }
a { a {
color: white;
text-decoration: none;
&:visited {
color: white; color: white;
text-decoration: none; }
&:visited { &:hover,
color: white; &:focus {
} color: $accentColor;
}
&:hover, &:focus {
color: $accentColor;
}
} }
p { p {
font-size: 1.2em; font-size: 1.2em;
font-weight: bold; font-weight: bold;
color: $accentColor; color: $accentColor;
} }
select, select,
option, option,
input, input,
button { button {
font-family: "Lato", sans-serif; font-family: 'Lato', sans-serif;
font-size: 1em; font-size: 1em;
} }
button { button {
border: none; border: none;
outline: none; outline: none;
background: none; background: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
cursor: pointer; cursor: pointer;
font-size: 1em; font-size: 1em;
color: white; color: white;
&:hover { &:hover {
color: $accentColor; color: $accentColor;
} }
} }
button.btn { button.btn {
padding: 0.25em 1em; padding: 0.25em 1em;
border-radius: 0.25em; border-radius: 0.25em;
border: 2px solid white; border: 2px solid white;
outline: none; outline: none;
background: none; background: none;
transition: all 250ms;
&:hover {
color: $accentColor;
border-color: $accentColor;
}
&:focus {
color: $accentColor;
}
&[data-disabled='true'] {
user-select: none;
pointer-events: none;
-moz-user-select: none;
-webkit-user-select: none;
opacity: 0.7;
}
&--text {
font-weight: bold;
transition: all 250ms; transition: all 250ms;
border: none;
&:hover { }
color: $accentColor;
border-color: $accentColor;
}
&:focus {
color: $accentColor;
}
&--text {
font-weight: bold;
transition: all 250ms;
border: none;
}
} }
button.btn-rect { button.btn-rect {
width: 1.5em; width: 1.5em;
height: 1.5em; height: 1.5em;
font-size: 1.65em; font-size: 1.65em;
line-height: 1em; line-height: 1em;
border-radius: 0.25em; border-radius: 0.25em;
border: 2px solid black; border: 2px solid black;
outline: none; outline: none;
background: white; background: white;
color: black; color: black;
transition: all 250ms;
transition: all 250ms; &:hover {
color: white;
&:hover { background-color: black;
color: white; }
background-color: black;
}
} }
select { select {
background: none; background: none;
border: 2px solid white; border: 2px solid white;
outline: none; outline: none;
padding: 0.25em 0.35em; padding: 0.25em 0.35em;
color: white; color: white;
font-size: 1em; font-size: 1em;
width: 18em; width: 18em;
} }
option { option {
color: black; color: black;
border: none; border: none;
} }
ul { ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.text { .text {
&--accent { &--accent {
color: $accentColor; color: $accentColor;
} }
&--grayed { &--grayed {
color: gray; color: gray;
} }
}
.g-card-dimmer {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
cursor: pointer;
background-color: #000000aa;
z-index: 99;
} }