- made dashboard control buttons hide on scroll

cioraneanu · Dec 26, 2024 · c2ac6b3 · c2ac6b3
1 parent 16d41ee
commit c2ac6b3
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 12 deletions.
diff --git a/front/assets/styles/theme.css b/front/assets/styles/theme.css
@@ -1070,5 +1070,5 @@ img, svg {
     align-items: center;
     justify-content: center;
     gap: 3px;
-    padding: 5px 5px;
+    padding: 3px 5px;
 }
diff --git a/front/components/dashboard/dashboard-controls/dashboard-control-buttons.vue b/front/components/dashboard/dashboard-controls/dashboard-control-buttons.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="text-size-14 flex-center-vertical gap-1">
+    <span class="text-muted text-size-12">Controls:</span>
     <div class="app-button-small" v-if="hasMultipleCurrencies" @click="onToggleTotalCurrency">
       <app-icon :icon="TablerIconConstants.transaction" :size="14" />
       {{ dataStore.dashboardCurrency }}

diff --git a/front/components/dashboard/dashboard-controls/dashboard-control.vue b/front/components/dashboard/dashboard-controls/dashboard-control.vue
@@ -1,17 +1,20 @@
 <template>
-    <van-cell-group inset class="dashboard-control-date" :style="style" @click="onChooseMonth">
-      <div class="flex-center-vertical gap-2">
-        <app-icon :icon="TablerIconConstants.leftArrow" @click.stop="onPreviousMonth" :size="24" class="m-10" />
-        <div class="flex-1 flex-center flex-column my-2">
-          <div class="text-size-14 font-weight-600">{{ rangeTitle }}</div>
-          <dashboard-control-buttons />
-        </div>
-
-        <app-icon :icon="TablerIconConstants.rightArrow" @click.stop="onNextMonth" :size="24" class="m-10" />
+  <van-cell-group inset class="dashboard-control-date" :style="style" @click="onChooseMonth">
+    <div class="flex-center-vertical gap-2">
+      <app-icon :icon="TablerIconConstants.leftArrow" @click.stop="onPreviousMonth" :size="24" class="m-10" />
+
+      <div class="flex-1 flex-center flex-column my-2">
+        <div class="text-size-14 font-weight-600">{{ rangeTitle }}</div>
+        <transition name="fade">
+          <dashboard-control-buttons v-if="y < 20" />
+        </transition>
       </div>
-    </van-cell-group>
 
-    <app-month-year v-model="dataStore.dashboard.month" v-model:showDropdown="showDropdown" />
+      <app-icon :icon="TablerIconConstants.rightArrow" @click.stop="onNextMonth" :size="24" class="m-10" />
+    </div>
+  </van-cell-group>
+
+  <app-month-year v-model="dataStore.dashboard.month" v-model:showDropdown="showDropdown" />
 </template>
 
 <script setup>