chore: redesigned scenery history tables

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -3,64 +3,63 @@
     <div class="history-wrapper">
       <Loading v-if="dataStatus != DataStatus.Loaded && historyList.length == 0" />
 
-      <div class="no-history" v-else-if="historyList.length == 0">
+      <div v-else-if="historyList.length == 0" class="no-history">
         {{ $t('scenery.history-list-empty') }}
       </div>
 
-      <table class="scenery-history-table" v-else>
-        <thead>
-          <th>{{ $t('scenery.dispatchers-history-hash') }}</th>
-          <th>{{ $t('scenery.dispatchers-history-dispatcher') }}</th>
-          <th>{{ $t('scenery.dispatchers-history-level') }}</th>
-          <th>{{ $t('scenery.dispatchers-history-rate') }}</th>
-          <th>{{ $t('scenery.dispatchers-history-date') }}</th>
-        </thead>
-
-        <tbody>
-          <tr v-for="historyItem in historyList" :key="historyItem.id">
-            <td>#{{ historyItem.stationHash }}</td>
-            <td>
+      <div v-else class="history-list">
+        <div v-for="historyItem in historyList" :key="historyItem.id">
+          <span>
+            <span class="text--grayed" style="margin-right: 10px">
+              #{{ historyItem.stationHash }}
+            </span>
+            <b
+              v-if="historyItem.dispatcherLevel !== null"
+              class="level-badge dispatcher"
+              :style="
+                calculateExpStyle(historyItem.dispatcherLevel, historyItem.dispatcherIsSupporter)
+              "
+            >
+              {{ historyItem.dispatcherLevel >= 2 ? historyItem.dispatcherLevel : 'L' }}
+            </b>
+            <b style="margin-left: 5px">
               <router-link
                 :to="`/journal/dispatchers?search-dispatcher=${historyItem.dispatcherName}`"
               >
-                <b>{{ historyItem.dispatcherName }}</b>
+                {{ historyItem.dispatcherName }}
               </router-link>
-            </td>
-            <td>
-              <b
-                v-if="historyItem.dispatcherLevel !== null"
-                class="level-badge dispatcher"
-                :style="
-                  calculateExpStyle(historyItem.dispatcherLevel, historyItem.dispatcherIsSupporter)
-                "
-              >
-                {{ historyItem.dispatcherLevel >= 2 ? historyItem.dispatcherLevel : 'L' }}
-              </b>
+            </b>
 
-              <b v-else>-</b>
-            </td>
-            <td class="text--primary">
-              <b>{{ historyItem.dispatcherRate }}</b>
-            </td>
-            <td style="min-width: 300px">
-              <div v-if="historyItem.timestampTo">
-                <b>{{ $d(historyItem.timestampFrom) }}</b>
+            <div>
+              <span>
+                Ocena:
+                <b class="text--primary"> {{ historyItem.dispatcherRate }}</b>
+              </span>
+              |
+              <span>
+                Zmiany statusów: <b>{{ historyItem.statusHistory.length }}</b>
+              </span>
+            </div>
+          </span>
 
-                {{ timestampToString(historyItem.timestampFrom) }}
-                - {{ timestampToString(historyItem.timestampTo) }} ({{
-                  calculateDuration(historyItem.currentDuration)
-                }})
-              </div>
+          <span>
+            <span v-if="historyItem.timestampTo">
+              <b>{{ $d(historyItem.timestampFrom) }}</b>
 
-              <div class="dispatcher-online" v-else>
-                {{ $t('journal.online-since') }}
-                <b>{{ timestampToString(historyItem.timestampFrom) }}</b>
-                ({{ calculateDuration(historyItem.currentDuration) }})
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              {{ timestampToString(historyItem.timestampFrom) }}
+              - {{ timestampToString(historyItem.timestampTo) }} ({{
+                calculateDuration(historyItem.currentDuration)
+              }})
+            </span>
+
+            <span class="dispatcher-online" v-else>
+              {{ $t('journal.online-since') }}
+              <b>{{ timestampToString(historyItem.timestampFrom) }}</b>
+              ({{ calculateDuration(historyItem.currentDuration) }})
+            </span>
+          </span>
+        </div>
+      </div>
     </div>
 
     <div class="bottom-info">
@@ -165,8 +164,29 @@ export default defineComponent({
   overflow: auto;
 }
 
+.history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  text-align: left;
+}
+
+.history-list > div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+
+  gap: 0.5em;
+  padding: 0.5em;
+  background-color: #2b2b2b;
+  line-height: 1.75em;
+}
+
 .level-badge {
-  margin: 0 auto;
+  text-align: center;
+  display: inline-block;
+  line-height: 1.6em;
 }
 
 .dispatcher-online {
@@ -174,13 +194,10 @@ export default defineComponent({
 }
 
 @include smallScreen {
-  .history-list {
-    font-size: 1.1em;
-  }
-  .list-item {
-    align-items: center;
+  .history-list > div {
     flex-direction: column;
+    justify-content: center;
+    text-align: center;
   }
 }
 </style>
-../../store/storeTypes