Move common admin UI CSS/JS to static files (#2619)

Move the shared CSS properties to a separate CSS file rather than including them in every page's HTML. Make the persistent expandable section functionality available to all admin UI pages. In dev environments, if you're working on the admin UI, you'll want to be able to see edits to these files right away; add options to disable static-content caching to the example application config file for dev environments.
terraware · Nov 20, 2024 · 5585ec5 · 5585ec5
1 parent 0898321
commit 5585ec5
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 52 deletions.
diff --git a/src/main/resources/application-dev.yaml.sample b/src/main/resources/application-dev.yaml.sample
@@ -16,3 +16,11 @@ spring:
   datasource:
     username:
     password:
+
+  web:
+    resources:
+      # Don't cache static resources. Local edits to admin UI static files are immediately visible.
+      cache:
+        period: 0
+      chain:
+        cache: false
diff --git a/src/main/resources/public/admin/admin.css b/src/main/resources/public/admin/admin.css
@@ -0,0 +1,22 @@
+details.section {
+    margin-left: 32px;
+}
+
+details.section summary {
+    margin-top: 16px;
+    margin-left: -32px;
+    font-size: 18pt;
+    font-weight: bold;
+}
+
+input {
+    margin-top: 4px;
+}
+
+select {
+    margin-top: 4px;
+}
+
+tr.striped:nth-child(even) {
+    background-color: lightgray;
+}
diff --git a/src/main/resources/public/admin/admin.js b/src/main/resources/public/admin/admin.js
@@ -0,0 +1,20 @@
+function rememberSectionExpansions() {
+    const detailsElements = document.querySelectorAll('details.section');
+    const detailsState = JSON.parse(localStorage.getItem('adminSectionsExpanded')) || {};
+
+    detailsElements.forEach(details => {
+        // Expand previously-expanded sections on initial load.
+        if (details.id in detailsState) {
+            details.open = detailsState[details.id];
+        }
+
+        // As sections are toggled, update local storage to reflect their states.
+        details.addEventListener('toggle', () => {
+            detailsState[details.id] = details.open;
+            localStorage.setItem('adminSectionsExpanded', JSON.stringify(detailsState));
+        });
+    });
+}
+
+// Expand previously-opened sections on page load.
+document.addEventListener('DOMContentLoaded', rememberSectionExpansions);
diff --git a/src/main/resources/templates/admin/header.html b/src/main/resources/templates/admin/header.html
@@ -5,22 +5,10 @@
         Terraware Administration
     </title>
 
-    <th:block th:replace="~{::additionalScript} ?: ~{}"/>
-
-    <style>
-        input {
-            margin-top: 4px;
-        }
-
-        select {
-            margin-top: 4px;
-        }
-
-        tr.striped:nth-child(even) {
-            background-color: lightgray;
-        }
-    </style>
+    <script src="/admin/admin.js" type="application/javascript"></script>
+    <link href="/admin/admin.css" rel="stylesheet" />
 
+    <th:block th:replace="~{::additionalScript} ?: ~{}"/>
     <th:block th:replace="~{::additionalStyle} ?: ~{}"/>
 </head>
 

diff --git a/src/main/resources/templates/admin/index.html b/src/main/resources/templates/admin/index.html
@@ -1,42 +1,6 @@
 <!DOCTYPE HTML>
 <html xmlns:th="http://www.thymeleaf.org">
-<head th:replace="~{/admin/header :: head}">
-    <script th:fragment="additionalScript">
-        function rememberSectionExpansions() {
-            const detailsElements = document.querySelectorAll('details.section');
-            const detailsState = JSON.parse(localStorage.getItem('adminSectionsExpanded')) || {};
-
-            detailsElements.forEach(details => {
-                // Expand previously-expanded sections on initial load.
-                if (details.id in detailsState) {
-                    details.open = detailsState[details.id];
-                }
-
-                // As sections are toggled, update local storage to reflect their states.
-                details.addEventListener('toggle', () => {
-                    detailsState[details.id] = details.open;
-                    localStorage.setItem('adminSectionsExpanded', JSON.stringify(detailsState));
-                });
-            });
-        }
-
-        // Expand previously-opened sections on page load.
-        document.addEventListener('DOMContentLoaded', rememberSectionExpansions);
-    </script>
-
-    <style th:fragment="additionalStyle">
-        details.section {
-            margin-left: 32px;
-        }
-
-        details.section summary {
-            margin-top: 16px;
-            margin-left: -32px;
-            font-size: 18pt;
-            font-weight: bold;
-        }
-    </style>
-</head>
+<head th:replace="~{/admin/header :: head}"/>
 <body>
 
 <span th:replace="~{/admin/header :: top}"/>