mirror of
https://gitlab.com/sonalarora/tra_backend.git
synced 2025-12-23 05:05:32 +02:00
add dashboar module
This commit is contained in:
sonal
34
ks_dashboard_ninja/static/src/css/ks_dashboard_gridstack.css
Normal file
34
ks_dashboard_ninja/static/src/css/ks_dashboard_gridstack.css
Normal file
@@ -0,0 +1,34 @@
|
||||
/*rtl:begin:ignore*/
|
||||
/* Gridstack container custom css */
|
||||
.ks_o_graph_svg_container{
|
||||
height:calc(100% - 25px);
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.ksChartTitle{
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
display: block;
|
||||
height:calc(100% - 87%);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ks_o_graph_svg_container > svg.ks_svg_chart{
|
||||
height: calc(100% - 13%);
|
||||
width:100%;
|
||||
}
|
||||
|
||||
|
||||
/* Mobile view item no scroll fix */
|
||||
.grid-stack>.grid-stack-item>.ui-draggable-handle{
|
||||
touch-action: unset;
|
||||
}
|
||||
|
||||
|
||||
.grid-stack > .grid-stack-item > .grid-stack-item-content {
|
||||
|
||||
}
|
||||
/*rtl:end:ignore*/
|
||||
@@ -0,0 +1,75 @@
|
||||
.ks_dashboard_theme_input::before {
|
||||
content: '';
|
||||
position: relative;
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.ks_color_white::before {
|
||||
background: #ffffff;
|
||||
color:black;
|
||||
}
|
||||
|
||||
.ks_color_white {
|
||||
border: 1px solid #bdbdbd
|
||||
}
|
||||
|
||||
.ks_color_blue::before {
|
||||
background: #337ab7;
|
||||
}
|
||||
.ks_color_red::before{
|
||||
background: #d9534f;
|
||||
}
|
||||
.ks_color_yellow::before{
|
||||
background: #f0ad4e;
|
||||
}
|
||||
.ks_color_green::before{
|
||||
background: #5cb85c;
|
||||
}
|
||||
.ks_dashboard_theme_view_render{
|
||||
display: flex;
|
||||
}
|
||||
.ks_dashboard_theme_input:checked:before{
|
||||
content: '✔';
|
||||
}
|
||||
|
||||
.ks_dashboard_theme_input_container{
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ks_dashboard_top_settings .fa-cog{
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ks_dashboard_setting_container{
|
||||
padding: 5px 10px 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ks_dashboard_setting_container:hover{
|
||||
color: #333333;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
|
||||
.ks_dashboard_ninja_toggle_menu::after {
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
/*
|
||||
Define here the CSS styles applied only to Safari browsers
|
||||
(any version and any device)
|
||||
*/
|
||||
.ks_dashboard_theme_input{
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/*Kpi CSS here*/
|
||||
.ks_kpi_target_grey {
|
||||
color: #777777;
|
||||
}
|
||||
555
ks_dashboard_ninja/static/src/css/ks_dashboard_ninja.scss
Normal file
555
ks_dashboard_ninja/static/src/css/ks_dashboard_ninja.scss
Normal file
@@ -0,0 +1,555 @@
|
||||
/* TO make whole page in white ks_dashboard_linkbackground(below grey screen start) : Hiding it for now */
|
||||
.ks_dashboard_form {
|
||||
min-height: 100%;
|
||||
}
|
||||
.ks_dashboard_ninja {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ks_dashboard_main_content {
|
||||
overflow: auto;
|
||||
height:100%;
|
||||
}
|
||||
.ks_dashboard_ninja_header{
|
||||
text-align : right;
|
||||
display: flex ;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding: 15px 8px;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.ks_overflow {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ks_dashboard_header_name {
|
||||
margin: 0;
|
||||
max-width: 35%;
|
||||
}
|
||||
|
||||
.ks_header_container_div{
|
||||
float:none;
|
||||
background: #f2f2f2;
|
||||
margin-top: -20px;
|
||||
box-shadow: 2px 3px 6px #bbb5b5;
|
||||
}
|
||||
|
||||
|
||||
.ks_white_background{
|
||||
background-color : white;
|
||||
}
|
||||
|
||||
|
||||
.ks_dashboard_header_name {
|
||||
margin: 0;
|
||||
width: 80vmin;
|
||||
overflow-wrap: break-word;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ks_layout_color{
|
||||
background-color : #F9F9F9;
|
||||
margin-left : 35px;
|
||||
margin-top : 20px;
|
||||
}
|
||||
|
||||
|
||||
.ks_dashboard_item{
|
||||
padding: 8px 15px 20px 15px;
|
||||
/*border : 1px solid #CDD1D9;*/
|
||||
color : black;
|
||||
margin-top: 15px;
|
||||
border-radius : 6px;
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
overflow:visible !important;
|
||||
}
|
||||
.ks_dashboard_item:hover{
|
||||
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
|
||||
}
|
||||
.ks_dashboard_item_header{
|
||||
text-align : right;
|
||||
min-height: 21px;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_main_body{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_info{
|
||||
margin-left : 10px;
|
||||
width : calc(100% - 100px);
|
||||
}
|
||||
|
||||
.ks_dashboard_item_name{
|
||||
font-weight : bold;
|
||||
font-size: 23px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: none;
|
||||
min-height : 34px;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_domain_count{
|
||||
font-size: 28px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ks_dashboard_icon{
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.ks_dashboard_icon>img {
|
||||
width : 50px;
|
||||
height : 50px;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_header>button{
|
||||
visibility:hidden;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
.ks_dashboard_item_hover:hover .ks_dashboard_item_header_hover > button {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_menu_show > button{
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_header_hover>button:hover{
|
||||
transition: 0.2s linear;
|
||||
transform: scale(1.1);
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
|
||||
.ks_item_not_click {
|
||||
cursor : move;
|
||||
}
|
||||
|
||||
|
||||
/* For Layout 2 Css */
|
||||
|
||||
.ks_dashboard_item_l2{
|
||||
display : flex;
|
||||
border-radius: 6px;
|
||||
margin-top : 15px;
|
||||
height: 132px;
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
}
|
||||
|
||||
.ks_dashboard_item_l2:hover{
|
||||
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
|
||||
}
|
||||
|
||||
|
||||
.ks_dashboard_icon_l2{
|
||||
padding : 20px;
|
||||
border-top-left-radius: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
width: 100px;
|
||||
/* width: 36%; */
|
||||
padding-top: 35px;
|
||||
position:relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* font awesome resposive CSS for layou 2*/
|
||||
.ks_dashboard_icon_l2>span{
|
||||
font-size:5em;
|
||||
}
|
||||
|
||||
|
||||
.ks_dashboard_icon_l2>img {
|
||||
width: 60px;
|
||||
height : 60px;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_main_body_l2{
|
||||
position : relative;
|
||||
width: calc(100% - 100px);
|
||||
border-top-right-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_header_l2{
|
||||
position : absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_header_l2>button{
|
||||
visibility:hidden;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_domain_count_l2{
|
||||
font-size: 35px;
|
||||
margin-left: 20px;
|
||||
margin-top: 25px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_name_l2{
|
||||
font-weight: bold;
|
||||
font-size: medium;
|
||||
width: 80%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* layout 3 */
|
||||
|
||||
.ks_dashboard_item_info_l3{
|
||||
padding-left: 10px;
|
||||
width: calc(100% - 60px);
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.ks_dashboard_icon_l3 {
|
||||
display: block;
|
||||
max-width: 70px;
|
||||
}
|
||||
|
||||
.ks_dashboard_icon_l3 > img{
|
||||
width: 50px;
|
||||
height : 50px;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_name_l3{
|
||||
text-transform: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: right;
|
||||
font-size: medium;
|
||||
min-height : 24px;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_domain_count_l3{
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
font-size: 35px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Item Layout 4 */
|
||||
|
||||
.ks_dashboard_item_l4{
|
||||
display: flex;
|
||||
border-radius: 6px;
|
||||
margin-top: 15px;
|
||||
height: 132px;
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
}
|
||||
|
||||
.ks_dashboard_item_l4:hover{
|
||||
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
|
||||
}
|
||||
|
||||
|
||||
.ks_dashboard_icon_l4{
|
||||
padding : 20px;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
width : 100px;
|
||||
padding-top: 35px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ks_dashboard_icon_l4>img {
|
||||
width: 60px;
|
||||
height : 60px;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_main_body_l5{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_l5{
|
||||
position : relative;
|
||||
margin-top: 15px;
|
||||
height: 132px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
}
|
||||
|
||||
.ks_dashboard_item_l5:hover{
|
||||
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
|
||||
}
|
||||
|
||||
.ks_dashboard_icon_l5{
|
||||
position : absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ks_dashboard_icon_l5 > img{
|
||||
width: 20px !important;
|
||||
height: 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_main_body_l5{
|
||||
text-align: center;
|
||||
padding: 0 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_domain_count_l5{
|
||||
font-size: 50px;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_name_l5{
|
||||
font-weight: bold;
|
||||
font-size: medium;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_header_l5{
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
.ks_dashboard_icon_l5 span
|
||||
{
|
||||
font-size: 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_header_l6{
|
||||
position : absolute;
|
||||
right: 25px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_header_l6>button{
|
||||
visibility:hidden;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ks_item_click{
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
|
||||
/* Dashboard filter related CSS */
|
||||
|
||||
.ks_action_btns{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@media (max-width: 1075px){
|
||||
.ks_dashboard_header_name {
|
||||
max-width: 100%;
|
||||
}
|
||||
.ks_dashboard_top_menu{
|
||||
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ks_dashboard_header_sticky{
|
||||
position: -webkit-sticky; /* Safari */
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.ks_dashboard_datepicker_z-index{
|
||||
z-index: 10 !important;
|
||||
}
|
||||
|
||||
|
||||
/* Date Filter Selection CSS*/
|
||||
#ks_date_filter_selection{
|
||||
font-family: inherit;
|
||||
font-weight: bold;
|
||||
padding: 0px 8px 0px 8px;
|
||||
}
|
||||
|
||||
.ks_date_filter_selection_input{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.ks_date_selection_box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ks_date_input_fields{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ks_date_filter_selected > span{
|
||||
font-weight: bold;
|
||||
}
|
||||
.ks_date_filter_selected > span::before{
|
||||
font-family: FontAwesome;
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
content: "\f00c";
|
||||
}
|
||||
|
||||
.df_selection_text{
|
||||
display: block;
|
||||
padding: 3px 25px;
|
||||
font-weight: normal;
|
||||
line-height: 1.42857143;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
.df_selection_text:hover{
|
||||
color: #333333;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.ks_date_filter_dropdown{
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-color: #dee2e6;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
.ks_btn_first_child_radius{
|
||||
border-bottom-right-radius: 0 !important;
|
||||
border-top-right-radius: 0 !important;
|
||||
border-bottom-left-radius: 3px !important;
|
||||
border-top-left-radius: 3px !important;
|
||||
}
|
||||
|
||||
.ks_btn_middle_child{
|
||||
border-radius: 0 !important;
|
||||
height: 100%;
|
||||
margin-right:10px;
|
||||
|
||||
}
|
||||
|
||||
.ks_btn_middle_child input, .ks_btn_last_child input {
|
||||
padding: inherit !important;
|
||||
}
|
||||
|
||||
.ks_btn_last_child{
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-top-left-radius: 0 !important;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ks_hide{
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ks_dashboard_item_action{
|
||||
background-color : inherit;
|
||||
}
|
||||
|
||||
|
||||
/* Dev Code here */
|
||||
.ks_dashboard_header{
|
||||
border-bottom: 1px solid #cccccc;
|
||||
}
|
||||
|
||||
.ks_select_none{
|
||||
-webkit-user-select: none; /* Chrome all / Safari all */
|
||||
-moz-user-select: none; /* Firefox all */
|
||||
-ms-user-select: none; /* IE 10+ */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#ks_dashboard_title_input{
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#ks_dashboard_title{
|
||||
padding-left: 1rem !important;
|
||||
}
|
||||
|
||||
|
||||
.ks_dashboard_ninja_toggle_menu{
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.ks_dashboard_ninja_toggle_menu:before {
|
||||
font-family: FontAwesome;
|
||||
top:0;
|
||||
left:-5px;
|
||||
padding-right:10px;
|
||||
content: "\f013";
|
||||
font-size: 2em;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.ks_bg_white{
|
||||
background : white;
|
||||
}
|
||||
/*
|
||||
|
||||
.dropdown-submenu {
|
||||
position: relative;
|
||||
}
|
||||
*/
|
||||
|
||||
#ks_dashboard_title_label{
|
||||
color: #777777;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
@media (max-width: 992px){
|
||||
.ks_dashboard_ninja_toggle_menu:before {
|
||||
content: "\f142";
|
||||
}
|
||||
|
||||
|
||||
#ks_dashboard_title_label{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
#ks_dashboard_title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
188
ks_dashboard_ninja/static/src/css/ks_dashboard_ninja_item.css
Normal file
188
ks_dashboard_ninja/static/src/css/ks_dashboard_ninja_item.css
Normal file
@@ -0,0 +1,188 @@
|
||||
.ks_item_icon {
|
||||
width : 110px !important;
|
||||
}
|
||||
|
||||
.ks_item_icon>img {
|
||||
width : 50px;
|
||||
}
|
||||
|
||||
.ks_field_required{
|
||||
color : red;
|
||||
}
|
||||
|
||||
.ks_db_item_preview{
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.ks_not_click{
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ks_color_picker{
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.ks_color_opacity{
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
/* Icon Container in image widget render view*/
|
||||
.ks_image_widget_icon_container{
|
||||
background : transparent;
|
||||
border: none;
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ks_domain_content{
|
||||
overflow : auto;
|
||||
}
|
||||
|
||||
|
||||
/* Preview Footer Note */
|
||||
.ks_db_item_preview_footer_note{
|
||||
margin-top : 10px;
|
||||
}
|
||||
|
||||
|
||||
/*Container CSS*/
|
||||
|
||||
.ks_md_heading{
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
||||
/* Dashboard Menu CSS*/
|
||||
.ks_dashboard_menu_container{
|
||||
padding: 10px;
|
||||
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
|
||||
border-radius: 5px;
|
||||
max-width: 174px;
|
||||
}
|
||||
|
||||
|
||||
.ks_dashboard_menu_container > li{
|
||||
margin: 2px;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
|
||||
.ks_dashboard_menu_container > li > button{
|
||||
margin-top : 5px;
|
||||
margin-left: 2px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
#ks_add_item_selection,#ks_date_selector_container{
|
||||
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
|
||||
}
|
||||
|
||||
#ks_dashboard_layout_edit{
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
/*background-color: #357bb7;*/
|
||||
/*border: 1px solid #357bb7;*/
|
||||
}
|
||||
|
||||
.ks_add_item_type_button{
|
||||
color:#fff;
|
||||
/*background-color: #357bb7;
|
||||
border: 1px solid #357bb7;*/
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* kpi css*/
|
||||
|
||||
.ks_dashboard_kpi_name_preview {
|
||||
font-size: 21px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ks_kpi_main_body {
|
||||
width: 100%;
|
||||
/*
|
||||
height: 67%;
|
||||
*/
|
||||
}
|
||||
|
||||
.ks_dashboard_kpi_count_preview {
|
||||
font-weight: bold;
|
||||
width:auto;
|
||||
font-size: x-large;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ks_dashboard_kpi_arrow_preview {
|
||||
font-size: medium;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.ks_db_kpi_preview {
|
||||
width: 249px;
|
||||
}
|
||||
|
||||
.ks_dashboard_kpi {
|
||||
position : relative;
|
||||
margin-top: 15px;
|
||||
height: auto;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
}
|
||||
|
||||
.ks_target_previous {
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px 0px 15px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.ks_progress progress {
|
||||
background-color: #000;
|
||||
border: 0;
|
||||
width: 80%;
|
||||
height: 5px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
.ks_progress progress::-webkit-progress-bar {
|
||||
background-color: #000;
|
||||
border-radius: 9px;
|
||||
}
|
||||
.ks_progress progress::progress-value {
|
||||
background: #fff;
|
||||
border-radius: 9px;
|
||||
}
|
||||
.ks_progress progress::progress-bar {
|
||||
background: #fff;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.ks_list_view_layout_3 .ks_tr:nth-child(even),
|
||||
.ks_list_view_layout_1 .ks_tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.ks_list_view_layout_3 .ks_tr:hover,
|
||||
.ks_list_view_layout_1 .ks_tr:hover {
|
||||
color: #666666 !important;
|
||||
background-color: rgba(0, 0, 0, 0.26) !important;
|
||||
|
||||
}
|
||||
202
ks_dashboard_ninja/static/src/css/ks_dashboard_ninja_pro.css
Normal file
202
ks_dashboard_ninja/static/src/css/ks_dashboard_ninja_pro.css
Normal file
@@ -0,0 +1,202 @@
|
||||
.ks_dashboard_item {
|
||||
height: 132px;
|
||||
}
|
||||
|
||||
/* Form pie chart no data */
|
||||
.ks_dn_graph_preview > .nv-noData > .ks_pie_chart_nocontent{
|
||||
padding: 100px 0 0 137px;
|
||||
min-height: 327px;
|
||||
font-size: 125%;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_action {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.ks_group_width {
|
||||
width : 40% !important;
|
||||
}
|
||||
.ks_dashboard_quick_edit_action_popup {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_button_container > .ks_chart_inner_buttons > button {
|
||||
color:black;
|
||||
}
|
||||
/* Chart No Content Css */
|
||||
.ks_chart_nocontent_form {
|
||||
display: inherit !important;
|
||||
}
|
||||
|
||||
.ks_pie_chart_nocontent > .nv-noData {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-moz-transform: translateX(-50%) translateY(-50%);
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
font-size: 125%;
|
||||
}
|
||||
|
||||
.ks_pie_chart_nocontent > .ksChartTitle {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
-moz-transform: translateX(-50%) translateY(-50%);
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
|
||||
.ks_dashboarditem_id, .ks_dashboarditem_chart_container{
|
||||
overflow-x : visible !important;
|
||||
overflow-y : visible !important;
|
||||
}
|
||||
|
||||
.ks_dashboard_kpi{
|
||||
overflow-y : auto !important;
|
||||
}
|
||||
|
||||
.ks_dashboarditem_chart_container{
|
||||
background : white;
|
||||
}
|
||||
|
||||
/* Layout 6 exception case CSS */
|
||||
.ks_dashboard_item_header_l6{
|
||||
top: 5px !important;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.ks_chart_json_export {
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
|
||||
|
||||
.ks_chart_card_body{
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
}
|
||||
|
||||
|
||||
/*---------------------------------------------------*/
|
||||
table#ksListViewTable {
|
||||
margin: 0 auto;
|
||||
border-collapse: collapse;
|
||||
font-family: Agenda-Light, sans-serif;
|
||||
/*font-weight: 100;*/
|
||||
/*background: #333;*/ /*color: #fff;*/
|
||||
text-rendering: optimizeLegibility;
|
||||
border-radius: 5px;
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
|
||||
|
||||
#ks_item_info {
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.ks_chart_heading{
|
||||
/*width: 50%; */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_drill_up {
|
||||
min-width:89px;
|
||||
}
|
||||
|
||||
.ks_list_view_heading{
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ks_pager {
|
||||
min-width:98px;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_hover:hover .ks_dashboard_item_header_hover > .ks_chart_inner_buttons{
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.ks_chart_inner_buttons{
|
||||
visibility: hidden;
|
||||
|
||||
}
|
||||
|
||||
.ks_chart_color_options, .ks_item_size_options{
|
||||
display: block;
|
||||
padding: 3px 10px;
|
||||
font-weight: normal;
|
||||
line-height: 1.42857143;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
margin-left: 24px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.ks_chart_color_options:hover, .ks_item_size_options:hover{
|
||||
color: #333333;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.ks_pro_print_hide{
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
.ks_dashboard_item_menu_show > .ks_chart_inner_buttons{
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.ksMaxTableContent{
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
|
||||
.ks_list_view_container{
|
||||
background : white;
|
||||
}
|
||||
|
||||
.ks_chart_export_menu{
|
||||
padding: 6px 0 6px 0;
|
||||
}
|
||||
|
||||
.ks_chart_export_menu_header{
|
||||
font-weight: 600;
|
||||
padding: 0 14px 10px 14px;
|
||||
}
|
||||
|
||||
.ks_chart_export_menu_item{
|
||||
padding: 5px 14px 5px 14px;
|
||||
cursor : pointer;
|
||||
}
|
||||
|
||||
.ks_chart_image_export{
|
||||
line-height: 29.5px;
|
||||
padding-top: 7.5px;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
.ks_chart_export_menu_item{
|
||||
color: #4c4c4c;;
|
||||
}
|
||||
|
||||
|
||||
.ks_chart_export_menu_item:hover{
|
||||
color: #4d4c4c;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
|
||||
.ks_chart_export_menu_item > i{
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
.ks_date_filters_menu_drop_down {
|
||||
max-height: 500px !important;
|
||||
overflow: auto !important;
|
||||
}
|
||||
82
ks_dashboard_ninja/static/src/css/ks_dashboard_options.css
Normal file
82
ks_dashboard_ninja/static/src/css/ks_dashboard_options.css
Normal file
@@ -0,0 +1,82 @@
|
||||
.ks-options-btn{
|
||||
border-radius: 25px;
|
||||
margin-top: 2%;
|
||||
visibility:collapse;
|
||||
}
|
||||
|
||||
.ks_dashboard_link{
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.ks_date_apply_clear_print,.ks_dashboard_top_menu{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
i.ks-options-plus {
|
||||
color: white;
|
||||
display: inline-block;
|
||||
border-radius: 60px;
|
||||
background: #7c7bad;
|
||||
box-shadow: 0px 0px 2px #888;
|
||||
padding: 0.5em 0.6em;
|
||||
}
|
||||
|
||||
.apply-dashboard-date-filter{
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.clear-dashboard-date-filter{
|
||||
margin-left:5px;
|
||||
}
|
||||
|
||||
#ks_start_date_picker{
|
||||
height: 30px;
|
||||
width: 100px;
|
||||
border: 1px solid #ccc;
|
||||
padding: 2px 4px;
|
||||
color: #1f1f1f;
|
||||
}
|
||||
|
||||
#ks_end_date_picker{
|
||||
height: 30px;
|
||||
width: 100px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
padding: 2px 4px;
|
||||
color: #1f1f1f;
|
||||
}
|
||||
|
||||
|
||||
.ui-datepicker .ui-datepicker-title {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.o_view_manager_content{
|
||||
font-family: arial;
|
||||
}
|
||||
.html2canvas-container {
|
||||
height: 4000px !important;
|
||||
}
|
||||
|
||||
.ks_dashboard_header_name {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.ks-dashboard-date-labels{
|
||||
font-weight: bold;
|
||||
margin-top: inherit;
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.ks_event_offer_list {
|
||||
pointer-events: none;
|
||||
color: #8080805e !important;
|
||||
}
|
||||
|
||||
.ks_event_offer_list:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
|
||||
.ks_icon_container_grid_view{
|
||||
width:100%;
|
||||
/* height:100%;*/
|
||||
}
|
||||
|
||||
.ks_icon_container_list{
|
||||
border: 1px solid transparent;
|
||||
position: relative;
|
||||
padding:2%;
|
||||
float:left;
|
||||
display:block;
|
||||
transition: 0.3s ease-in-out;
|
||||
width: 16.66%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ks_font {
|
||||
font-weight: bold;
|
||||
min-width: 129px
|
||||
}
|
||||
|
||||
|
||||
.ks_icon_container_list:hover {
|
||||
transform: scale(1.2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ks_icon_selected{
|
||||
background: #f2f2f2;
|
||||
border-radius: 5px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
.ks_icon_selected img{
|
||||
transform: scale(0.7) !important;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.ks_icon_container_open_button{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.ks_modal_icon_input_div{
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.ks_modal_icon_input{
|
||||
padding: 6px;
|
||||
margin-top: 8px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.ks_fa_icon_search{
|
||||
float: right;
|
||||
padding: 6px 10px;
|
||||
margin-top: 8px;
|
||||
margin-right: 16px;
|
||||
background: #ddd;
|
||||
font-size: 17px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ks_search_modal_container{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.x-tree-icon-leaf, .x-tree-icon-text::before {
|
||||
font: normal normal normal 14px/1 "FontAwesome";
|
||||
display: inline-block;
|
||||
color: #5fa2dd;
|
||||
}
|
||||
@media (max-width: 475px){
|
||||
.ks_icon_container_list{
|
||||
width: 33.33%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Responsive CSS */
|
||||
@media (max-width: 1024px){
|
||||
.ks_dashboard_item_header_hover > button, .ks_dashboard_item_header_hover > .ks_chart_inner_buttons{
|
||||
visibility: visible !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.dropdown-max-height {
|
||||
max-height: 40vh;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
106
ks_dashboard_ninja/static/src/css/ks_toggle_icon.css
Normal file
106
ks_dashboard_ninja/static/src/css/ks_toggle_icon.css
Normal file
@@ -0,0 +1,106 @@
|
||||
.ks_toggle_icon_input{
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ks_select_dashboard_item_toggle{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ks_select_icon_div{
|
||||
margin-right : 45px;
|
||||
}
|
||||
|
||||
|
||||
/*New Quick Edit View*/
|
||||
.ks_dashboard_item_button_container{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.ks_dashboard_quick_edit_action > button{
|
||||
position: absolute;
|
||||
right: -30px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ks_dashboard_quick_edit_action{
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
|
||||
/*UI CHANGES*/
|
||||
|
||||
.ks_qe_footer_span{
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
-webkit-transform: rotate(-135deg) translateZ(0);
|
||||
transform: rotate(-135deg) translateZ(0);
|
||||
outline: 1px solid transparent;
|
||||
background-color: white;
|
||||
border-top: 1px solid #c7c7c7;
|
||||
border-right: 1px solid #c7c7c7;
|
||||
position: absolute;
|
||||
left: -9px;
|
||||
top: 22px;
|
||||
}
|
||||
|
||||
|
||||
.ks_qe_dropdown_menu{
|
||||
max-width: 280px;
|
||||
box-shadow: 3px 7px 12px 1px rgba(0, 0, 0, 0.32);
|
||||
}
|
||||
|
||||
.ks_item_field_info{
|
||||
/*width: 230px;*/
|
||||
max-height: 225px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.ks_quick_edit_footer{
|
||||
padding-top: 1rem !important;
|
||||
padding-bottom: 0.7rem !important;
|
||||
border-top: 1px solid #dcdada;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ks_qe_form_view{
|
||||
padding-bottom: 0px !important;
|
||||
padding-top: 0px !important;
|
||||
}
|
||||
|
||||
.ks_qe_form_view > .ks_qe_form_view_group{
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* width */
|
||||
.ks_item_field_info::-webkit-scrollbar,
|
||||
.ks_dashboard_custom_srollbar::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
.ks_item_field_info::-webkit-scrollbar-track,
|
||||
.ks_dashboard_custom_srollbar::-webkit-scrollbar-track,
|
||||
{
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
.ks_item_field_info::-webkit-scrollbar-thumb,
|
||||
.ks_dashboard_custom_srollbar::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
.ks_item_field_info::-webkit-scrollbar-thumb:hover,
|
||||
.ks_dashboard_custom_srollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
.ks_quick_edit_footer > .ks_discard {
|
||||
border-color: #dee2e6;
|
||||
}
|
||||
Reference in New Issue
Block a user