commit 44f9bb2: [WebUI] Set test selectors card height dynamically

[moisseev]

Author: moisseev
Date: 2020-07-21 13:08:16 +0300
URL: https://github.com/rspamd/rspamd/commit/44f9bb202d626f92deedf513d3b020a5f39ff0d6

[WebUI] Set test selectors card height dynamically
and minor layout fixes.

---
 interface/css/rspamd.css | 25 +++++++++++++++++++------
 interface/index.html     | 32 ++++++++++++++++----------------
 2 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index e23071a96..18d758670 100644
--- a/interface/css/rspamd.css
+++ b/interface/css/rspamd.css
@@ -416,10 +416,17 @@ table#symbolsTable input[type="number"] {
     display: flex;
     flex-wrap: wrap;
     clear: both;
-    /* necessary to hide collapsed sidebar */
-    overflow-x: hidden;
+    margin-left: -17.5px;
+    margin-right: -17.5px;
 }
 @media (min-width: 992px) {
+    #selectors > .card {
+        height: calc(100vh - 91px);
+    }
+    #row-main {
+        /* necessary to hide collapsed sidebar */
+        overflow-x: hidden;
+    }
     #content > div {
         display: flex;
     }
@@ -437,10 +444,6 @@ table#symbolsTable input[type="number"] {
     background-color: #ffe;
     transition: margin 0.3s ease;
 }
-.sidebar > div.table-responsive {
-    max-height: 610px;
-    background-color: white;
-}
 .collapsed {
     /* hide it for small displays */
     display: none;
@@ -485,6 +488,12 @@ table#symbolsTable input[type="number"] {
     transform: rotate(180deg);
 }
 @media (min-width: 992px) {
+    #sidebar-left {
+        border-bottom-left-radius: 3.5px;
+    }
+    #sidebar-right {
+        border-bottom-right-radius: 3.5px;
+    }
     .sidebar-nav {
         margin-left: -1px;
         margin-right: -1px;
@@ -504,6 +513,10 @@ table#symbolsTable input[type="number"] {
     }
 }
 @media (max-width: 991.98px) {
+    #sidebar-right {
+        border-bottom-left-radius: 3.5px;
+        border-bottom-right-radius: 3.5px;
+    }
     .sidebar-nav {
         margin-top: -1px;
         margin-bottom: -1px;
diff --git a/interface/index.html b/interface/index.html
index 163de31aa..beb2651c9 100644
--- a/interface/index.html
+++ b/interface/index.html
@@ -338,28 +338,28 @@
 						<span class="h6 font-weight-bolder my-2">Test Rspamd selectors</span>
 					</div>
 					<div class="card-body py-0">
-						<div class="row" id="row-main">
-							<div class="col-lg-3 sidebar" id="sidebar-left">
-								<div class="nopadding table-responsive">
-									<table class="table table-sm small table-striped table-hover table-bordered" id="selectorsTable-extractors">
+						<div class="row h-100" id="row-main">
+							<div class="col-lg-3 sidebar h-100" id="sidebar-left">
+								<div class="nopadding table-responsive mh-100 bg-white">
+									<table class="table table-sm small table-striped table-hover table-bordered mb-0" id="selectorsTable-extractors">
 										<thead><tr><th>Name</th><th>Description</th></tr></thead>
 										<tbody/>
 									</table>
 								</div>
 							</div>
 
-							<div class="col-lg-6 col-12" id="content">
+							<div class="col-lg-6 col-12 h-100" id="content">
 
-								<div class="row navbar-light">
+								<div class="row navbar-light h-100">
 									<ul class="nav navbar-nav nav-tabs sidebar-nav">
 										<li class="active text-nowrap nav-item" id="sidebar-tab-left">
 											<a class="nav-link" href=""><div id="sidebar-tab-text-left">&#x2195; List of extractors</div></a>
 										</li>
 									</ul>
 
-									<div class="col-lg col-12">
-										<div class="row">
-											<form class="col-12">
+									<div class="col-lg col-12 mh-100 overflow-auto">
+										<div class="row h-100">
+											<form class="col-12 d-flex flex-column">
 												<div class="row pt-3">
 													<div class="col">
 														<div class="form-group">
@@ -379,11 +379,11 @@
 														<button class="btn btn-secondary float-right" id="selectorsClean"><i class="fas fa-trash-alt"></i> Clean form</button>
 													</div>
 												</div>
-												<div class="row pt-3">
-													<div class="col">
-														<div class="form-group">
+												<div class="row pt-3 flex-grow-1">
+													<div class="col d-flex flex-column">
+														<div class="form-group h-100 d-flex flex-column">
 															<label for="selectorsResArea">Result:</label>
-															<textarea class="form-control" id="selectorsResArea" rows="5" readonly></textarea>
+															<textarea class="form-control flex-grow-1" id="selectorsResArea" readonly></textarea>
 														</div>
 													</div>
 												</div>
@@ -399,9 +399,9 @@
 								</div>
 							</div>
 
-							<div class="col-lg-3 sidebar" id="sidebar-right">
-								<div class="nopadding table-responsive">
-									<table class="table table-sm small table-striped table-hover table-bordered" id="selectorsTable-transforms">
+							<div class="col-lg-3 sidebar h-100" id="sidebar-right">
+								<div class="nopadding table-responsive mh-100 bg-white">
+									<table class="table table-sm small table-striped table-hover table-bordered mb-0" id="selectorsTable-transforms">
 										<thead><tr><th>Name</th><th>Description</th></tr></thead>
 										<tbody/>
 									</table>