gmgauthier/gammatools
gmgauthier/gammatools
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

try to make the forms slightly less hideous

Browse Source
This commit is contained in:
Greg Gauthier 2024-07-01 18:28:16 +01:00
parent c4411006fe
commit b915484190
2 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/mentalattack.html
View File

@ -15,11 +15,11 @@
<form id="mentalAttackForm"> <form id="mentalAttackForm">
<div class="form-row"> <div class="form-row">
<div class="form-field"> <div class="form-field">
<label for="ams">Attacker Mental Strength:</label> <label for="ams">Attacker MS:</label>
<input type="number" name="ams" id="ams" min="3" max="18" value="10"> <input type="number" name="ams" id="ams" min="3" max="18" value="10">
</div> </div>
<div class="form-field"> <div class="form-field">
<label for="dms">Defender Mental Strength:</label> <label for="dms">Defender MS:</label>
<input type="number" name="dms" id="dms" min="3" max="18" value="10"> <input type="number" name="dms" id="dms" min="3" max="18" value="10">
</div> </div>
</div> </div>

23
web/styles.css
View File

@ -1,3 +1,14 @@
label {
display: inline-block; /* makes the labels block elements but keep them inline */
width: 100px; /* you may need to adjust this based on the width of your widest label */
text-align: right;
margin-right: 5px; /* provides a 5px space between the label and its input field */
}
input {
text-align: left;
}
.form-row { .form-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -6,15 +17,13 @@
.form-field { .form-field {
display: flex; display: flex;
flex-direction: row; /* changed this from column */ align-items: center;
align-items: center; /* added this to vertically align elements in the row */ justify-content: left;
justify-content: space-between; /* added this to put some space between the label and the input field */ width: 200px;
width: 275px; /* optionally set a width to keep it consistent */
} }
.content-container { .content-container {
max-width: 500px; /* adjust the max width as per requirement */ max-width: 500px;
/* this line centers your container */
margin: 20px 0px 0 20px; margin: 20px 0px 0 20px;
padding: 0 20px; /* bit of padding so content doesn't touch the edges */ padding: 0 20px;
} }