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

48
src/css/styles.css
View file

@ -20,6 +20,7 @@ body {
form label { form label {
display: block; display: block;
padding: 0.5em 1em; padding: 0.5em 1em;
flex-shrink: 0;
} }
a:link, a:hover, a:visited, a:active { a:link, a:hover, a:visited, a:active {
@ -291,7 +292,6 @@ button.add-timer {
border-bottom: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;
width: 100%; width: 100%;
background-color: #fff; background-color: #fff;
box-shadow: 0 0 3px 0 #BDBDBD;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
@ -330,10 +330,22 @@ button.add-timer {
max-height: calc(100vh - 60px); 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) { @media all and (min-width: 1024px) {
.new-timer { .new-timer {
max-width: 800px; max-width: 800px;
max-height: 600px; max-height: 500px;
box-shadow: 0px 0px 3px #bdbdbd; box-shadow: 0px 0px 3px #bdbdbd;
border-radius: 10px; border-radius: 10px;
} }
@ -341,6 +353,19 @@ button.add-timer {
#timer-setup { #timer-setup {
max-height: 540px; 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 { #timer-setup input, #timer-setup textarea, #timer-setup select {
@ -355,22 +380,17 @@ button.add-timer {
display: block; display: block;
} }
.select-wrapper { #timer-setup input.duration {
display: table; text-align: center;
width: 100%; flex: 0;
flex-basis: 20%;
padding-left: 0;
padding-right: 0;
} }
.select-wrapper span { .repeat-entry {
width: 2%;
font-weight: bold;
text-align: center; text-align: center;
} }
.select-wrapper select, .select-wrapper span {
display: table-cell;
}
.min {text-align: left;}
.sec {text-align: right;}
#back {float: left;} #back {float: left;}
#next {float: right;} #next {float: right;}

59
src/index.html
View file

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