[#1003] Migrate Policy Settings JSP To Thymeleaf

HIRS_AttestationCAPortal/src/main/java/hirs/attestationca/portal/page/PageController.java

@@ -119,7 +119,6 @@ protected final RedirectView redirectToSelf(
             final P params,
             final Map<String, ?> model,
             final RedirectAttributes attr) throws URISyntaxException {
-
         return redirectTo(page, params, model, attr);
     }
 

HIRS_AttestationCAPortal/src/main/resources/static/css/sidebar.css

@@ -1,8 +1,6 @@
+/* General Transition for sidebar and main */
 nav.sidebar,
 .main {
-  -webkit-transition: margin 200ms ease-out;
-  -moz-transition: margin 200ms ease-out;
-  -o-transition: margin 200ms ease-out;
   transition: margin 200ms ease-out;
 }
 
@@ -14,48 +12,51 @@ nav.sidebar {
   margin-bottom: 0;
 }
 
-nav.sidebar .navbar-nav .open .dropdown-menu>li>a:is(:hover, :focus) {
-  color: #CCC;
+nav.sidebar .navbar-nav .open .dropdown-menu > li > a:is(:hover, :focus) {
+  color: #ccc;
   background-color: transparent;
 }
 
-#sidebar-navbar>ul>li>a {
+/* Sidebar menu links */
+#sidebar-navbar > ul > li > a {
   color: white;
 }
 
-#sidebar-navbar > ul > li:is(:hover, .active),
-#sidebar-navbar .active > a,
-#sidebar-navbar > ul > li > a:hover {
+#sidebar-navbar > ul > li > a:hover,
+#sidebar-navbar > ul > li.active > a,
+#sidebar-navbar > ul > li > a:focus,
+#sidebar-navbar > ul > li.active > a:focus {
   background-color: white;
   color: black;
 }
 
-#sidebar-navbar>ul>li>a:hover span img,
-#sidebar-navbar .active>a>span>img {
+#sidebar-navbar > ul > li > a:hover span img,
+#sidebar-navbar .active > a > span > img {
   filter: brightness(0.25);
 }
 
-/* collapsed menu option */
+/* Collapsed menu styles for small screens */
 @media (max-width: 765px) {
   .main {
-    height: calc(100% - 50px);
+    height: calc(100% - 50px); /* Account for header height */
   }
 
   nav.sidebar {
     background-color: #f8f8f8;
     border-color: #e7e7e7;
-    border: 1px solid transparent;
+    border-width: 1px;
+    border-style: solid;
   }
 
-  #sidebar-navbar>ul>li>a {
+  #sidebar-navbar > ul > li > a {
     color: #777;
     background-color: #f8f8f8;
   }
 
-  #sidebar-navbar>ul>li:hover,
-  #sidebar-navbar>ul>li>a:hover,
+  #sidebar-navbar > ul > li:hover,
+  #sidebar-navbar > ul > li > a:hover,
   #sidebar-navbar .active,
-  #sidebar-navbar .active>a {
+  #sidebar-navbar .active > a {
     background-color: #e7e7e7;
     color: #555;
   }
@@ -65,28 +66,22 @@ nav.sidebar .navbar-nav .open .dropdown-menu>li>a:is(:hover, :focus) {
   }
 }
 
