Rework spacing

pcprince · Aug 28, 2024 · 4c285b9 · 4c285b9
1 parent cd7d946
commit 4c285b9
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 7 deletions.
diff --git a/js/songClips.js b/js/songClips.js
@@ -299,10 +299,8 @@ function createSongUI () {
 
         const clipCol = document.createElement('div');
         clipCol.classList.add('col');
-        clipCol.style.paddingLeft = '10%';
 
         const playClipButton = document.createElement('button');
-        // playClipButton.textContent = `Play ${index + 1}`;
         playClipButton.innerHTML = '<img class="button-icon" src="./images/play-fill.svg" alt="Bootstrap">';
         playClipButton.classList.add('playback-button', 'btn', 'btn-secondary', 'play-clip-button');
         playClipButton.id = `play-clip-button${index}`;

diff --git a/play.html b/play.html
@@ -224,7 +224,7 @@ <h1 class="modal-title fs-5" id="staticBackdropLabel">Paused</h1>
             </div>
         </div>
 
-        <div class="row" style="margin-top: 5px;">
+        <div class="row">
             <div class="col" style="text-align: center;">
                 <span class="playing-span" style="font-weight: bold;">Playing: </span>
                 <span id="clip-number-span" class="playing-span" style="width: 26px; display: inline-block; text-align: center;">-</span>
@@ -252,20 +252,20 @@ <h1 class="modal-title fs-5" id="staticBackdropLabel">Paused</h1>
             </div>
         </div>
 
-        <div class="row" style="margin-top: 7px;">
+        <div class="row">
             <div class="col" style="text-align: center;">
                 <input type="checkbox" id="skip-guessed-checkbox"><label id="skip-guessed-checkbox-label" for="skip-guessed-checkbox" style="margin-left: 5px; color: grey; font-size: small;">Skip correct guesses</label>
             </div>
         </div>
 
-        <div class="row" style="margin-top: 7px;">
+        <div class="row" style="margin-top: 3px;">
             <div class="col" style="text-align: center;">
-                <input id="guess-input" style="width: 500px; font-size: large;" disabled>
+                <input id="guess-input" style="width: 40%; font-size: large;" disabled>
                 <button class="btn btn-danger" id="help-button" disabled style="height: 33px; padding-top: 3px; vertical-align: top;">Help</button>
             </div>
         </div>
 
-        <div class="row" style="margin-top: 7px;" id="song-ui-container"></div>
+        <div class="row" style="margin-top: 7px; padding-left: 20px; padding-right: 20px;" id="song-ui-container"></div>
 
     </div>