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

Browse Source
This commit is contained in:
Spythere
2023-07-14 01:52:36 +02:00
parent cbe983f96c
commit d932ebfa50
2 changed files with 100 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/StockSection.vue
+7
View File
@@ -112,6 +112,7 @@ function chooseSection(sectionId: SectionMode) {
.section_modes { .section_modes {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 0.5em; gap: 0.5em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
@@ -138,5 +139,11 @@ function chooseSection(sectionId: SectionMode) {
} }
} }
} }
@media screen and (max-width: 650px) {
.section_modes {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
}
</style> </style>
src/components/tabs/WikiListTab.vue
+93 -73
View File
@@ -1,81 +1,87 @@
<template> <template>
<section class="wiki-list"> <section class="wiki-list tab">
<div class="actions-panel"> <div class="tab_header">
<div class="actions-panel_vehicles"> <h2>LISTA DOSTĘPNYCH POJAZDÓW</h2>
<button class="btn btn--choice" @click="changeWikiMode('locomotives')">POJ. TRAKCYJNE</button>
<button class="btn btn--choice" @click="changeWikiMode('carWagons')">WAGONY</button>
</div>
<div class="actions-panel_search">
<input type="text" placeholder="Wyszukaj pojazd..." v-model="searchedVehicleTypeName" />
</div>
</div> </div>
<div class="table-wrapper" @scroll="scrollEvent" ref="table-wrapper"> <div class="tab_content">
<table> <div class="actions-panel">
<thead> <div class="actions-panel_vehicles">
<tr> <button class="btn btn--choice" @click="changeWikiMode('locomotives')">POJ. TRAKCYJNE</button>
<th v-for="header in wikiMode == 'locomotives' ? locoHeaders : carHeaders" @click="toggleSorter(header)"> <button class="btn btn--choice" @click="changeWikiMode('carWagons')">WAGONY</button>
{{ header.name }} </div>
<span v-if="currentModeSorter.id == header.id"> <div class="actions-panel_search">
{{ currentModeSorter.direction == 1 ? `&uArr;` : `&dArr;` }} <input type="text" placeholder="Wyszukaj pojazd..." v-model="searchedVehicleTypeName" />
</span> </div>
</th> </div>
</tr>
</thead>
<tbody v-if="wikiMode == 'locomotives'"> <div class="table-wrapper" @scroll="scrollEvent" ref="table-wrapper">
<tr <table>
v-for="loco in computedLocoList" <thead>
@click="previewLocomotive(loco)" <tr>
@keydown.enter="previewLocomotive(loco)" <th v-for="header in wikiMode == 'locomotives' ? locoHeaders : carHeaders" @click="toggleSorter(header)">
@dblclick="addLocomotive(loco)" {{ header.name }}
tabindex="0"
>
<td>
<img
:src="`https://spythere.github.io/api/td2/images/${loco.type}--300px.jpg`"
loading="lazy"
:alt="`Lokomotywa ${loco.type}`"
/>
</td>
<td>{{ loco.type }}</td> <span v-if="currentModeSorter.id == header.id">
<td>{{ vehicleTypes[loco.power] }}</td> {{ currentModeSorter.direction == 1 ? `&uArr;` : `&dArr;` }}
<td>{{ loco.constructionType }}</td> </span>
<td>{{ locoSupportsColdStart(loco.constructionType) ? `&check;` : '&cross;' }}</td> </th>
<td>{{ loco.length }}m</td> </tr>
<td>{{ loco.mass }}t</td> </thead>
<td>{{ loco.maxSpeed }}km/h</td>
</tr>
</tbody>
<tbody v-else> <tbody v-if="wikiMode == 'locomotives'">
<tr <tr
v-for="car in computedCarList" v-for="loco in computedLocoList"
@keydow.enter="previewCarWagon(car)" @click="previewLocomotive(loco)"
@click="previewCarWagon(car)" @keydown.enter="previewLocomotive(loco)"
@dblclick="addCarWagon(car)" @dblclick="addLocomotive(loco)"
tabindex="0" tabindex="0"
> >
<td> <td>
<img <img
:src="`https://spythere.github.io/api/td2/images/${car.type}--300px.jpg`" :src="`https://spythere.github.io/api/td2/images/${loco.type}--300px.jpg`"
loading="lazy" loading="lazy"
:alt="`Lokomotywa ${car.type}`" :alt="`Lokomotywa ${loco.type}`"
/> />
</td> </td>
<td>{{ car.type }}</td> <td>{{ loco.type }}</td>
<td>{{ car.constructionType }}</td> <td>{{ vehicleTypes[loco.power] }}</td>
<td>{{ car.length }}m</td> <td>{{ loco.constructionType }}</td>
<td>{{ car.mass }}t</td> <td>{{ locoSupportsColdStart(loco.constructionType) ? `&check;` : '&cross;' }}</td>
<td>{{ car.maxSpeed }}km/h</td> <td>{{ loco.length }}m</td>
<td>{{ car.cargoList.length == 0 ? '-' : car.cargoList.length }}</td> <td>{{ loco.mass }}t</td>
</tr> <td>{{ loco.maxSpeed }}km/h</td>
</tbody> </tr>
</table> </tbody>
<tbody v-else>
<tr
v-for="car in computedCarList"
@keydow.enter="previewCarWagon(car)"
@click="previewCarWagon(car)"
@dblclick="addCarWagon(car)"
tabindex="0"
>
<td>
<img
:src="`https://spythere.github.io/api/td2/images/${car.type}--300px.jpg`"
loading="lazy"
:alt="`Lokomotywa ${car.type}`"
/>
</td>
<td>{{ car.type }}</td>
<td>{{ car.constructionType }}</td>
<td>{{ car.length }}m</td>
<td>{{ car.mass }}t</td>
<td>{{ car.maxSpeed }}km/h</td>
<td>{{ car.cargoList.length == 0 ? '-' : car.cargoList.length }}</td>
</tr>
</tbody>
</table>
</div>
</div> </div>
</section> </section>
</template> </template>
@@ -248,6 +254,8 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../styles/tab.scss';
.actions-panel { .actions-panel {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -308,16 +316,28 @@ export default defineComponent({
td { td {
text-align: center; text-align: center;
padding: 0.25em; padding: 0.25em;
height: 100px;
} }
td:first-child { td:first-child {
width: 150px; width: 120px;
} }
td img { td img {
display: block; display: block;
width: 150px; width: 120px;
}
}
@media screen and (max-width: $breakpointMd) {
.wiki-list table {
td {
width: 100px;
height: auto;
img {
width: 6em;
}
}
} }
} }
</style> </style>