feat: added pinned months to budget groups

simonwep · Nov 9, 2024 · ffb77a5 · ffb77a5
1 parent a7f52cc
commit ffb77a5
Showing 1 changed file with 24 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>
@@ -137,6 +144,12 @@ const reorder = (evt: ReorderEvent) => {
   padding-right: 20px;
   padding-bottom: 5px;
 
+  position: sticky;
+  position: -webkit-sticky;
+  top: 0px;
+  background: var(--app-background);
+  border: 2px var(--app-background);
+  
   &.current {
     font-weight: var(--font-weight-l);
   }
@@ -149,6 +162,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 {