diff options
| author | Vsevolod Stakhov <vsevolod@rspamd.com> | 2024-04-16 20:59:10 +0600 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-04-16 20:59:10 +0600 |
| commit | 1e29462466e48134b325b61c42575254dc0a9fc8 (patch) | |
| tree | 5332a0a27c743bd9b8b3710d736d6a8f2b2f297b | |
| parent | e8b1fd0ec72556d2ab8f65f2f4172927b7d79cc0 (diff) | |
| parent | 23f11bc1af56e4528144b3fba3ca036aef9ecd5e (diff) | |
| download | rspamd-1e29462466e48134b325b61c42575254dc0a9fc8.tar.gz rspamd-1e29462466e48134b325b61c42575254dc0a9fc8.zip | |
Merge pull request #4927 from moisseev/navbar
[WebUI] Prevent navbar layout shift
| -rw-r--r-- | interface/css/rspamd.css | 4 | ||||
| -rw-r--r-- | interface/index.html | 8 | ||||
| -rw-r--r-- | 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 329446a87..9c42f4e7f 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) { |