commit 23f11bc: [WebUI] Prevent navbar layout shift

Mon Jul 29 17:55:39 UTC 2024

Author: moisseev
Date: 2024-04-13 11:15:46 +0300
URL: https://github.com/rspamd/rspamd/commit/23f11bc1af56e4528144b3fba3ca036aef9ecd5e (refs/pull/4927/head)

[WebUI] Prevent navbar layout shift
caused by buttons hiding and scroll bar

---
 interface/css/rspamd.css   | 4 ++--
 interface/index.html       | 8 ++++----
 interface/js/app/rspamd.js | 8 ++++----
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index 4885e6d7f..a8ab277b8 100644
--- a/interface/css/rspamd.css
+++ b/interface/css/rspamd.css
@@ -136,8 +136,8 @@ textarea {
     height: 50px;
 }
 .btn-group > .btn.radius-right {
-    border-top-right-radius: .25rem !important;
-    border-bottom-right-radius: .25rem !important;
+    border-top-right-radius: var(--bs-btn-border-radius) !important;
+    border-bottom-right-radius: var(--bs-btn-border-radius) !important;
 }
 
 input.form-control[type="number"] {
diff --git a/interface/index.html b/interface/index.html
index 5b3187309..dc1a5eaac 100644
--- a/interface/index.html
+++ b/interface/index.html
@@ -28,13 +28,13 @@
 </head>
 
 <body>
-
-<nav class="navbar navbar-light bg-light navbar-expand-xl d-none" id="navBar">
+<!-- .vw-100 and .pe-3 prevent navbar layout shift caused by scrollbar -->
+<nav class="navbar navbar-light bg-light navbar-expand-xl vw-100 pe-3 d-none" id="navBar">
 	<div class="container-fluid">
 		<div class="navbar-header navbar-brand p-0">
 			<img src="./img/rspamd_logo_navbar.png" alt="Rspamd">
 		</div>
-		<div class="collapse navbar-collapse order-3 order-xl-2">
+		<div class="collapse navbar-collapse order-3 order-xl-2 flex-grow-0">
 			<form class="my-2 me-auto">
 				<select id="selSrv" class="form-select"></select>
 			</form>
@@ -57,7 +57,7 @@
 		<div class="d-flex flex-row order-2 order-xl-4">
 			<form class="ms-auto">
 				<div class="btn-group">
-					<button class="btn btn-outline-secondary" id="refresh" style="display: none;"><i class="fas fa-sync-alt"></i> Refresh</button>
+					<button class="btn btn-outline-secondary invisible" id="refresh"><i class="fas fa-sync-alt"></i> Refresh</button>
 					<button class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" id="autoRefresh" title="Auto-refresh time interval">
 						<span id="countdown">--:--</span>
 					</button>
diff --git a/interface/js/app/rspamd.js b/interface/js/app/rspamd.js
index 75743ac0c..61b7cf155 100644
--- a/interface/js/app/rspamd.js
+++ b/interface/js/app/rspamd.js
@@ -92,7 +92,7 @@ define(["jquery", "app/common", "stickytabs", "visibility",
             tab_id = "#" + $(".nav-link.active").attr("id");
         }
 
-        $("#autoRefresh").hide();
+        $("#autoRefresh").addClass("invisible");
         $("#refresh").addClass("radius-right");
 
         function setAutoRefresh(refreshInterval, timer, callback) {
@@ -113,7 +113,7 @@ define(["jquery", "app/common", "stickytabs", "visibility",
             }
 
             $("#refresh").removeClass("radius-right");
-            $("#autoRefresh").show();
+            $("#autoRefresh").removeClass("invisible");
 
             countdown(refreshInterval);
             if (!refreshInterval) return;
@@ -126,9 +126,9 @@ define(["jquery", "app/common", "stickytabs", "visibility",
         }
 
         if (["#scan_nav", "#selectors_nav", "#disconnect"].indexOf(tab_id) !== -1) {
-            $("#refresh").hide();
+            $("#refresh").addClass("invisible");
         } else {
-            $("#refresh").show();
+            $("#refresh").removeClass("invisible");
         }
 
         switch (tab_id) {
