#346

Sumenu labels over footer buttons

-solved that issue.

README.md

@@ -1,6 +1,6 @@
 # gentelella
 
-Gentellela Admin is a free to use Bootstrap admin template.
+Gentelella Admin is a free to use Bootstrap admin template.
 This template uses the default Bootstrap 3 styles along with a variety of powerful jQuery plugins and tools to create a powerful framework for creating admin panels or back-end dashboards.
 
 Theme uses several libraries for charts, calendar, form validation, wizard style interface, off-canvas navigation menu, text forms, date range, upload area, form autocomplete, range slider, progress bars, notifications and much more.
@@ -80,11 +80,11 @@ If `gulp` is installed, follow the steps below.
 * validator - HTML from validator using jQuery
 * jQuery Smart Wizard
 
-## Gentellela for other platforms and frameworks
+## Gentelella for other platforms and frameworks
 
 * [Gentelella on Ruby on Rails 4](https://github.com/iogbole/gentelella_on_rails) thanks to Israel Ogbole.
-* [Gentellela on Smarty 3](https://github.com/microvb/otp-thing) with one time password generator, validator, and QR code generator that has no web dependencies (self-contained) in PHP thanks to MicroVB INC
-* [Gentellela integrated into Symfony 3](https://github.com/krzysiekpiasecki/Gentelella) full stack PHP framework thanks to Krzysztof Piasecki.
+* [Gentelella on Smarty 3](https://github.com/microvb/otp-thing) with one time password generator, validator, and QR code generator that has no web dependencies (self-contained) in PHP thanks to MicroVB INC
+* [Gentelella integrated into Symfony 3](https://github.com/krzysiekpiasecki/Gentelella) full stack PHP framework thanks to Krzysztof Piasecki.
 * [Gentelella on Yii framework 2](https://github.com/yiister/yii2-gentelella) with an asset bundle, a layout template and some widgets.
 * [Gentelella on Angular 2](https://github.com/kmkatsma/angular2-webpack-starter-gentelella) Angular Webpack Starter modified to utilize the Gentelella.
 * [Gentelella on Aurelia](https://github.com/kmkatsma/aurelia-gentelella) Typescript webpack skeleton modified to utilize the Gentelella.
@@ -101,6 +101,6 @@ Let us know if you have done integration for this admin template on other platfo
 * [WordPress Themes](https://colorlib.com/wp/free-wordpress-themes/ "List of Free WordPress themes by Colorlib") - A huge selection of the best free WordPress themes that are all licensed under GPL and are available for personal and commercial use without restrictions.
 
 ## License information
-Gentellela is licensed under The MIT License (MIT). Which means that you can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software. But you always need to state that Colorlib is the original author of this template.
+Gentelella is licensed under The MIT License (MIT). Which means that you can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software. But you always need to state that Colorlib is the original author of this template.
 
 Project is developed and maintained by [Colorlib](https://colorlib.com/ "Colorlib - Make Your First Blog") and Aigars Silkalns

build/css/style.css

@@ -1648,7 +1648,8 @@ span.right {
     padding: 5px 0 0 0;
     position: fixed;
     width: 230px;
-    background: #2A3F54
+    background: #2A3F54;
+	z-index:999;
 }
 .sidebar-footer a {
     padding: 7px 0 3px;

build/js/custom.js

@@ -190,9 +190,9 @@ $(document).ready(function() {
 
 // iCheck
 $(document).ready(function() {
-    if ($("input.checkbox")[0]) {
+    if ($("input.flat")[0]) {
         $(document).ready(function () {
-            $('input.checkbox').iCheck({
+            $('input.flat').iCheck({
                 checkboxClass: 'icheckbox_flat-green',
                 radioClass: 'iradio_flat-green'
             });

build/js/new-custom.js

@@ -4345,31 +4345,31 @@
 			
 			function init_gauge() {
 			
-					if( typeof (Gauge) === 'undefined'){ return; }
-					console.log('init_gauge');
-			
-					  var opts = {
-					  lines: 12,
-					  angle: 0,
-					  lineWidth: 0.4,
-					  pointer: {
-						  length: 0.75,
-						  strokeWidth: 0.042,
-						  color: '#1D212A'
-					  },
-					  limitMax: 'false',
-					  colorStart: '#1ABC9C',
-					  colorStop: '#1ABC9C',
-					  strokeColor: '#F0F3F3',
-					  generateGradient: true
-				  };
-				  var target = document.getElementById('foo'),
-					  gauge = new Gauge(target).setOptions(opts);
+				if( typeof (Gauge) === 'undefined'){ return; }
+				console.log('init_gauge');
+		
+				  var opts = {
+				  lines: 12,
+				  angle: 0,
+				  lineWidth: 0.4,
+				  pointer: {
+					  length: 0.75,
+					  strokeWidth: 0.042,
+					  color: '#1D212A'
+				  },
+				  limitMax: 'false',
+				  colorStart: '#1ABC9C',
+				  colorStop: '#1ABC9C',
+				  strokeColor: '#F0F3F3',
+				  generateGradient: true
+			  };
+			  var target = document.getElementById('foo'),
+				  gauge = new Gauge(target).setOptions(opts);
 
-				  gauge.maxValue = 6000;
-				  gauge.animationSpeed = 32;
-				  gauge.set(3200);
-				  gauge.setTextField(document.getElementById("gauge-text"));
+			  gauge.maxValue = 6000;
+			  gauge.animationSpeed = 32;
+			  gauge.set(3200);
+			  gauge.setTextField(document.getElementById("gauge-text"));
 			
 			}
 			

build/js/new-custom2.js

@@ -0,0 +1,871 @@
+/**
+ * Resize function without multiple trigger
+ * 
+ * Usage:
+ * $(window).smartresize(function(){  
+ *     // code here
+ * });
+ */
+(function($,sr){
+    // debouncing function from John Hann
+    // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
+    var debounce = function (func, threshold, execAsap) {
+      var timeout;
+
+        return function debounced () {
+            var obj = this, args = arguments;
+            function delayed () {
+                if (!execAsap)
+                    func.apply(obj, args); 
+                timeout = null; 
+            }
+
+            if (timeout)
+                clearTimeout(timeout);
+            else if (execAsap)
+                func.apply(obj, args);
+
+            timeout = setTimeout(delayed, threshold || 100); 
+        };
+    };
+
+    // smartresize 
+    jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
+
+})(jQuery,'smartresize');
+/**
+ * To change this license header, choose License Headers in Project Properties.
+ * To change this template file, choose Tools | Templates
+ * and open the template in the editor.
+ */
+
+var CURRENT_URL = window.location.href.split('#')[0].split('?')[0],
+    $BODY = $('body'),
+    $MENU_TOGGLE = $('#menu_toggle'),
+    $SIDEBAR_MENU = $('#sidebar-menu'),
+    $SIDEBAR_FOOTER = $('.sidebar-footer'),
+    $LEFT_COL = $('.left_col'),
+    $RIGHT_COL = $('.right_col'),
+    $NAV_MENU = $('.nav_menu'),
+    $FOOTER = $('footer');
+
+	
+	
+// Sidebar
+function init_sidebar() {
+// TODO: This is some kind of easy fix, maybe we can improve this
+var setContentHeight = function () {
+	// reset height
+	$RIGHT_COL.css('min-height', $(window).height());
+
+	var bodyHeight = $BODY.outerHeight(),
+		footerHeight = $BODY.hasClass('footer_fixed') ? -10 : $FOOTER.height(),
+		leftColHeight = $LEFT_COL.eq(1).height() + $SIDEBAR_FOOTER.height(),
+		contentHeight = bodyHeight < leftColHeight ? leftColHeight : bodyHeight;
+
+	// normalize content
+	contentHeight -= $NAV_MENU.height() + footerHeight;
+
+	$RIGHT_COL.css('min-height', contentHeight);
+};
+
+$SIDEBAR_MENU.find('a').on('click', function(ev) {
+	var $li = $(this).parent();
+
+	if ($li.is('.active')) {
+		$li.removeClass('active active-sm');
+		$('ul:first', $li).slideUp(function() {
+			setContentHeight();
+		});
+	} else {
+		// prevent closing menu if we are on child menu
+		if (!$li.parent().is('.child_menu')) {
+			$SIDEBAR_MENU.find('li').removeClass('active active-sm');
+			$SIDEBAR_MENU.find('li ul').slideUp();
+		}
+		
+		$li.addClass('active');
+
+		$('ul:first', $li).slideDown(function() {
+			setContentHeight();
+		});
+	}
+});
+
+// toggle small or large menu
+$MENU_TOGGLE.on('click', function() {
+		if ($BODY.hasClass('nav-md')) {
+			$SIDEBAR_MENU.find('li.active ul').hide();
+			$SIDEBAR_MENU.find('li.active').addClass('active-sm').removeClass('active');
+		} else {
+			$SIDEBAR_MENU.find('li.active-sm ul').show();
+			$SIDEBAR_MENU.find('li.active-sm').addClass('active').removeClass('active-sm');
+		}
+
+	$BODY.toggleClass('nav-md nav-sm');
+
+	setContentHeight();
+});
+
+	// check active menu
+	$SIDEBAR_MENU.find('a[href="' + CURRENT_URL + '"]').parent('li').addClass('current-page');
+
+	$SIDEBAR_MENU.find('a').filter(function () {
+		return this.href == CURRENT_URL;
+	}).parent('li').addClass('current-page').parents('ul').slideDown(function() {
+		setContentHeight();
+	}).parent().addClass('active');
+
+	// recompute content when resizing
+	$(window).smartresize(function(){  
+		setContentHeight();
+	});
+
+	setContentHeight();
+
+	// fixed sidebar
+	if ($.fn.mCustomScrollbar) {
+		$('.menu_fixed').mCustomScrollbar({
+			autoHideScrollbar: true,
+			theme: 'minimal',
+			mouseWheel:{ preventDefault: true }
+		});
+	}
+};
+// /Sidebar
+
+
+
+// Panel toolbox
+$(document).ready(function() {
+    $('.collapse-link').on('click', function() {
+        var $BOX_PANEL = $(this).closest('.x_panel'),
+            $ICON = $(this).find('i'),
+            $BOX_CONTENT = $BOX_PANEL.find('.x_content');
+        
+        // fix for some div with hardcoded fix class
+        if ($BOX_PANEL.attr('style')) {
+            $BOX_CONTENT.slideToggle(200, function(){
+                $BOX_PANEL.removeAttr('style');
+            });
+        } else {
+            $BOX_CONTENT.slideToggle(200); 
+            $BOX_PANEL.css('height', 'auto');  
+        }
+
+        $ICON.toggleClass('fa-chevron-up fa-chevron-down');
+    });
+
+    $('.close-link').click(function () {
+        var $BOX_PANEL = $(this).closest('.x_panel');
+
+        $BOX_PANEL.remove();
+    });
+});
+// /Panel toolbox
+
+// Tooltip
+$(document).ready(function() {
+    $('[data-toggle="tooltip"]').tooltip({
+        container: 'body'
+    });
+});
+// /Tooltip
+
+// Progressbar
+if ($(".progress .progress-bar")[0]) {
+    $('.progress .progress-bar').progressbar();
+}
+// /Progressbar
+
+// Switchery
+$(document).ready(function() {
+    if ($(".js-switch")[0]) {
+        var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
+        elems.forEach(function (html) {
+            var switchery = new Switchery(html, {
+                color: '#26B99A'
+            });
+        });
+    }
+});
+// /Switchery
+
+
+// iCheck
+$(document).ready(function() {
+    if ($("input.flat")[0]) {
+        $(document).ready(function () {
+            $('input.flat').iCheck({
+                checkboxClass: 'icheckbox_flat-green',
+                radioClass: 'iradio_flat-green'
+            });
+        });
+    }
+});
+// /iCheck
+
+
+// Table
+$('table input').on('ifChecked', function () {
+    checkState = '';
+    $(this).parent().parent().parent().addClass('selected');
+    countChecked();
+});
+$('table input').on('ifUnchecked', function () {
+    checkState = '';
+    $(this).parent().parent().parent().removeClass('selected');
+    countChecked();
+});
+
+var checkState = '';
+
+$('.bulk_action input').on('ifChecked', function () {
+    checkState = '';
+    $(this).parent().parent().parent().addClass('selected');
+    countChecked();
+});
+$('.bulk_action input').on('ifUnchecked', function () {
+    checkState = '';
+    $(this).parent().parent().parent().removeClass('selected');
+    countChecked();
+});
+$('.bulk_action input#check-all').on('ifChecked', function () {
+    checkState = 'all';
+    countChecked();
+});
+$('.bulk_action input#check-all').on('ifUnchecked', function () {
+    checkState = 'none';
+    countChecked();
+});
+
+function countChecked() {
+    if (checkState === 'all') {
+        $(".bulk_action input[name='table_records']").iCheck('check');
+    }
+    if (checkState === 'none') {
+        $(".bulk_action input[name='table_records']").iCheck('uncheck');
+    }
+
+    var checkCount = $(".bulk_action input[name='table_records']:checked").length;
+
+    if (checkCount) {
+        $('.column-title').hide();
+        $('.bulk-actions').show();
+        $('.action-cnt').html(checkCount + ' Records Selected');
+    } else {
+        $('.column-title').show();
+        $('.bulk-actions').hide();
+    }
+}
+
+
+
+// Accordion
+$(document).ready(function() {
+    $(".expand").on("click", function () {
+        $(this).next().slideToggle(200);
+        $expand = $(this).find(">:first-child");
+
+        if ($expand.text() == "+") {
+            $expand.text("-");
+        } else {
+            $expand.text("+");
+        }
+    });
+});
+
+// NProgress
+if (typeof NProgress != 'undefined') {
+    $(document).ready(function () {
+        NProgress.start();
+    });
+
+    $(window).load(function () {
+        NProgress.done();
+    });
+}
+
+
+	function gd(year, month, day) {
+		return new Date(year, month - 1, day).getTime();
+	}
+	  
+	function init_flot_chart(){
+		
+		if( typeof ($.plot) === 'undefined'){ return; }
+		
+		console.log('init_flot_chart');
+		
+		
+		
+		 var arr_data1 = [
+		  [gd(2012, 1, 1), 17],
+		  [gd(2012, 1, 2), 74],
+		  [gd(2012, 1, 3), 6],
+		  [gd(2012, 1, 4), 39],
+		  [gd(2012, 1, 5), 20],
+		  [gd(2012, 1, 6), 85],
+		  [gd(2012, 1, 7), 7]
+		];
+
+		var arr_data2 = [
+		  [gd(2012, 1, 1), 82],
+		  [gd(2012, 1, 2), 23],
+		  [gd(2012, 1, 3), 66],
+		  [gd(2012, 1, 4), 9],
+		  [gd(2012, 1, 5), 119],
+		  [gd(2012, 1, 6), 6],
+		  [gd(2012, 1, 7), 9]
+		];
+		
+		var arr_data3 = [
+			[0, 1],
+			[1, 9],
+			[2, 6],
+			[3, 10],
+			[4, 5],
+			[5, 17],
+			[6, 6],
+			[7, 10],
+			[8, 7],
+			[9, 11],
+			[10, 35],
+			[11, 9],
+			[12, 12],
+			[13, 5],
+			[14, 3],
+			[15, 4],
+			[16, 9]
+		];
+		
+		
+	
+	
+		//flot options
+		var plot3_options = {
+		  series: {
+			curvedLines: {
+			  apply: true,
+			  active: true,
+			  monotonicFit: true
+			}
+		  },
+		  colors: ["#26B99A"],
+		  grid: {
+			borderWidth: {
+			  top: 0,
+			  right: 0,
+			  bottom: 1,
+			  left: 1
+			},
+			borderColor: {
+			  bottom: "#7F8790",
+			  left: "#7F8790"
+			}
+		  }
+		};
+		
+		
+		var plot2_options = {
+		  series: {
+			lines: {
+			  show: false,
+			  fill: true
+			},
+			splines: {
+			  show: true,
+			  tension: 0.4,
+			  lineWidth: 1,
+			  fill: 0.4
+			},
+			points: {
+			  radius: 0,
+			  show: true
+			},
+			shadowSize: 2
+		  },
+		  grid: {
+			verticalLines: true,
+			hoverable: true,
+			clickable: true,
+			tickColor: "#d5d5d5",
+			borderWidth: 1,
+			color: '#fff'
+		  },
+		  colors: ["rgba(38, 185, 154, 0.38)", "rgba(3, 88, 106, 0.38)"],
+		  xaxis: {
+			tickColor: "rgba(51, 51, 51, 0.06)",
+			mode: "time",
+			tickSize: [1, "day"],
+			//tickLength: 10,
+			axisLabel: "Date",
+			axisLabelUseCanvas: true,
+			axisLabelFontSizePixels: 12,
+			axisLabelFontFamily: 'Verdana, Arial',
+			axisLabelPadding: 10
+		  },
+		  yaxis: {
+			ticks: 8,
+			tickColor: "rgba(51, 51, 51, 0.06)",
+		  },
+		  tooltip: false
+		};
+		
+		console.log('Placeholder: ' + $("#placeholder33x").length );
+		
+		var plot = $.plot($("#placeholder33x"), [{
+		  label: "Registrations",
+		  data: arr_data3,
+		  lines: {
+			fillColor: "rgba(150, 202, 89, 0.12)"
+		  }, 
+			points: {
+				fillColor: "#fff"
+			}
+		}], plot3_options);
+		/*
+		*/
+		
+		
+		$("#canvas_dahs").length && $.plot($("#canvas_dahs"), [
+		  arr_data1, arr_data2
+		], plot2_options);
+		
+		
+		function flot2(){ 
+		
+			if(typeof ($.plot) === 'undefined'){ return; }
+			console.log('init_flot_chart2'); 
+			
+			//define chart clolors ( you maybe add more colors if you want or flot will add it automatic )
+			var chartColours = ['#96CA59', '#3F97EB', '#72c380', '#6f7a8a', '#f7cb38', '#5a8022', '#2c7282'];
+
+			//generate random number for charts
+			randNum = function() {
+			  return (Math.floor(Math.random() * (1 + 40 - 20))) + 20;
+			};
+
+			var d1 = [];
+			//var d2 = [];
+
+			//here we generate data for chart
+			for (var i = 0; i < 30; i++) {
+			  d1.push([new Date(Date.today().add(i).days()).getTime(), randNum() + i + i + 10]);
+			  //    d2.push([new Date(Date.today().add(i).days()).getTime(), randNum()]);
+			}
+
+			var chartMinDate = d1[0][0]; //first day
+			var chartMaxDate = d1[20][0]; //last day
+
+			var tickSize = [1, "day"];
+			var tformat = "%d/%m/%y";
+
+			//graph options
+			var options = {
+			  grid: {
+				show: true,
+				aboveData: true,
+				color: "#3f3f3f",
+				labelMargin: 10,
+				axisMargin: 0,
+				borderWidth: 0,
+				borderColor: null,
+				minBorderMargin: 5,
+				clickable: true,
+				hoverable: true,
+				autoHighlight: true,
+				mouseActiveRadius: 100
+			  },
+			  series: {
+				lines: {
+				  show: true,
+				  fill: true,
+				  lineWidth: 2,
+				  steps: false
+				},
+				points: {
+				  show: true,
+				  radius: 4.5,
+				  symbol: "circle",
+				  lineWidth: 3.0
+				}
+			  },
+			  legend: {
+				position: "ne",
+				margin: [0, -25],
+				noColumns: 0,
+				labelBoxBorderColor: null,
+				labelFormatter: function(label, series) {
+				  // just add some space to labes
+				  return label + '&nbsp;&nbsp;';
+				},
+				width: 40,
+				height: 1
+			  },
+			  colors: chartColours,
+			  shadowSize: 0,
+			  tooltip: true, //activate tooltip
+			  tooltipOpts: {
+				content: "%s: %y.0",
+				xDateFormat: "%d/%m",
+				shifts: {
+				  x: -30,
+				  y: -50
+				},
+				defaultTheme: false
+			  },
+			  yaxis: {
+				min: 0
+			  },
+			  xaxis: {
+				mode: "time",
+				minTickSize: tickSize,
+				timeformat: tformat,
+				min: chartMinDate,
+				max: chartMaxDate
+			  }
+			};
+			var plot = $.plot($("#placeholder33x"), [{
+			  label: "Email Sent",
+			  data: d1,
+			  lines: {
+				fillColor: "rgba(150, 202, 89, 0.12)"
+			  }, //#96CA59 rgba(150, 202, 89, 0.42)
+			  points: {
+				fillColor: "#fff"
+			  }
+			}], options);
+			
+		}
+	
+	} 
+	
+	
+	function init_JQVmap(){
+
+		//console.log('check init_JQVmap [' + typeof (VectorCanvas) + '][' + typeof (jQuery.fn.vectorMap) + ']' );	
+		
+		if(typeof (jQuery.fn.vectorMap) === 'undefined'){ return; }
+		
+		console.log('init_JQVmap');
+	     
+			$('#world-map-gdp').vectorMap({
+				map: 'world_en',
+				backgroundColor: null,
+				color: '#ffffff',
+				hoverOpacity: 0.7,
+				selectedColor: '#666666',
+				enableZoom: true,
+				showTooltip: true,
+				values: sample_data,
+				scaleColors: ['#E6F2F0', '#149B7E'],
+				normalizeFunction: 'polynomial'
+			});
+	};
+			
+	    
+	function init_skycons(){
+				
+			if( typeof (Skycons) === 'undefined'){ return; }
+			console.log('init_skycons');
+		
+			var icons = new Skycons({
+				"color": "#73879C"
+			  }),
+			  list = [
+				"clear-day", "clear-night", "partly-cloudy-day",
+				"partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
+				"fog"
+			  ],
+			  i;
+
+			for (i = list.length; i--;)
+			  icons.set(list[i], list[i]);
+
+			icons.play();
+	
+	}  
+	   
+	   
+	function init_chart_doughnut(){
+				
+			if( typeof (Chart) === 'undefined'){ return; }
+			console.log('init_chart_doughnut');
+	 
+		if ($('.canvasDoughnut').length){
+			
+			var chart_doughnut_el = $('.canvasDoughnut');
+			var chart_doughnut_options = { legend: false, responsive: false };
+			var chart_doughnut_settings = {
+					  type: 'doughnut',
+					  tooltipFillColor: "rgba(51, 51, 51, 0.55)",
+					  data: {
+						labels: [
+						  "Symbian",
+						  "Blackberry",
+						  "Other",
+						  "Android",
+						  "IOS"
+						],
+						datasets: [{
+						  data: [15, 20, 30, 10, 30],
+						  backgroundColor: [
+							"#BDC3C7",
+							"#9B59B6",
+							"#E74C3C",
+							"#26B99A",
+							"#3498DB"
+						  ],
+						  hoverBackgroundColor: [
+							"#CFD4D8",
+							"#B370CF",
+							"#E95E4F",
+							"#36CAAB",
+							"#49A9EA"
+						  ]
+						}]
+					  },
+					  options: chart_doughnut_options
+					}
+		
+			var chart_doughnut = new Chart(chart_doughnut_el, chart_doughnut_settings);
+		
+		}  
+	   
+	}
+	   
+	function init_gauge() {
+			
+		if( typeof (Gauge) === 'undefined'){ return; }
+		console.log('init_gauge');
+
+		  var opts = {
+		  lines: 12,
+		  angle: 0,
+		  lineWidth: 0.4,
+		  pointer: {
+			  length: 0.75,
+			  strokeWidth: 0.042,
+			  color: '#1D212A'
+		  },
+		  limitMax: 'false',
+		  colorStart: '#1ABC9C',
+		  colorStop: '#1ABC9C',
+		  strokeColor: '#F0F3F3',
+		  generateGradient: true
+	  };
+	  var target = document.getElementById('foo'),
+		  gauge = new Gauge(target).setOptions(opts);
+
+	  gauge.maxValue = 6000;
+	  gauge.animationSpeed = 32;
+	  gauge.set(3200);
+	  gauge.setTextField(document.getElementById("gauge-text"));
+	
+	}   
+	   
+	 /* BOOTSTRAP DATERANGEPICKER */
+			
+	//1
+	function init_bootstrap_daterangepicker() {
+		
+		if( typeof (daterangepicker) === 'undefined'){ return; }
+		console.log('init_bootstrap_daterangepicker');
+		
+		var cb = function(start, end, label) {
+		  console.log(start.toISOString(), end.toISOString(), label);
+		  $('#reportrange_right span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
+		};
+
+		var optionSet1 = {
+		  startDate: moment().subtract(29, 'days'),
+		  endDate: moment(),
+		  minDate: '01/01/2012',
+		  maxDate: '12/31/2020',
+		  dateLimit: {
+			days: 60
+		  },
+		  showDropdowns: true,
+		  showWeekNumbers: true,
+		  timePicker: false,
+		  timePickerIncrement: 1,
+		  timePicker12Hour: true,
+		  ranges: {
+			'Today': [moment(), moment()],
+			'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+			'Last 7 Days': [moment().subtract(6, 'days'), moment()],
+			'Last 30 Days': [moment().subtract(29, 'days'), moment()],
+			'This Month': [moment().startOf('month'), moment().endOf('month')],
+			'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+		  },
+		  opens: 'right',
+		  buttonClasses: ['btn btn-default'],
+		  applyClass: 'btn-small btn-primary',
+		  cancelClass: 'btn-small',
+		  format: 'MM/DD/YYYY',
+		  separator: ' to ',
+		  locale: {
+			applyLabel: 'Submit',
+			cancelLabel: 'Clear',
+			fromLabel: 'From',
+			toLabel: 'To',
+			customRangeLabel: 'Custom',
+			daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+			monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+			firstDay: 1
+		  }
+		};
+
+		$('#reportrange_right span').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
+
+		$('#reportrange_right').daterangepicker(optionSet1, cb);
+
+		$('#reportrange_right').on('show.daterangepicker', function() {
+		  console.log("show event fired");
+		});
+		$('#reportrange_right').on('hide.daterangepicker', function() {
+		  console.log("hide event fired");
+		});
+		$('#reportrange_right').on('apply.daterangepicker', function(ev, picker) {
+		  console.log("apply event fired, start/end dates are " + picker.startDate.format('MMMM D, YYYY') + " to " + picker.endDate.format('MMMM D, YYYY'));
+		});
+		$('#reportrange_right').on('cancel.daterangepicker', function(ev, picker) {
+		  console.log("cancel event fired");
+		});
+
+		$('#options1').click(function() {
+		  $('#reportrange_right').data('daterangepicker').setOptions(optionSet1, cb);
+		});
+
+		$('#options2').click(function() {
+		  $('#reportrange_right').data('daterangepicker').setOptions(optionSet2, cb);
+		});
+
+		$('#destroy').click(function() {
+		  $('#reportrange_right').data('daterangepicker').remove();
+		});
+		
+	};  
+	   
+	/* SPARKLINES */
+			
+		function init_sparklines() {
+			
+			if( typeof (sparkline) === 'undefined'){ return; }
+			console.log('init_sparklines');
+			
+			
+			 $(".sparkline_one").sparkline([2, 4, 3, 4, 5, 4, 5, 4, 3, 4, 5, 6, 4, 5, 6, 3, 5, 4, 5, 4, 5, 4, 3, 4, 5, 6, 7, 5, 4, 3, 5, 6], {
+			  type: 'bar',
+			  height: '125',
+			  barWidth: 13,
+			  colorMap: {
+				'7': '#a1a1a1'
+			  },
+			  barSpacing: 2,
+			  barColor: '#26B99A'
+			});
+			
+			  $(".sparkline_two").sparkline([2, 4, 3, 4, 5, 4, 5, 4, 3, 4, 5, 6, 7, 5, 4, 3, 5, 6], {
+				  type: 'bar',
+				  height: '40',
+				  barWidth: 9,
+				  colorMap: {
+					'7': '#a1a1a1'
+				  },
+				  barSpacing: 2,
+				  barColor: '#26B99A'
+				});
+
+				$(".sparkline_three").sparkline([2, 4, 3, 4, 5, 4, 5, 4, 3, 4, 5, 6, 7, 5, 4, 3, 5, 6], {
+				  type: 'line',
+				  width: '200',
+				  height: '40',
+				  lineColor: '#26B99A',
+				  fillColor: 'rgba(223, 223, 223, 0.57)',
+				  lineWidth: 2,
+				  spotColor: '#26B99A',
+				  minSpotColor: '#26B99A'
+				});
+			
+			$(".sparkline11").sparkline([2, 4, 3, 4, 5, 4, 5, 4, 3, 4, 6, 2, 4, 3, 4, 5, 4, 5, 4, 3], {
+			  type: 'bar',
+			  height: '40',
+			  barWidth: 8,
+			  colorMap: {
+				'7': '#a1a1a1'
+			  },
+			  barSpacing: 2,
+			  barColor: '#26B99A'
+			});
+			
+			 $(".sparkline22").sparkline([2, 4, 3, 4, 7, 5, 4, 3, 5, 6, 2, 4, 3, 4, 5, 4, 5, 4, 3, 4, 6], {
+			  type: 'line',
+			  height: '40',
+			  width: '200',
+			  lineColor: '#26B99A',
+			  fillColor: '#ffffff',
+			  lineWidth: 3,
+			  spotColor: '#34495E',
+			  minSpotColor: '#34495E'
+			});
+	
+			$(".sparkline_bar").sparkline([2, 4, 3, 4, 5, 4, 5, 4, 3, 4, 5, 6, 4, 5, 6, 3, 5], {
+			  type: 'bar',
+			  colorMap: {
+				'7': '#a1a1a1'
+			  },
+			  barColor: '#26B99A'
+			});
+			
+			$(".sparkline_area").sparkline([5, 6, 7, 9, 9, 5, 3, 2, 2, 4, 6, 7], {
+			  type: 'line',
+			  lineColor: '#26B99A',
+			  fillColor: '#26B99A',
+			  spotColor: '#4578a0',
+			  minSpotColor: '#728fb2',
+			  maxSpotColor: '#6d93c4',
+			  highlightSpotColor: '#ef5179',
+			  highlightLineColor: '#8ba8bf',
+			  spotRadius: 2.5,
+			  width: 85
+			});
+
+			$(".sparkline_line").sparkline([2, 4, 3, 4, 5, 4, 5, 4, 3, 4, 5, 6, 4, 5, 6, 3, 5], {
+			  type: 'line',
+			  lineColor: '#26B99A',
+			  fillColor: '#ffffff',
+			  width: 85,
+			  spotColor: '#34495E',
+			  minSpotColor: '#34495E'
+			});
+
+			$(".sparkline_pie").sparkline([1, 1, 2, 1], {
+			  type: 'pie',
+			  sliceColors: ['#26B99A', '#ccc', '#75BCDD', '#D66DE2']
+			});
+
+			$(".sparkline_discreet").sparkline([4, 6, 7, 7, 4, 3, 2, 1, 4, 4, 2, 4, 3, 7, 8, 9, 7, 6, 4, 3], {
+			  type: 'discrete',
+			  barWidth: 3,
+			  lineColor: '#26B99A',
+			  width: '85',
+			});
+			
+		};   
+	   
+	$(document).ready(function() {
+				
+				init_sparklines();
+				init_flot_chart();
+				init_sidebar();
+				init_JQVmap();
+				init_skycons();
+				init_chart_doughnut();
+				init_gauge();
+				init_bootstrap_daterangepicker();
+				
+	});	
+	
+

documentation/index.html

@@ -7,7 +7,7 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <title>Gentellela Alela! | </title>
+        <title>Gentelella Alela! | </title>
 
         <!-- Bootstrap core CSS -->
 
@@ -57,7 +57,7 @@
                             <span class="icon-bar"></span>
                             <span class="icon-bar"></span>
                         </button>
-                        <a class="navbar-brand" style="color: #ddd !important">Gentellela Alela! - Documentation</a>
+                        <a class="navbar-brand" style="color: #ddd !important">Gentelella Alela! - Documentation</a>
                     </div>
                 </div>
             </div>
@@ -151,7 +151,7 @@
                                         <meta http-equiv="X-UA-Compatible" content="IE=edge">
                                         <meta name="viewport" content="width=device-width, initial-scale=1">
 
-                                        <title>Gentellela Alela! | </title>
+                                        <title>Gentelella Alela! | </title>
 
                                         <!-- Bootstrap core CSS -->
 
@@ -185,7 +185,7 @@
                                       <div class="left_col scroll-view">
 
                                           <div class="navbar nav_title" style="border: 0;">
-                                              <a href="index.html" class="site_title">Gentellela Alela!</a>
+                                              <a href="index.html" class="site_title">Gentelella Alela!</a>
                                           </div>
 
                                           <div class="profile"><!--img_2 -->

documentation/index_cn.html

@@ -7,7 +7,7 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <title>Gentellela Alela! | </title>
+        <title>Gentelella Alela! | </title>
 
         <!-- Bootstrap core CSS -->
 
@@ -61,7 +61,7 @@
                             <span class="icon-bar"></span>
                             <span class="icon-bar"></span>
                         </button>
-                        <a class="navbar-brand" style="color: #ddd !important">Gentellela Alela! - 文档</a>
+                        <a class="navbar-brand" style="color: #ddd !important">Gentelella Alela! - 文档</a>
                     </div>
                 </div>
             </div>
@@ -174,7 +174,7 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <title>Gentellela Alela! | </title>
+        <title>Gentelella Alela! | </title>
 
         <!-- Bootstrap core CSS -->
 
@@ -219,7 +219,7 @@
     <div class="left_col scroll-view">
 
         <div class="navbar nav_title" style="border: 0;">
-            <a href="index.html" class="site_title">Gentellela Alela!</a>
+            <a href="index.html" class="site_title">Gentelella Alela!</a>
         </div>
 
         <div class="profile"><!--img_2 -->

package.json

@@ -1,7 +1,7 @@
 {
   "name": "gentelella",
   "version": "1.3.0",
-  "description": "Gentellela Admin is a free to use Bootstrap admin template",
+  "description": "Gentelella Admin is a free to use Bootstrap admin template",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },

production/calendar.html

@@ -7,7 +7,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <title>Gentellela Alela! | </title>
+    <title>Gentelella Alela! | </title>
 
     <!-- Bootstrap -->
     <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
@@ -29,7 +29,7 @@
         <div class="col-md-3 left_col">
           <div class="left_col scroll-view">
             <div class="navbar nav_title" style="border: 0;">
-              <a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Gentellela Alela!</span></a>
+              <a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Gentelella Alela!</span></a>
             </div>
 
             <div class="clearfix"></div>
@@ -422,7 +422,107 @@
     <script src="../vendors/fullcalendar/dist/fullcalendar.min.js"></script>
 
     <!-- Custom Theme Scripts -->
-    <script src="../build/js/new-custom.js"></script>
+    <script src="../build/js/new-custom2.js"></script>
 
+		    <!-- FullCalendar -->
+    <script>
+      $(window).load(function() {
+        var date = new Date(),
+            d = date.getDate(),
+            m = date.getMonth(),
+            y = date.getFullYear(),
+            started,
+            categoryClass;
+
+        var calendar = $('#calendar').fullCalendar({
+          header: {
+            left: 'prev,next today',
+            center: 'title',
+            right: 'month,agendaWeek,agendaDay'
+          },
+          selectable: true,
+          selectHelper: true,
+          select: function(start, end, allDay) {
+            $('#fc_create').click();
+
+            started = start;
+            ended = end;
+
+            $(".antosubmit").on("click", function() {
+              var title = $("#title").val();
+              if (end) {
+                ended = end;
+              }
+
+              categoryClass = $("#event_type").val();
+
+              if (title) {
+                calendar.fullCalendar('renderEvent', {
+                    title: title,
+                    start: started,
+                    end: end,
+                    allDay: allDay
+                  },
+                  true // make the event "stick"
+                );
+              }
+
+              $('#title').val('');
+
+              calendar.fullCalendar('unselect');
+
+              $('.antoclose').click();
+
+              return false;
+            });
+          },
+          eventClick: function(calEvent, jsEvent, view) {
+            $('#fc_edit').click();
+            $('#title2').val(calEvent.title);
+
+            categoryClass = $("#event_type").val();
+
+            $(".antosubmit2").on("click", function() {
+              calEvent.title = $("#title2").val();
+
+              calendar.fullCalendar('updateEvent', calEvent);
+              $('.antoclose2').click();
+            });
+
+            calendar.fullCalendar('unselect');
+          },
+          editable: true,
+          events: [{
+            title: 'All Day Event',
+            start: new Date(y, m, 1)
+          }, {
+            title: 'Long Event',
+            start: new Date(y, m, d - 5),
+            end: new Date(y, m, d - 2)
+          }, {
+            title: 'Meeting',
+            start: new Date(y, m, d, 10, 30),
+            allDay: false
+          }, {
+            title: 'Lunch',
+            start: new Date(y, m, d + 14, 12, 0),
+            end: new Date(y, m, d, 14, 0),
+            allDay: false
+          }, {
+            title: 'Birthday Party',
+            start: new Date(y, m, d + 1, 19, 0),
+            end: new Date(y, m, d + 1, 22, 30),
+            allDay: false
+          }, {
+            title: 'Click for Google',
+            start: new Date(y, m, 28),
+            end: new Date(y, m, 29),
+            url: 'http://google.com/'
+          }]
+        });
+      });
+    </script>
+    <!-- /FullCalendar -->
+	
   </body>
 </html>

production/chartjs.html

@@ -7,7 +7,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <title>Chart JS Graph Examples | Gentellela Alela! by Colorlib</title>
+    <title>Chart JS Graph Examples | Gentelella Alela! by Colorlib</title>
 
     <!-- Bootstrap -->
     <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
@@ -26,7 +26,7 @@
         <div class="col-md-3 left_col">
           <div class="left_col scroll-view">
             <div class="navbar nav_title" style="border: 0;">
-              <a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Gentellela Alela!</span></a>
+              <a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Gentelella Alela!</span></a>
             </div>
 
             <div class="clearfix"></div>
@@ -481,7 +481,205 @@
     <script src="../vendors/Chart.js/dist/Chart.min.js"></script>
 
     <!-- Custom Theme Scripts -->
-    <script src="../build/js/new-custom.js"></script>
+    <script src="../build/js/new-custom2.js"></script>
 
+	<!-- Chart.js -->
+    <script>
+      Chart.defaults.global.legend = {
+        enabled: false
+      };
+
+      // Line chart
+      var ctx = document.getElementById("lineChart");
+      var lineChart = new Chart(ctx, {
+        type: 'line',
+        data: {
+          labels: ["January", "February", "March", "April", "May", "June", "July"],
+          datasets: [{
+            label: "My First dataset",
+            backgroundColor: "rgba(38, 185, 154, 0.31)",
+            borderColor: "rgba(38, 185, 154, 0.7)",
+            pointBorderColor: "rgba(38, 185, 154, 0.7)",
+            pointBackgroundColor: "rgba(38, 185, 154, 0.7)",
+            pointHoverBackgroundColor: "#fff",
+            pointHoverBorderColor: "rgba(220,220,220,1)",
+            pointBorderWidth: 1,
+            data: [31, 74, 6, 39, 20, 85, 7]
+          }, {
+            label: "My Second dataset",
+            backgroundColor: "rgba(3, 88, 106, 0.3)",
+            borderColor: "rgba(3, 88, 106, 0.70)",
+            pointBorderColor: "rgba(3, 88, 106, 0.70)",
+            pointBackgroundColor: "rgba(3, 88, 106, 0.70)",
+            pointHoverBackgroundColor: "#fff",
+            pointHoverBorderColor: "rgba(151,187,205,1)",
+            pointBorderWidth: 1,
+            data: [82, 23, 66, 9, 99, 4, 2]
+          }]
+        },
+      });
+
+      // Bar chart
+      var ctx = document.getElementById("mybarChart");
+      var mybarChart = new Chart(ctx, {
+        type: 'bar',
+        data: {
+          labels: ["January", "February", "March", "April", "May", "June", "July"],
+          datasets: [{
+            label: '# of Votes',
+            backgroundColor: "#26B99A",
+            data: [51, 30, 40, 28, 92, 50, 45]
+          }, {
+            label: '# of Votes',
+            backgroundColor: "#03586A",
+            data: [41, 56, 25, 48, 72, 34, 12]
+          }]
+        },
+
+        options: {
+          scales: {
+            yAxes: [{
+              ticks: {
+                beginAtZero: true
+              }
+            }]
+          }
+        }
+      });
+
+      // Doughnut chart
+      var ctx = document.getElementById("canvasDoughnut");
+      var data = {
+        labels: [
+          "Dark Grey",
+          "Purple Color",
+          "Gray Color",
+          "Green Color",
+          "Blue Color"
+        ],
+        datasets: [{
+          data: [120, 50, 140, 180, 100],
+          backgroundColor: [
+            "#455C73",
+            "#9B59B6",
+            "#BDC3C7",
+            "#26B99A",
+            "#3498DB"
+          ],
+          hoverBackgroundColor: [
+            "#34495E",
+            "#B370CF",
+            "#CFD4D8",
+            "#36CAAB",
+            "#49A9EA"
+          ]
+
+        }]
+      };
+
+      var canvasDoughnut = new Chart(ctx, {
+        type: 'doughnut',
+        tooltipFillColor: "rgba(51, 51, 51, 0.55)",
+        data: data
+      });
+
+      // Radar chart
+      var ctx = document.getElementById("canvasRadar");
+      var data = {
+        labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
+        datasets: [{
+          label: "My First dataset",
+          backgroundColor: "rgba(3, 88, 106, 0.2)",
+          borderColor: "rgba(3, 88, 106, 0.80)",
+          pointBorderColor: "rgba(3, 88, 106, 0.80)",
+          pointBackgroundColor: "rgba(3, 88, 106, 0.80)",
+          pointHoverBackgroundColor: "#fff",
+          pointHoverBorderColor: "rgba(220,220,220,1)",
+          data: [65, 59, 90, 81, 56, 55, 40]
+        }, {
+          label: "My Second dataset",
+          backgroundColor: "rgba(38, 185, 154, 0.2)",
+          borderColor: "rgba(38, 185, 154, 0.85)",
+          pointColor: "rgba(38, 185, 154, 0.85)",
+          pointStrokeColor: "#fff",
+          pointHighlightFill: "#fff",
+          pointHighlightStroke: "rgba(151,187,205,1)",
+          data: [28, 48, 40, 19, 96, 27, 100]
+        }]
+      };
+
+      var canvasRadar = new Chart(ctx, {
+        type: 'radar',
+        data: data,
+      });
+
+      // Pie chart
+      var ctx = document.getElementById("pieChart");
+      var data = {
+        datasets: [{
+          data: [120, 50, 140, 180, 100],
+          backgroundColor: [
+            "#455C73",
+            "#9B59B6",
+            "#BDC3C7",
+            "#26B99A",
+            "#3498DB"
+          ],
+          label: 'My dataset' // for legend
+        }],
+        labels: [
+          "Dark Gray",
+          "Purple",
+          "Gray",
+          "Green",
+          "Blue"
+        ]
+      };
+
+      var pieChart = new Chart(ctx, {
+        data: data,
+        type: 'pie',
+        otpions: {
+          legend: false
+        }
+      });
+
+      // PolarArea chart
+      var ctx = document.getElementById("polarArea");
+      var data = {
+        datasets: [{
+          data: [120, 50, 140, 180, 100],
+          backgroundColor: [
+            "#455C73",
+            "#9B59B6",
+            "#BDC3C7",
+            "#26B99A",
+            "#3498DB"
+          ],
+          label: 'My dataset'
+        }],
+        labels: [
+          "Dark Gray",
+          "Purple",
+          "Gray",
+          "Green",
+          "Blue"
+        ]
+      };
+
+      var polarArea = new Chart(ctx, {
+        data: data,
+        type: 'polarArea',
+        options: {
+          scale: {
+            ticks: {
+              beginAtZero: true
+            }
+          }
+        }
+      });
+    </script>
+    <!-- /Chart.js -->
+	
   </body>
 </html>