maxmustermann/gentelella
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Notifications counter issue resolved

Browse source
This commit is contained in:
sunny kushwaha 2019-11-18 14:29:52 +05:30
parent 92217a474e
commit f0dce3ef0b
3 changed files with 81 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
production/index3.html
View file

@ -436,7 +436,7 @@
</div> </div>
<div class="col-md-4 col-sm-6 "> <div class="col-md-4 col-sm-6 ">
<div class="x_panel fixed_height_320"> <div class="x_panel tile fixed_height_320">
<div class="x_title"> <div class="x_title">
<h2>Daily users <small>Sessions</small></h2> <h2>Daily users <small>Sessions</small></h2>
<ul class="nav navbar-right panel_toolbox"> <ul class="nav navbar-right panel_toolbox">

44
production/tables_dynamic.html
View file

@ -10,6 +10,7 @@
<title>DataTables | Gentelella</title> <title>DataTables | Gentelella</title>
<!-- Bootstrap --> <!-- Bootstrap -->
<link href="cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome --> <!-- Font Awesome -->
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet"> <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
@ -18,6 +19,7 @@
<!-- iCheck --> <!-- iCheck -->
<link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet"> <link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
<!-- Datatables --> <!-- Datatables -->
<link href="../vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet"> <link href="../vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="../vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet"> <link href="../vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
<link href="../vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet"> <link href="../vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
@ -292,7 +294,7 @@
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="row"> <div class="row">
<div class="col-md-12 col-sm-12 col-xs-12"> <div class="col-md-12 col-sm-12 ">
<div class="x_panel"> <div class="x_panel">
<div class="x_title"> <div class="x_title">
<h2>Default Example <small>Users</small></h2> <h2>Default Example <small>Users</small></h2>
@ -312,6 +314,9 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="x_content"> <div class="x_content">
<div class="row">
<div class="col-sm-12">
<div class="card-box table-responsive">
<p class="text-muted font-13 m-b-30"> <p class="text-muted font-13 m-b-30">
DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: <code>$().DataTable();</code> DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: <code>$().DataTable();</code>
</p> </p>
@ -788,10 +793,13 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="col-md-12 col-sm-12 col-xs-12"> <div class="col-md-12 col-sm-12 ">
<div class="x_panel"> <div class="x_panel">
<div class="x_title"> <div class="x_title">
<h2>Plus Table Design</small></h2> <h2>Plus Table Design</small></h2>
@ -811,6 +819,9 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="x_content"> <div class="x_content">
<div class="row">
<div class="col-sm-12">
<div class="card-box table-responsive">
<p class="text-muted font-13 m-b-30"> <p class="text-muted font-13 m-b-30">
DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: <code>$().DataTable();</code> DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: <code>$().DataTable();</code>
</p> </p>
@ -1461,10 +1472,13 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="col-md-12 col-sm-12 col-xs-12"> <div class="col-md-12 col-sm-12 ">
<div class="x_panel"> <div class="x_panel">
<div class="x_title"> <div class="x_title">
<h2>Button Example <small>Users</small></h2> <h2>Button Example <small>Users</small></h2>
@ -1484,6 +1498,9 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="x_content"> <div class="x_content">
<div class="row">
<div class="col-sm-12">
<div class="card-box table-responsive">
<p class="text-muted font-13 m-b-30"> <p class="text-muted font-13 m-b-30">
The Buttons extension for DataTables provides a common set of options, API methods and styling to display buttons on a page that will interact with a DataTable. The core library provides the based framework upon which plug-ins can built. The Buttons extension for DataTables provides a common set of options, API methods and styling to display buttons on a page that will interact with a DataTable. The core library provides the based framework upon which plug-ins can built.
</p> </p>
@ -1962,8 +1979,11 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12"> <div class="col-md-12 col-sm-12 ">
<div class="x_panel"> <div class="x_panel">
<div class="x_title"> <div class="x_title">
<h2>Fixed Header Example <small>Users</small></h2> <h2>Fixed Header Example <small>Users</small></h2>
@ -1983,6 +2003,9 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="x_content"> <div class="x_content">
<div class="row">
<div class="col-sm-12">
<div class="card-box table-responsive">
<p class="text-muted font-13 m-b-30"> <p class="text-muted font-13 m-b-30">
This example shows FixedHeader being styling by the Bootstrap CSS framework. This example shows FixedHeader being styling by the Bootstrap CSS framework.
</p> </p>
@ -2461,8 +2484,11 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12"> <div class="col-md-12 col-sm-12 ">
<div class="x_panel"> <div class="x_panel">
<div class="x_title"> <div class="x_title">
<h2>KeyTable example <small>Users</small></h2> <h2>KeyTable example <small>Users</small></h2>
@ -2968,7 +2994,7 @@
</div> </div>
</div> </div>
<div class="col-md-12 col-sm-12 col-xs-12"> <div class="col-md-12 col-sm-12 ">
<div class="x_panel"> <div class="x_panel">
<div class="x_title"> <div class="x_title">
<h2>Responsive example<small>Users</small></h2> <h2>Responsive example<small>Users</small></h2>
@ -2988,6 +3014,9 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="x_content"> <div class="x_content">
<div class="row">
<div class="col-sm-12">
<div class="card-box table-responsive">
<p class="text-muted font-13 m-b-30"> <p class="text-muted font-13 m-b-30">
Responsive is an extension for DataTables that resolves that problem by optimising the table's layout for different screen sizes through the dynamic insertion and removal of columns from the table. Responsive is an extension for DataTables that resolves that problem by optimising the table's layout for different screen sizes through the dynamic insertion and removal of columns from the table.
</p> </p>
@ -3641,6 +3670,9 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

