eriks/salary-calculator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Style updates

Browse Source 
Style updates
This commit is contained in:
eriks 2023-04-06 09:17:56 +03:00 committed by Eriks Karls
parent 9bb104073f
commit 83930abc09
2 changed files with 103 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.editorconfig
View File

@ -6,7 +6,7 @@ end_of_line = lf
indent_size = 4 indent_size = 4
indent_style = space indent_style = space
insert_final_newline = false insert_final_newline = false
max_line_length = 160 max_line_length = 200
tab_width = 4 tab_width = 4
[*.vue] [*.vue]

27
dynamic.html
View File

@ -11,39 +11,40 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Nunito&display=swap' rel='stylesheet'> <link href='https://fonts.googleapis.com/css?family=Nunito&display=swap' rel='stylesheet'>
<style>body {font-family: 'Nunito';font-size: 22px;}</style> <style>body {font-family: 'Nunito', sans-serif, system-ui;}</style>
</head> </head>
<body> <body id="fromBrutto">
<div class="container pt-5"> <div class="container pt-5">
<div class="row">
<div class="col-12 col-md-6">
<form class="row" id="fromBrutto">
<div class="mb-3 col-12 col-md"> <form class="row">
<div class="col-12 col-md-5 mb-3">
<div class="mb-3">
<label for="idBruttoInput" class="form-label text-bold">Brutto salary*:</label> <label for="idBruttoInput" class="form-label text-bold">Brutto salary*:</label>
<div class="input-group"> <div class="input-group">
<span class="input-group-text">€</span> <span class="input-group-text">€</span>
<input id="idBruttoInput" type="number" class="form-control" v-model="bruttoSalary" placeholder="700" min="0" step="10"> <input id="idBruttoInput" type="number" class="form-control" v-model="bruttoSalary" placeholder="700" min="0" step="10">
<span class="input-group-text">.00</span> <span class="input-group-text">.00</span>
</div> </div>
</div>
<div class="mb-3">
<label for="idDependentsInput" class="form-label text-bold">Dependents:</label> <label for="idDependentsInput" class="form-label text-bold">Dependents:</label>
<select id="idDependentsInput" class="form-select" v-model="dependentCount"> <select id="idDependentsInput" class="form-select" v-model="dependentCount">
<option value="0">0</option> <option value="0">0</option>
<option v-for="num in 6" :value="num">{{ num }}</option> <option v-for="num in 6" :value="num">{{ num }}</option>
</select> </select>
<label><input type="checkbox" id="idTaxBookSubmitted" v-model="taxBookSubmitted" checked> Salary tax book has been submitted to <label><input type="checkbox" id="idTaxBookSubmitted" v-model="taxBookSubmitted" checked> Salary tax book has been submitted to the employer</label><br>
the employer</label><br> </div>
<div class="mb-3">
<label for="idExtraTaxDiscount" class="form-label text-bold">Extra tax-free amount:</label> <label for="idExtraTaxDiscount" class="form-label text-bold">Extra tax-free amount:</label>
<div class="input-group"> <div class="input-group">
<span class="input-group-text">€</span> <span class="input-group-text">€</span>
<input type="number" class="form-control" id="idExtraTaxDiscount" v-model="extraTaxDiscount" placeholder="0" min="0" step="0.01"> <input type="number" class="form-control" id="idExtraTaxDiscount" v-model="extraTaxDiscount" placeholder="0" min="0" step="0.01">
</div> </div>
</div> </div>
</div>
<div class="col-12 col-md-6"> <div class="col-12 col-md-7">
<ul class="list-group"> <ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-start"> <li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto"> <div class="ms-2 me-auto">
@ -82,6 +83,7 @@
<span>{{employerTotalCost}}€</span> <span>{{employerTotalCost}}€</span>
</li> </li>
<li class="list-group-item d-flex justify-content-between align-items-start"> <li class="list-group-item d-flex justify-content-between align-items-start">
<div class="table-responsive-lg" style="width: 100%">
<table class="table table-sm table-striped table-hover"> <table class="table table-sm table-striped table-hover">
<thead> <thead>
<tr> <tr>
@ -112,13 +114,12 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</li> </li>
</ul> </ul>
</div> </div>
</form> </form>
</div>
</div>
</div> </div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>