[WebUI] Set test selectors card height dynamically

and minor layout fixes.

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index e23071a9644947c7b23a1a8582ea8871ea24ac57..18d758670deab9aac112677eec1c333d110274a6 100644 (file)
--- 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 163de31aa22f89282356f585e0be11b425ff0454..beb2651c9241770733fbc1b13c48f3166ddd26fc 100644 (file)
--- 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;&ensp;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>