Merge pull request #444 from SwiftFiddle/styling

Styling

Author: kishikawakatsumi

Public/css/common.css

@@ -57,7 +57,9 @@
 #debugger-button {
   background-color: rgba(51, 51, 51, 0.05);
   border-radius: 15px;
-  border-width: 0;
+  border-width: 1px;
+  border-color: #dee2e6;
+  border-style: solid;
   color: #333333;
   cursor: pointer;
   display: inline-block;

Public/index.html

@@ -144,7 +144,8 @@ <h1 class="h5 my-2">
               </div>
               <div class="col align-self-center">
                 <div class="text-end mt-2">
-                  <button id="debugger-button" data-bs-toggle="modal" data-bs-target="#debugger-modal">Debug</button>
+                  <button id="debugger-button" class="px-3" data-bs-toggle="modal"
+                    data-bs-target="#debugger-modal">Debugger</button>
                   <span id="match-count" class="text-bg-light border px-3 py-1">no match</span>
                 </div>
               </div>
@@ -166,7 +167,7 @@ <h1 class="h5 my-2">
     <div class="modal fade" id="debugger-modal" tabindex="-1" aria-labelledby="debugger-modal-title" aria-hidden="true">
       <div class="modal-dialog modal-dialog-scrollable modal-xl">
         <div class="modal-content">
-          <div class="modal-header">
+          <div class="modal-header py-2">
             <h1 class="modal-title fs-5" id="debugger-modal-title">Regex Debugger</h1>
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
@@ -205,7 +206,11 @@ <h1 class="modal-title fs-5" id="debugger-modal-title">Regex Debugger</h1>
 
               <div class="flex-grow-1">
                 <label for="debugger-step-range" class="form-label" style="font-weight: 600;">Match Steps</label>
-                <input id="debugger-step-range" type="range" class="form-range" value="1" min="1" max="100">
+                <div class="d-flex">
+                  <input id="debugger-step-range" type="range" class="form-range flex-grow-1" value="1" min="1"
+                    max="100">
+                  <div id="debugger-step-range-max" class="ms-3">100</div>
+                </div>
                 <p class="mb-0" style="text-align: center">
                   <button id="debugger-go-start" class="btn btn-sm btn-outline-secondary rounded-circle button-circle">
                     <i class="fa-solid fa-backward-step fa-lg"></i>

Public/js/app.js

@@ -371,6 +371,11 @@ export class App {
           const matchStepRange = document.getElementById("debugger-step-range");
           matchStepRange.max = metrics.stepCount;
 
+          const matchStepRangeMax = document.getElementById(
+            "debugger-step-range-max"
+          );
+          matchStepRangeMax.textContent = metrics.stepCount;
+
           const instructions = document.getElementById("debugger-instructions");
           instructions.innerHTML = "";