Better Bootstrap use and fix dropdown actions (#47)

* Better Bootstrap use and fix dropdown actions * Simplify HTML
sakaicontrib · Apr 26, 2024 · 957c1f2 · 957c1f2
1 parent c0fdfd0
commit 957c1f2
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 45 deletions.
diff --git a/tool/src/webapp/jsp/certviewAdmin.jsp b/tool/src/webapp/jsp/certviewAdmin.jsp
@@ -75,7 +75,7 @@
                     </nav>
                 </div>
             </div>
-            <table id="cList" class="table table-hover table-striped table-bordered" summary="Certificates">
+            <table id="cList" class="table table-hover table-striped table-bordered mt-2" summary="Certificates">
                 <thead>
                     <tr>
                         <th class="colCertificate"><spring:message code="form.label.certificate"/></th>
@@ -96,22 +96,25 @@
                             </td>
                             <td class="colActions colMin">
                                 <div class="btn-group pull-right">
-                                    <button id="" type="button" class="btn btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                        <span class="sr-only"><spring:message code="form.actions" /></span>
+                                    <button type="button" class="btn btn-xs btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                         <span><spring:message code="form.actions" /></span>
                                         <span class="caret"></span>
                                     </button>
-                                    <ul class="dropdown-menu row" role="menu">
-                                        <li class="dropdown-button">
-                                            <a href="first.form?certId=${cert.id}">
+                                    <ul class="dropdown-menu">
+                                        <li>
+                                            <a class="dropdown-item" href="first.form?certId=${cert.id}">
                                                 <spring:message code="form.actions.edit" />
                                             </a>
-                                            <c:if test="${cert.status == 'ACTIVE'}" >
-                                                <a id="report${cert.id}" href="reportView.form?certId=${cert.id}" onclick="SPNR.insertSpinnerInPreallocated( this, null, 'spinner_${cert.id}' );">
+                                        </li>
+                                        <c:if test="${cert.status == 'ACTIVE'}" >
+                                            <li>
+                                                <a class="dropdown-item" id="report${cert.id}" href="reportView.form?certId=${cert.id}" onclick="SPNR.insertSpinnerInPreallocated( this, null, 'spinner_${cert.id}' );">
                                                     <spring:message code="form.label.report.cell" />
                                                 </a>
-                                            </c:if>
-                                            <a href="#" onClick="deleteCert('${cert.id}')">
+                                            </li>
+                                        </c:if>
+                                        <li>
+                                            <a class="dropdown-item" href="#" onClick="deleteCert('${cert.id}')">
                                                 <spring:message code="form.actions.remove" />
                                             </a>
                                         </li>

diff --git a/tool/src/webapp/jsp/createCertificateFour.jsp b/tool/src/webapp/jsp/createCertificateFour.jsp
@@ -122,10 +122,10 @@
             </div>
         </span>
     </div>
-    <div>
-        <input id="save" type="button" value="<spring:message code='form.submit.activateCert' />" />
-        <input id="back" type="button" value="<spring:message code='form.submit.back' />" />
-        <input id="cancel" type="button" value="<spring:message code='form.submit.cancel' />" />
+    <div class="my-2">
+        <input id="save" class="btn btn-primary" type="button" value="<spring:message code='form.submit.activateCert' />" />
+        <input id="back" class="btn" type="button" value="<spring:message code='form.submit.back' />" />
+        <input id="cancel" class="btn" type="button" value="<spring:message code='form.submit.cancel' />" />
         <form:hidden path="submitValue" />
     </div>
 </form:form>

diff --git a/tool/src/webapp/jsp/createCertificateOne.jsp b/tool/src/webapp/jsp/createCertificateOne.jsp
@@ -61,9 +61,9 @@
         </tbody>
     </table>
 
-    <div>
-        <input id="continue" type="button" value="<spring:message code='form.submit.continue' />" />
-        <input id="cancel" type="button" value="<spring:message code='form.submit.cancel' />" />
+    <div class="my-2">
+        <input id="continue" class="btn btn-primary" type="button" value="<spring:message code='form.submit.continue' />" />
+        <input id="cancel" class="btn" type="button" value="<spring:message code='form.submit.cancel' />" />
         <form:hidden path="submitValue" />
     </div>
 </form:form>

diff --git a/tool/src/webapp/jsp/createCertificateThree.jsp b/tool/src/webapp/jsp/createCertificateThree.jsp
@@ -60,10 +60,10 @@
             </tbody>
         </table>
     </div>
-    <div>
-        <input id="continue" type="button" value="<spring:message code='form.submit.continue' />" />
-        <input id="back" type="button" value="<spring:message code='form.submit.back' />" />
-        <input id="cancel" type="button" value="<spring:message code='form.submit.cancel' />" />
+    <div class="my-2">
+        <input id="continue" class="btn btn-primary" type="button" value="<spring:message code='form.submit.continue' />" />
+        <input id="back" class="btn" type="button" value="<spring:message code='form.submit.back' />" />
+        <input id="cancel" class="btn" type="button" value="<spring:message code='form.submit.cancel' />" />
         <form:hidden path="submitValue" />
     </div>
 </form:form>

diff --git a/tool/src/webapp/jsp/createCertificateTwo.jsp b/tool/src/webapp/jsp/createCertificateTwo.jsp
@@ -85,10 +85,10 @@
             <spring:message code="form.label.showRequirements"/>
         </label>
     </div>
-    <div>
-        <input id="continue" type="button" value="<spring:message code='form.submit.continue' />" />
-        <input id="back" type="button" value="<spring:message code='form.submit.back' />" />
-        <input id="cancel" type="button" value="<spring:message code='form.submit.cancel' />" />
+    <div class="my-2">
+        <input id="continue" class="btn btn-primary" type="button" value="<spring:message code='form.submit.continue' />" />
+        <input id="back" type="button" class="btn" value="<spring:message code='form.submit.back' />" />
+        <input id="cancel" type="button" class="btn" value="<spring:message code='form.submit.cancel' />" />
         <form:hidden path="submitValue" />
     </div>
 </form:form>

diff --git a/tool/src/webapp/jsp/header.jsp b/tool/src/webapp/jsp/header.jsp
@@ -1,25 +1,22 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!DOCTYPE html>
 <%@ include file="/jsp/include.jsp" %>
-<% response.setContentType("text/html; charset=UTF-8"); %>
 
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+<html lang="en">
 <head>
     <title><%= (String)request.getAttribute("_title")%></title>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <meta http-equiv="Content-Style-Type" content="text/css" />
-    <link href='<c:out value="${sakai_skin_base}" />' type="text/css" rel="stylesheet" media="all" />
-    <link href='<c:out value="${sakai_skin}" />' type="text/css" rel="stylesheet" media="all" />
-    <link media="all" href="css/certification.css" rel="stylesheet" type="text/css" />
-    <script type="text/javascript" language="JavaScript" src="/library/js/headscripts.js"></script>
-    <script type="text/javascript" language="Javascript" src="/library/js/spinner.js"></script>
+    <link href='<c:out value="${sakai_skin_base}" />' rel="stylesheet" />
+    <link href='<c:out value="${sakai_skin}" />' rel="stylesheet" />
+    <link href="css/certification.css" rel="stylesheet" />
+    <script src="/library/js/headscripts.js"></script>
+    <script src="/library/js/spinner.js"></script>
     <%
         String panelId = request.getParameter("panel");
         if (panelId == null) {
             panelId = "Main" + org.sakaiproject.tool.cover.ToolManager.getCurrentPlacement().getId();
         }
     %>
 
-    <script language="javascript">
+    <script>
         var sakai = sakai || {};
         sakai.locale = sakai.locale || {};
         sakai.locale.userCountry = '${localeRef.getCountry()}';

diff --git a/tool/src/webapp/jsp/reportView.jsp b/tool/src/webapp/jsp/reportView.jsp
@@ -1,7 +1,7 @@
 <%@ include file="/jsp/include.jsp" %>
 <jsp:include page="/jsp/header.jsp" />
-<script type="text/javascript" src="/library/js/jquery/cookie/jquery.cookie.js"></script>
-<script type="text/javascript" src="/library/js/lang-datepicker/lang-datepicker.js"></script>
+<script src="/library/js/jquery/cookie/jquery.cookie.js"></script>
+<script src="/library/js/lang-datepicker/lang-datepicker.js"></script>
 
 <form:form id="reportView" method="POST">
     <ul class="navIntraTool actionToolBar">
@@ -351,7 +351,7 @@
             return false;
         });
 
