wbrawner/interval-timer
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages 1 Wiki Activity Actions

Improve timer creation form layout

Browse source
This commit is contained in:
William Brawner 2021-04-19 17:10:29 -07:00
parent 2b33fd18f5
commit ed12b4a041
2 changed files with 79 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/css/styles.css
View file

@ -20,6 +20,7 @@ body {
form label {
display: block;
padding: 0.5em 1em;
flex-shrink: 0;
}
a:link, a:hover, a:visited, a:active {
@ -291,7 +292,6 @@ button.add-timer {
border-bottom: 1px solid #BDBDBD;
width: 100%;
background-color: #fff;
box-shadow: 0 0 3px 0 #BDBDBD;
display: flex;
justify-content: space-between;
}
@ -330,10 +330,22 @@ button.add-timer {
max-height: calc(100vh - 60px);
}
.input-wrapper {
display: flex;
flex-direction: column;
}
.duration-wrapper {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
@media all and (min-width: 1024px) {
.new-timer {
max-width: 800px;
max-height: 600px;
max-height: 500px;
box-shadow: 0px 0px 3px #bdbdbd;
border-radius: 10px;
}
@ -341,6 +353,19 @@ button.add-timer {
#timer-setup {
max-height: 540px;
}
.input-wrapper {
flex-direction: row;
}
form label {
flex-basis: 7em;
align-self: center;
}
.duration-wrapper {
justify-content: start;
}
}
#timer-setup input, #timer-setup textarea, #timer-setup select {
@ -350,27 +375,22 @@ button.add-timer {
width: 100%;
padding: 10px 20px;
font-size: 1.25em;
font-family: Open Sans, sans-serif;
box-sizing: border-box;
display: block;
font-family: Open Sans, sans-serif;
box-sizing: border-box;
display: block;
}
.select-wrapper {
display: table;
width: 100%;
#timer-setup input.duration {
text-align: center;
flex: 0;
flex-basis: 20%;
padding-left: 0;
padding-right: 0;
}
.select-wrapper span {
width: 2%;
font-weight: bold;
.repeat-entry {
text-align: center;
}
.select-wrapper select, .select-wrapper span {
display: table-cell;
}
.min {text-align: left;}
.sec {text-align: right;}
#back {float: left;}
#next {float: right;}

59
src/index.html
View file

@ -88,41 +88,66 @@
</div>
<div class="input-wrapper">
<label for="warmUp">Warm-up:</label>
<input class="duration" type="text" name="warmUp" onmouseup="handleDurationCaret(event)"
oninput="maskDuration(event)" onkeyup="handleDurationCaret(event)" regex="\d{2}h \d{2}m \d{2}s"
value="00h 00m 00s" />
<div class="duration-wrapper">
<input class="duration" type="number" name="warmUpHours" placeholder="00" />
<span class="duration-amount">h</span>
<input class="duration" type="number" name="warmUpMins" placeholder="00" />
<span class="duration-amount">m</span>
<input class="duration" type="number" name="warmUpSecs" placeholder="00" />
<span class="duration-amount">s</span>
</div>
</div>
<div class="input-wrapper">
<label for="low">Low-intensity:</label>
<input class="duration" type="text" name="low" onmouseup="handleDurationCaret(event)"
oninput="maskDuration(event)" onkeyup="handleDurationCaret(event)" regex="\d{2}h \d{2}m \d{2}s"
value="00h 00m 00s" />
<div class="duration-wrapper">
<input class="duration" type="number" name="lowHours" placeholder="00" />
<span class="duration-amount">h</span>
<input class="duration" type="number" name="lowMins" placeholder="00" />
<span class="duration-amount">m</span>
<input class="duration" type="number" name="lowSecs" placeholder="00" />
<span class="duration-amount">s</span>
</div>
</div>
<div class="input-wrapper">
<label for="high">High-intensity:</label>
<input class="duration" type="text" name="high" onmouseup="handleDurationCaret(event)"
oninput="maskDuration(event)" onkeyup="handleDurationCaret(event)" regex="\d{2}h \d{2}m \d{2}s"
value="00h 00m 00s" />
<div class="duration-wrapper">
<input class="duration" type="number" name="highHours" placeholder="00" />
<span class="duration-amount">h</span>
<input class="duration" type="number" name="highMins" placeholder="00" />
<span class="duration-amount">m</span>
<input class="duration" type="number" name="highSecs" placeholder="00" />
<span class="duration-amount">s</span>
</div>
</div>
<div class="input-wrapper">
<label for="rest">Rest:</label>
<input class="duration" type="text" name="rest" onmouseup="handleDurationCaret(event)"
oninput="maskDuration(event)" onkeyup="handleDurationCaret(event)" regex="\d{2}h \d{2}m \d{2}s"
value="00h 00m 00s" />
<div class="duration-wrapper">
<input class="duration" type="number" name="restHours" placeholder="00" />
<span class="duration-amount">h</span>
<input class="duration" type="number" name="restMins" placeholder="00" />
<span class="duration-amount">m</span>
<input class="duration" type="number" name="restSecs" placeholder="00" />
<span class="duration-amount">s</span>
</div>
</div>
<div class="input-wrapper">
<label for="cool">Cooldown:</label>
<input class="duration" type="text" name="cool" onmouseup="handleDurationCaret(event)"
oninput="maskDuration(event)" onkeyup="handleDurationCaret(event)" regex="\d{2}h \d{2}m \d{2}s"
value="00h 00m 00s" />
<div class="duration-wrapper">
<input class="duration" type="number" name="coolHours" placeholder="00" />
<span class="duration-amount">h</span>
<input class="duration" type="number" name="coolMins" placeholder="00" />
<span class="duration-amount">m</span>
<input class="duration" type="number" name="coolSecs" placeholder="00" />
<span class="duration-amount">s</span>
</div>
</div>
<div class="input-wrapper">
<label for="sets">Sets:</label>
<input type="number" name="sets" value="1">
<input type="number" class="repeat-entry" name="sets" value="1">
</div>
<div class="input-wrapper">
<label for="rounds">Rounds:</label>
<input type="number" name="rounds" value="1">
<input type="number" class="repeat-entry" name="rounds" value="1">
</div>
</form>
</div>