diff --git a/package.json b/package.json index 1a322ec..a4b30fd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "stacjownik", - "version": "1.13.0", + "version": "1.14.0", "private": true, "scripts": { "dev": "vite", diff --git a/src/App.scss b/src/App.scss index 1033d9d..49e4daf 100644 --- a/src/App.scss +++ b/src/App.scss @@ -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; diff --git a/src/App.vue b/src/App.vue index 2e91da7..3f7db36 100644 --- a/src/App.vue +++ b/src/App.vue @@ -23,6 +23,8 @@ Spythere {{ new Date().getUTCFullYear() }} | v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }} +
+  {{ $t('footer.discord') }}
∫ ukryta taktyczna całka do programowania w HTMLu
diff --git a/src/components/App/AppHeader.vue b/src/components/App/AppHeader.vue index 77c1f9a..ae710b4 100644 --- a/src/components/App/AppHeader.vue +++ b/src/components/App/AppHeader.vue @@ -6,16 +6,6 @@ icon-pl icon-en - - - - icon paypal - - - - icon discord - -
@@ -33,6 +23,12 @@
icon dispatcher {{ onlineDispatchersCount }} + + + / {{ onlineTrainsCount }} 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,20 @@ export default defineComponent({ .header { &_body { - max-width: 21em; position: relative; - - @include smallScreen { - max-width: 18em; - } + max-width: 20em; } &_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 +158,7 @@ export default defineComponent({ img { width: 100%; + 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(85%); } } } // 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; } } diff --git a/src/components/App/StatusIndicator.vue b/src/components/App/StatusIndicator.vue index 4de73a9..0936a1c 100644 --- a/src/components/App/StatusIndicator.vue +++ b/src/components/App/StatusIndicator.vue @@ -164,7 +164,7 @@ import { defineComponent } from 'vue'; import { DataStatus } from '../../scripts/enums/DataStatus'; import { useStore } from '../../store/store'; -import { StoreState } from '../../store/storeTypes'; +import { StoreState } from '../../scripts/interfaces/store/storeTypes'; export default defineComponent({ data() { @@ -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({ } } + diff --git a/src/components/Global/SelectBox.vue b/src/components/Global/SelectBox.vue index d4b90b0..7331c63 100644 --- a/src/components/Global/SelectBox.vue +++ b/src/components/Global/SelectBox.vue @@ -3,6 +3,10 @@
    @@ -21,10 +25,6 @@
- -
- arrow-icon -
@@ -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; diff --git a/src/components/JournalView/JournalTimetablesList.vue b/src/components/JournalView/JournalTimetablesList.vue index 492d9d5..d762435 100644 --- a/src/components/JournalView/JournalTimetablesList.vue +++ b/src/components/JournalView/JournalTimetablesList.vue @@ -1,7 +1,7 @@