Use snake case IDs in HTML Markup

dnl50 · Feb 22, 2023 · defa283 · defa283
1 parent b97ef46
commit defa283
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/web/src/main/resources/templates/fragments/navbar.html b/web/src/main/resources/templates/fragments/navbar.html
@@ -4,12 +4,12 @@
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
         <div class="container-fluid">
             <a class="navbar-brand" th:href="@{/}">Time Stamp Authority</a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
-                    aria-controls="navbarSupportedContent"
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-supported-content"
+                    aria-controls="navbar-supported-content"
                     aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
-            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <div class="collapse navbar-collapse" id="navbar-supported-content">
                 <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                     <li class="nav-item">
                         <a class="nav-link" th:href="@{/web/history}" th:text="#{navbar.history-page}">Overview</a>

diff --git a/web/src/main/resources/templates/history.html b/web/src/main/resources/templates/history.html
@@ -7,15 +7,15 @@
 
 <div th:replace="~{fragments/navbar.html :: navbar}"></div>
 
-<div id="hashValueModal" class="modal fade" tabindex="-1" aria-labelledby="hashValueModalLabel" aria-hidden="true">
+<div id="hash-value-modal" class="modal fade" tabindex="-1" aria-labelledby="hash-value-modal-label" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 id="hashValueModalLabel" class="modal-title" th:text="#{history.hash-modal.title}">Hash</h5>
+                <h5 id="hash-value-modal-label" class="modal-title" th:text="#{history.hash-modal.title}">Hash</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
-                <span class="text-break font-monospace" id="hashValueModalContent">dynamically replaced by jQuery onClick Handler</span>
+                <span class="text-break font-monospace" id="hash-value-modal-content">dynamically replaced by jQuery onClick Handler</span>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" th:text="#{history.hash-modal.close}">Close</button>
@@ -85,8 +85,8 @@ <h5 id="hashValueModalLabel" class="modal-title" th:text="#{history.hash-modal.t
             const clickedRow = historyTable.row($(this).parents('tr'))
             const base64Hash = clickedRow.data().request.hash
 
-            $('#hashValueModalContent').text(base64Hash)
-            $('#hashValueModal').modal('show');
+            $('#hash-value-modal-content').text(base64Hash)
+            $('#hash-value-modal').modal('show');
         });
     });
 </script>

diff --git a/web/src/main/resources/templates/validate.html b/web/src/main/resources/templates/validate.html
@@ -10,8 +10,8 @@
 <div class="flex-grow-1 flex-shrink-0 container">
     <form th:action="@{/web/validate}" th:object="${response}" method="post">
         <div class="mb-3">
-            <input type="text" class="form-control" id="tspResponse" aria-describedby="tspResponseHelp" th:field="*{base64EncodedResponse}">
-            <div id="tspResponseHelp" class="form-text" th:text="#{validate.input-description}">Base64</div>
+            <input type="text" class="form-control" id="tsp-response" aria-describedby="tsp-response-help" th:field="*{base64EncodedResponse}">
+            <div id="tsp-response-help" class="form-text" th:text="#{validate.input-description}">Base64</div>
             <div class="alert alert-warning" th:if="${#fields.hasErrors('base64EncodedResponse')}" th:errors="*{base64EncodedResponse}"></div>
             <div class="alert alert-danger" th:if="${invalidTspResponse}" th:text="#{validate.error.invalid-response}">Invalid</div>
         </div>