maps components, mapbox, small fixes

_config.yml

@@ -7,6 +7,8 @@ description: Premium and Open Source dashboard template with responsive and high
 github_url: https://github.com/tabler/tabler
 sponsor_url: https://github.com/sponsors/codecalm
 
+mapbox_key: pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ
+
 debug: false
 
 dark-theme: false

build/copy-libs.js

@@ -26,8 +26,10 @@ Object.keys(all_libs.css).forEach(function (lib) {
 files = files.flat();
 
 files.forEach(function (file) {
-	let dirname = path.dirname(file).replace('@', '');
-	let cmd = `mkdir -p "dist/libs/${dirname}" && cp -r node_modules/${file} dist/libs/${file.replace('@', '')}`;
+	if(! file.match(/^https?/)) {
+		let dirname = path.dirname(file).replace('@', '');
+		let cmd = `mkdir -p "dist/libs/${dirname}" && cp -r node_modules/${file} dist/libs/${file.replace('@', '')}`;
 
-	exec(cmd)
+		exec(cmd)
+	}
 });

pages/_data/libs.json

@@ -27,7 +27,8 @@
 			"flatpickr/dist/flatpickr.min.js",
 			"flatpickr/dist/plugins/rangePlugin.js"
 		],
-		"nouislider": "nouislider/distribute/nouislider.min.js"
+		"nouislider": "nouislider/distribute/nouislider.min.js",
+		"mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"
 	},
 	"css": {
 		"jqvmap": "jqvmap/dist/jqvmap.min.css",
@@ -39,6 +40,7 @@
 			"@fullcalendar/list/main.min.css"
 		],
 		"flatpickr": "flatpickr/dist/flatpickr.min.css",
-		"nouislider": "nouislider/distribute/nouislider.min.css"
+		"nouislider": "nouislider/distribute/nouislider.min.css",
+		"mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css"
 	}
 }

pages/_data/maps-vector.yml

@@ -9,7 +9,6 @@ europe:
   map: europe_en
   zoom: true
 
-
 usa:
   title: Map of USA
   map: usa_en

pages/_data/maps.yml

@@ -0,0 +1,15 @@
+simple:
+  title: Simple map
+
+light:
+  title: Light map style
+  center: [51.5285582, -0.2416782]
+  zoom: 11
+  style: light-v10
+
+card:
+  title: Light map style
+  center: [0, 0]
+  zoom: 1
+  style: satellite-v9
+  card: true

pages/_data/menu.yml

@@ -29,6 +29,12 @@ base:
     modals:
       url: modals.html
       title: Modals
+    maps:
+      url: maps.html
+      title: Maps
+    maps-vector:
+      url: maps-vector.html
+      title: Vector maps
     charts:
       url: charts.html
       title: Charts

pages/_includes/cards/map.html

@@ -4,6 +4,6 @@
 		{% if include.title %}
 			<h3 class="card-title">{{ include.title }}</h3>
 		{% endif %}
-		{% include ui/map.html map-id=map color="blue" height=15 %}
+		{% include ui/map-vector.html map-id=map color="blue" height=15 %}
 	</div>
 </div>

pages/_includes/layout/css.html

@@ -2,7 +2,7 @@
 <!-- Libs CSS -->
 {% for lib in site.data.libs.css %}
 {% for file in lib[1] %}
-<link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}?{{ site.time | date: '%s' }}" rel="stylesheet"/>
+<link href="{% if file contains 'http://' or file contains 'https://' %}{{ file }}{% else %}{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}?{{ site.time | date: '%s' }}{% endif %}" rel="stylesheet"/>
 {% endfor %}
 {% endfor %}
 {% endif %}

pages/_includes/layout/footer.html

@@ -1,20 +1,14 @@
 <footer class="footer footer-transparent">
 	<div class="container">
