Skip to content

T
Tabler

Dashboards / Tabler
11 个月 前同步成功

通知 0
Star 0
Fork 0
T
Tabler

体验新版 GitCode，发现更多精彩内容 >>

提交 c25b2593 编写于 作者: C codecalm
浏览文件
操作

maps components, mapbox, small fixes

上级 c34031ff
隐藏空白更改
内联 并排
Showing with 207 addition and 123 deletion
_config.yml
浏览文件 @ c25b2593
......@@ -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
浏览文件 @ c25b2593
......@@ -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
浏览文件 @ c25b2593
......@@ -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
浏览文件 @ c25b2593
......@@ -9,7 +9,6 @@ europe:
map: europe_en
zoom: true
usa:
title: Map of USA
map: usa_en
pages/_data/maps.yml
浏览文件 @ c25b2593
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
\ No newline at end of file
pages/_data/menu.yml
浏览文件 @ c25b2593
......@@ -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
浏览文件 @ c25b2593
......@@ -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
浏览文件 @ c25b2593
......@@ -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
浏览文件 @ c25b2593
<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
浏览文件 @ c25b2593
......@@ -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
浏览文件 @ c25b2593
......@@ -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
浏览文件 @ c25b2593
......@@ -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
浏览文件 @ c25b2593
{% 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
浏览文件 @ c25b2593
{% 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 %}
\ No newline at end of file
pages/maps-vector.html
浏览文件 @ c25b2593
---
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
浏览文件 @ c25b2593
---
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>
\ No newline at end of file
scss/_variables.scss
浏览文件 @ c25b2593
......@@ -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
浏览文件 @ c25b2593
......@@ -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);
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或