Update: fix error page theme

This commit is contained in:
Rectos VX
2024-05-08 16:26:14 +04:00
parent b69646d00b
commit 34e2128a39
5 changed files with 55 additions and 104 deletions

View File

@@ -8,9 +8,9 @@
<div id="page-container">
<div id="content-wrap">
<th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
<div th:insert="~{fragments/errorBanner.html :: errorBanner}"></div>
<div class="container">
<div id="support-section">
<div th:insert="~{fragments/errorBanner.html :: errorBanner}"></div>
<div id="bg-card" class="text-center">
<h1 class="display-2" th:text="#{oops}"></h1>
<p class="lead" th:if="${param.status == '404'}" th:text="#{error.404.1}"></p>
<p class="lead" th:unless="${param.status == '404'}" th:text="#{error.404.2}"></p>
@@ -18,10 +18,10 @@
<h2 th:text="#{error.needHelp}"></h2>
<p th:text="#{error.contactTip}"></p>
<div id="button-group">
<a href="https://github.com/Stirling-Tools/Stirling-PDF/issues" id="github-button" target="_blank" th:text="#{error.github}"></a>
<a href="https://discord.gg/Cn8pWhQRxZ" id="discord-button" target="_blank" th:text="#{joinDiscord}"></a>
<a href="https://github.com/Stirling-Tools/Stirling-PDF/issues" id="github-button" class="btn btn-primary" target="_blank" th:text="#{error.github}"></a>
<a href="https://discord.gg/Cn8pWhQRxZ" id="discord-button" class="btn btn-primary" target="_blank" th:text="#{joinDiscord}"></a>
</div>
<a href="/" class="home-button" th:text="#{goHomepage}"></a>
<a href="/" id="home-button" class="home-button btn btn-primary" th:text="#{goHomepage}"></a>
</div>
</div>
</div>

View File

@@ -1,12 +1,18 @@
<th:block th:fragment="errorBanner">
<br th:if="${message}">
<div id="errorContainer" th:if="${message}" class="alert alert-danger alert-dismissible fade show" role="alert">
<h4 class="alert-heading" th:text="'Error: ' + ${status} + ' ' + ${error}"></h4>
<br th:if="${message}">
<div id="errorContainer" th:if="${message}" class="alert alert-danger alert-dismissible alert-container fade show" role="alert">
<div class="alert-header d-flex">
<span class="alert-heading" th:text="'Error: ' + ${status} + ' ' + ${error}"></span>
<button type="button" class="btn btn-danger" th:if="${trace}" onclick="toggletrace()" th:text="#{error.showStack}"></button>
<button type="button" class="btn btn-secondary" th:if="${trace}" onclick="copytrace()" th:text="#{error.copyStack}"></button>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" onclick="dismissError()">
<span class="material-symbols-rounded">
close
</span>
</button>
</div>
<p th:text="${message} + ' for path: ' + ${path}"></p>
<button type="button" class="btn btn-danger" th:if="${trace}" onclick="toggletrace()" th:text="#{error.showStack}"></button>
<button type="button" class="btn btn-secondary" th:if="${trace}" onclick="copytrace()" th:text="#{error.copyStack}"></button>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" onclick="dismissError()"></button>
<!-- Stack trace section -->
<div id="trace" th:if="${trace}" style="max-height: 0; overflow: hidden;">
<div style="background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 3px; padding: 10px; margin-top: 5px;">
@@ -34,7 +40,7 @@
function copytrace() {
var flip = false
if(!traceVisible) {
if (!traceVisible) {
toggletrace()
flip = true
}
@@ -45,7 +51,7 @@
window.getSelection().addRange(range);
document.execCommand("copy");
window.getSelection().removeAllRanges();
if(flip){
if (flip) {
toggletrace()
}
}
@@ -53,7 +59,7 @@
function dismissError() {
var errorContainer = document.getElementById("errorContainer");
errorContainer.style.display = "none";
errorContainer.style.height ="0";
errorContainer.style.height = "0";
}
function adjustContainerHeight() {
@@ -66,4 +72,4 @@
}
}
</script>
</th:block>
</th:block>