-/*images side menu*/
+/* Images and main content layout for medium to large screens */
 @media (min-width: 765px) {
-
   .main {
-    width: calc(100% - 50px);
-    margin-left: 50px;
-  }
-
-  nav.sidebar:hover+.main {
-    margin-left: 250px;
+    width: calc(100% - 50px); /* Adjust main width */
+    margin-left: 50px; /* Space for sidebar */
   }
 
-  nav.sidebar.navbar.sidebar>.container .navbar-brand,
-  .navbar>.container-fluid .navbar-brand {
-    margin-left: 0px;
+  nav.sidebar:hover + .main {
+    margin-left: 250px; /* Expand main content on hover */
   }
 
   nav.sidebar .navbar-brand,
   nav.sidebar {
     text-align: center;
     width: 100%;
-    margin-left: 0px;
+    margin-left: 0;
   }
 
   nav.sidebar a {
@@ -98,13 +93,12 @@ nav.sidebar .navbar-nav .open .dropdown-menu>li>a:is(:hover, :focus) {
     margin-top: 0;
     background-color: transparent;
     border: 0;
-    -webkit-box-shadow: none;
     box-shadow: none;
   }
 
   nav.sidebar .navbar-collapse,
   nav.sidebar .container-fluid {
-    padding: 0 0px 0 0px;
+    padding: 0;
   }
 
   nav.sidebar {
@@ -124,9 +118,10 @@ nav.sidebar .navbar-nav .open .dropdown-menu>li>a:is(:hover, :focus) {
   }
 }
 
+/* Extra-large screens (Desktop) */
 @media (min-width: 1330px) {
   .main {
-    width: calc(100% - 250px);
+    width: calc(100% - 250px); /* Adjust main content for wide screen */
     margin-left: 250px;
   }
 
@@ -135,4 +130,4 @@ nav.sidebar .navbar-nav .open .dropdown-menu>li>a:is(:hover, :focus) {
     margin-top: 0;
     float: left;
   }
-}
+}

HIRS_AttestationCAPortal/src/main/resources/templates/fragments/editor.html

@@ -2,7 +2,7 @@
 <html xmlns:th="http://www.thymeleaf.org">
 
 <body>
-    <div th:fragment="editorIcon(id, label, customButtons, bodyContent)">
+    <div th:fragment="editor(id, label, bodyContent)">
         <!-- Editor icon anchor -->
         <a th:href="'#' + ${id}" data-toggle="modal" th:title="${label}">
             <img th:src="@{/icons/ic_mode_edit_blue_18dp.png}" alt="Editor Icon" />
@@ -12,7 +12,6 @@
         <div th:replace="fragments/modal :: modal(
         id=${id}, 
         label=${label}, 
-        customButtons=${customButtons}, 
         bodyContent=${bodyContent}
     )"></div>
     </div>

HIRS_AttestationCAPortal/src/main/resources/templates/fragments/modal.html

@@ -2,9 +2,7 @@
 <html xmlns:th="http://www.thymeleaf.org">
 
 <body>
-    <div th:fragment="modal(id, label, customButtons, bodyContent)" th:id="${id}" class="modal fade" role="dialog"
-        style="top:30%">
-
+    <div class="modal fade" role="dialog" style="top:30%" th:fragment="modal(id,label,bodyContent)" th:id="${id}">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
@@ -16,10 +14,6 @@ <h1 id="modal-title" th:text="${label}">Modal Title</h1>
                 </div>
 
                 <div class="modal-footer">
-                    <th:block th:if="${customButtons != null}">
-                        <div class="modal-custom-buttons" th:replace="${customButtons}">
-                        </div>
-                    </th:block>
                     <button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                     <input class="btn btn-primary" type="submit" value="Save" />
                 </div>

HIRS_AttestationCAPortal/src/main/resources/templates/fragments/page-messages.html

@@ -3,29 +3,28 @@
 
 <body>
     <div th:fragment="pageMessages(messages)">
-        <div th:if="${not #lists.isEmpty(messages)}" id="page-messages-container">
+        <div id="page-messages-container" th:if="${not #lists.isEmpty(messages)}">
             <ul class="noPaddingOrMargin" id="page-messages">
-                <li th:each="error : ${messages.errorMessages}" class="page-message" id="page-errorMessage">
+                <li class="page-message" id="page-errorMessage" th:each="error : ${messages.errorMessages}">
                     <span class="page-messageIcon">
-                        <img th:src="@{/icons/ic_priority_high_white_24dp.png}" alt="Error icon" />
+                        <img alt="Error icon" th:src="@{/icons/ic_priority_high_white_24dp.png}" />
                     </span>
                     [[${error}]]
                 </li>
 
-                <li th:each="success : ${messages.successMessages}" class="page-message" id="page-successMessage">
+                <li class="page-message" id="page-successMessage" th:each="success : ${messages.successMessages}">
                     <span class="page-messageIcon">
-                        <img th:src="@{/icons/ic_done_white_24dp.png}" alt="Success icon" />
+                        <img alt="Success icon" th:src="@{/icons/ic_done_white_24dp.png}" />
                     </span>
-                    <span th:text="${success}">Success message</span>
+                    <p th:text="${success}">Success message</p>
                 </li>
 
-                <li th:each="info : ${messages.infoMessages}" class="page-message" id="page-infoMessage">
+                <li class="page-message" id="page-infoMessage" th:each="info : ${messages.infoMessages}">
                     <span class="page-messageIcon">
-                        <img th:src="@{/icons}/ic_priority_high_white_24dp.png" alt="Info icon" />
+                        <img alt="Info icon" th:src="@{/icons}/ic_priority_high_white_24dp.png" />
                     </span>
-                    <span th:text="${info}">Info message</span>
+                    <p th:text="${info}">Info message</p>
                 </li>
-
             </ul>
         </div>
     </div>

HIRS_AttestationCAPortal/src/main/resources/templates/fragments/page-nav.html

@@ -20,7 +20,7 @@
                             <a th:href="@{'/HIRS_AttestationCAPortal/portal/' + ${p?.prefixPath} + ${p?.viewName}}">
                                 <span th:text="${p?.title}">Page Title</span>
                                 <span class="pull-right hidden-xs showopacity">
-                                    <img th:src="@{/icons/{icon}_white_24dp.png(icon=${p?.icon})}" alt="" />
+                                    <img th:src="@{/icons/{icon}_white_24dp.png(icon=${p?.icon})}" alt="icon" />
                                 </span>
                             </a>
                         </li>