Przełączanie pomiędzy sekcjami dziennika

src/components/JournalView/JournalTimetables.vue

@@ -1,33 +1,33 @@
 <template>
   <section class="journal-timetables">
-    <div class="history-wrapper">
+    <div class="journal-wrapper">
       <JournalOptions @changedOptions="search" @changedFilter="search" />
 
       <button class="return-btn" @click="scrollToTop" v-if="showReturnButton">
         <img :src="icons.arrow" alt="return arrow" />
       </button>
 
-      <div class="history_list">
-        <div class="list_wrapper" ref="scrollElement">
+      <div class="journal-list">
+        <div class="list-wrapper" ref="scrollElement">
           <transition name="warning" mode="out-in">
             <div :key="historyDataStatus.status">
-              <div class="history_loading" v-if="isDataLoading || isDataInit">
+              <div class="journal_loading" v-if="isDataLoading || isDataInit">
                 <img :src="icons.loading" alt="loading icon" />
                 <span class="loading-label">{{ $t('app.loading') }}</span>
               </div>
 
-              <div v-else-if="isDataError" class="history_warning error">
+              <div v-else-if="isDataError" class="journal_warning error">
                 {{ $t('app.error') }}
               </div>
 
-              <div class="history_warning" v-else-if="historyList.length == 0">
+              <div class="journal_warning" v-else-if="historyList.length == 0">
                 {{ $t('app.no-result') }}
               </div>
 
               <ul v-else>
-                <transition-group name="history-list-anim">
+                <transition-group name="journal-list-anim">
                   <li v-for="(item, i) in historyList" :key="item.timetableId">
-                    <div class="history_item-top">
+                    <div class="journal_item-top">
                       <span>
                         <span
                           tabindex="0"
@@ -81,7 +81,7 @@
                       </span>
 
                       <b
-                        class="history_item-status"
+                        class="journal_item-status"
                         :class="{
                           fulfilled: item.fulfilled || item.currentDistance >= item.routeDistance * 0.9,
                           terminated: item.terminated && !item.fulfilled,
@@ -131,8 +131,8 @@
         </div>
       </div>
 
-      <div class="history_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
-      <div class="history_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div>
+      <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
+      <div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div>
     </div>
   </section>
 </template>
@@ -306,10 +306,6 @@ export default defineComponent({
       this.scrollDataLoaded = true;
     },
 
-    keyPressed({ keyCode }) {
-      if (keyCode == 13) this.search();
-    },
-
     async addHistoryData() {
       this.scrollDataLoaded = false;
 
@@ -405,83 +401,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/option.scss';
+@import '../../styles/JournalSection.scss';
 
-// Animations
-.warning {
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-
-  &-enter-active {
-    transition: all 200ms ease-in-out;
-  }
-
-  &-leave-active {
-    transition: all 200ms ease-in-out;
-  }
-}
-
-.history-list-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.5s ease;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-}
-
-// Style
-
-.return-btn {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  position: fixed;
-  right: 0;
-  bottom: 0;
-
-  margin: 0 1em 1em 0;
-
-  width: 2em;
-  height: 2em;
-
-  font-size: 1.7em;
-
-  background-color: #333;
-  color: white;
-
-  border-radius: 50%;
-  cursor: pointer;
-
-  &:hover {
-    background-color: #3c3c3c;
-  }
-
-  img {
-    width: 1.3em;
-  }
-}
-
-.journal-timetables {
-  height: 100%;
-
-  display: flex;
-  justify-content: center;
-}
-
-.history-wrapper {
-  width: 1350px;
-  padding: 1em 0;
-}
-
-.history_item {
+.journal_item {
   &-top {
     display: flex;
     justify-content: space-between;
@@ -514,64 +436,5 @@ export default defineComponent({
   }
 }
 
-.history_search {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
 
-  @include smallScreen() {
-    justify-content: center;
-    flex-direction: column;
-  }
-}
-
-.history_warning {
-  text-align: center;
-  font-size: 1.3em;
-
-  &.error {
-    background-color: var(--clr-error);
-  }
-}
-
-.schedule-dates > * {
-  margin-right: 0.25em;
-}
-
-li,
-.history_warning {
-  background: #202020;
-  padding: 1em;
-  margin: 1em 0;
-}
-
-@include smallScreen() {
-  .history-view {
-    font-size: 1.25em;
-  }
-}
-
-.history_loading {
-  margin-top: 2em;
-
-  img {
-    margin: 0 auto;
-    display: block;
-
-    width: 8em;
-  }
-
-  text-align: center;
-
-  .loading-label {
-    background: #333;
-    color: white;
-
-    padding: 0.5em 0.5em;
-    font-size: 1.3em;
-
-    border-radius: 1em;
-  }
-}
 </style>