[Minor] Align items in card headers and buttons

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index 2959e6b1dc05ae7e889dff85562837eac133be0f..767c111752d15f5c1965fae4324836a42e807801 100644 (file)
--- a/interface/css/rspamd.css
+++ b/interface/css/rspamd.css
@@ -213,15 +213,11 @@ table#symbolsTable input[type="number"] {
     padding-bottom: 0.1rem;
 }
 
-/* widget */
 .card-header,
 .modal-header {
     background-color: #f3f3f3;
     background-image: linear-gradient(to bottom, #fdfdfd, #eaeaea);
 }
-.card-header > .icon > svg {
-    vertical-align: middle;
-}
 .card-header .h6 {
     font-size: 0.857rem;
 }

diff --git a/interface/index.html b/interface/index.html
index 86fdbdb3160984e128d1458294c1d76d398bdddf..8ac7673ea3d415ac905e75a81333f30484a1470c 100644 (file)
--- a/interface/index.html
+++ b/interface/index.html
@@ -164,9 +164,9 @@
                                <div class="row">
                                        <div class="col-lg-6">
                                                <div class="card bg-light shadow my-3">
-                                                       <div class="card-header text-secondary py-2">
+                                                       <div class="card-header text-secondary py-2 d-flex align-items-center">
                                                                <span class="icon me-3"><i class="fas fa-server"></i></span>
-                                                               <span class="h6 fw-bolder my-2">Servers</span>
+                                                               <span class="h6 fw-bolder my-auto">Servers</span>
                                                        </div>
                                                                <div class="card-body p-0 table-responsive">
                                                                        <table class="table status-table table-sm table-hover table-bordered text-nowrap mb-0" id="clusterTable">
@@ -188,9 +188,9 @@
                                                                </div>
                                                </div>
                                                <div class="card bg-light shadow my-3">
-                                                       <div class="card-header text-secondary py-2">
+                                                       <div class="card-header text-secondary py-2 d-flex align-items-center">
                                                                <span class="icon me-3"><i class="fas fa-dice"></i></span>
-                                                               <span class="h6 fw-bolder my-2">Bayesian statistics</span>
+                                                               <span class="h6 fw-bolder my-auto">Bayesian statistics</span>
                                                        </div>
                                                                <div class="card-body p-0 table-responsive">
                                                                        <table class="table status-table table-sm table-bordered text-nowrap mb-0" id="bayesTable">
@@ -209,9 +209,9 @@
                                                                </div>
                                                </div>
                                                <div class="card bg-light shadow my-3">
-                                                       <div class="card-header text-secondary py-2">
+                                                       <div class="card-header text-secondary py-2 d-flex align-items-center">
                                                                <span class="icon me-3"><i class="fas fa-hashtag"></i></span>
-                                                               <span class="h6 fw-bolder my-2">Fuzzy hashes</span>
+                                                               <span class="h6 fw-bolder my-auto">Fuzzy hashes</span>
                                                        </div>
                                                                <div class="card-body p-0 table-responsive">
                                                                        <table class="table status-table table-sm table-bordered text-nowrap mb-0" id="fuzzyTable">
@@ -230,9 +230,9 @@
                                        </div>
                                        <div class="col-lg-6">
                                                <div class="card bg-light shadow my-3">
-                                                       <div class="card-header text-secondary py-2">
+                                                       <div class="card-header text-secondary py-2 d-flex align-items-center">
                                                                <span class="icon me-3"><i class="fas fa-chart-pie"></i></span>
-                                                               <span class="h6 fw-bolder my-2">Statistics</span>
+                                                               <span class="h6 fw-bolder my-auto">Statistics</span>
                                                        </div>
                                                        <div class="card-body">
                                                                <div class="row">
@@ -246,9 +246,9 @@
 
                        <div class="tab-pane" id="throughput">
                                <div class="card bg-light shadow my-3">
-                                       <div class="card-header text-secondary py-2">
+                                       <div class="card-header text-secondary py-2 d-flex align-items-center">
                                                <span class="icon me-3"><i class="fas fa-chart-area"></i></span>
-                                               <span class="h6 fw-bolder my-2">Throughput</span>
+                                               <span class="h6 fw-bolder my-auto">Throughput</span>
                                        </div>
                                        <div class="card-body text-center">
                                                <div class="d-inline-block bg-white">
@@ -309,9 +309,9 @@
 
                        <div class="tab-pane" id="configuration">
                                <div class="card bg-light shadow my-3">
-                                       <div class="card-header text-secondary py-2">
+                                       <div class="card-header text-secondary py-2 d-flex align-items-center">
                                                <span class="icon me-3"><i class="fas fa-tasks"></i></span>
-                                               <span class="h6 fw-bolder my-2">Actions</span>
+                                               <span class="h6 fw-bolder my-auto">Actions</span>
                                        </div>
                                        <div class="card-body pb-2">
                                                <form id="actionsForm">
@@ -326,10 +326,10 @@
                                        </div>
                                </div>
                                <div class="card bg-light shadow my-3">
-                                       <div class="card-header text-secondary py-2 d-flex">
+                                       <div class="card-header text-secondary py-2 d-flex align-items-center">
                                                <span class="icon me-3"><i class="fas fa-list"></i></span>
-                                               <span class="h6 fw-bolder my-2">Lists</span>
-                                               <div class="input-group-sm align-self-center ms-auto me-1">
+                                               <span class="h6 fw-bolder my-auto">Lists</span>
+                                               <div class="input-group-sm ms-auto me-1">
                                                        Editor:
                                                        <div id="btnGroupEditor" class="btn-group btn-group-xs ms-1">
                                                                <input type="radio" class="btn-check" name="editorMode" id="editorModeBascic" autocomplete="off" value="basic">
@@ -349,12 +349,12 @@
 
                        <div class="tab-pane" id="symbols">
                                <div class="card bg-light shadow my-3">
-                                       <div class="card-header text-secondary py-1 d-flex">
+                                       <div class="card-header text-secondary py-1 d-flex align-items-center">
                                                <span class="icon me-3"><i class="fas fa-tasks"></i></span>
-                                               <span class="h6 fw-bolder my-2 ms-0">Symbols and rules</span>
-                                               <div class="align-self-center ms-auto me-1">
-                                                       <button class="btn btn-info btn-sm" id="updateSymbols">
-                                                               <i class="fas fa-redo-alt"></i> Update
+                                               <span class="h6 fw-bolder my-auto ms-0">Symbols and rules</span>
+                                               <div class="ms-auto me-1">
+                                                       <button class="btn btn-info btn-sm d-flex align-items-center" id="updateSymbols">
+                                                               <i class="fas fa-redo-alt me-1"></i>Update
                                                        </button>
                                                </div>
                                        </div>
@@ -380,7 +380,7 @@
                                <div class="card bg-light shadow my-3">
                                        <div class="card-header text-secondary py-1 d-flex align-items-center">
                                                <span class="icon me-3"><i class="fas fa-envelope"></i></span>
-                                               <span class="h6 fw-bolder my-2">Scan suspected message</span>
+                                               <span class="h6 fw-bolder my-auto">Scan suspected message</span>
                                                <div class="d-flex input-group-sm align-items-center ms-auto">
                                                        <label for="formFile" class="col-auto col-form-label-sm me-1">Choose a file:</label>
                                                        <input class="form-control form-control-sm btn btn-secondary" id="formFile" type="file">
@@ -446,23 +446,23 @@
                                        </div>
                                        <div class="card-footer d-md-flex justify-content-between py-1">
                                                <div class="input-group d-inline-flex w-auto my-1">
-                                                       <button type="submit" class="btn btn-primary" data-upload="scan"><i class="fas fa-search"></i> Scan message</button>
-                                                       <button class="btn btn-secondary d-inline-block" id="scanOptionsToggle" data-bs-toggle="collapse" data-bs-target="#scanOptions"><i class="fas   fa-bars"></i> Options</button>
+                                                       <button type="submit" class="btn btn-primary d-flex align-items-center" data-upload="scan"><i class="fas fa-search me-2"></i>Scan message</button>
+                                                       <button class="btn btn-secondary d-flex align-items-center" id="scanOptionsToggle" data-bs-toggle="collapse" data-bs-target="#scanOptions"><i class="fas fa-bars me-2"></i>Options</button>
                                                </div>
                                                <div class="input-group d-inline-flex w-auto my-1">
                                                        <label for="fuzzy-flag" class="input-group-text">Flag</label>
                                                        <input id="fuzzy-flag" class="form-control" value="1" min="1" type="number">
-                                                       <button class="btn btn-warning" data-upload="compute-fuzzy"><i class="fas fa-hashtag"></i> Compute fuzzy hashes</button>
+                                                       <button class="btn btn-warning d-flex align-items-center" data-upload="compute-fuzzy"><i class="fas fa-hashtag me-2"></i>Compute fuzzy hashes</button>
                                                </div>
                                                <div class="float-end my-1">
-                                                       <button class="btn btn-secondary" id="scanClean"><i class="fas fa-trash-alt"></i> Clean form</button>
+                                                       <button class="btn btn-secondary d-flex align-items-center" id="scanClean"><i class="fas fa-trash-alt me-2"></i>Clean form</button>
                                                </div>
                                        </div>
                                </div>
                                <div class="card ro-hide" style="display: none;">
-                                       <div class="card-header text-secondary py-1 d-flex">
+                                       <div class="card-header text-secondary py-1 d-flex align-items-center">
                                                <span class="icon me-3"><i class="fas fa-graduation-cap"></i></span>
-                                               <span class="h6 fw-bolder my-2">Learn Rspamd</span>
+                                               <span class="h6 fw-bolder my-auto">Learn Rspamd</span>
                                                <div id="learnServers" class="input-group-sm align-items-center text-nowrap ms-auto me-1">
                                                        <label for="selLearnServers">Learn servers:</label>
                                                        <select id="selLearnServers" class="form-select ms-1">
@@ -478,8 +478,8 @@
                                                                        <p>Learn Bayesian classifier:</p>
                                                                        <form>
                                                                                <div class="btn-group">
-                                                                                       <button class="btn btn-success" type="button" data-upload="ham" disabled><i class="fas fa-thumbs-up"></i> Upload HAM</button>
-                                                                                       <button class="btn btn-danger" type="button" data-upload="spam" disabled><i class="fas fa-thumbs-down"></i> Upload SPAM</button>
+                                                                                       <button class="btn btn-success d-flex align-items-center" type="button" data-upload="ham" disabled><i class="fas fa-thumbs-up me-2"></i>Upload HAM</button>
+                                                                                       <button class="btn btn-danger d-flex align-items-center" type="button" data-upload="spam" disabled><i class="fas fa-thumbs-down me-2"></i>Upload SPAM</button>
                                                                                </div>
                                                                        </form>
                                                                </div>
@@ -496,7 +496,7 @@
                                                                                        <label for="fuzzyWeightText">Weight:</label>
                                                                                        <input name="fuzzyWeightText" id="fuzzyWeightText" class="form-control ms-1" type="number" value="1"/>
                                                                                </div>
-                                                                               <button class="btn btn-warning ms-2" data-upload="fuzzy" disabled><i class="fas fa-upload"></i> Upload FUZZY</button>
+                                                                               <button class="btn btn-warning ms-2 d-flex align-items-center" data-upload="fuzzy" disabled><i class="fas fa-upload me-2"></i>Upload FUZZY</button>
                                                                        </form>
                                                                </div>
                                                        </div>
@@ -505,9 +505,9 @@
                                </div>
 
                                <div id="hash-card" class="card bg-light shadow my-3" style="display: none;">
-                                       <div class="card-header text-secondary py-2">
+                                       <div class="card-header text-secondary py-2 d-flex align-items-center">
                                                <span class="icon me-3"><i class="fas fa-hashtag"></i></span>
-                                               <span class="h6 fw-bolder my-2">Fuzzy hashes</span>
+                                               <span class="h6 fw-bolder my-auto">Fuzzy hashes</span>
                                                <button type="button" class="card-close-btn btn-close float-end" aria-label="Close"></button>
                                        </div>
                                                <div class="card-body p-0 table-responsive">
@@ -525,9 +525,9 @@
                                </div>
 
                                <div class="card bg-light shadow my-3">
-                                       <div class="card-header text-secondary py-1 d-flex">
+                                       <div class="card-header text-secondary py-1 d-flex align-items-center">
                                                <span class="icon me-3"><i class="fas fa-eye"></i></span>
-                                               <span class="h6 fw-bolder my-2 ms-0">Scan results history</span>
+                                               <span class="h6 fw-bolder my-auto ms-0">Scan results history</span>
                                                <div id="scanResult" class="d-flex input-group-sm align-items-center text-nowrap ms-auto me-1">
                                                                <label for="selSymOrder_scan">Symbols order:</label>
                                                                <select id="selSymOrder_scan" class="form-select ms-1">
@@ -537,8 +537,8 @@
                                                                </select>
                                                        <label for="scan_page_size" class="ms-2">Rows per page:</label>
                                                        <input id="scan_page_size" class="form-control ms-1" value="25" min="1" type="number">
-                                                       <button class="btn btn-secondary btn-sm ms-2" id="cleanScanHistory" disabled>
-                                                               <i class="fas fa-trash-alt"></i> Clean history
+                                                       <button class="btn btn-secondary btn-sm ms-2 d-flex align-items-center" id="cleanScanHistory" disabled>
+                                                               <i class="fas fa-trash-alt me-1"></i>Clean history
                                                        </button>
                                                </div>
                                        </div>
@@ -552,9 +552,9 @@
 
                        <div class="tab-pane" id="selectors">
                                <div class="card bg-light shadow my-3">
-                                       <div class="card-header text-secondary py-2">
+                                       <div class="card-header text-secondary py-2 d-flex align-items-center">
                                                <span class="icon me-3"><i class="fas fa-envelope"></i></span>
-                                               <span class="h6 fw-bolder my-2">Test Rspamd selectors</span>
+                                               <span class="h6 fw-bolder my-auto">Test Rspamd selectors</span>
                                        </div>
                                        <div class="card-body p-0">
                                                <div class="row h-100 m-0" id="row-main">
@@ -585,7 +585,7 @@
                                                                                                                        <label class="form-label" for="selectorsMsgArea">Message source:</label>
                                                                                                                        <textarea class="form-control" id="selectorsMsgArea" rows="9" placeholder="Paste raw message source"></textarea>
                                                                                                                </div>
-                                                                                                               <button class="btn btn-secondary float-end" id="selectorsMsgClean"><i class="fas fa-trash-alt"></i> Clean form</button>
+                                                                                                               <button class="btn btn-secondary d-flex align-items-center float-end" id="selectorsMsgClean"><i class="fas fa-trash-alt me-2"></i>Clean form</button>
                                                                                                        </div>
                                                                                                </div>
                                                                                                <div class="row pt-3">
@@ -594,8 +594,8 @@
                                                                                                                        <label class="form-label" for="selectorsSelArea">Selector(s):</label>
                                                                                                                        <textarea class="form-control" id="selectorsSelArea" rows="1" placeholder="extractor.transform(arg);extractor.transform(arg);..."></textarea>
                                                                                                                </div>
-                                                                                                               <button type="submit" class="btn btn-primary" id="selectorsChkMsgBtn"><i class="fas fa-search"></i> Check message</button>
-                                                                                                               <button class="btn btn-secondary float-end" id="selectorsClean"><i class="fas fa-trash-alt"></i> Clean form</button>
+                                                                                                               <button type="submit" class="btn btn-primary d-inline-flex align-items-center" id="selectorsChkMsgBtn"><i class="fas fa-search me-2"></i>Check message</button>
+                                                                                                               <button class="btn btn-secondary d-inline-flex align-items-center float-end" id="selectorsClean"><i class="fas fa-trash-alt me-2"></i>Clean form</button>
                                                                                                        </div>
                                                                                                </div>
                                                                                                <div class="row pt-3 flex-grow-1">
@@ -634,9 +634,9 @@
                        <div class="tab-pane" id="history">
 
                                <div class="card bg-light shadow my-3">
-                                       <div class="card-header text-secondary py-1 d-flex">
+                                       <div class="card-header text-secondary py-1 d-flex align-items-center">
                                                <span class="icon me-3"><i class="fas fa-eye"></i></span>
-                                               <span class="h6 fw-bolder my-2 ms-0">History</span>
+                                               <span class="h6 fw-bolder my-auto ms-0">History</span>
                                                <a href="https://rspamd.com/doc/modules/history_redis.html" target="_blank" rel="noopener noreferrer"
                                                        title="If you'd like to use the modern version of History, please enable History redis module."
                                                         id="legacy-history-badge" class="my-2 ms-2 badge text-bg-info" style="display: none;">Legacy version</a>
@@ -649,11 +649,11 @@
                                                        </select>
                                                        <label for="history_page_size" class="ms-2">Rows per page:</label>
                                                        <input id="history_page_size" class="form-control ms-1" value="25" min="1" type="number">
-                                                       <button class="btn btn-danger btn-sm ms-2 ro-hide" id="resetHistory">
-                                                               <i class="fas fa-times-circle"></i> Reset
+                                                       <button class="btn btn-danger btn-sm ms-2 d-flex align-items-center ro-hide" id="resetHistory">
+                                                               <i class="fas fa-times-circle me-1"></i>Reset
                                                        </button>
-                                                       <button class="btn btn-info btn-sm ms-2" id="updateHistory">
-                                                               <i class="fas fa-redo-alt"></i> Update
+                                                       <button class="btn btn-info btn-sm ms-2 d-flex align-items-center" id="updateHistory">
+                                                               <i class="fas fa-redo-alt me-1"></i>Update
                                                        </button>
                                                </div>
                                        </div>
@@ -664,12 +664,12 @@
                                        </div>
                                </div>
                                <div class="card bg-light shadow my-3 ro-hide" id="errors-history">
-                                       <div class="card-header text-secondary py-1 d-flex">
+                                       <div class="card-header text-secondary py-1 d-flex align-items-center">
                                                <span class="icon me-3"><i class="fas fa-exclamation-triangle"></i></span>
-                                               <span class="h6 fw-bolder my-2 ms-0">Errors</span>
+                                               <span class="h6 fw-bolder my-auto ms-0">Errors</span>
                                                <div class="align-self-center ms-auto me-1">
-                                                       <button class="btn btn-info btn-sm" id="updateErrors">
-                                                               <i class="fas fa-redo-alt"></i> Update
+                                                       <button class="btn btn-info btn-sm d-flex align-items-center" id="updateErrors">
+                                                               <i class="fas fa-redo-alt me-1"></i>Update
                                                        </button>
                                                </div>
                                        </div>

diff --git a/interface/js/app/rspamd.js b/interface/js/app/rspamd.js
index fb5c268c9892fe7c3b0fd4c3bc2e0b1f3dc6c9d2..75743ac0cee4d94133d0ac003c3f0ba8b9ab7241 100644 (file)
--- a/interface/js/app/rspamd.js
+++ b/interface/js/app/rspamd.js
@@ -465,9 +465,9 @@ define(["jquery", "app/common", "stickytabs", "visibility",
         checked_server = this.value;
         $("#selSrv [value=\"" + checked_server + "\"]").prop("checked", true);
         if (checked_server === "All SERVERS") {
-            $("#learnServers").show();
+            $("#learnServers").removeClass("invisible");
         } else {
-            $("#learnServers").hide();
+            $("#learnServers").addClass("invisible");
         }
         tabClick("#" + $("#tablist > .nav-item > .nav-link.active").attr("id"));
     });