composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-23 02:28:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°4022 - Rework search page to improve UX and usable height

Browse Source
This commit is contained in:
Molkobain
2021-06-02 23:47:46 +02:00
parent 94c37b2e14
commit 1b9eb2a6ad
5 changed files with 473 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
css/backoffice/components/_search-form.scss
View File

@@ -3,6 +3,20 @@
* @license http://opensource.org/licenses/AGPL-3.0
*/
$ibo-search-form-panel--z-index: 3 !default;
$ibo-search-form-panel--body--padding-top: 18px !default;
$ibo-search-form-panel--body--padding-bottom: 10px !default;
$ibo-search-form-panel--body--padding-x: 14px !default;
$ibo-search-results-area--z-index: $ibo-search-form-panel--z-index - 2 !default; /* Minus 2 because the criteria expands between the search form panel and the results area */
$ibo-search-results-area--datatable-toolbar--background-color--is-sticking: $ibo-panel--body--background-color !default;
$ibo-search-results-area--datatable-toolbar--border--is-sticking: $ibo-panel--body--border !default;
$ibo-search-results-area--datatable-scrollhead--background-color--is-sticking: $ibo-search-results-area--datatable-toolbar--background-color--is-sticking !default;
$ibo-search-results-area--datatable-scrollhead--border--is-sticking: $ibo-search-results-area--datatable-toolbar--border--is-sticking !default;
/* IMPORTANT: All the code below do NOT follow the coding convention and has NOT been refactored to the UIBlock system */
.search_box {
@@ -832,10 +846,11 @@
.ibo-search-form-panel {
z-index: $ibo-search-form-panel--z-index;
margin-bottom: 8px;
.ibo-panel--body {
padding: 18px 14px 10px;
padding: $ibo-search-form-panel--body--padding-top $ibo-search-form-panel--body--padding-x $ibo-search-form-panel--body--padding-bottom;
overflow: initial;
}
}
@@ -864,4 +879,41 @@
}
.ibo-criterion-group:empty ~ .sf_more_criterion .sfm_tg_title{
display: unset;
}
.sf_results_area {
z-index: $ibo-search-results-area--z-index;
}
/***********************/
/* Sticky header rules */
/***********************/
.ibo-search-form-panel {
.ibo-panel--body.ibo-is-sticking {
position: fixed;
border-radius: 0;
border-bottom-color: transparent;
}
}
.sf_results_area {
.ibo-datatable-panel.ibo-is-sticking {
.ibo-panel--header {
z-index: 0;
}
.ibo-datatable--toolbar {
position: fixed;
z-index: 2;
padding-bottom: 4px;
background-color: $ibo-search-results-area--datatable-toolbar--background-color--is-sticking;
border-left: $ibo-search-results-area--datatable-toolbar--border--is-sticking;
border-right: $ibo-search-results-area--datatable-toolbar--border--is-sticking;
}
.dataTables_scrollHead {
position: fixed !important; /* Important is required as the property is already set in the style attribute by the JS lib */
z-index: 2;
background-color: $ibo-search-results-area--datatable-scrollhead--background-color--is-sticking;
border-left: $ibo-search-results-area--datatable-scrollhead--border--is-sticking !important; /* Unfortunately the !important is necessary to overload the lib style attribute */
border-right: $ibo-search-results-area--datatable-scrollhead--border--is-sticking !important; /* Unfortunately the !important is necessary to overload the lib style attribute */
}
}
}

2
css/backoffice/vendors/_datatables.scss vendored
View File

@@ -30,7 +30,6 @@ $ibo-vendors-datatables--column-sorting-icon--content: "\f0dc" !default;
$ibo-vendors-datatables--column-sorting-icon--content--is-sorted-asc: "\f0d8" !default;
$ibo-vendors-datatables--column-sorting-icon--content--is-sorted-desc: "\f0d7" !default;
$ibo-vendors-datatables--columns-header--margin-bottom: 4px !default;
$ibo-vendors-datatables--columns-header--border-bottom: 1px solid $ibo-color-grey-400 !default;
$ibo-vendors-datatables--row--background-color--is-odd: $ibo-color-white-100 !default;
@@ -132,7 +131,6 @@ $ibo-vendors-datatables--row-highlight--colors:(
}
.dataTables_scrollHeadInner {
margin-bottom: $ibo-vendors-datatables--columns-header--margin-bottom;
border-bottom: $ibo-vendors-datatables--columns-header--border-bottom;
}