-		<div class="row align-items-center flex-row-reverse">
-			<div class="col-auto ml-lg-auto">
-				<div class="row align-items-center">
-					<div class="col-auto">
-						<ul class="list-inline list-inline-dots mb-0">
-							<li class="list-inline-item"><a href="{{ site.base }}/docs/index.html" class="link-secondary">Documentation</a></li>
-							<li class="list-inline-item"><a href="{{ site.base }}/faq.html" class="link-secondary">FAQ</a></li>
-						</ul>
-					</div>
-					<div class="col-auto">
-						{% include ui/button.html color="secondary" size="sm" text="Source code" href=site.github_url external=true %}
-					</div>
-				</div>
+		<div class="row text-center align-items-center flex-row-reverse">
+			<div class="col-lg-auto ml-lg-auto">
+				<ul class="list-inline list-inline-dots mb-0">
+					<li class="list-inline-item"><a href="{{ site.base }}/docs/index.html" class="link-secondary">Documentation</a></li>
+					<li class="list-inline-item"><a href="{{ site.base }}/faq.html" class="link-secondary">FAQ</a></li>
+					<li class="list-inline-item"><a href="{{ site.github_url }}" target="_blank" class="link-secondary">Source code</a></li>
+				</ul>
 			</div>
-			<div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
+			<div class="col-12 col-lg-auto mt-3 mt-lg-0">
 				Copyright © {{ site.time | date: '%Y' }}
 				<a href="{{ site.base }}" class="link-secondary">{{ site.title }}</a>.
 				All rights reserved.

pages/_includes/layout/js.html

@@ -2,7 +2,7 @@
 {% for lib in site.data.libs.js %}
 {% if site.captured_libs contains lib[0] or site.data.libs.global-libs contains lib[0] or page.libs contains lib[0] %}
 {% for file in lib[1] %}
-<script src="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}?{{ site.time | date: '%s' }}"></script>
+<script src="{% if file contains 'http://' or file contains 'https://' %}{{ file }}{% else %}{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}?{{ site.time | date: '%s' }}{% endif %}"></script>
 {% endfor %}
 {% endif %}
 {% endfor %}

pages/_includes/layout/navbar-secondary.html

@@ -8,7 +8,7 @@
 
 		<ul class="navbar-nav ml-auto">
 			<li class="nav-item dropdown">
-				<a href="#" class="nav-link" data-toggle="dropdown">
+				<a href="#" class="nav-link px-0" data-toggle="dropdown">
 					{% include ui/icon.html icon="settings" %}
 				</a>
 				{% include ui/dropdown-menu.html right=true icons=true separated=true arrow=true %}

pages/_includes/ui/chart.html

@@ -196,7 +196,7 @@
 				show: true,
 				position: 'bottom',
 				height: 32,
