diff --git a/src/components/JournalView/JournalStats.vue b/src/components/JournalView/JournalStats.vue index b46f8a1..88b7fa2 100644 --- a/src/components/JournalView/JournalStats.vue +++ b/src/components/JournalView/JournalStats.vue @@ -4,7 +4,7 @@ -
+
@@ -35,6 +35,9 @@ type TStatTab = 'daily' | 'driver'; const store = useStore(); const dailyStatsComp: Ref | 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; } ); @@ -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; } - } } diff --git a/src/styles/JournalSection.scss b/src/styles/JournalSection.scss index fbe5128..10faa90 100644 --- a/src/styles/JournalSection.scss +++ b/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 { diff --git a/src/styles/JournalStats.scss b/src/styles/JournalStats.scss index 28388e6..513d619 100644 --- a/src/styles/JournalStats.scss +++ b/src/styles/JournalStats.scss @@ -3,14 +3,15 @@ .stats-tab { background-color: #1a1a1a; - padding: 1em; - margin-bottom: 1em; + border: 1px solid #ffc014; - 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 { diff --git a/src/styles/filters_options.scss b/src/styles/filters_options.scss index debb794..ed1f0f4 100644 --- a/src/styles/filters_options.scss +++ b/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; } diff --git a/src/views/JournalTimetables.vue b/src/views/JournalTimetables.vue index 0bc957f..15f9fb0 100644 --- a/src/views/JournalTimetables.vue +++ b/src/views/JournalTimetables.vue @@ -3,8 +3,6 @@
- - + +
@@ -286,3 +286,4 @@ export default defineComponent({ +