diff options
author | moisseev <moiseev@mezonplus.ru> | 2024-03-04 14:54:08 +0300 |
---|---|---|
committer | moisseev <moiseev@mezonplus.ru> | 2024-03-04 14:54:08 +0300 |
commit | 08c034c966086a4a790653627ba84455b2e5ba8c (patch) | |
tree | 7ef5dd9c5297cb6837802a37347f4f1e23eea0e4 /interface | |
parent | 108dad4a6e4b795d13f1ad8a05f5b6541232a142 (diff) | |
download | rspamd-08c034c966086a4a790653627ba84455b2e5ba8c.tar.gz rspamd-08c034c966086a4a790653627ba84455b2e5ba8c.zip |
[Minor] Align items in card headers and buttons
Diffstat (limited to 'interface')
-rw-r--r-- | interface/css/rspamd.css | 4 | ||||
-rw-r--r-- | interface/index.html | 102 | ||||
-rw-r--r-- | interface/js/app/rspamd.js | 4 |
3 files changed, 53 insertions, 57 deletions
diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css index 2959e6b1d..767c11175 100644 --- 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 86fdbdb31..8ac7673ea 100644 --- 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 fb5c268c9..75743ac0c 100644 --- 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")); }); |