-				offsetY: -12,
+				offsetY: 8,
 				markers: {
 					width: 8,
 					height: 8,

pages/_includes/ui/map-vector.html

@@ -1,44 +1,49 @@
 {% assign id = include.map-id %}
-{% assign height = include.height | default: 20 %}
-{% assign data = site.data.maps[id] %}
+{% assign data = site.data.maps-vector[id] %}
 {% assign color = include.color | default: data.color | default: 'green' %}
 
 {% if data %}
-<div id="map-{{ id }}" style="height: {{ height }}rem"></div>
+	<div class="embed-responsive embed-responsive-16by9">
+		<div class="embed-responsive-item">
+			<div id="map-{{ id }}" class="w-100 h-100"></div>
+		</div>
+	</div>
 
-{% append_lib jqvmap %}
-{% capture script %}
-<script>
-	{% if jekyll.environment == 'development' %}window.tabler_map = window.tabler_map || {};{% endif %}
+	{% append_lib jqvmap %}
+	{% capture script %}
+	<script>
+		// @formatter:on
+		{% if jekyll.environment == 'development' %}window.tabler_map_vector = window.tabler_map_vector || {};{% endif %}
 
-	document.addEventListener("DOMContentLoaded", function() {
-	   {% if jekyll.environment == 'development' %}window.tabler_map["map-{{ id }}"] = {% endif %}$('#map-{{ id }}').vectorMap({
-			map: '{{ data.map }}',
-			backgroundColor: 'transparent',
-			color: 'rgba(120, 130, 140, .1)',
-			borderColor: 'transparent',
-			{% if data.zoom %}enableZoom: true,{% endif %}
-			{% if data.values %}
-	      {% assign color-light = color | append: "-100" %}
-			scaleColors: ["{{ color | tabler_color: '100' }}", "{{ color | tabler_color }}"],
-			normalizeFunction: 'polynomial',
-			values: (chart_data = {{ data.values }}),
-			onLabelShow: function (event, label, code) {
-				if (chart_data[code] > 0) {
-					label.append(': <strong>' + chart_data[code] + '</strong>');
-				}
-			},
-			{% endif %}
+		document.addEventListener("DOMContentLoaded", function() {
+			{% if jekyll.environment == 'development' %}window.tabler_map_vector["map-{{ id }}"] = {% endif %}$('#map-{{ id }}').vectorMap({
+				map: '{{ data.map }}',
+				backgroundColor: 'transparent',
+				color: 'rgba(120, 130, 140, .1)',
+				borderColor: 'transparent',
+				{% if data.zoom %}enableZoom: true,{% endif %}
+				{% if data.values %}
+				{% assign color-light = color | append: "-100" %}
+				scaleColors: ["{{ color | tabler_color: '100' }}", "{{ color | tabler_color }}"],
+				normalizeFunction: 'polynomial',
+				values: (chart_data = {{ data.values }}),
+				onLabelShow: function (event, label, code) {
+					if (chart_data[code] > 0) {
+						label.append(': <strong>' + chart_data[code] + '</strong>');
+					}
+				},
+				{% endif %}
+			});
 		});
-	});
-</script>
-{% endcapture %}
+		// @formatter:off
+	</script>
+	{% endcapture %}
 
-{% if include.show-scripts %}
-   {{ script }}
-{% else %}
-   {% capture_global scripts %}
-      {{ script }}
-   {% endcapture_global %}
-{% endif %}
+	{% if include.show-scripts %}
+		{{ script }}
+	{% else %}
+		{% capture_global scripts %}
+			{{ script }}
+		{% endcapture_global %}
+	{% endif %}
 {% endif %}

pages/_includes/ui/map.html

@@ -0,0 +1,31 @@
+{% assign id = include.map-id %}
+{% assign data = site.data.maps[id] %}
+
+{% if data %}
+	<div class="embed-responsive embed-responsive-{{ data.ratio | default: include.ratio | default: '16by9' }}">
+		<div class="embed-responsive-item">
+			<div id="map-{{ id }}" class="w-100 h-100"></div>
+		</div>
+	</div>
+
+	{% append_lib mapbox %}
+	{% capture_global scripts %}
+	<script>
+		// @formatter:off
+		document.addEventListener("DOMContentLoaded", function() {
+			mapboxgl.accessToken = '{{ site.mapbox_key }}';
+			var map = new mapboxgl.Map({
+				container: 'map-{{ id }}',
+				style: 'mapbox://styles/mapbox/{{ data.style | default: "streets-v11" }}',
+				zoom: {{ data.zoom | default: 13 }},
+				{% if data.center %}
+					center: [{{ data.center[1] }}, {{ data.center[0] }}],
+				{% else %}
+					center: [13.404900, 52.518827],
+				{% endif %}
+			});
+		});
+		// @formatter:on
+	</script>
+	{% endcapture_global %}
+{% endif %}

pages/maps-vector.html

@@ -1,18 +1,20 @@
 ---
-title: Maps
-page-header: Maps
+title: Vector Maps
+page-header: Vector Maps
+menu: base.maps-vector
 ---
 
 <div class="row">
-   {% for map in site.data.maps %}
-   <div class="col-lg-6">
+	{% for map in site.data.maps-vector %}
+	<div class="col-lg-6">
 
-      <div class="card">
-         <div class="card-body">
-            {% assign id = map[0] %}
-            {% include ui/map-vector.html map-id=id %}
-         </div>
-      </div>
-   </div>
-   {% endfor %}
+		<div class="card">
+			<div class="card-body">
+				<div class="card-title">{{ map[1].title }}</div>
+				{% assign id = map[0] %}
+				{% include ui/map-vector.html map-id=id %}
+			</div>
+		</div>
+	</div>
+	{% endfor %}
 </div>

pages/maps.html

@@ -0,0 +1,27 @@
+---
+title: Maps
+page-header: Maps
+menu: base.maps
+---
+
+<div class="row">
+	{% for map in site.data.maps %}
+	{% assign map-id = map[0] %}
+		{% if map[1].card %}
+			<div class="col-lg-12">
+				<div class="card">
+					{% include ui/map.html map-id=map-id ratio="16by9" %}
+				</div>
+			</div>
+		{% else %}
+			<div class="col-lg-6">
+				<div class="card">
+					<div class="card-body">
+						<div class="card-title">{{ map[1].title }}</div>
+						{% include ui/map.html map-id=map-id %}
+					</div>
+				</div>
+			</div>
+		{% endif %}
+	{% endfor %}
+</div>

scss/_variables.scss

@@ -209,6 +209,22 @@ $container-variations: (
 ) !default;
 
 $embed-responsive-aspect-ratios: (
+  "21by9": (
+    x: 21,
+    y: 9
+  ),
+  "16by9": (
+    x: 16,
+    y: 9
+  ),
+  "4by3": (
+    x: 4,
+    y: 3
+  ),
+  "1by1": (
+    x: 1,
+    y: 1
+  ),
   '2by1': (
     x: 2,
     y: 1
@@ -217,17 +233,7 @@ $embed-responsive-aspect-ratios: (
 
 $content-padding-y: 1.25rem !default;
 
-//sidenav
-$sidenav-width: 15.625rem !default;
-$sidenav-width-narrow: 4rem !default;
-$sidenav-bg: $white !default;
-$sidenav-border-color: $border-color !default;
-$sidenav-dark-bg: $dark !default;
-$sidenav-dark-color: $white !default;
-$sidenav-padding: 1rem !default;
-$sidenav-breakpoint-show: 'sm' !default;
-$sidenav-breakpoint-folded: 'lg' !default;
-$sidenav-active-accent-color: $primary !default;
+
 
 //alerts
 $alert-link-font-weight: $font-weight-bold !default;
@@ -360,6 +366,24 @@ $navbar-toggler-item-height: 2px !default;
 $navbar-toggler-item-spacing: 7px !default;
 $navbar-toggler-transform-time: .2s !default;
 
+//sidenav
+$navbar-vertical-width: 15.625rem !default;
+$navbar-vertical-narrow-width: 4rem !default;
+$navbar-vertical-dark-bg: $dark !default;
+$navbar-vertical-dark-color: $white !default;
+$navbar-vertical-padding: 1rem !default;
+$navbar-vertical-active-accent-color: $primary !default;
+
+$navbar-nav-link-padding-x: .75rem !default;
+
+//$navbar-light-color: rgba($body-color, .64) !default;
+//$navbar-light-active-color: $primary !default;
+//$navbar-light-hover-color: $body-color !default;
+
+//$navbar-dark-color: rgba($white, .64) !default;
+//$navbar-dark-active-color: $white !default;
+//$navbar-dark-hover-color: $white !default;
+
 //popover
 $popover-border-color: $border-color !default;
 
@@ -368,19 +392,6 @@ $footer-bg: $white !default;
 $footer-border-color: $border-color !default;
 $footer-border-color: $border-color !default;
 
-//nav
-//$nav-link-padding-y: 1rem !default;
-
-$navbar-padding-y: .75rem !default;
-$navbar-nav-link-padding-x: .5rem !default;
-
-$navbar-light-color: rgba($body-color, .64) !default;
-$navbar-light-active-color: $primary !default;
-$navbar-light-hover-color: $body-color !default;
-
-$navbar-dark-color: rgba($white, .64) !default;
-$navbar-dark-active-color: $white !default;
-$navbar-dark-hover-color: $white !default;
 
 //pagination
 $pagination-border-width: 0 !default;

scss/layout/_navbar.scss

@@ -16,7 +16,7 @@ Horizontal navbar
 Vertical narrow navbar
  */
 @mixin navbar-vertical-narrow {
-  width: $sidenav-width-narrow;
+  width: $navbar-vertical-narrow-width;
   overflow: visible;
 
   .d-none-navbar-vertical-narrow,
@@ -54,7 +54,7 @@ Vertical narrow navbar
 
   ~ .navbar,
   ~ .content {
-    margin-left: $sidenav-width-narrow;
+    margin-left: $navbar-vertical-narrow-width;
   }
 
   .dropdown-toggle:after {
@@ -82,7 +82,7 @@ Vertical narrow navbar
     ~ .navbar,
     ~ .content {
       margin-left: 0;
-      margin-right: $sidenav-width-narrow;
+      margin-right: $navbar-vertical-narrow-width;
     }
 
     .dropdown-menu {
@@ -101,7 +101,7 @@ Vertical navbar
   left: 0;
   top: 0;
   bottom: 0;
-  width: $sidenav-width;
+  width: $navbar-vertical-width;
   z-index: $zindex-fixed;
   min-height: auto;
   align-items: start;
@@ -117,7 +117,7 @@ Vertical navbar
 
   ~ .navbar,
   ~ .content {
-    margin-left: $sidenav-width;
+    margin-left: $navbar-vertical-width;
 
     [class*="container"] {
       padding-left: $cards-grid-gap;
@@ -151,20 +151,20 @@ Vertical navbar
     text-align: left;
     align-items: normal;
 
-    padding: $sidenav-padding $sidenav-padding;
+    padding: $navbar-vertical-padding $navbar-vertical-padding;
   }
 
   .navbar-nav {
     flex-direction: column;
     align-items: normal;
-    margin-left: -($sidenav-padding);
-    margin-right: -($sidenav-padding);
+    margin-left: -($navbar-vertical-padding);
+    margin-right: -($navbar-vertical-padding);
 
     .nav-link {
       min-height: 0;
       height: 2.5rem;
-      padding-left: $sidenav-padding;
-      padding-right: $sidenav-padding;
+      padding-left: $navbar-vertical-padding;
+      padding-right: $navbar-vertical-padding;
     }
 
     .nav-item {
@@ -187,7 +187,7 @@ Vertical navbar
     margin-left: 0;
     margin-top: auto;
     padding-left: 0;
-    padding-top: $sidenav-padding;
+    padding-top: $navbar-vertical-padding;
 
     > * {
       margin-left: 0;
@@ -202,7 +202,7 @@ Vertical navbar
     ~ .navbar,
     ~ .content {
       margin-left: 0;
-      margin-right: $sidenav-width;
+      margin-right: $navbar-vertical-width;
     }
   }
 
@@ -233,7 +233,7 @@ Vertical navbar
     }
 
     .dropdown-item {
-      padding-left: add($sidenav-padding, 1.5rem);
+      padding-left: add($navbar-vertical-padding, 1.5rem);
       opacity: $text-muted-opacity;
       color: inherit;
       background: transparent;
@@ -301,18 +301,6 @@ All navbars
 
           .nav-item {
             position: relative;
-
-            &.active {
-              >.nav-link:before {
-                content: '';
-                position: absolute;
-                bottom: -1px;
-                left: $navbar-nav-link-padding-x;
-                right: $navbar-nav-link-padding-x;
-                height: 1px;
-                background: $sidenav-active-accent-color;
-              }
-            }
           }
         }
       }
@@ -389,8 +377,8 @@ Navbar colors
 }
 
 .navbar-dark {
-  background: $sidenav-dark-bg;
-  color: $sidenav-dark-color;
+  background: $navbar-vertical-dark-bg;
+  color: $navbar-vertical-dark-color;
   box-shadow: 0 0 0 1px $dark-mode-darken;
   @include scrollbar(true);