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({
+