refactor(event-setup): imrpove form responsiveness

mathieuher · Jan 20, 2024 · fd40282 · fd40282
1 parent b4d9f2f
commit fd40282
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 32 deletions.
diff --git a/index.html b/index.html
@@ -17,48 +17,38 @@
         </div>
         <div class="hud-container">
             <div class="actions-toolbar">
-                <i id="sound-mute-button" class="fa-solid fa-volume-high" title="Disable sound during the race"></i>
-                <i id="sound-button" class="fa-solid fa-volume-xmark" title="Enable sound during the race"></i>
+                <i id="sound-mute-button" class="fa-solid fa-volume-high"></i>
+                <i id="sound-button" class="fa-solid fa-volume-xmark"></i>
             </div>
             <div id="event-setup">
                 <div class="dialog">
                     <div class="title">Event setup</div>
                     <div class="dialog-content">
                         <div class="form-line">
                             <div class="label">Track</div>
-                            <div class="input">
-                                <input type="text" id="track-input"
-                                    placeholder="Soelden, Davos, Wengen, Adelboden, Zermatt..." />
-                            </div>
+                            <input type="text" id="track-input"
+                                placeholder="Soelden, Davos, Wengen, Adelboden, Zermatt..." />
                         </div>
                         <div class="form-line">
                             <div class="label">Style <small>(only used when generating a new track)</small></div>
-                            <div class="input">
-                                <select id="track-style-select">
-                                    <option value="SL">Slalom</option>
-                                    <option selected value="GS">Giant slalom</option>
-                                    <option value="SG">Super-G</option>
-                                    <option value="DH">Downhill</option>
-                                </select>
-                            </div>
+                            <select id="track-style-select">
+                                <option value="SL">Slalom</option>
+                                <option selected value="GS">Giant slalom</option>
+                                <option value="SG">Super-G</option>
+                                <option value="DH">Downhill</option>
+                            </select>
                         </div>
                         <div class="form-line">
                             <div class="label">Skier 1</div>
-                            <div class="input">
-                                <input type="text" id="skier-1-input" placeholder="Skier 1 name" />
-                            </div>
+                            <input type="text" id="skier-1-input" placeholder="Skier 1 name" />
                         </div>
                         <div class="form-line">
                             <div class="label">Skier 2</div>
-                            <div class="input">
-                                <input type="text" id="skier-2-input" placeholder="Skier 2 name" />
-                            </div>
+                            <input type="text" id="skier-2-input" placeholder="Skier 2 name" />
                         </div>
                         <div class="form-line">
                             <div class="label">Number of races</div>
-                            <div class="input">
-                                <input type="number" id="races-number-input" value="1" min="1" max="10" />
-                            </div>
+                            <input type="number" id="races-number-input" value="1" min="1" max="10" />
                         </div>
                     </div>
                     <div class="dialog-actions">

diff --git a/src/scss/game.scss b/src/scss/game.scss
@@ -110,7 +110,7 @@ html body {
                     font-size: 1.7rem;
                     display: flex;
                     flex-direction: column;
-                    gap: 2rem;
+                    gap: 1rem;
 
                     .form-line {
                         display: flex;
@@ -121,11 +121,12 @@ html body {
                         align-items: center;
                         overflow: hidden;
 
-                        .input {
-                            display: flex;
-                            overflow: hidden;
+                        .label {
+                            min-width: 350px;
                         }
 
+
+
                     }
                 }
             }
@@ -134,25 +135,26 @@ html body {
             input,
             input:active,
             input:focus {
+                display: flex;
+                flex: 1 1 auto;
                 font-size: 1.3rem;
                 padding: 0.5rem 1rem !important;
                 color: $text;
                 background-color: transparent;
                 border: 2px solid $text;
                 border-radius: 4px;
                 outline: none;
-                max-width: calc(100% - 4rem);
+                min-width: 0;
+
 
-                &:not([type="number"]) {
-                    width: calc(300px - 2rem);
+                &[type="number"] {
+                    max-width: 100px;
                 }
 
 
             }
 
             select {
-                width: calc(300px + 4px) !important;
-                max-width: calc(100% - 2rem) !important;
                 appearance: none;
                 background-color: $primary;
             }