hawk / commit
Starting to implement up/down arrows for the times.
public/index.html | 34 +++++++++++++++++++++++++++++----- public/style.css | 32 +++++++++++++++++++++++++++++--- 2 files changed, 58 insertions(+), 8 deletions(-) diff --git a/public/index.html b/public/index.html index 8f42e08..a491119 100644 --- a/public/index.html +++ b/public/index.html @@ -62,14 +62,38 @@ <div> <h3>Search for a song by duration:</h3> </div> - <div> + <div id="search-controls"> <span id="minutes"> - <input id="minutes-input" type="number" min="0" max="59" value="5" /> - <label for="minutes-input">min</label> + <button class="arrow"> + <span class="material-symbols-outlined"> + arrow_drop_up + </span> + </button> + <div> + <input id="minutes-input" type="number" min="0" max="59" value="5" /> + <label for="minutes-input">min</label> + </div> + <button class="arrow"> + <span class="material-symbols-outlined"> + arrow_drop_down + </span> + </button> </span> <span id="seconds"> - <input id="seconds-input" type="number" min="0" max="59" value="32" /> - <label for="seconds-input">sec</label> + <button class="arrow"> + <span class="material-symbols-outlined"> + arrow_drop_up + </span> + </button> + <div> + <input id="seconds-input" type="number" min="0" max="59" value="32" /> + <label for="seconds-input">sec</label> + </div> + <button class="arrow"> + <span class="material-symbols-outlined"> + arrow_drop_down + </span> + </button> </span> <button id="search" onclick="searchForMatch()">Search</button> </div> diff --git a/public/style.css b/public/style.css index 319b3cd..c2061cd 100644 --- a/public/style.css +++ b/public/style.css @@ -9,7 +9,7 @@ body { #seconds, #sign-in-div { display: flex; - flex-direction: row; + flex-direction: column; align-items: center; display: inline-block; } @@ -56,8 +56,8 @@ div { font-variation-settings: 'FILL' 0, 'wght' 1200, - 'GRAD' 0, - 'opsz' 24 + 'GRAD' 200, + 'opsz' 48 } .icon-and-label { @@ -100,4 +100,30 @@ button { width: 1em; height: 1em; margin-right: 1em; +} + +/* Chrome, Safari, Edge, Opera */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* Firefox */ +input[type=number] { + -moz-appearance: textfield; +} + +.arrow { + display: flex; + flex-direction: column; + align-items: center; + justify-items: center; +} + +#search-controls { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; } \ No newline at end of file