Add staging banner

This commit is contained in:
2026-01-15 14:38:06 +01:00
parent c481b105c5
commit a2cae3f066
12 changed files with 70 additions and 9 deletions

View File

@@ -22,6 +22,34 @@ body {
padding: 0;
}
body.has-staging-banner {
padding-top: 44px;
}
.staging-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 8px 16px;
text-align: center;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
background: repeating-linear-gradient(135deg, #111827 0 18px, #facc15 18px 36px);
}
.staging-banner span {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
background: #111827;
color: #facc15;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.landing-body {
min-height: 100vh;
background:

View File

@@ -29,7 +29,8 @@
<script src="/js/vendor/OBJLoader.js"></script>
<script src="/js/csrf.js"></script>
</head>
<body class="admin-body">
<body class="admin-body" th:classappend="${isStaging} ? ' has-staging-banner' : ''">
<div th:insert="~{fragments/staging :: banner}"></div>
<div class="admin-frame">
<header class="admin-topbar">
<div class="topbar-left">

View File

@@ -6,7 +6,8 @@
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body>
<body th:classappend="${isStaging} ? ' has-staging-banner' : ''">
<div th:insert="~{fragments/staging :: banner}"></div>
<main class="landing">
<header class="landing-header">
<div class="brand">

View File

@@ -8,7 +8,8 @@
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body class="dashboard-body">
<body class="dashboard-body" th:classappend="${isStaging} ? ' has-staging-banner' : ''">
<div th:insert="~{fragments/staging :: banner}"></div>
<div class="dashboard-shell">
<header class="dashboard-topbar">
<div class="brand">

View File

@@ -6,7 +6,8 @@
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body class="error-body">
<body class="error-body" th:classappend="${isStaging} ? ' has-staging-banner' : ''">
<div th:insert="~{fragments/staging :: banner}"></div>
<div class="error-shell">
<header class="error-header">
<div class="brand">

View File

@@ -0,0 +1,8 @@
<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="banner" th:if="${isStaging}" class="staging-banner" role="status">
<span>Staging environment</span>
</div>
</body>
</html>

View File

@@ -6,7 +6,8 @@
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body class="landing-body">
<body class="landing-body" th:classappend="${isStaging} ? ' has-staging-banner' : ''">
<div th:insert="~{fragments/staging :: banner}"></div>
<div class="landing">
<header class="landing-header">
<div class="brand">

View File

@@ -6,7 +6,8 @@
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body>
<body th:classappend="${isStaging} ? ' has-staging-banner' : ''">
<div th:insert="~{fragments/staging :: banner}"></div>
<main class="landing">
<header class="landing-header">
<div class="brand">

View File

@@ -18,7 +18,8 @@
<script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
<script src="/js/csrf.js"></script>
</head>
<body class="settings-body">
<body class="settings-body" th:classappend="${isStaging} ? ' has-staging-banner' : ''">
<div th:insert="~{fragments/staging :: banner}"></div>
<div class="settings-shell">
<header class="settings-header">
<div class="brand">

View File

@@ -6,7 +6,8 @@
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body>
<body th:classappend="${isStaging} ? ' has-staging-banner' : ''">
<div th:insert="~{fragments/staging :: banner}"></div>
<main class="landing">
<header class="landing-header">
<div class="brand">