feat: added pinned months to budget groups

simonwep · Nov 9, 2024 · 6620393 · 6620393
1 parent a7f52cc
commit 6620393
Showing 1 changed file with 29 additions and 1 deletion.
diff --git a/src/app/components/feature/BudgetGroups.vue b/src/app/components/feature/BudgetGroups.vue
@@ -9,7 +9,14 @@
     <span
       v-for="(month, index) of months"
       :key="month"
-      :class="[$style.month, { [$style.current]: isCurrentMonth(index) }]"
+      :class="[
+        $style.month,
+        {
+          [$style.current]: isCurrentMonth(index),
+          [$style.start]: index === 0,
+          [$style.end]: index === 11
+        }
+      ]"
     >
       <span>{{ month }}</span>
     </span>
@@ -131,12 +138,23 @@ const reorder = (evt: ReorderEvent) => {
   margin-bottom: 4px;
 }
 
+.empty {
+  all: unset;
+}
+
 .month {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-m);
   padding-right: 20px;
   padding-bottom: 5px;
 
+  position: sticky;
+  position: -webkit-sticky;
+  top: 0px;
+  background: var(--app-background);
+  border: 2px var(--app-background);
+  /* box-shadow: var(--app-scroll-box-shadow); */
+
   &.current {
     font-weight: var(--font-weight-l);
   }
@@ -149,6 +167,16 @@ const reorder = (evt: ReorderEvent) => {
       margin-top: 0;
     }
   }
+
+  &.start {
+    border-bottom-left-radius: var(--border-radius-l);
+    padding-left: 8px;
+  }
+
+  &.end {
+    border-bottom-right-radius: var(--border-radius-l);
+    padding-right: 8px;
+  }
 }
 
 .addGroupBtn {