Stylistyka komponentów statystyk

src/components/JournalView/JournalStats.vue

@@ -4,7 +4,7 @@
       <button
         v-for="tab in data.tabs"
         class="btn--filled"
-        :data-selected="tab.name == store.currentStatsTab"
+        :data-selected="tab.name == store.currentStatsTab && areStatsOpen"
         :data-inactive="tab.inactive"
         @click="onTabButtonClick(tab.name)"
       >
@@ -12,7 +12,7 @@
       </button>
     </div>
 
-    <div class="stats-tab">
+    <div class="stats-tab" v-show="areStatsOpen">
       <keep-alive>
         <JournalDailyStats v-if="store.currentStatsTab == 'daily'" ref="dailyStatsComp" />
         <JournalDriverStats v-else-if="store.currentStatsTab == 'driver'" />
@@ -35,6 +35,9 @@ type TStatTab = 'daily' | 'driver';
 const store = useStore();
 const dailyStatsComp: Ref<InstanceType<typeof JournalDailyStats> | null> = ref(null);
 
+const areStatsOpen = ref(true);
+const lastClickedTab = ref('');
+
 let data = reactive({
   tabs: [
     {
@@ -51,7 +54,12 @@ let data = reactive({
 
 // Methods
 function onTabButtonClick(tab: TStatTab) {
+  if (lastClickedTab.value == tab || !areStatsOpen.value) {
+    areStatsOpen.value = !areStatsOpen.value;
+  }
+
   store.currentStatsTab = tab;
+  lastClickedTab.value = tab;
 }
 
 onActivated(() => {
@@ -65,9 +73,10 @@ onDeactivated(() => {
 watch(
   computed(() => store.driverStatsData),
   (statsData) => {
-    console.log(statsData);
-
     data.tabs[1].inactive = statsData ? false : true;
+
+    lastClickedTab.value = statsData ? 'driver' : 'daily';
+    if (statsData) areStatsOpen.value = true;
   }
 );
 </script>
@@ -77,14 +86,17 @@ watch(
 @import '../../styles/variables.scss';
 
 .tabs {
+  position: relative;
+
   display: flex;
   gap: 0.5em;
 
+  margin-bottom: 0.5em;
+
   button {
     font-weight: bold;
-    border-radius: 0.4em 0.4em 0 0;
     padding: 0.5em 0.75em;
-    
+
     &[data-inactive='true'] {
       color: gray;
     }
@@ -92,7 +104,6 @@ watch(
     &[data-selected='true'] {
       color: $accentCol;
     }
-
   }
 }
 </style>

src/styles/JournalSection.scss

@@ -59,6 +59,11 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 0.5em;
+
+  position: relative;
+
+  margin-bottom: 0.5em;
 }
 
 .btn--load-data {

src/styles/JournalStats.scss

@@ -3,14 +3,15 @@
 
 .stats-tab {
   background-color: #1a1a1a;
-  padding: 1em;
+  border: 1px solid #ffc014;
-  margin-bottom: 1em;
 
-  min-height: 100px;
+  padding: 1em;
   display: flex;
   align-items: flex-end;
 
-  border-radius: 0 0 1em 1em;
+  margin-bottom: 0.5em;
+
+  width: 100%;
 }
 
 .info-stats {

src/styles/filters_options.scss

@@ -2,6 +2,10 @@
 @import 'variables.scss';
 @import 'search_box.scss';
 
+.filters-options {
+  margin-bottom: 0.5em;
+}
+
 h1.option-title {
   position: relative;
   font-size: 1.1em;
@@ -42,22 +46,16 @@ h1.option-title {
   z-index: 10;
 }
 
-.filters-options {
-  position: relative;
-  margin-bottom: 0.5em;
-}
-
 .options_wrapper {
   position: absolute;
 
   background-color: $bgCol;
   box-shadow: 0 5px 10px 2px #0f0f0f;
 
-  width: 100%;
+  width: 97%;
   max-width: 500px;
 
   padding: 1em;
-
   z-index: 100;
 }
 

src/views/JournalTimetables.vue

@@ -3,8 +3,6 @@
     <JournalHeader />
 
     <div class="journal_wrapper">
-      <JournalStats />
-
       <JournalOptions
         @on-search-confirm="searchHistory"
         @on-options-reset="resetOptions"
@@ -13,6 +11,8 @@
         :data-status="dataStatus"
       />
 
+      <JournalStats />
+
       <div class="list_wrapper" @scroll="handleScroll">
         <!-- <transition name="warning" mode="out-in"> -->
         <!-- <div :key="dataStatus"> -->
@@ -286,3 +286,4 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../styles/JournalSection.scss';
 </style>
+