-        var id = $("#certificateId").val();
+        const id = $("#certificateId").val();
 
         $("#first").click(function() {
             SPNR.disableControlsAndSpin( this, null );
@@ -386,18 +386,18 @@
         $("#filterApply").click(function() {
             SPNR.disableControlsAndSpin( this, null );
             $("#filterReset").attr('disabled', 'disabled');
-            var filterType = $("input[name='show']:checked").val();
+            const filterType = $("input[name='show']:checked").val();
             <c:choose>
                 <c:when test="${expiryOffset != null}">
-                    var filterDateType = $("#filterDateType option:selected").val();
+                    const filterDateType = $("#filterDateType option:selected").val();
                 </c:when>
                 <c:otherwise>
-                    var filterDateType = "issueDate";
+                    const filterDateType = "issueDate";
                 </c:otherwise>
             </c:choose>
-            var filterStartDate = $("#startDateYear").val() + "-" + $("#startDateMonth").val() + "-" + $("#startDateDay").val();
-            var filterEndDate = $("#endDateYear").val() + "-" + $("#endDateMonth").val() + "-" + $("#endDateDay").val();
-            var filterHistorical = $("#historical").prop('checked');
+            const filterStartDate = $("#startDateYear").val() + "-" + $("#startDateMonth").val() + "-" + $("#startDateDay").val();
+            const filterEndDate = $("#endDateYear").val() + "-" + $("#endDateMonth").val() + "-" + $("#endDateDay").val();
+            const filterHistorical = $("#historical").prop('checked');
             $.cookie("filterType", filterType);
             $.cookie("filterDateType", filterDateType);
             $.cookie("filterStartDate", filterStartDate);