janishutz/MusicPlayer
1
0
Fork 0
mirror of https://github.com/janishutz/MusicPlayerV2.git synced 2025-11-25 13:04:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add bar utility

Browse Source
This commit is contained in:
Admin
2025-09-04 16:34:54 +02:00
parent 057ea67a95
commit 025c7ed111
1 changed files with 45 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
MusicPlayerV2-GUI/src/views/BarView.vue
View File

@@ -51,7 +51,7 @@
totalPrice += o * offering.value[ keys[ i ] ].price; totalPrice += o * offering.value[ keys[ i ] ].price;
} }
return totalPrice; return totalPrice / 100;
} ); } );
const changeValue = ( id: string, amount: number ) => { const changeValue = ( id: string, amount: number ) => {
@@ -77,13 +77,15 @@
<p>{{ offer.name }} (CHF {{ offer.price / 100 }})</p> <p>{{ offer.name }} (CHF {{ offer.price / 100 }})</p>
</td> </td>
<td> <td>
<button class="inc-dec" @click="changeValue( offer.id, 1 )"> <div>
+ <button class="inc-dec" @click="changeValue( offer.id, 1 )">
</button> +
<p>{{ selection[ offer.id ] }}</p> </button>
<button class="inc-dec" @click="changeValue( offer.id, -1 )"> <p>{{ selection[ offer.id ] }}</p>
- <button class="inc-dec" @click="changeValue( offer.id, -1 )">
</button> -
</button>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@@ -93,32 +95,45 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.bar-utility { .bar-utility {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
>.offering-wrapper { >.offering-wrapper {
display: flex; .offering {
justify-content: center; >td {
flex-direction: column; p {
align-items: center; margin: 0;
margin-right: 15px;
text-align: start;
}
>.offering { >div {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-bottom: 5px; flex-direction: row;
p { p {
margin: 0; margin-left: 5px;
} margin-right: 5px;
}
>.inc-dec { >.inc-dec {
background: none; user-select: none;
border: solid var( --primary-color ) 1px; cursor: pointer;
border-radius: 20px; background: none;
width: 1.5rem; border: solid var( --primary-color ) 1px;
height: 1.5rem; border-radius: 20px;
display: flex; width: 2rem;
justify-content: center; height: 2rem;
align-items: center; display: flex;
font-size: 1rem; justify-content: center;
align-items: center;
font-size: 1.5rem;
}
}
} }
} }
} }