mirror of
https://github.com/Combodo/iTop.git
synced 2026-04-21 17:48:43 +02:00
N°2847 - Tranform old itop datatable to jquery DataTable
This commit is contained in:
acognet
@@ -18,6 +18,7 @@
|
||||
@import "input/all";
|
||||
|
||||
@import "title";
|
||||
@import "datatable";
|
||||
@import "form";
|
||||
@import "fieldset";
|
||||
@import "field";
|
||||
|
||||
85
css/backoffice/components/_datatable.scss
Normal file
85
css/backoffice/components/_datatable.scss
Normal file
@@ -0,0 +1,85 @@
|
||||
.ibo-datatable {
|
||||
padding-bottom: 2em;
|
||||
padding-top: 2em;
|
||||
|
||||
thead tr th, tbody tr td {
|
||||
line-height: 30px;
|
||||
padding-right: 1em;
|
||||
padding-left: 1em;
|
||||
@extend %ibo-font-ral-nor-100;
|
||||
|
||||
a {
|
||||
color: $ibo-color-primary-600;
|
||||
}
|
||||
}
|
||||
|
||||
tbody tr:nth-child(odd) {
|
||||
background-color: $ibo-color-secondary-500;
|
||||
}
|
||||
}
|
||||
.dataTables_length
|
||||
{
|
||||
position: relative;
|
||||
float: right;
|
||||
padding-top: 0.755em;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
.dataTables_info
|
||||
{
|
||||
position: relative;
|
||||
float: right;
|
||||
padding-top: 0.755em;
|
||||
padding-right: 2em;
|
||||
padding-left: 0em;
|
||||
}
|
||||
.select-info{
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
.pagination
|
||||
{
|
||||
left: 1.21%;
|
||||
right: 1.21%;
|
||||
top: 91.58%;
|
||||
bottom: 4.85%;
|
||||
.paginate_button {
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
.dataTables_paginate
|
||||
{
|
||||
/* position: relative;*/
|
||||
float: left;
|
||||
padding-top: 0.755em;
|
||||
padding-left: 2em;
|
||||
}
|
||||
.paginate_button {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
}
|
||||
.paginate_button a{
|
||||
color: $ibo-color-grey-800;
|
||||
@extend %ibo-font-ral-nor-100;
|
||||
}
|
||||
.paginate_button a:hover {
|
||||
color: $ibo-color-blue-grey-200;
|
||||
}
|
||||
.paginate_button.active a {
|
||||
color: $ibo-color-grey-900;
|
||||
border: 2px solid var(--ibo-color-grey-300);
|
||||
background-color: $ibo-color-grey-200;
|
||||
}
|
||||
.ibo-datatable-toolbar {
|
||||
/*position: relative;*/
|
||||
height: 30px;
|
||||
}
|
||||
.ibo-criterion-area{
|
||||
font-size: $ibo-font-size-50 ;
|
||||
}
|
||||
.ibo-search-form{
|
||||
padding-top: $ibo-panel--spacing-top ;
|
||||
}
|
||||
.ibo-form-group{
|
||||
position: fixed;
|
||||
}
|
||||
@@ -79,4 +79,30 @@ $ibo-title--status-dot--border-radius: $ibo-border-radius-full !default;
|
||||
color: map-get($aColors, 'secondary-color');
|
||||
background-color: map-get($aColors, 'primary-color');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ibo-title-for-dashlet {
|
||||
padding-top: 2em;
|
||||
}
|
||||
.ibo-title-for-dashlet--title {
|
||||
@extend %ibo-font-ral-nor-350;
|
||||
}
|
||||
|
||||
.ibo-title-for-dashlet--content{
|
||||
background-color: $ibo-color-white-100;
|
||||
border-radius: 5px;
|
||||
border: 1px solid ;
|
||||
border-color:$ibo-color-grey-400;
|
||||
padding-bottom:1em;
|
||||
}
|
||||
.ibo-title-separator{
|
||||
border-radius: 5px 5px 0px 0px;
|
||||
border-color:$ibo-color-blue-600;
|
||||
color:$ibo-color-blue-600;
|
||||
background-color:$ibo-color-blue-600;
|
||||
border: 3px solid ;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
@@ -93,66 +93,66 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.datatable {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
//table.datatable {
|
||||
// width: 100%;
|
||||
// border: 0;
|
||||
// padding: 0;
|
||||
//}
|
||||
|
||||
td.menucontainer {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.listResults {
|
||||
padding: 0px;
|
||||
border-top: 3px solid $frame-background-color;
|
||||
border-left: 3px solid $frame-background-color;
|
||||
border-bottom: 3px solid #e6e6e1;
|
||||
border-right: 3px solid #e6e6e1;
|
||||
width: 100%;
|
||||
background-color: $white;
|
||||
}
|
||||
//table.listResults {
|
||||
// padding: 0px;
|
||||
// border-top: 3px solid $frame-background-color;
|
||||
// border-left: 3px solid $frame-background-color;
|
||||
// border-bottom: 3px solid #e6e6e1;
|
||||
// border-right: 3px solid #e6e6e1;
|
||||
// width: 100%;
|
||||
// background-color: $white;
|
||||
//}
|
||||
|
||||
table.listResults td {
|
||||
padding: 2px;
|
||||
}
|
||||
//table.listResults td {
|
||||
// padding: 2px;
|
||||
//}
|
||||
|
||||
table.listResults td .view-image {
|
||||
//table.listResults td .view-image {
|
||||
// Counteract the forced dimensions (usefull for displaying in the details view)
|
||||
width: inherit !important;
|
||||
height: inherit !important;
|
||||
// width: inherit !important;
|
||||
// height: inherit !important;
|
||||
|
||||
img {
|
||||
max-width: 48px !important;
|
||||
max-height: 48px !important;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
// img {
|
||||
// max-width: 48px !important;
|
||||
// max-height: 48px !important;
|
||||
// display: block;
|
||||
// margin-left: auto;
|
||||
// margin-right: auto;
|
||||
// }
|
||||
//}
|
||||
|
||||
table.listResults > tbody > tr.selected > * {
|
||||
}
|
||||
//table.listResults > tbody > tr.selected > * {
|
||||
//}
|
||||
|
||||
table.listResults > tbody > tr > * {
|
||||
transition: background-color 400ms linear;
|
||||
}
|
||||
//table.listResults > tbody > tr > * {
|
||||
// transition: background-color 400ms linear;
|
||||
//}
|
||||
|
||||
table.listResults > tbody > tr:hover > * {
|
||||
cursor: pointer;
|
||||
}
|
||||
//table.listResults > tbody > tr:hover > * {
|
||||
// cursor: pointer;
|
||||
//}
|
||||
|
||||
table.listResults > tbody > tr.selected:hover > * {
|
||||
//table.listResults > tbody > tr.selected:hover > * {
|
||||
/* hover on lines is currently done toggling td.hover, and having a rule for links */
|
||||
background-color: $brand-primary-lightest;
|
||||
color: $text-color;
|
||||
}
|
||||
// background-color: $brand-primary-lightest;
|
||||
// color: $text-color;
|
||||
//}
|
||||
|
||||
table.listResults > tbody > tr:hover > * {
|
||||
//table.listResults > tbody > tr:hover > * {
|
||||
/* hover on lines is currently done toggling td.hover, and having a rule for links */
|
||||
background-color: $table-hover-background;
|
||||
color: $text-color;
|
||||
}
|
||||
// background-color: $table-hover-background;
|
||||
// color: $text-color;
|
||||
//}
|
||||
|
||||
.edit-image {
|
||||
.view-image {
|
||||
@@ -278,13 +278,13 @@
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
th {
|
||||
font-family: Tahoma, Verdana, Arial, Helvetica;
|
||||
font-size: 8pt;
|
||||
color: $complement-color;
|
||||
height: 20px;
|
||||
background: $frame-background-color bottom repeat-x;
|
||||
}
|
||||
//th {
|
||||
// font-family: Tahoma, Verdana, Arial, Helvetica;
|
||||
// font-size: 8pt;
|
||||
// color: $complement-color;
|
||||
// height: 20px;
|
||||
// background: $frame-background-color bottom repeat-x;
|
||||
//}
|
||||
|
||||
th.header {
|
||||
cursor: pointer;
|
||||
@@ -986,14 +986,14 @@
|
||||
}
|
||||
|
||||
.search_form_handler {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-size: 12px;
|
||||
text-align: left; /* To compensate .search_box:text-align */
|
||||
border: 1px solid $search-form-container-bg-color;
|
||||
// position: relative;
|
||||
// z-index: 10;
|
||||
// width: 100%;
|
||||
// margin-left: auto;
|
||||
// margin-right: auto;
|
||||
// font-size: 12px;
|
||||
// text-align: left; /* To compensate .search_box:text-align */
|
||||
// border: 1px solid $search-form-container-bg-color;
|
||||
//transition: width 0.3s ease-in-out;
|
||||
|
||||
/* Sizing reset */
|
||||
@@ -1137,7 +1137,6 @@
|
||||
background-color: $white;
|
||||
|
||||
.sf_criterion_row {
|
||||
position: relative;;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 20px;
|
||||
@@ -1165,6 +1164,11 @@
|
||||
|
||||
.sf_criterion_group {
|
||||
display: inline;
|
||||
.sfc_fg_button,
|
||||
.sfc_header {
|
||||
border: 1px solid #E1E7EC; /* Must be equal to .search_form_criteria:margin-bottom + this:padding-bottom */
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1197,7 +1201,6 @@
|
||||
box-shadow: $box-shadow-regular;
|
||||
}
|
||||
|
||||
.sfc_form_group,
|
||||
.sfm_content {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
|
||||
Reference in New Issue
Block a user