Use new `boxWithInput` element for inputs

This commit is contained in:
Florine W. Dekker 2022-11-17 09:45:57 +01:00
parent 7f61a0cb06
commit 6fe7e610da
Signed by: FWDekker
GPG Key ID: D3DCFAA8A4560BE0
4 changed files with 28 additions and 32 deletions

BIN
package-lock.json generated

Binary file not shown.

View File

@ -1,6 +1,6 @@
{
"name": "doomsday",
"version": "1.4.2",
"version": "1.4.3",
"description": "Test your mastery of Conway's Doomsday rule.",
"author": "Florine W. Dekker",
"browser": "dist/bundle.js",
@ -16,11 +16,11 @@
"deploy": "grunt deploy"
},
"dependencies": {
"luxon": "^2.3.2"
"luxon": "^3.1.0"
},
"devDependencies": {
"@types/luxon": "^2.3.1",
"grunt": "^1.5.2",
"@types/luxon": "^3.1.0",
"grunt": "^1.5.3",
"grunt-cli": "^1.4.3",
"grunt-contrib-clean": "^2.0.1",
"grunt-contrib-copy": "^1.0.0",
@ -28,9 +28,9 @@
"grunt-focus": "^1.0.0",
"grunt-text-replace": "^0.4.0",
"grunt-webpack": "^5.0.0",
"ts-loader": "^9.2.8",
"typescript": "^4.6.3",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2"
"ts-loader": "^9.4.1",
"typescript": "^4.9.3",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0"
}
}

View File

@ -4,13 +4,8 @@
}
.row .column.quiz-button-column {
display: flex;
align-items: flex-end;
}
.row .column.quiz-button-column .quiz-button {
margin-bottom: 15px;
details * {
box-sizing: border-box;
}
label, summary b {

View File

@ -38,12 +38,12 @@
<details open id="century-details">
<summary><b id="century-title-label">Century</b></summary>
<div class="row">
<div class="column column-90">
<!--suppress HtmlFormInputWithoutLabel -->
<input type="text" id="century-input" autocomplete="off" autofocus />
</div>
<div class="column column-10 quiz-button-column">
<button type="button" class="quiz-button" id="century-submit">Check</button>
<div class="column">
<div class="inputWithButton">
<!--suppress HtmlFormInputWithoutLabel -->
<input type="text" id="century-input" class="quiz-input" autocomplete="off" autofocus />
<button type="button" id="century-submit" class="quiz-button">Check</button>
</div>
</div>
</div>
</details>
@ -51,12 +51,12 @@
<details open id="year-details">
<summary><b id="year-title-label">Year</b></summary>
<div class="row">
<div class="column column-90">
<!--suppress HtmlFormInputWithoutLabel -->
<input type="text" id="year-input" autocomplete="off" />
</div>
<div class="column column-10 quiz-button-column">
<button type="button" class="quiz-button" id="year-submit">Check</button>
<div class="column">
<div class="inputWithButton">
<!--suppress HtmlFormInputWithoutLabel -->
<input type="text" id="year-input" class="quiz-input" autocomplete="off" />
<button type="button" id="year-submit" class="quiz-button">Check</button>
</div>
</div>
</div>
</details>
@ -64,11 +64,12 @@
<div>
<label for="day-input" id="day-title-label">Day</label>
<div class="row">
<div class="column column-90">
<input type="text" id="day-input" autocomplete="off" />
</div>
<div class="column column-10 quiz-button-column">
<button type="button" class="quiz-button" id="day-submit">Check</button>
<div class="column">
<div class="inputWithButton">
<!--suppress HtmlFormInputWithoutLabel -->
<input type="text" id="day-input" class="quiz-input" autocomplete="off" />
<button type="button" id="day-submit" class="quiz-button">Check</button>
</div>
</div>
</div>
</div>