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

Poprawki w responsywności wyglądu

Browse Source
This commit is contained in:
Spythere
2021-02-20 22:23:46 +01:00
parent e932f0bfc1
commit 82c7cdf354
4 changed files with 20 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/StationsView.vue
+6 -28
View File
@@ -6,11 +6,7 @@
<div class="stations_body">
<div class="body_bar">
<div class="bar_actions">
<button
class="action-btn"
:class="{ open: filterCardOpen }"
@click="() => toggleCardsState('filter')"
>
<button class="action-btn" :class="{ open: filterCardOpen }" @click="() => toggleCardsState('filter')">
<img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" />
<p>FILTRY</p>
</button>
@@ -24,21 +20,13 @@
<div class="bar_indicators">
<transition name="indicator-anim">
<span
class="indicator_scenery-data"
v-if="data.dataConnectionStatus < 2"
:class="dataStatusClass"
>
<span class="indicator_scenery-data" v-if="data.dataConnectionStatus < 2" :class="dataStatusClass">
<img :src="trainIcon" alt="icon-train" />
</span>
</transition>
<transition name="indicator-anim">
<span
class="indicator_timetable-data"
v-if="data.timetableDataStatus < 2"
:class="timetableDataStatusClass"
>
<span class="indicator_timetable-data" v-if="data.timetableDataStatus < 2" :class="timetableDataStatusClass">
<img :src="timetableIcon" alt="icon-timetable" />
</span>
</transition>
@@ -46,12 +34,7 @@
</div>
<div class="body_table">
<StationTable
:stations="computedStations"
:sorterActive="filterManager.getSorter()"
:setFocusedStation="setFocusedStation"
:changeSorter="changeSorter"
/>
<StationTable :stations="computedStations" :sorterActive="filterManager.getSorter()" :setFocusedStation="setFocusedStation" :changeSorter="changeSorter" />
</div>
</div>
</div>
@@ -61,12 +44,7 @@
</transition>
<transition name="card-anim">
<FilterCard
v-if="filterCardOpen"
:exit="() => toggleCardsState('filter')"
@changeFilterValue="changeFilterValue"
@resetFilters="resetFilters"
/>
<FilterCard v-if="filterCardOpen" :exit="() => toggleCardsState('filter')" @changeFilterValue="changeFilterValue" @resetFilters="resetFilters" />
</transition>
</div>
</template>
@@ -247,7 +225,7 @@ export default class StationsView extends Vue {
.stations_view {
position: relative;
font-size: 0.95em;
font-size: 0.9em;
padding: 1rem 0;
min-height: 100%;
src/views/TrainsView.vue
+6 -15
View File
@@ -3,19 +3,11 @@
<div class="body-wrapper">
<div class="options-wrapper">
<TrainSorter :trainList="computedTrains" @changeSorter="changeSorter" />
<TrainSearch
@changeSearchedTrain="changeSearchedTrain"
@changeSearchedDriver="changeSearchedDriver"
:passedSearchedTrain="passedSearchedTrain"
:focusedTrain="focusedTrain"
/>
<TrainSearch @changeSearchedTrain="changeSearchedTrain" @changeSearchedDriver="changeSearchedDriver" :passedSearchedTrain="passedSearchedTrain" :focusedTrain="focusedTrain" />
</div>
<TrainStats :trains="trains" />
<TrainTable
:computedTrains="computedTrains"
@changeFocusedTrain="changeFocusedTrain"
/>
<TrainTable :computedTrains="computedTrains" @changeFocusedTrain="changeFocusedTrain" />
</div>
</section>
</template>
@@ -79,8 +71,8 @@ export default class TrainsView extends Vue {
: true) &&
(this.searchedDriver.length > 0
? train.driverName
.toLowerCase()
.includes(this.searchedDriver.toLowerCase())
.toLowerCase()
.includes(this.searchedDriver.toLowerCase())
: true)
)
.sort((a, b) => {
@@ -93,7 +85,8 @@ export default class TrainsView extends Vue {
case "distance":
if (!a.timetableData || !b.timetableData) return 0;
if (a.timetableData.routeDistance > b.timetableData.routeDistance) return this.sorterActive.dir;
if (a.timetableData.routeDistance > b.timetableData.routeDistance)
return this.sorterActive.dir;
else return -this.sorterActive.dir;
break;
@@ -135,8 +128,6 @@ export default class TrainsView extends Vue {
max-width: 1300px;
padding: 0 0.5rem;
font-size: calc(0.4rem + 0.4vw);
}
.options-wrapper {