dzienniki: stylistyka

src/App.scss

@@ -46,7 +46,7 @@
   font-size: 1rem;
 
   @include smallScreen() {
-    font-size: calc(0.5rem + 1.1vw);
+    font-size: calc(0.55rem + 1.1vw);
   }
 
   @include screenLandscape() {

src/components/JournalView/JournalDispatchersList.vue

@@ -136,6 +136,8 @@ li.sticky {
   display: flex;
   align-items: center;
   gap: 0.25em;
+  flex-wrap: wrap;
+
 
   .level-badge {
     margin-right: 0.25em;

src/components/JournalView/JournalTimetablesList.vue

@@ -252,7 +252,7 @@ hr {
     align-items: center;
     flex-wrap: wrap;
 
-    gap: 0.25em;
+    gap: 0.5em;
     margin-bottom: 0.5em;
   }
 

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -62,7 +62,7 @@ export default defineComponent({
       dataStatus: DataStatus.Loading,
     };
   },
-  mounted() {
+  activated() {
     this.fetchAPIData();
   },
   methods: {
@@ -106,6 +106,7 @@ export default defineComponent({
 .item-general {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 0.25em;
 }
 

src/components/SceneryView/SceneryTimetablesHistory.vue

@@ -2,8 +2,46 @@
   <section class="scenery-timetables-history scenery-section">
     <Loading v-if="dataStatus != 2" />
 
-    <div class="list-warning" v-else-if="sceneryHistoryList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
+    <table v-else-if="sceneryHistoryList.length">
-    <ul class="history-list" v-else>
+      <thead>
+        <th>ID</th>
+        <th>Kat. nr</th>
+        <th>Relacja</th>
+        <th>Maszynista</th>
+        <th>Autor RJ</th>
+        <th>Data</th>
+      </thead>
+
+      <tbody>
+        <tr v-for="historyItem in sceneryHistoryList" @click="test">
+          <td>
+            <router-link :to="`/journal/timetables?timetableId=${historyItem.id}`">#{{ historyItem.id }}</router-link>
+          </td>
+          <td>
+            <b class="text--primary">{{ historyItem.trainCategoryCode }}</b> <br />
+            {{ historyItem.trainNo }}
+          </td>
+          <td>{{ historyItem.route.replace('|', ' -> ') }}</td>
+          <td>{{ historyItem.driverName }}</td>
+          <td>
+            <router-link
+              v-if="historyItem.authorName"
+              :to="`/journal/dispatchers?dispatcherName=${historyItem.authorName}`"
+              >{{ historyItem.authorName }}
+            </router-link>
+            <i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
+          </td>
+          <td>
+            <b>{{ localeDay(historyItem.beginDate, $i18n.locale) }}</b>
+            {{ localeTime(historyItem.beginDate, $i18n.locale) }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div class="list-warning" v-else>{{ $t('scenery.history-list-empty') }}</div>
+
+    <!-- <ul class="history-list" v-else>
       <li class="list-item" v-for="historyItem in sceneryHistoryList">
         <div>
           <b>{{ localeDay(historyItem.beginDate, $i18n.locale) }}</b>
@@ -19,16 +57,14 @@
         </div>
 
         <div>{{ historyItem.route.replace('|', ' -> ') }}</div>
-        <!-- <div>{{ historyItem.routeDistance }} km</div> -->
         <div>
           {{ $t('scenery.timetable-author-title') }}:
           <b v-if="historyItem.authorName">{{ historyItem.authorName }}</b>
           <i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
         </div>
 
-        <!-- <div v-if="historyItem.authorId">{{ historyItem.authorName }}</div> -->
       </li>
-    </ul>
+    </ul> -->
   </section>
 </template>
 
@@ -57,7 +93,7 @@ export default defineComponent({
       dataStatus: DataStatus.Loading,
     };
   },
-  mounted() {
+  activated() {
     this.fetchAPIData();
   },
   methods: {
@@ -72,6 +108,10 @@ export default defineComponent({
         console.error(error);
       }
     },
+
+    test() {
+      console.log('test');
+    },
   },
   components: { Loading },
 });
@@ -91,17 +131,29 @@ export default defineComponent({
   padding: 0 0.5em;
 }
 
-.list-item {
+table {
-  display: grid;
+  width: 100%;
-  grid-template-columns: 1fr 2fr 2fr 1fr;
+  border-collapse: collapse;
-  gap: 1em;
-  align-items: center;
 
-  background-color: #353535;
+  thead {
-  padding: 0.5em;
+    position: sticky;
-  margin: 0.5em 0;
+    top: 0;
+    background-color: #222222;
+  }
 
-  line-height: 1.5em;
+  th {
+    padding: 0.5em;
+  }
+
+  tr {
+    background-color: #353535;
+    border: none;
+  }
+
+  td {
+    padding: 0.75em;
+    border-bottom: solid 5px #111;
+  }
 }
 
 @include smallScreen {

src/components/TrainsView/TrainInfo.vue

@@ -11,7 +11,7 @@
         </span>
 
         <strong>
-          <span v-if="train.timetableData">{{ train.timetableData.category }}&nbsp;</span>
+          <span v-if="train.timetableData" class="text--primary">{{ train.timetableData.category }}&nbsp;</span>
           <span class="train-number">{{ train.trainNo }}</span>
         </strong>
         <span>&bull;</span>

src/mixins/styleMixin.ts

@@ -6,7 +6,7 @@ export default defineComponent({
       const bgColor = exp > -1 ? (exp < 2 ? '#26B0D9' : `hsl(${-exp * 5 + 100},  85%, 50%)`) : '#666';
 
       const fontColor = exp > 14 || exp == -1 ? 'white' : 'black';
-      const boxShadow = isSupporter ? `box-shadow: 0 0 10px 2px ${bgColor};` : '';
+      const boxShadow = isSupporter ? `box-shadow: 0 0 6px 2px ${bgColor};` : '';
 
       return `background-color: ${bgColor}; color: ${fontColor}; ${boxShadow};`;
     },
@@ -14,7 +14,7 @@ export default defineComponent({
     calculateTextExpStyle(exp: number, isSupporter = false): string {
       const textColor = exp > -1 ? (exp < 2 ? '#26B0D9' : `hsl(${-exp * 5 + 100},  75%, 50%)`) : '#666';
 
-      return `color: ${textColor}; ${isSupporter ? 'text-shadow: 0 0 10px ' + textColor : ''};`;
+      return `color: ${textColor}; ${isSupporter ? 'text-shadow: 0 0 6px ' + textColor : ''};`;
     },
 
     statusClasses(occupiedTo: string) {

src/styles/global.scss

@@ -29,6 +29,10 @@
   &-thumb {
     background-color: #666;
   }
+
+  &-corner {
+    background-color: #333;
+  }
 }
 
 html {