[WebUI] Prevent navbar layout shiftpull/4930/head
@@ -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"] { |
@@ -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> |
@@ -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) { |