jinql
/
gentelella
mirror of https://github.com/ColorlibHQ/gentelella
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #831 from ColorlibHQ/bootstrap4_Update 

Bootstrap4 update
pull/834/head
Aigars Silkalns 2019-11-18 15:58:38 +02:00 committed by GitHub
parent b0dc5dbcb1 f06ebc4506
commit 9bab41d6bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 76 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
build/css/custom.css
View File

@ -1126,15 +1126,6 @@ body .container.body .right_col {
padding: 0px; } padding: 0px; }
@media (max-width: 991px) { @media (max-width: 991px) {
.info-number .badge {
font-size: 10px;
font-weight: normal;
line-height: 13px;
padding: 2px 6px;
position: absolute;
right: 135px;
top: 6px; }
.nav-md .container.body .right_col, .nav-md .container.body .top_nav { .nav-md .container.body .right_col, .nav-md .container.body .top_nav {
width: 100%; width: 100%;
margin: 0; } margin: 0; }
@ -1157,7 +1148,7 @@ body .container.body .right_col {
font-size: 17px; } font-size: 17px; }
.tile, .graph { .tile, .graph {
zoom: 85%; zoom: 76%;
height: inherit; } height: inherit; }
.item { .item {
@ -1333,7 +1324,7 @@ table.no-margin .progress {
margin: 0 auto; margin: 0 auto;
float: none !important; } float: none !important; }
.col-md-55, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { .col-md-55, .col-xs-12, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative; position: relative;
min-height: 1px; min-height: 1px;
float: left; float: left;
@ -2012,15 +2003,6 @@ table.jambo_table tbody tr.selected td {
font-size: 14px; font-size: 14px;
background-color: white; } background-color: white; }
.dataTables_length {
width: 40%;
float: left; }
.dataTables_filter {
width: 50%;
float: right;
text-align: right; }
.dataTables_info { .dataTables_info {
width: 60%; width: 60%;
float: left; } float: left; }
@ -2418,7 +2400,6 @@ a.user-profile {
margin-right: 10px; } margin-right: 10px; }
ul.top_profiles { ul.top_profiles {
height: 330px;
width: 100%; } width: 100%; }
ul.top_profiles li { ul.top_profiles li {
@ -4855,6 +4836,28 @@ ul.notifications {
padding: 9px 0; padding: 9px 0;
border-top: 1px solid #E6E9ED; } border-top: 1px solid #E6E9ED; }
@media (min-width: 360px) and (max-width: 812px) {
.info-number .badge {
font-size: 10px;
font-weight: normal;
line-height: 13px;
padding: 2px 6px;
position: absolute;
right: 135px;
top: 7px; }
.tile, .graph {
zoom: 71%;
height: inherit; } }
@media (min-width: 768px) and (max-width: 1024px) {
.info-number .badge {
font-size: 10px;
font-weight: normal;
line-height: 13px;
padding: 2px 6px;
position: absolute;
right: -2px;
top: -6px; } }
/** /PNotify **/ /** /PNotify **/
/** FullCalendar **/ /** FullCalendar **/
.fc-state-default { .fc-state-default {

4
build/css/custom.min.css vendored
View File

File diff suppressed because one or more lines are too long

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>

17
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: 76%;
height: inherit; height: inherit;
} }
.item{ .item{
@ -1458,11 +1459,11 @@ table.jambo_table tbody tr.selected td {
background: #ff0000; background: #ff0000;
} }
// .dataTables_wrapper { .dataTables_wrapper {
// position: relative; position: relative;
// clear: both; clear: both;
// zoom: 1; zoom: 1;
// } }
.dataTables_processing { .dataTables_processing {
position: absolute; position: absolute;
@ -4709,6 +4710,10 @@ ul.notifications {
right: 135px; right: 135px;
top: 7px; top: 7px;
} }
.tile, .graph {
zoom: 71%;
height: inherit;
}
} }
@media (min-width: 768px) and (max-width: 1024px){ @media (min-width: 768px) and (max-width: 1024px){
.info-number .badge { .info-number .badge {