79
src/scss/custom.scss
View file

@ -481,6 +481,7 @@
.item{ .item{
display:block; display:block;
} }
} }
.nav-md .container.body .col-md-3.left_col { .nav-md .container.body .col-md-3.left_col {
min-height: 100%; min-height: 100%;
@ -538,7 +539,7 @@ body .container.body .right_col {
font-size: 17px; font-size: 17px;
} }
.tile, .graph { .tile, .graph {
zoom: 85%; zoom: 75%;
height: inherit; height: inherit;
} }
.item{ .item{
@ -1464,21 +1465,21 @@ table.jambo_table tbody tr.selected td {
// zoom: 1; // zoom: 1;
// } // }
.dataTables_processing { // .dataTables_processing {
position: absolute; // position: absolute;
top: 50%; // top: 50%;
left: 50%; // left: 50%;
width: 250px; // width: 250px;
height: 30px; // height: 30px;
margin-left: -125px; // margin-left: -125px;
margin-top: -15px; // margin-top: -15px;
padding: 14px 0 2px 0; // padding: 14px 0 2px 0;
border: 1px solid #ddd; // border: 1px solid #ddd;
text-align: center; // text-align: center;
color: #999; // color: #999;
font-size: 14px; // font-size: 14px;
background-color: white; // background-color: white;
} // }
// .dataTables_length { // .dataTables_length {
// width: auto; // width: auto;
@ -1492,10 +1493,10 @@ table.jambo_table tbody tr.selected td {
// text-align: right; // text-align: right;
// } // }
.dataTables_info { // .dataTables_info {
width: 60%; // width: 60%;
float: left; // float: left;
} // }
.dataTables_paginate { .dataTables_paginate {
float: right; float: right;
@ -1543,27 +1544,27 @@ table.display thead th:active, table.display thead td:active {
outline: none; outline: none;
} }
.dataTables_scroll { // .dataTables_scroll {
clear: both; // clear: both;
} // }
.dataTables_scrollBody { // .dataTables_scrollBody {
*margin-top: -1px; // *margin-top: -1px;
-webkit-overflow-scrolling: touch; // -webkit-overflow-scrolling: touch;
} // }
.top, .bottom {} // .top, .bottom {}
.top .dataTables_info { // .top .dataTables_info {
float: none; // float: none;
} // }
.clear { .clear {
clear: both; clear: both;
} }
.dataTables_empty { // .dataTables_empty {
text-align: center; // text-align: center;
} // }
tfoot input { tfoot input {
margin: 0.5em 0; margin: 0.5em 0;
@ -1586,9 +1587,9 @@ td.details {
border: 2px solid #A19B9E; border: 2px solid #A19B9E;
} }
.example_alt_pagination div.dataTables_info { // .example_alt_pagination div.dataTables_info {
width: 40%; // width: 40%;
} // }
.paging_full_numbers { .paging_full_numbers {
width: 400px; width: 400px;
@ -4709,6 +4710,10 @@ ul.notifications {
right: 135px; right: 135px;
top: 7px; top: 7px;
} }
.tile, .graph {
zoom: 70%;
height: inherit;
}
} }
@media (min-width: 768px) and (max-width: 1024px){ @media (min-width: 768px) and (max-width: 1024px){
.info-number .badge { .info-number .badge {