Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-25 20:34:25 +04:00
Code Issues Projects Releases Wiki Activity

maps components, mapbox, small fixes

Browse Source
This commit is contained in:
codecalm
2020-02-21 13:33:54 +01:00
parent c34031ffb3
commit c25b25936d
18 changed files with 207 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_config.yml
+2
View File
@@ -7,6 +7,8 @@ description: Premium and Open Source dashboard template with responsive and high
github_url: https://github.com/tabler/tabler github_url: https://github.com/tabler/tabler
sponsor_url: https://github.com/sponsors/codecalm sponsor_url: https://github.com/sponsors/codecalm
mapbox_key: pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ
debug: false debug: false
dark-theme: false dark-theme: false
build/copy-libs.js
+5 -3
View File
@@ -26,8 +26,10 @@ Object.keys(all_libs.css).forEach(function (lib) {
files = files.flat(); files = files.flat();
files.forEach(function (file) { files.forEach(function (file) {
let dirname = path.dirname(file).replace('@', ''); if(! file.match(/^https?/)) {
let cmd = `mkdir -p "dist/libs/${dirname}" && cp -r node_modules/${file} dist/libs/${file.replace('@', '')}`; 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
+4 -2
View File
@@ -27,7 +27,8 @@
"flatpickr/dist/flatpickr.min.js", "flatpickr/dist/flatpickr.min.js",
"flatpickr/dist/plugins/rangePlugin.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": { "css": {
"jqvmap": "jqvmap/dist/jqvmap.min.css", "jqvmap": "jqvmap/dist/jqvmap.min.css",
@@ -39,6 +40,7 @@
"@fullcalendar/list/main.min.css" "@fullcalendar/list/main.min.css"
], ],
"flatpickr": "flatpickr/dist/flatpickr.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
-1
View File
@@ -9,7 +9,6 @@ europe:
map: europe_en map: europe_en
zoom: true zoom: true
usa: usa:
title: Map of USA title: Map of USA
map: usa_en map: usa_en
pages/_data/maps.yml
+15
View File
@@ -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
+6
View File
@@ -29,6 +29,12 @@ base:
modals: modals:
url: modals.html url: modals.html
title: Modals title: Modals
maps:
url: maps.html
title: Maps
maps-vector:
url: maps-vector.html
title: Vector maps
charts: charts:
url: charts.html url: charts.html
title: Charts title: Charts
pages/_includes/cards/map.html
+1 -1
View File
@@ -4,6 +4,6 @@
{% if include.title %} {% if include.title %}
<h3 class="card-title">{{ include.title }}</h3> <h3 class="card-title">{{ include.title }}</h3>
{% endif %} {% 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>
</div> </div>
pages/_includes/layout/css.html
+1 -1
View File
@@ -2,7 +2,7 @@
<!-- Libs CSS --> <!-- Libs CSS -->
{% for lib in site.data.libs.css %} {% for lib in site.data.libs.css %}
{% for file in lib[1] %} {% 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 %}
{% endfor %} {% endfor %}
{% endif %} {% endif %}
pages/_includes/layout/footer.html
+8 -14
View File
@@ -1,20 +1,14 @@
<footer class="footer footer-transparent"> <footer class="footer footer-transparent">
<div class="container"> <div class="container">
<div class="row align-items-center flex-row-reverse"> <div class="row text-center align-items-center flex-row-reverse">
<div class="col-auto ml-lg-auto"> <div class="col-lg-auto ml-lg-auto">
<div class="row align-items-center"> <ul class="list-inline list-inline-dots mb-0">
<div class="col-auto"> <li class="list-inline-item"><a href="{{ site.base }}/docs/index.html" class="link-secondary">Documentation</a></li>
<ul class="list-inline list-inline-dots mb-0"> <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.base }}/docs/index.html" class="link-secondary">Documentation</a></li> <li class="list-inline-item"><a href="{{ site.github_url }}" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="{{ site.base }}/faq.html" class="link-secondary">FAQ</a></li> </ul>
</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> </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' }} Copyright © {{ site.time | date: '%Y' }}
<a href="{{ site.base }}" class="link-secondary">{{ site.title }}</a>. <a href="{{ site.base }}" class="link-secondary">{{ site.title }}</a>.
All rights reserved. All rights reserved.
pages/_includes/layout/js.html
+1 -1
View File
@@ -2,7 +2,7 @@
{% for lib in site.data.libs.js %} {% 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] %} {% 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] %} {% 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 %} {% endfor %}
{% endif %} {% endif %}
{% endfor %} {% endfor %}
pages/_includes/layout/navbar-secondary.html
+1 -1
View File
@@ -8,7 +8,7 @@
<ul class="navbar-nav ml-auto"> <ul class="navbar-nav ml-auto">
<li class="nav-item dropdown"> <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" %} {% include ui/icon.html icon="settings" %}
</a> </a>
{% include ui/dropdown-menu.html right=true icons=true separated=true arrow=true %} {% include ui/dropdown-menu.html right=true icons=true separated=true arrow=true %}
pages/_includes/ui/chart.html
+1 -1
View File
@@ -196,7 +196,7 @@
show: true, show: true,
position: 'bottom', position: 'bottom',
height: 32, height: 32,
offsetY: -12, offsetY: 8,
markers: { markers: {
width: 8, width: 8,
height: 8, height: 8,
pages/_includes/ui/map-vector.html
+40 -35
View File
@@ -1,44 +1,49 @@
{% assign id = include.map-id %} {% assign id = include.map-id %}
{% assign height = include.height | default: 20 %} {% assign data = site.data.maps-vector[id] %}
{% assign data = site.data.maps[id] %}
{% assign color = include.color | default: data.color | default: 'green' %} {% assign color = include.color | default: data.color | default: 'green' %}
{% if data %} {% 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 %} {% append_lib jqvmap %}
{% capture script %} {% capture script %}
<script> <script>
{% if jekyll.environment == 'development' %}window.tabler_map = window.tabler_map || {};{% endif %} // @formatter:on
{% if jekyll.environment == 'development' %}window.tabler_map_vector = window.tabler_map_vector || {};{% endif %}
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
{% if jekyll.environment == 'development' %}window.tabler_map["map-{{ id }}"] = {% endif %}$('#map-{{ id }}').vectorMap({ {% if jekyll.environment == 'development' %}window.tabler_map_vector["map-{{ id }}"] = {% endif %}$('#map-{{ id }}').vectorMap({
map: '{{ data.map }}', map: '{{ data.map }}',
backgroundColor: 'transparent', backgroundColor: 'transparent',
color: 'rgba(120, 130, 140, .1)', color: 'rgba(120, 130, 140, .1)',
borderColor: 'transparent', borderColor: 'transparent',
{% if data.zoom %}enableZoom: true,{% endif %} {% if data.zoom %}enableZoom: true,{% endif %}
{% if data.values %} {% if data.values %}
{% assign color-light = color | append: "-100" %} {% assign color-light = color | append: "-100" %}
scaleColors: ["{{ color | tabler_color: '100' }}", "{{ color | tabler_color }}"], scaleColors: ["{{ color | tabler_color: '100' }}", "{{ color | tabler_color }}"],
normalizeFunction: 'polynomial', normalizeFunction: 'polynomial',
values: (chart_data = {{ data.values }}), values: (chart_data = {{ data.values }}),
onLabelShow: function (event, label, code) { onLabelShow: function (event, label, code) {
if (chart_data[code] > 0) { if (chart_data[code] > 0) {
label.append(': <strong>' + chart_data[code] + '</strong>'); label.append(': <strong>' + chart_data[code] + '</strong>');
} }
}, },
{% endif %} {% endif %}
});
}); });
}); // @formatter:off
</script> </script>
{% endcapture %} {% endcapture %}
{% if include.show-scripts %} {% if include.show-scripts %}
{{ script }} {{ script }}
{% else %} {% else %}
{% capture_global scripts %} {% capture_global scripts %}
{{ script }} {{ script }}
{% endcapture_global %} {% endcapture_global %}
{% endif %} {% endif %}
{% endif %} {% endif %}
pages/_includes/ui/map.html
+31
View File
@@ -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
+14 -12
View File
@@ -1,18 +1,20 @@
--- ---
title: Maps title: Vector Maps
page-header: Maps page-header: Vector Maps
menu: base.maps-vector
--- ---
<div class="row"> <div class="row">
{% for map in site.data.maps %} {% for map in site.data.maps-vector %}
<div class="col-lg-6"> <div class="col-lg-6">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
{% assign id = map[0] %} <div class="card-title">{{ map[1].title }}</div>
{% include ui/map-vector.html map-id=id %} {% assign id = map[0] %}
</div> {% include ui/map-vector.html map-id=id %}
</div> </div>
</div> </div>
{% endfor %} </div>
{% endfor %}
</div> </div>
pages/maps.html
+27
View File
@@ -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
+35 -24
View File
@@ -209,6 +209,22 @@ $container-variations: (
) !default; ) !default;
$embed-responsive-aspect-ratios: ( $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': ( '2by1': (
x: 2, x: 2,
y: 1 y: 1
@@ -217,17 +233,7 @@ $embed-responsive-aspect-ratios: (
$content-padding-y: 1.25rem !default; $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 //alerts
$alert-link-font-weight: $font-weight-bold !default; $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-item-spacing: 7px !default;
$navbar-toggler-transform-time: .2s !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
$popover-border-color: $border-color !default; $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;
$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
$pagination-border-width: 0 !default; $pagination-border-width: 0 !default;
scss/layout/_navbar.scss
+15 -27
View File
@@ -16,7 +16,7 @@ Horizontal navbar
Vertical narrow navbar Vertical narrow navbar
*/ */
@mixin navbar-vertical-narrow { @mixin navbar-vertical-narrow {
width: $sidenav-width-narrow; width: $navbar-vertical-narrow-width;
overflow: visible; overflow: visible;
.d-none-navbar-vertical-narrow, .d-none-navbar-vertical-narrow,
@@ -54,7 +54,7 @@ Vertical narrow navbar
~ .navbar, ~ .navbar,
~ .content { ~ .content {
margin-left: $sidenav-width-narrow; margin-left: $navbar-vertical-narrow-width;
} }
.dropdown-toggle:after { .dropdown-toggle:after {
@@ -82,7 +82,7 @@ Vertical narrow navbar
~ .navbar, ~ .navbar,
~ .content { ~ .content {
margin-left: 0; margin-left: 0;
margin-right: $sidenav-width-narrow; margin-right: $navbar-vertical-narrow-width;
} }
.dropdown-menu { .dropdown-menu {
@@ -101,7 +101,7 @@ Vertical navbar
left: 0; left: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: $sidenav-width; width: $navbar-vertical-width;
z-index: $zindex-fixed; z-index: $zindex-fixed;
min-height: auto; min-height: auto;
align-items: start; align-items: start;
@@ -117,7 +117,7 @@ Vertical navbar
~ .navbar, ~ .navbar,
~ .content { ~ .content {
margin-left: $sidenav-width; margin-left: $navbar-vertical-width;
[class*="container"] { [class*="container"] {
padding-left: $cards-grid-gap; padding-left: $cards-grid-gap;
@@ -151,20 +151,20 @@ Vertical navbar
text-align: left; text-align: left;
align-items: normal; align-items: normal;
padding: $sidenav-padding $sidenav-padding; padding: $navbar-vertical-padding $navbar-vertical-padding;
} }
.navbar-nav { .navbar-nav {
flex-direction: column; flex-direction: column;
align-items: normal; align-items: normal;
margin-left: -($sidenav-padding); margin-left: -($navbar-vertical-padding);
margin-right: -($sidenav-padding); margin-right: -($navbar-vertical-padding);
.nav-link { .nav-link {
min-height: 0; min-height: 0;
height: 2.5rem; height: 2.5rem;
padding-left: $sidenav-padding; padding-left: $navbar-vertical-padding;
padding-right: $sidenav-padding; padding-right: $navbar-vertical-padding;
} }
.nav-item { .nav-item {
@@ -187,7 +187,7 @@ Vertical navbar
margin-left: 0; margin-left: 0;
margin-top: auto; margin-top: auto;
padding-left: 0; padding-left: 0;
padding-top: $sidenav-padding; padding-top: $navbar-vertical-padding;
> * { > * {
margin-left: 0; margin-left: 0;
@@ -202,7 +202,7 @@ Vertical navbar
~ .navbar, ~ .navbar,
~ .content { ~ .content {
margin-left: 0; margin-left: 0;
margin-right: $sidenav-width; margin-right: $navbar-vertical-width;
} }
} }
@@ -233,7 +233,7 @@ Vertical navbar
} }
.dropdown-item { .dropdown-item {
padding-left: add($sidenav-padding, 1.5rem); padding-left: add($navbar-vertical-padding, 1.5rem);
opacity: $text-muted-opacity; opacity: $text-muted-opacity;
color: inherit; color: inherit;
background: transparent; background: transparent;
@@ -301,18 +301,6 @@ All navbars
.nav-item { .nav-item {
position: relative; 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 { .navbar-dark {
background: $sidenav-dark-bg; background: $navbar-vertical-dark-bg;
color: $sidenav-dark-color; color: $navbar-vertical-dark-color;
box-shadow: 0 0 0 1px $dark-mode-darken; box-shadow: 0 0 0 1px $dark-mode-darken;
@include scrollbar(true); @include scrollbar(true);