Dodatkowe informacje i poprawki wyglądu dziennika RJ

src/components/JournalView/JournalTimetables.vue

@@ -76,7 +76,7 @@
                         <b>{{ timetable.route.replace('|', ' - ') }}</b>
                       </div>
 
-                      <hr style="margin: 0.25em 0" />
+                      <hr />
 
                       <div class="scenery-list">
                         <span
@@ -126,11 +126,19 @@
                         class="btn--option btn--show"
                         @click="item.showStock.value = !item.showStock.value"
                       >
-                        {{ $t(`journal.${item.showStock.value ? 'hide' : 'show'}-stock`) }}
+                        {{ $t('journal.stock-info') }}
                         <img :src="getIcon(`arrow-${item.showStock.value ? 'asc' : 'desc'}`)" alt="Arrow" />
                       </button>
 
                       <div class="info-extended" v-if="timetable.stockString" v-show="item.showStock.value">
+                        <hr />
+
+                        <div>
+                          {{ `${$t('journal.stock-max-speed')}: ${timetable.maxSpeed}km/h` }} &bull;
+                          {{ `${$t('journal.stock-length')}: ${timetable.stockLength}m` }} &bull;
+                          {{ `${$t('journal.stock-mass')}: ${Math.floor(timetable.stockMass! / 1000)}t` }}
+                        </div>
+
                         <ul class="stock-list">
                           <li v-for="(car, i) in timetable.stockString.split(';')" :key="i">
                             <img
@@ -455,6 +463,11 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../styles/JournalSection.scss';
 @import '../../styles/responsive.scss';
+
+hr {
+  margin: 0.25em 0;
+}
+
 .info {
   &-date {
     margin-right: 0.5em;
@@ -486,6 +499,10 @@ export default defineComponent({
   &-route {
     margin: 0.25em 0;
   }
+
+  &-extended {
+    margin-top: 0.5em;
+  }
 }
 
 ul.stock-list {
@@ -511,8 +528,9 @@ ul.stock-list {
 
 .btn--show {
   display: flex;
-  margin-top: 0.5em;
+  margin-top: 1em;
   font-weight: bold;
+  padding: 0.2em 0.45em;
 
   img {
     height: 1.3em;
@@ -528,9 +546,17 @@ ul.stock-list {
     }
   }
 
+  .info-extended {
+    text-align: center;
+  }
+
   .info-route {
     display: flex;
     justify-content: center;
   }
+
+  .btn--show {
+    margin: 1em auto 0 auto;
+  }
 }
-</style>
+</style>

src/locales/en.json

@@ -241,8 +241,10 @@
     "minutes": "{minutes} mins",
     "hours": "{hours}h {minutes} mins",
 
-    "show-stock": "SHOW STOCK",
-    "hide-stock": "HIDE STOCK"
+    "stock-info": "STOCK INFO",
+    "stock-length": "Length",
+    "stock-mass": "Mass",
+    "stock-max-speed": "Maximum registered speed"
   },
   "scenery": {
     "users": "PLAYERS ONLINE",

src/locales/pl.json

@@ -243,8 +243,10 @@
     "timetable-fulfilled": "WYPEŁNIONY",
     "timetable-abandoned": "PORZUCONY",
 
-    "show-stock": "POKAŻ SKŁAD",
-    "hide-stock": "UKRYJ SKŁAD"
+    "stock-info": "INFORMACJE O SKŁADZIE",
+    "stock-length": "Długość",
+    "stock-mass": "Masa",
+    "stock-max-speed": "Maks. zarejestrowana prędkość"
   },
   "scenery": {
     "users": "GRACZE ONLINE",

src/styles/global.scss

@@ -28,7 +28,7 @@ body {
 
   &.no-scroll {
     overflow-y: hidden;
-    padding-right: 17px;
+    padding-right: 1rem;
 
     @include smallScreen() {
       padding: 0;
@@ -46,8 +46,8 @@ body {
 }
 
 ::-webkit-scrollbar {
-  width: 17px;
-  height: 17px;
+  width: 1rem;
+  height: 1rem;
 
   &-track {
     background-color: #222;