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/App.vue
+6 -15
View File
@@ -16,7 +16,6 @@
<div class="info_counter">
<img src="@/assets/icon-dispatcher.svg" alt="icon dispatcher" />
<span>{{ data.stationCount }}</span>
<span>{{ data.trainCount }}</span>
<img src="@/assets/icon-train.svg" alt="icon train" />
</div>
@@ -129,11 +128,15 @@ export default class App extends Vue {
overflow: hidden;
font-size: calc(0.4rem + 0.4vw);
font-size: calc(0.7rem + 0.2vw);
@include bigScreen {
font-size: 1rem;
}
@include smallScreen {
font-size: 0.65rem;
}
}
// CONTAINER
@@ -155,10 +158,6 @@ export default class App extends Vue {
display: flex;
justify-content: center;
@include smallScreen() {
font-size: 1.2em;
}
}
.header_brand {
@@ -180,10 +179,6 @@ export default class App extends Vue {
margin: 0 0.3em;
padding: 0.2em;
@include smallScreen() {
font-size: 1.5em;
}
}
.header_links {
@@ -192,12 +187,8 @@ export default class App extends Vue {
border-radius: 0.7em;
font-size: 1.2em;
font-size: 1.35em;
padding: 0.5em;
@include smallScreen() {
font-size: 1.4em;
}
}
// COUNTER
src/components/Global/UpdateModal.vue
+2 -4
View File
@@ -55,8 +55,6 @@ export default class UpdateModal extends Vue {
max-height: 95vh;
overflow: auto;
font-size: 1.2em;
transform: translate(-50%, -50%);
background: rgba(black, 0.85);
@@ -65,13 +63,13 @@ export default class UpdateModal extends Vue {
text-align: center;
@include smallScreen() {
font-size: 1.2em;
font-size: 0.8em;
width: 95%;
}
}
.header {
font-size: 5em;
font-size: 4.5em;
img {
width: 0.8em;
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 {