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 headerze i stopce

Browse Source
This commit is contained in:
Spythere
2023-04-13 15:25:39 +02:00
parent 4adb76eeb0
commit 3d0695a17b
8 changed files with 94 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.scss
+5
View File
@@ -91,6 +91,11 @@ footer.app_footer {
max-width: 100%;
padding: 0.5em;
img {
width: 1.1em;
vertical-align: text-bottom;
}
z-index: 10;
background: #111;
src/App.vue
+2
View File
@@ -23,6 +23,8 @@
<a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
{{ new Date().getUTCFullYear() }} |
<a :href="releaseURL" target="_blank">v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}</a>
<br />
<a href="https://discord.gg/x2mpNN3svk"><img :src="getIcon('discord', 'png')" alt="">&nbsp;<b>Discord Stacjownika</b></a>
<div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
</footer>
src/components/App/AppHeader.vue
+27 -65
View File
@@ -6,16 +6,6 @@
<img :src="getIcon('pl')" alt="icon-pl" @click="changeLang('en')" v-if="currentLang == 'pl'" />
<img :src="getIcon('en', 'jpg')" alt="icon-en" @click="changeLang('pl')" v-else />
</span>
<span class="icons-bottom">
<a href="https://www.paypal.com/paypalme/spythere" target="_blank">
<img :src="getIcon('dollar')" alt="icon paypal" />
</a>
<a href="https://discord.gg/x2mpNN3svk" target="_blank">
<img :src="getIcon('discord', 'png')" alt="icon discord" />
</a>
</span>
</div>
<div class="header_body">
@@ -33,6 +23,12 @@
<div class="info_counter">
<img :src="getIcon('dispatcher')" alt="icon dispatcher" />
<span class="text--primary">{{ onlineDispatchersCount }}</span>
<!-- <span class="g-tooltip">
<b class="text--primary">{{ factorU }}U</b>
<div class="content">Test</div>
</span> -->
<span class="text--grayed"> / </span>
<span class="text--primary">{{ onlineTrainsCount }}</span>
<img :src="getIcon('train')" alt="icon train" />
@@ -98,11 +94,17 @@ export default defineComponent({
onlineTrainsCount() {
return this.store.trainList.filter((train) => train.online).length;
},
onlineDispatchersCount() {
return this.store.stationList.filter(
(station) => station.onlineInfo && station.onlineInfo.region == this.store.region.id
).length;
},
factorU() {
return this.onlineDispatchersCount == 0 ? '-' : (this.onlineTrainsCount / this.onlineDispatchersCount).toFixed(2);
},
computedRegions() {
return options.regions.map((region) => {
const regionStationCount =
@@ -135,22 +137,19 @@ export default defineComponent({
.header {
&_body {
max-width: 21em;
position: relative;
@include smallScreen {
max-width: 18em;
}
}
&_container {
display: flex;
justify-content: center;
position: relative;
width: 1350px;
padding: 0.5em 0.3em 0 0.3em;
border-radius: 0 0 1em 1em;
@include smallScreen {
position: relative;
margin-top: 0.5em;
}
}
&_brand {
@@ -158,6 +157,8 @@ export default defineComponent({
img {
width: 100%;
max-width: 20em;
margin: 0 auto;
}
}
@@ -165,9 +166,7 @@ export default defineComponent({
&_info {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
max-width: 100%;
font-size: 1.2em;
font-size: 1.15em;
}
&_links {
@@ -184,57 +183,20 @@ export default defineComponent({
position: absolute;
right: 0;
top: 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
padding: 0.5em 0.5em;
padding: 0.5em;
@include smallScreen() {
right: auto;
left: 0.75em;
padding: 0;
align-items: center;
@include smallScreen {
transform: translateX(70%);
}
}
}
// ICONS
.icons {
position: relative;
&-top {
img {
width: 2.5em;
cursor: pointer;
}
margin-bottom: 0.5em;
}
&-bottom {
display: flex;
a {
margin-left: 0.6em;
user-select: none;
}
img {
width: 1.9em;
}
@include smallScreen() {
flex-direction: column;
a {
margin: 0.25em 0;
}
}
.icons-top {
img {
width: 2.5em;
cursor: pointer;
}
}
src/components/App/StatusIndicator.vue
+11 -14
View File
@@ -303,9 +303,11 @@ export default defineComponent({
.status-indicator {
position: absolute;
left: 110%;
bottom: 0;
right: 0;
z-index: 100;
transform: translateX(1.5em);
}
.indicator {
@@ -330,7 +332,7 @@ export default defineComponent({
background-color: #171717;
border-radius: 0.75em;
min-width: 13em;
width: 13em;
text-align: center;
overflow: none;
@@ -354,22 +356,16 @@ export default defineComponent({
}
@include midScreen() {
left: 50%;
top: 100%;
transform: translate(-50%, 0);
margin-left: 0;
margin-top: 0.75em;
left: auto;
right: 200%;
&::before {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #171717;
border-left: 12px solid #171717;
right: 0;
left: auto;
top: 0;
left: 50%;
transform: translate(-50%, -100%);
transform: translate(100%, -50%);
}
}
@@ -379,3 +375,4 @@ export default defineComponent({
}
}
</style>
src/components/Global/SelectBox.vue
+6 -30
View File
@@ -3,6 +3,10 @@
<div class="select-box_content">
<button class="selected" @click="toggleBox">
<span>{{ computedSelectedItem.selectedValue || computedSelectedItem.value }}</span>
<div class="arrow">
<img :src="listOpen ? getIcon('arrow-asc') : getIcon('arrow-desc')" alt="arrow-icon" />
</div>
</button>
<ul class="options" :ref="(el) => (listRef = el as Element)">
@@ -21,10 +25,6 @@
</li>
</ul>
</div>
<div class="arrow">
<img :src="listOpen ? getIcon('arrow-asc') : getIcon('arrow-desc')" alt="arrow-icon" />
</div>
</div>
</template>
@@ -129,46 +129,22 @@ export default defineComponent({
}
.select-box {
position: relative;
width: auto;
display: flex;
align-items: center;
}
.arrow {
position: absolute;
top: 50%;
right: 0;
padding: 0;
img {
vertical-align: middle;
width: 1.35em;
}
transform: translateY(-50%);
pointer-events: none;
}
button.selected {
background-color: transparent;
color: paleturquoise;
font-size: 1em;
font-weight: bold;
padding: 0.1em 0.5em;
margin-right: 2em;
display: flex;
width: 100%;
cursor: pointer;
border: none;
outline: none;
text-align: left;
&:focus {
background-color: #262626;
src/components/JournalView/JournalTimetablesList.vue
+41 -17
View File
@@ -1,7 +1,7 @@
<template>
<transition-group class="journal-list" tag="ul" name="list-anim">
<li
v-for="{ timetable, sceneryList, revesedHistory, ...item } in computedTimetableHistory"
v-for="{ timetable, sceneryList, stockHistoryComp, ...item } in computedTimetableHistory"
class="journal_item"
:key="timetable.id"
@click="item.showExtra.value = !item.showExtra.value"
@@ -130,7 +130,7 @@
</button>
<!-- Dodatkowe informacje -->
<div class="info-extended" v-if="timetable.stockString && item.showExtra.value">
<div class="info-extended" v-if="timetable.stockString && timetable.stockMass && item.showExtra.value">
<hr />
<div class="stock-specs">
@@ -140,35 +140,44 @@
</span>
<span class="badge specs-badge">
<span>{{ $t('journal.stock-length') }}</span>
<span>{{ timetable.stockLength }}m</span>
<span>
{{
item.currentHistoryIndex.value == 0
? timetable.stockLength
: stockHistoryComp[item.currentHistoryIndex.value].stockLength || timetable.stockLength
}}m
</span>
</span>
<span class="badge specs-badge">
<span>{{ $t('journal.stock-mass') }}</span>
<span>{{ Math.floor(timetable.stockMass! / 1000) }}t</span>
<span>
{{
Math.floor(
(item.currentHistoryIndex.value == 0
? timetable.stockMass!
: stockHistoryComp[item.currentHistoryIndex.value].stockMass || timetable.stockMass) / 1000
)
}}t
</span>
</span>
</div>
<div class="stock-history" v-if="revesedHistory.length > 1">
<div class="stock-history" v-if="stockHistoryComp.length > 1">
<button
class="btn--action"
v-for="(sh, i) in revesedHistory"
v-for="(sh, i) in stockHistoryComp"
:data-checked="i == item.currentHistoryIndex.value"
@click.stop="item.currentHistoryIndex.value = i"
>
{{
new Date(Number(sh.split('@')[0])).toLocaleTimeString($i18n.locale, {
hour: '2-digit',
minute: '2-digit',
})
}}
{{ sh.updatedAt }}
</button>
</div>
<ul class="stock-list">
<li
v-for="(car, i) in (revesedHistory.length <= 1
v-for="(car, i) in (item.currentHistoryIndex.value == 0
? timetable.stockString
: revesedHistory[item.currentHistoryIndex.value].split('@')[1]
: stockHistoryComp[item.currentHistoryIndex.value].stockString
).split(';')"
:key="i"
>
@@ -209,7 +218,22 @@ export default defineComponent({
return this.timetableHistory.map((timetable) => ({
timetable,
sceneryList: this.getSceneryList(timetable),
revesedHistory: timetable.stockHistory.slice().reverse(),
stockHistoryComp: timetable.stockHistory
.slice()
.reverse()
.map((h) => {
const historyData = h.split('@');
return {
updatedAt: new Date(Number(historyData[0])).toLocaleTimeString(this.$i18n.locale, {
hour: '2-digit',
minute: '2-digit',
}),
stockString: historyData[1],
stockMass: Number(historyData[2]) || undefined,
stockLength: Number(historyData[3]) || undefined,
};
}),
showExtra: ref(false),
currentHistoryIndex: ref(0),
}));
@@ -362,8 +386,8 @@ ul.stock-list {
flex-wrap: wrap;
gap: 0.5em;
margin-top: 1em;
button[data-checked=true] {
button[data-checked='true'] {
color: $accentCol;
}
}
src/components/StationsView/StationTable.vue
+1 -3
View File
@@ -54,9 +54,7 @@
</td>
<td>
<b>
{{ station.generalInfo?.abbr }}
</b>
{{ station.generalInfo?.abbr }}
</td>
<td class="station_level">
src/scripts/utils/apiURLs.ts
+1 -1
View File
@@ -1,7 +1,7 @@
export const URLs = {
stacjownikAPI:
import.meta.env.VITE_APP_API_DEV == 1 && !import.meta.env.PROD
? 'http://localhost:3000'
? 'http://localhost:3001'
: 'https://spythere.pl',
stacjownikAPIDev: 'localhost:3000',
};