Annika/budgit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

transactions are now input fields (but still dummies)

Browse Source
This commit is contained in:
Annika
2022-07-11 13:58:30 -06:00
parent 578da8a55e
commit 10d044cb0e
2 changed files with 44 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
budgit.client/src/components/Navbar.vue
+4
View File
@@ -43,4 +43,8 @@ a:hover {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.router-link-active {
@apply text-green-300;
}
</style> </style>
budgit.client/src/components/Transaction.vue
+40 -13
View File
@@ -1,19 +1,27 @@
<template> <template>
<div class="component flex bg-stone-800 mb-2"> <div class="component flex flex-wrap md:flex-nowrap justify-between bg-stone-800 mb-2">
<div class="w-32"> <div class="pr-4">
<p>meow</p> <input type="date" v-model="date" placeholder="2022-07-11" class="text-slate-50 bg-stone-800 w-32 hover:bg-green-300 hover:text-stone-900">
</div> </div>
<div class="w-32"> <div class="pr-4">
<p>meow</p> <input type="number" v-model="amount" placeholder="$0.00" class="w-24 bg-stone-800 text-slate-50 hover:bg-green-300 hover:text-stone-900">
</div> </div>
<div class="w-32"> <div class="pr-4">
<p>meow</p> <input type="text" v-model="payee" placeholder="Payee" class="text-slate-50 bg-stone-800 w-32 hover:bg-green-300 hover:text-stone-900">
</div> </div>
<div class="w-32"> <div class="pr-4">
<p>meow</p> <select v-model="category" class="text-slate-50 bg-stone-800 w-36 hover:bg-green-300 hover:text-stone-900">
<option value="" selected>UnCATegorized</option>
<option v-for="c in 10" value="meow">meow</option>
</select>
</div> </div>
<div class=""> <div class="pr-4">
<p>{{'meow'}}</p> <input type="text" v-model="comment" placeholder="Comments" class="text-slate-50 bg-stone-800 w-48 hover:bg-green-300 hover:text-stone-900">
</div>
<div>
<button class="text-slate-50 bg-stone-800 w-16 hover:bg-green-300 hover:text-stone-900">
Save
</button>
</div> </div>
</div> </div>
</template> </template>
@@ -22,12 +30,31 @@
<script> <script>
export default { export default {
setup(){ setup(){
return {} return {
date: '2022-07-11'
}
} }
} }
</script> </script>
<style lang="scss" scoped> <!-- // TODO undo this -->
<style lang="postcss" scoped>
input {
color-scheme: dark;
}
input::placeholder {
@apply text-slate-50;
opacity: 1;
}
input:hover::placeholder {
@apply text-stone-900;
opacity: 1;
}
input:hover {
color-scheme: light;
}
</style> </style>