31 |
32 |
--------------------------------------------------------------------------------
/static/sidebar-v2/scss/_ol-base.scss:
--------------------------------------------------------------------------------
1 | $sidebar-bg: rgba(255, 255, 255, 0.4) !default;
2 | $sidebar-border-width: 3px !default;
3 | $sidebar-border-radius: 4px !default;
4 | $sidebar-border: $sidebar-border-width solid transparent !default;
5 |
6 | $tab-fg: #fff !default;
7 | $tabs-bg: rgba(0, 60, 136, 0.5) !default;
8 | $tab-hover-fg: #fff !default;
9 | $tab-hover-bg: rgba(0, 60, 136, 0.6) !default;
10 | $tab-active-fg: #fff !default;
11 | $tab-active-bg: #0074d9 !default;
12 |
13 | $move-map-in-xs: false !default;
14 |
15 | @import 'base';
16 |
17 | .sidebar {
18 | background-color: $sidebar-bg;
19 |
20 | @media(min-width:$threshold-sm) {
21 | border: $sidebar-border;
22 | border-radius: $sidebar-border-radius;
23 | }
24 | }
25 |
26 | .sidebar-left {
27 | border-right: $sidebar-border;
28 | }
29 |
30 | .sidebar-right {
31 | border-left: $sidebar-border;
32 | }
33 |
34 | .sidebar-tabs {
35 | overflow: hidden;
36 |
37 | @media(min-width:$threshold-sm) {
38 | border-radius: $sidebar-inner-border-radius 0 0 $sidebar-inner-border-radius;
39 |
40 | .collapsed & {
41 | border-radius: $sidebar-inner-border-radius;
42 | }
43 | }
44 | }
45 |
46 | .sidebar-content {
47 | @media(min-width:$threshold-sm) {
48 | border-radius: 0 $sidebar-inner-border-radius $sidebar-inner-border-radius 0;
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/static/sidebar-v2/README.md:
--------------------------------------------------------------------------------
1 | # sidebar-v2
2 |
3 | A responsive sidebar for mapping libraries like [Leaflet](#leaflet) or [OpenLayers](#openlayers-3).
4 |
5 | It is more or less a successor of the [leaflet-sidebar](https://github.com/turbo87/leaflet-sidebar/) plugin, thus the `v2` suffix.
6 |
7 |
8 |
9 | 
10 |
11 |
12 | ## [Leaflet](http://leafletjs.com/)
13 |
14 |  
15 |
16 | Example code at [`examples/index.html`](examples/index.html) ([Preview](http://turbo87.github.io/sidebar-v2/examples/index.html))
17 |
18 |
19 | ## [OpenLayers 3](http://openlayers.org/)
20 |
21 |  
22 |
23 | Example code at [`examples/ol3.html`](examples/ol3.html) ([Preview](http://turbo87.github.io/sidebar-v2/examples/ol3.html))
24 |
25 |
26 | ## [OpenLayers 2](http://openlayers.org/two/)
27 |
28 |  
29 |
30 | Example code at [`examples/ol2.html`](examples/ol2.html) ([Preview](http://turbo87.github.io/sidebar-v2/examples/ol2.html))
31 |
32 |
33 | ## [Google Maps](https://developers.google.com/maps/)
34 |
35 |  
36 |
37 | Example code at [`examples/gmaps.html`](examples/gmaps.html) ([Preview](http://turbo87.github.io/sidebar-v2/examples/gmaps.html))
38 |
39 |
40 | ## License
41 |
42 | sidebar-v2 is free software, and may be redistributed under the [MIT license](LICENSE).
43 |
--------------------------------------------------------------------------------
/static/font/icomoon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/static/sidebar-v2/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | ## v0.4.0 (2017-10-25)
4 |
5 | - ol3 version without jquery dependency ([#97](https://github.com/Turbo87/sidebar-v2/pull/97))
6 | - Allow non-tab links in the sidebar
7 | - add type definition for leaflet-sidebar ([#112](https://github.com/Turbo87/sidebar-v2/pull/112))
8 | - Remove reference to L.Mixin.Evented ([#124](https://github.com/Turbo87/sidebar-v2/pull/124))
9 | - Fix Chrome 62 list-style-type bug ([#127](https://github.com/Turbo87/sidebar-v2/pull/127))
10 |
11 | ## v0.3.1 (2016-11-01)
12 |
13 | - fix `ol3` example map layer ([#77](https://github.com/Turbo87/sidebar-v2/pull/77))
14 | - leaflet: deprecate `removeFrom()` in favor of `remove()` ([#73](https://github.com/Turbo87/sidebar-v2/pull/73))
15 | - leaflet: allow non-tab links on the sidebar ([#87](https://github.com/Turbo87/sidebar-v2/pull/87))
16 | - leaflet: fix CDN location on example pages ([#94](https://github.com/Turbo87/sidebar-v2/pull/94))
17 | - ol3: move "scale-line" together with the zoom controls ([#93](https://github.com/Turbo87/sidebar-v2/pull/93))
18 |
19 | ## v0.3.0 (2016-01-19)
20 |
21 | - ol2: move scale line control too when sidebar opens/closes
22 | - hide scrollbars when collapsed ([#21](https://github.com/Turbo87/sidebar-v2/issues/21))
23 | - fix tab clicking on devices with touch screen *and* mouse ([#34](https://github.com/Turbo87/sidebar-v2/issues/35))
24 | - new `.sidebar-header` CSS class for styled headings
25 | - new `.sidebar-close` CSS class for close buttons in headings
26 | - fix broken Google Maps code (until Google changes things again...)
27 | - allow `.disabled` on `
` elements in `.sidebar-tabs` element
28 | - allow second tabbar at the bottom
29 | - new `position: 'right'` option
30 |
31 |
32 | ## v0.2.1 (2014-09-29)
33 |
34 | - ol2, ol3: fixed sidebar content scrolling
35 |
36 |
37 | ## v0.2.0 (2014-09-29)
38 |
39 | - jQuery API and events
40 |
41 |
42 | ## v0.1.0 (2014-09-12)
43 |
44 | - first beta release
45 |
--------------------------------------------------------------------------------
/static/sidebar-v2/js/ol3-sidebar.min.js:
--------------------------------------------------------------------------------
1 | ol.control.Sidebar=function(t){var s,e;for(this._options=Object.assign({},{element:null,position:"left"},t),ol.control.Control.call(this,{element:document.getElementById(this._options.element),target:this._options.target}),this.element.classList.add("sidebar-"+this._options.position),s=this.element.children.length-1;s>=0;s--)"DIV"===(e=this.element.children[s]).tagName&&e.classList.contains("sidebar-content")&&(this._container=e);for(this._tabitems=this.element.querySelectorAll("ul.sidebar-tabs > li, .sidebar-tabs > ul > li"),s=this._tabitems.length-1;s>=0;s--)this._tabitems[s]._sidebar=this;for(this._panes=[],this._closeButtons=[],s=this._container.children.length-1;s>=0;s--)if("DIV"==(e=this._container.children[s]).tagName&&e.classList.contains("sidebar-pane")){this._panes.push(e);for(var i=e.querySelectorAll(".sidebar-close"),o=0,l=i.length;o=0;s--){var i=(e=this._tabitems[s]).querySelector("a");i.hasAttribute("href")&&"#"==i.getAttribute("href").slice(0,1)&&(i.onclick=this._onClick.bind(e))}for(s=this._closeButtons.length-1;s>=0;s--)(e=this._closeButtons[s]).onclick=this._onCloseClick.bind(this)},ol.control.Sidebar.prototype.open=function(t){var s,e;for(s=this._panes.length-1;s>=0;s--)(e=this._panes[s]).id==t?e.classList.add("active"):e.classList.contains("active")&&e.classList.remove("active");for(s=this._tabitems.length-1;s>=0;s--)(e=this._tabitems[s]).querySelector("a").hash=="#"+t?e.classList.add("active"):e.classList.contains("active")&&e.classList.remove("active");return this.element.classList.contains("collapsed")&&this.element.classList.remove("collapsed"),this},ol.control.Sidebar.prototype.close=function(){for(var t=this._tabitems.length-1;t>=0;t--){var s=this._tabitems[t];s.classList.contains("active")&&s.classList.remove("active")}return this.element.classList.contains("collapsed")||this.element.classList.add("collapsed"),this},ol.control.Sidebar.prototype._onClick=function(){this.classList.contains("active")?this._sidebar.close():this.classList.contains("disabled")||this._sidebar.open(this.querySelector("a").hash.slice(1))},ol.control.Sidebar.prototype._onCloseClick=function(){this.close()};
--------------------------------------------------------------------------------
/xoroshiro.py:
--------------------------------------------------------------------------------
1 | """Xoroshiro Random Number Generator"""
2 | class XOROSHIRO:
3 | """Xoroshiro Random Number Generator"""
4 | ulongmask = 2 ** 64 - 1
5 | uintmask = 2 ** 32 - 1
6 |
7 | def __init__(self, seed0, seed1 = 0x82A2B175229D6A5B):
8 | self.seed = [seed0, seed1]
9 |
10 | def reseed(self, seed0, seed1 = 0x82A2B175229D6A5B):
11 | """Reseed rng without creating a new object"""
12 | self.seed = [seed0, seed1]
13 |
14 | @property
15 | def state(self):
16 | """Return the full state of the rng as read from memory"""
17 | seed0, seed1 = self.seed
18 | return seed0 | (seed1 << 64)
19 |
20 | @staticmethod
21 | def rotl(number, k):
22 | """Rotate number left by k"""
23 | return ((number << k) | (number >> (64 - k))) & XOROSHIRO.ulongmask
24 |
25 | def next(self):
26 | """Generate the next random number and advance the rng"""
27 | seed0, seed1 = self.seed
28 | result = (seed0 + seed1) & XOROSHIRO.ulongmask
29 | seed1 ^= seed0
30 | self.seed = [XOROSHIRO.rotl(seed0, 24) ^ seed1 ^ ((seed1 << 16) & XOROSHIRO.ulongmask),
31 | XOROSHIRO.rotl(seed1, 37)]
32 | return result
33 |
34 | def previous(self):
35 | """Generate the previous random number and advance the rng backwards"""
36 | seed0, seed1 = self.seed
37 | seed1 = XOROSHIRO.rotl(seed1, 27)
38 | seed0 = (seed0 ^ seed1 ^ (seed1 << 16)) & XOROSHIRO.ulongmask
39 | seed0 = XOROSHIRO.rotl(seed0, 40)
40 | seed1 ^= seed0
41 | self.seed = [seed0,seed1]
42 | return (seed0 + seed1) & XOROSHIRO.ulongmask
43 |
44 | def nextuint(self):
45 | """Generate the next random number as a uint"""
46 | return self.next() & XOROSHIRO.uintmask
47 |
48 | @staticmethod
49 | def get_mask(maximum):
50 | """Get the bit mask for rand(maximum)"""
51 | maximum -= 1
52 | for i in range(6):
53 | maximum |= maximum >> (1 << i)
54 | return maximum
55 |
56 | def rand(self, maximum = uintmask):
57 | """Generate a random number in the range of [0,maximum)"""
58 | mask = XOROSHIRO.get_mask(maximum)
59 | res = self.next() & mask
60 | while res >= maximum:
61 | res = self.next() & mask
62 | return res
63 |
--------------------------------------------------------------------------------
/static/sidebar-v2/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var clean = require('gulp-clean');
3 | var csslint = require('gulp-csslint');
4 | var jshint = require('gulp-jshint');
5 | var minifyCSS = require('gulp-minify-css');
6 | var sass = require('gulp-sass');
7 | var rename = require('gulp-rename');
8 | var uglify = require('gulp-uglify');
9 | var zip = require('gulp-zip');
10 |
11 | var pkg = require('./package.json');
12 | var basename = pkg.name + '-' + pkg.version;
13 |
14 | // SASS compilation
15 | gulp.task('sass', function () {
16 | gulp.src('scss/*sidebar.scss')
17 | .pipe(sass().on('error', sass.logError))
18 | .pipe(gulp.dest('css'));
19 | });
20 |
21 | // Lint JS + CSS
22 | gulp.task('lint', ['lint:js', 'lint:css']);
23 |
24 | gulp.task('lint:js', function() {
25 | return gulp.src('js/*sidebar.js')
26 | .pipe(jshint())
27 | .pipe(jshint.reporter());
28 | });
29 |
30 | gulp.task('lint:css', ['sass'], function() {
31 | return gulp.src('css/*sidebar.css')
32 | .pipe(csslint({
33 | 'adjoining-classes': false,
34 | 'order-alphabetical': false,
35 | 'box-sizing': false,
36 | 'fallback-colors': false,
37 | 'important': false,
38 | 'regex-selectors': false,
39 | }))
40 | .pipe(csslint.formatter());
41 | });
42 |
43 | // Minify JS + CSS
44 | gulp.task('minify', ['minify:js', 'minify:css']);
45 |
46 | gulp.task('minify:js', function() {
47 | return gulp.src('js/*sidebar.js')
48 | .pipe(rename({ suffix: '.min' }))
49 | .pipe(uglify())
50 | .pipe(gulp.dest('js'));
51 | });
52 |
53 | gulp.task('minify:css', ['sass'], function() {
54 | return gulp.src('css/*sidebar.css')
55 | .pipe(rename({ suffix: '.min' }))
56 | .pipe(minifyCSS())
57 | .pipe(gulp.dest('css'));
58 | });
59 |
60 | // Package for distribution
61 | gulp.task('zip', ['minify'], function() {
62 | return gulp.src([
63 | 'README.md',
64 | 'LICENSE',
65 | 'css/*-sidebar.min.css',
66 | 'js/*-sidebar.min.js',
67 | ])
68 | .pipe(rename(function (path) {
69 | path.dirname = '';
70 | }))
71 | .pipe(zip(basename + '.zip'))
72 | .pipe(gulp.dest('dist'));
73 | });
74 |
75 | // Watch JS + CSS Files
76 | gulp.task('watch', ['lint', 'minify'], function(){
77 | gulp.watch('js/*.js', ['lint:js', 'minify:js']);
78 | gulp.watch('scss/*.scss', ['lint:css', 'minify:css']);
79 | });
80 |
81 | // Default
82 | gulp.task('default', ['lint', 'minify']);
83 |
--------------------------------------------------------------------------------
/static/sidebar-v2/scss/leaflet-sidebar.scss:
--------------------------------------------------------------------------------
1 | $sidebar-margins: 10px !default;
2 | $sidebar-border-radius: 4px !default;
3 | $sidebar-touch-border: 2px solid rgba(0, 0, 0, 0.2) !default;
4 | $sidebar-shadow: 0 1px 5px rgba(0, 0, 0, 0.65) !default;
5 |
6 | $tab-fg: #333 !default;
7 | $tabs-bg: #fff !default;
8 | $tab-hover-fg: #000 !default;
9 | $tab-hover-bg: #eee !default;
10 | $tab-active-fg: #fff !default;
11 | $tab-active-bg: #0074d9 !default;
12 |
13 | @import 'base';
14 |
15 | .sidebar {
16 | box-shadow: $sidebar-shadow;
17 |
18 | &.leaflet-touch {
19 | box-shadow: none;
20 | border-right: $sidebar-touch-border;
21 | }
22 |
23 | @media(min-width:$threshold-sm) {
24 | border-radius: $sidebar-border-radius;
25 |
26 | &.leaflet-touch {
27 | border: $sidebar-touch-border;
28 | }
29 | }
30 | }
31 |
32 | .sidebar-left {
33 |
34 | & ~ .sidebar-map .leaflet-left {
35 | @media(min-width:$threshold-sm) {
36 | transition: left $sidebar-transition;
37 | }
38 |
39 | @media(min-width:$threshold-sm) and (max-width:$threshold-md - 1px) {
40 | left: $width-sm + $sidebar-margins;
41 | }
42 |
43 | @media(min-width:$threshold-md) and (max-width:$threshold-lg - 1px) {
44 | left: $width-md + $sidebar-margins;
45 | }
46 |
47 | @media(min-width:$threshold-lg) {
48 | left: $width-lg + $sidebar-margins;
49 | }
50 | }
51 |
52 | &.collapsed ~ .sidebar-map .leaflet-left {
53 | @media(min-width:$threshold-sm) {
54 | left: $tab-size + $sidebar-margins;
55 | }
56 | }
57 | }
58 |
59 | .sidebar-right {
60 |
61 | & ~ .sidebar-map .leaflet-right {
62 | @media(min-width:$threshold-sm) {
63 | transition: right $sidebar-transition;
64 | }
65 |
66 | @media(min-width:$threshold-sm) and (max-width:$threshold-md - 1px) {
67 | right: $width-sm + $sidebar-margins;
68 | }
69 |
70 | @media(min-width:$threshold-md) and (max-width:$threshold-lg - 1px) {
71 | right: $width-md + $sidebar-margins;
72 | }
73 |
74 | @media(min-width:$threshold-lg) {
75 | right: $width-lg + $sidebar-margins;
76 | }
77 | }
78 |
79 | &.collapsed ~ .sidebar-map .leaflet-right {
80 | @media(min-width:$threshold-sm) {
81 | right: $tab-size + $sidebar-margins;
82 | }
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Byte-compiled / optimized / DLL files
2 | __pycache__/
3 | *.py[cod]
4 | *$py.class
5 |
6 | # C extensions
7 | *.so
8 |
9 | # Distribution / packaging
10 | .Python
11 | build/
12 | develop-eggs/
13 | dist/
14 | downloads/
15 | eggs/
16 | .eggs/
17 | lib/
18 | lib64/
19 | parts/
20 | sdist/
21 | var/
22 | wheels/
23 | pip-wheel-metadata/
24 | share/python-wheels/
25 | *.egg-info/
26 | .installed.cfg
27 | *.egg
28 | MANIFEST
29 |
30 | # PyInstaller
31 | # Usually these files are written by a python script from a template
32 | # before PyInstaller builds the exe, so as to inject date/other infos into it.
33 | *.manifest
34 | *.spec
35 |
36 | # Installer logs
37 | pip-log.txt
38 | pip-delete-this-directory.txt
39 |
40 | # Unit test / coverage reports
41 | htmlcov/
42 | .tox/
43 | .nox/
44 | .coverage
45 | .coverage.*
46 | .cache
47 | nosetests.xml
48 | coverage.xml
49 | *.cover
50 | *.py,cover
51 | .hypothesis/
52 | .pytest_cache/
53 |
54 | # Translations
55 | *.mo
56 | *.pot
57 |
58 | # Django stuff:
59 | *.log
60 | local_settings.py
61 | db.sqlite3
62 | db.sqlite3-journal
63 |
64 | # Flask stuff:
65 | instance/
66 | .webassets-cache
67 |
68 | # Scrapy stuff:
69 | .scrapy
70 |
71 | # Sphinx documentation
72 | docs/_build/
73 |
74 | # PyBuilder
75 | target/
76 |
77 | # Jupyter Notebook
78 | .ipynb_checkpoints
79 |
80 | # IPython
81 | profile_default/
82 | ipython_config.py
83 |
84 | # pyenv
85 | .python-version
86 |
87 | # pipenv
88 | # According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
89 | # However, in case of collaboration, if having platform-specific dependencies or dependencies
90 | # having no cross-platform support, pipenv may install dependencies that don't work, or not
91 | # install all needed dependencies.
92 | #Pipfile.lock
93 |
94 | # PEP 582; used by e.g. github.com/David-OConnor/pyflow
95 | __pypackages__/
96 |
97 | # Celery stuff
98 | celerybeat-schedule
99 | celerybeat.pid
100 |
101 | # SageMath parsed files
102 | *.sage.py
103 |
104 | # Environments
105 | .env
106 | .venv
107 | env/
108 | venv/
109 | ENV/
110 | env.bak/
111 | venv.bak/
112 |
113 | # Spyder project settings
114 | .spyderproject
115 | .spyproject
116 |
117 | # Rope project settings
118 | .ropeproject
119 |
120 | # mkdocs documentation
121 | /site
122 |
123 | # mypy
124 | .mypy_cache/
125 | .dmypy.json
126 | dmypy.json
127 |
128 | # Pyre type checker
129 | .pyre/
130 |
131 | # Config
132 | config.json
133 |
134 | # vscode
135 | .vscode/
--------------------------------------------------------------------------------
/static/sidebar-v2/scss/ol3-sidebar.scss:
--------------------------------------------------------------------------------
1 | $sidebar-margins: 6px !default;
2 | $sidebar-inner-border-radius: 2px !default;
3 |
4 | @import 'ol-base';
5 |
6 | .sidebar-left {
7 |
8 | & ~ .sidebar-map {
9 |
10 | .ol-zoom, .ol-scale-line {
11 | margin-left: $tab-size + $sidebar-border-width * 2;
12 |
13 | @media(min-width: $threshold-sm) {
14 | transition: margin-left $sidebar-transition;
15 | }
16 |
17 | @media(min-width: $threshold-sm) and (max-width: $threshold-md - 1px) {
18 | margin-left: $width-sm + $sidebar-margins + $sidebar-border-width * 2;
19 | }
20 |
21 | @media(min-width: $threshold-md) and (max-width: $threshold-lg - 1px) {
22 | margin-left: $width-md + $sidebar-margins + $sidebar-border-width * 2;
23 | }
24 |
25 | @media(min-width: $threshold-lg) {
26 | margin-left: $width-lg + $sidebar-margins + $sidebar-border-width * 2;
27 | }
28 | }
29 | }
30 |
31 | &.collapsed ~ .sidebar-map {
32 |
33 | .ol-zoom, .ol-scale-line {
34 | @media(min-width:$threshold-sm) {
35 | margin-left: $tab-size + $sidebar-margins + $sidebar-border-width * 2;
36 | }
37 | }
38 | }
39 | }
40 |
41 |
42 | .sidebar-right {
43 |
44 | & ~ .sidebar-map {
45 |
46 | .ol-rotate,
47 | .ol-attribution,
48 | .ol-full-screen {
49 |
50 | margin-right: $tab-size + $sidebar-border-width * 2;
51 |
52 | @media(min-width: $threshold-sm) {
53 | transition: margin-right $sidebar-transition;
54 | }
55 |
56 | @media(min-width: $threshold-sm) and (max-width: $threshold-md - 1px) {
57 | margin-right: $width-sm + $sidebar-margins + $sidebar-border-width * 2;
58 | }
59 |
60 | @media(min-width: $threshold-md) and (max-width: $threshold-lg - 1px) {
61 | margin-right: $width-md + $sidebar-margins + $sidebar-border-width * 2;
62 | }
63 |
64 | @media(min-width: $threshold-lg) {
65 | margin-right: $width-lg + $sidebar-margins + $sidebar-border-width * 2;
66 | }
67 | }
68 | }
69 |
70 | &.collapsed ~ .sidebar-map {
71 |
72 | .ol-rotate,
73 | .ol-attribution,
74 | .ol-full-screen {
75 |
76 | @media(min-width:$threshold-sm) {
77 | margin-right: $tab-size + $sidebar-margins + $sidebar-border-width * 2;
78 | }
79 | }
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/static/sidebar-v2/scss/ol2-sidebar.scss:
--------------------------------------------------------------------------------
1 | $sidebar-margins: 8px !default;
2 | $sidebar-inner-border-radius: 4px !default;
3 |
4 | @import 'ol-base';
5 |
6 | .sidebar-left {
7 |
8 | & ~ .sidebar-map {
9 |
10 | .olControlZoom,
11 | .olScaleLine {
12 | margin-left: $tab-size + $sidebar-border-width * 2;
13 |
14 | @media(min-width: $threshold-sm) {
15 | transition: margin-left $sidebar-transition;
16 | }
17 |
18 | @media(min-width: $threshold-sm) and (max-width: $threshold-md - 1px) {
19 | margin-left: $width-sm + $sidebar-margins + $sidebar-border-width * 2;
20 | }
21 |
22 | @media(min-width: $threshold-md) and (max-width: $threshold-lg - 1px) {
23 | margin-left: $width-md + $sidebar-margins + $sidebar-border-width * 2;
24 | }
25 |
26 | @media(min-width: $threshold-lg) {
27 | margin-left: $width-lg + $sidebar-margins + $sidebar-border-width * 2;
28 | }
29 | }
30 | }
31 |
32 | &.collapsed ~ .sidebar-map {
33 |
34 | .olControlZoom,
35 | .olScaleLine {
36 | @media(min-width:$threshold-sm) {
37 | margin-left: $tab-size + $sidebar-margins + $sidebar-border-width * 2;
38 | }
39 | }
40 | }
41 | }
42 |
43 | .sidebar-right {
44 |
45 | & ~ .sidebar-map {
46 |
47 | .olControlAttribution,
48 | .olControlPermalink,
49 | .olControlMousePosition {
50 | margin-right: $tab-size + $sidebar-border-width * 2;
51 |
52 | @media(min-width: $threshold-sm) {
53 | transition: margin-right $sidebar-transition;
54 | }
55 |
56 | @media(min-width: $threshold-sm) and (max-width: $threshold-md - 1px) {
57 | margin-right: $width-sm + $sidebar-margins + $sidebar-border-width * 2;
58 | }
59 |
60 | @media(min-width: $threshold-md) and (max-width: $threshold-lg - 1px) {
61 | margin-right: $width-md + $sidebar-margins + $sidebar-border-width * 2;
62 | }
63 |
64 | @media(min-width: $threshold-lg) {
65 | margin-right: $width-lg + $sidebar-margins + $sidebar-border-width * 2;
66 | }
67 | }
68 | }
69 |
70 | &.collapsed ~ .sidebar-map {
71 |
72 | .olControlAttribution,
73 | .olControlPermalink,
74 | .olControlMousePosition {
75 | @media(min-width:$threshold-sm) {
76 | margin-right: $tab-size + $sidebar-margins + $sidebar-border-width * 2;
77 | }
78 | }
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/static/sidebar-v2/js/jquery-sidebar.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Create a new sidebar on this jQuery object.
3 | *
4 | * @example
5 | * var sidebar = $('#sidebar').sidebar();
6 | *
7 | * @param {Object} [options] - Optional options object
8 | * @param {string} [options.position=left] - Position of the sidebar: 'left' or 'right'
9 | * @returns {jQuery}
10 | */
11 | $.fn.sidebar = function(options) {
12 | var $sidebar = this;
13 | var $tabs = $sidebar.find('ul.sidebar-tabs, .sidebar-tabs > ul');
14 | var $container = $sidebar.children('.sidebar-content').first();
15 |
16 | options = $.extend({
17 | position: 'left'
18 | }, options || {});
19 |
20 | $sidebar.addClass('sidebar-' + options.position);
21 |
22 | $tabs.children('li').children('a[href^="#"]').on('click', function(e) {
23 | e.preventDefault();
24 | var $tab = $(this).closest('li');
25 |
26 | if ($tab.hasClass('active'))
27 | $sidebar.close();
28 | else if (!$tab.hasClass('disabled'))
29 | $sidebar.open(this.hash.slice(1), $tab);
30 | });
31 |
32 | $sidebar.find('.sidebar-close').on('click', function() {
33 | $sidebar.close();
34 | });
35 |
36 | /**
37 | * Open sidebar (if necessary) and show the specified tab.
38 | *
39 | * @param {string} id - The id of the tab to show (without the # character)
40 | * @param {jQuery} [$tab] - The jQuery object representing the tab node (used internally for efficiency)
41 | */
42 | $sidebar.open = function(id, $tab) {
43 | if (typeof $tab === 'undefined')
44 | $tab = $tabs.find('li > a[href="#' + id + '"]').parent();
45 |
46 | // hide old active contents
47 | $container.children('.sidebar-pane.active').removeClass('active');
48 |
49 | // show new content
50 | $container.children('#' + id).addClass('active');
51 |
52 | // remove old active highlights
53 | $tabs.children('li.active').removeClass('active');
54 |
55 | // set new highlight
56 | $tab.addClass('active');
57 |
58 | $sidebar.trigger('content', { 'id': id });
59 |
60 | if ($sidebar.hasClass('collapsed')) {
61 | // open sidebar
62 | $sidebar.trigger('opening');
63 | $sidebar.removeClass('collapsed');
64 | }
65 | };
66 |
67 | /**
68 | * Close the sidebar (if necessary).
69 | */
70 | $sidebar.close = function() {
71 | // remove old active highlights
72 | $tabs.children('li.active').removeClass('active');
73 |
74 | if (!$sidebar.hasClass('collapsed')) {
75 | // close sidebar
76 | $sidebar.trigger('closing');
77 | $sidebar.addClass('collapsed');
78 | }
79 | };
80 |
81 | return $sidebar;
82 | };
83 |
--------------------------------------------------------------------------------
/static/sidebar-v2/js/leaflet-sidebar.min.js:
--------------------------------------------------------------------------------
1 | L.Control.Sidebar=L.Control.extend({includes:L.Evented.prototype||L.Mixin.Events,options:{position:"left"},initialize:function(t,s){var i,e;for(L.setOptions(this,s),this._sidebar=L.DomUtil.get(t),L.DomUtil.addClass(this._sidebar,"sidebar-"+this.options.position),L.Browser.touch&&L.DomUtil.addClass(this._sidebar,"leaflet-touch"),i=this._sidebar.children.length-1;i>=0;i--)"DIV"==(e=this._sidebar.children[i]).tagName&&L.DomUtil.hasClass(e,"sidebar-content")&&(this._container=e);for(this._tabitems=this._sidebar.querySelectorAll("ul.sidebar-tabs > li, .sidebar-tabs > ul > li"),i=this._tabitems.length-1;i>=0;i--)this._tabitems[i]._sidebar=this;for(this._panes=[],this._closeButtons=[],i=this._container.children.length-1;i>=0;i--)if("DIV"==(e=this._container.children[i]).tagName&&L.DomUtil.hasClass(e,"sidebar-pane")){this._panes.push(e);for(var o=e.querySelectorAll(".sidebar-close"),a=0,l=o.length;a=0;s--){var e=(i=this._tabitems[s]).querySelector("a");e.hasAttribute("href")&&"#"==e.getAttribute("href").slice(0,1)&&L.DomEvent.on(e,"click",L.DomEvent.preventDefault).on(e,"click",this._onClick,i)}for(s=this._closeButtons.length-1;s>=0;s--)i=this._closeButtons[s],L.DomEvent.on(i,"click",this._onCloseClick,this);return this},removeFrom:function(t){console.log("removeFrom() has been deprecated, please use remove() instead as support for this function will be ending soon."),this.remove(t)},remove:function(t){var s,i;for(this._map=null,s=this._tabitems.length-1;s>=0;s--)i=this._tabitems[s],L.DomEvent.off(i.querySelector("a"),"click",this._onClick);for(s=this._closeButtons.length-1;s>=0;s--)i=this._closeButtons[s],L.DomEvent.off(i,"click",this._onCloseClick,this);return this},open:function(t){var s,i;for(s=this._panes.length-1;s>=0;s--)(i=this._panes[s]).id==t?L.DomUtil.addClass(i,"active"):L.DomUtil.hasClass(i,"active")&&L.DomUtil.removeClass(i,"active");for(s=this._tabitems.length-1;s>=0;s--)(i=this._tabitems[s]).querySelector("a").hash=="#"+t?L.DomUtil.addClass(i,"active"):L.DomUtil.hasClass(i,"active")&&L.DomUtil.removeClass(i,"active");return this.fire("content",{id:t}),L.DomUtil.hasClass(this._sidebar,"collapsed")&&(this.fire("opening"),L.DomUtil.removeClass(this._sidebar,"collapsed")),this},close:function(){for(var t=this._tabitems.length-1;t>=0;t--){var s=this._tabitems[t];L.DomUtil.hasClass(s,"active")&&L.DomUtil.removeClass(s,"active")}return L.DomUtil.hasClass(this._sidebar,"collapsed")||(this.fire("closing"),L.DomUtil.addClass(this._sidebar,"collapsed")),this},_onClick:function(){L.DomUtil.hasClass(this,"active")?this._sidebar.close():L.DomUtil.hasClass(this,"disabled")||this._sidebar.open(this.querySelector("a").hash.slice(1))},_onCloseClick:function(){this.close()}}),L.control.sidebar=function(t,s){return new L.Control.Sidebar(t,s)};
--------------------------------------------------------------------------------
/static/sidebar-v2/scss/gmaps-sidebar.scss:
--------------------------------------------------------------------------------
1 | $sidebar-margins: 10px !default;
2 | $sidebar-left-bottom-margin: $sidebar-margins + 25px !default;
3 | $sidebar-right-bottom-margin: $sidebar-margins + 14px !default;
4 | $sidebar-border: 0 !default;
5 | $sidebar-border-radius: 2px !default;
6 | $sidebar-shadow: rgba(0, 0, 0, 0.298039) 0 1px 4px -1px !default;
7 |
8 | $tab-fg: #666 !default;
9 | $tabs-bg: #fff !default;
10 | $tab-active-fg: #000 !default;
11 | $tab-active-bg: #febf00 !default;
12 | $tab-hover-fg: #000 !default;
13 | $tab-hover-bg: ($tabs-bg * 9 + $tab-active-bg) / 10 !default;
14 |
15 | @import 'base';
16 |
17 | .sidebar {
18 | border-right: $sidebar-border;
19 | box-shadow: $sidebar-shadow;
20 |
21 | @media(min-width:$threshold-sm) {
22 | border: $sidebar-border;
23 | border-radius: $sidebar-border-radius;
24 | }
25 | }
26 |
27 | .sidebar-left {
28 | @media(min-width:$threshold-sm) {
29 | bottom: $sidebar-left-bottom-margin;
30 | }
31 |
32 | & ~ .sidebar-map .gm-style > div.gmnoprint[style*="left: 0px"] {
33 | @media(min-width:$threshold-sm) {
34 | transition: margin-left $sidebar-transition;
35 | }
36 |
37 | @media(min-width:$threshold-sm) and (max-width:$threshold-md - 1px) {
38 | margin-left: $width-sm + $sidebar-margins * 2 !important;
39 | }
40 |
41 | @media(min-width:$threshold-md) and (max-width:$threshold-lg - 1px) {
42 | margin-left: $width-md + $sidebar-margins * 2 !important;
43 | }
44 |
45 | @media(min-width:$threshold-lg) {
46 | margin-left: $width-lg + $sidebar-margins * 2 !important;
47 | }
48 | }
49 |
50 | @media(min-width:$threshold-sm) {
51 | &.collapsed ~ .sidebar-map .gm-style > div.gmnoprint[style*="left: 0px"] {
52 | margin-left: $tab-size + $sidebar-margins * 2 !important;
53 | }
54 | }
55 | }
56 |
57 |
58 | .sidebar-right {
59 | @media(min-width:$threshold-sm) {
60 | bottom: $sidebar-right-bottom-margin;
61 | }
62 |
63 | & ~ .sidebar-map .gm-style > div.gmnoprint[style*="right: 28px"] {
64 | @media(min-width:$threshold-sm) {
65 | transition: margin-right $sidebar-transition;
66 | }
67 |
68 | @media(min-width:$threshold-sm) and (max-width:$threshold-md - 1px) {
69 | margin-right: $width-sm + $sidebar-margins * 2 !important;
70 | }
71 |
72 | @media(min-width:$threshold-md) and (max-width:$threshold-lg - 1px) {
73 | margin-right: $width-md + $sidebar-margins * 2 !important;
74 | }
75 |
76 | @media(min-width:$threshold-lg) {
77 | margin-right: $width-lg + $sidebar-margins * 2 !important;
78 | }
79 | }
80 |
81 | @media(min-width:$threshold-sm) {
82 | &.collapsed ~ .sidebar-map .gm-style > div.gmnoprint[style*="right: 28px"] {
83 | margin-right: $tab-size + $sidebar-margins * 2 !important;
84 | }
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/static/sidebar-v2/css/leaflet-sidebar.min.css:
--------------------------------------------------------------------------------
1 | .sidebar{position:absolute;top:0;bottom:0;width:100%;overflow:hidden;z-index:2000;box-shadow:0 1px 5px rgba(0,0,0,.65)}.sidebar.collapsed{width:40px}@media (min-width:768px) and (max-width:991px){.sidebar{width:305px}.sidebar-pane{min-width:265px}}@media (min-width:992px) and (max-width:1199px){.sidebar{width:390px}}@media (min-width:1200px){.sidebar{width:460px}}.sidebar-left{left:0}.sidebar-right{right:0}@media (min-width:768px){.sidebar{top:10px;bottom:10px;transition:width .5s}.sidebar-left{left:10px}.sidebar-right{right:10px}}.sidebar-tabs{top:0;bottom:0;height:100%;background-color:#fff}.sidebar-left .sidebar-tabs{left:0}.sidebar-right .sidebar-tabs{right:0}.sidebar-tabs,.sidebar-tabs>ul{position:absolute;width:40px;margin:0;padding:0;list-style-type:none}.sidebar-tabs>li,.sidebar-tabs>ul>li{width:100%;height:40px;color:#333;font-size:12pt;overflow:hidden;transition:all 80ms}.sidebar-tabs>li:hover,.sidebar-tabs>ul>li:hover{color:#000;background-color:#eee}.sidebar-tabs>li.active,.sidebar-tabs>ul>li.active{color:#fff;background-color:#0074d9}.sidebar-tabs>li.disabled,.sidebar-tabs>ul>li.disabled{color:rgba(51,51,51,.4)}.sidebar-tabs>li.disabled:hover,.sidebar-tabs>ul>li.disabled:hover{background:0 0}.sidebar-tabs>li.disabled>a,.sidebar-tabs>ul>li.disabled>a{cursor:default}.sidebar-tabs>li>a,.sidebar-tabs>ul>li>a{display:block;width:100%;height:100%;line-height:40px;color:inherit;text-decoration:none;text-align:center}.sidebar-tabs>ul+ul{bottom:0}.sidebar-content{position:absolute;top:0;bottom:0;background-color:rgba(255,255,255,.95);overflow-x:hidden;overflow-y:auto}.sidebar-left .sidebar-content{left:40px;right:0}.sidebar-right .sidebar-content{left:0;right:40px}.sidebar.collapsed>.sidebar-content{overflow-y:hidden}.sidebar-pane{display:none;left:0;right:0;box-sizing:border-box;padding:10px 20px}.sidebar-pane.active{display:block}.sidebar-header{margin:-10px -20px 0;height:40px;padding:0 20px;line-height:40px;font-size:14.4pt;color:#fff;background-color:#0074d9}.sidebar-right .sidebar-header{padding-left:40px}.sidebar-close{position:absolute;top:0;width:40px;height:40px;text-align:center;cursor:pointer}.sidebar-left .sidebar-close{right:0}.sidebar-right .sidebar-close{left:0}.sidebar-left~.sidebar-map{margin-left:40px}.sidebar-right~.sidebar-map{margin-right:40px}.sidebar.leaflet-touch{box-shadow:none;border-right:2px solid rgba(0,0,0,.2)}@media (min-width:768px) and (max-width:991px){.sidebar-left~.sidebar-map .leaflet-left{left:315px}.sidebar-right~.sidebar-map .leaflet-right{right:315px}}@media (min-width:992px) and (max-width:1199px){.sidebar-pane{min-width:350px}.sidebar-left~.sidebar-map .leaflet-left{left:400px}.sidebar-right~.sidebar-map .leaflet-right{right:400px}}@media (min-width:1200px){.sidebar-pane{min-width:420px}.sidebar-left~.sidebar-map .leaflet-left{left:470px}.sidebar-right~.sidebar-map .leaflet-right{right:470px}}@media (min-width:768px){.sidebar-left~.sidebar-map{margin-left:0}.sidebar-right~.sidebar-map{margin-right:0}.sidebar{border-radius:4px}.sidebar.leaflet-touch{border:2px solid rgba(0,0,0,.2)}.sidebar-left~.sidebar-map .leaflet-left{transition:left .5s}.sidebar-left.collapsed~.sidebar-map .leaflet-left{left:50px}.sidebar-right~.sidebar-map .leaflet-right{transition:right .5s}.sidebar-right.collapsed~.sidebar-map .leaflet-right{right:50px}}
--------------------------------------------------------------------------------
/static/sidebar-v2/css/gmaps-sidebar.min.css:
--------------------------------------------------------------------------------
1 | .sidebar{position:absolute;top:0;bottom:0;width:100%;overflow:hidden;z-index:2000;border-right:0;box-shadow:rgba(0,0,0,.298039) 0 1px 4px -1px}.sidebar.collapsed{width:40px}@media (min-width:768px) and (max-width:991px){.sidebar{width:305px}.sidebar-pane{min-width:265px}}@media (min-width:992px) and (max-width:1199px){.sidebar{width:390px}}@media (min-width:1200px){.sidebar{width:460px}}.sidebar-left{left:0}.sidebar-right{right:0}@media (min-width:768px){.sidebar{top:10px;bottom:10px;transition:width .5s}.sidebar-left{left:10px}.sidebar-right{right:10px}}.sidebar-tabs{top:0;bottom:0;height:100%;background-color:#fff}.sidebar-left .sidebar-tabs{left:0}.sidebar-right .sidebar-tabs{right:0}.sidebar-tabs,.sidebar-tabs>ul{position:absolute;width:40px;margin:0;padding:0;list-style-type:none}.sidebar-tabs>li,.sidebar-tabs>ul>li{width:100%;height:40px;color:#666;font-size:12pt;overflow:hidden;transition:all 80ms}.sidebar-tabs>li:hover,.sidebar-tabs>ul>li:hover{color:#000;background-color:#fff9e6}.sidebar-tabs>li.active,.sidebar-tabs>ul>li.active{color:#000;background-color:#febf00}.sidebar-tabs>li.disabled,.sidebar-tabs>ul>li.disabled{color:rgba(102,102,102,.4)}.sidebar-tabs>li.disabled:hover,.sidebar-tabs>ul>li.disabled:hover{background:0 0}.sidebar-tabs>li.disabled>a,.sidebar-tabs>ul>li.disabled>a{cursor:default}.sidebar-tabs>li>a,.sidebar-tabs>ul>li>a{display:block;width:100%;height:100%;line-height:40px;color:inherit;text-decoration:none;text-align:center}.sidebar-tabs>ul+ul{bottom:0}.sidebar-content{position:absolute;top:0;bottom:0;background-color:rgba(255,255,255,.95);overflow-x:hidden;overflow-y:auto}.sidebar-left .sidebar-content{left:40px;right:0}.sidebar-right .sidebar-content{left:0;right:40px}.sidebar.collapsed>.sidebar-content{overflow-y:hidden}.sidebar-pane{display:none;left:0;right:0;box-sizing:border-box;padding:10px 20px}.sidebar-pane.active{display:block}.sidebar-header{margin:-10px -20px 0;height:40px;padding:0 20px;line-height:40px;font-size:14.4pt;color:#000;background-color:#febf00}.sidebar-right .sidebar-header{padding-left:40px}.sidebar-close{position:absolute;top:0;width:40px;height:40px;text-align:center;cursor:pointer}.sidebar-left .sidebar-close{right:0}.sidebar-right .sidebar-close{left:0}.sidebar-left~.sidebar-map{margin-left:40px}.sidebar-right~.sidebar-map{margin-right:40px}@media (min-width:768px){.sidebar-left~.sidebar-map{margin-left:0}.sidebar-right~.sidebar-map{margin-right:0}.sidebar{border:0;border-radius:2px}.sidebar-left{bottom:35px}.sidebar-left~.sidebar-map .gm-style>div.gmnoprint[style*="left: 0px"]{transition:margin-left .5s}}@media (min-width:768px) and (max-width:991px){.sidebar-left~.sidebar-map .gm-style>div.gmnoprint[style*="left: 0px"]{margin-left:325px!important}.sidebar-right~.sidebar-map .gm-style>div.gmnoprint[style*="right: 28px"]{margin-right:325px!important}}@media (min-width:992px) and (max-width:1199px){.sidebar-pane{min-width:350px}.sidebar-left~.sidebar-map .gm-style>div.gmnoprint[style*="left: 0px"]{margin-left:410px!important}.sidebar-right~.sidebar-map .gm-style>div.gmnoprint[style*="right: 28px"]{margin-right:410px!important}}@media (min-width:1200px){.sidebar-pane{min-width:420px}.sidebar-left~.sidebar-map .gm-style>div.gmnoprint[style*="left: 0px"]{margin-left:480px!important}.sidebar-right~.sidebar-map .gm-style>div.gmnoprint[style*="right: 28px"]{margin-right:480px!important}}@media (min-width:768px){.sidebar-left.collapsed~.sidebar-map .gm-style>div.gmnoprint[style*="left: 0px"]{margin-left:60px!important}.sidebar-right{bottom:24px}.sidebar-right~.sidebar-map .gm-style>div.gmnoprint[style*="right: 28px"]{transition:margin-right .5s}.sidebar-right.collapsed~.sidebar-map .gm-style>div.gmnoprint[style*="right: 28px"]{margin-right:60px!important}}
--------------------------------------------------------------------------------
/static/sidebar-v2/css/ol3-sidebar.min.css:
--------------------------------------------------------------------------------
1 | .sidebar{position:absolute;top:0;bottom:0;width:100%;overflow:hidden;z-index:2000}.sidebar.collapsed{width:40px}@media (min-width:768px) and (max-width:991px){.sidebar{width:305px}.sidebar-pane{min-width:265px}}@media (min-width:992px) and (max-width:1199px){.sidebar{width:390px}}@media (min-width:1200px){.sidebar{width:460px}}.sidebar-left{left:0;border-right:3px solid transparent}.sidebar-right{right:0;border-left:3px solid transparent}@media (min-width:768px){.sidebar{top:6px;bottom:6px;transition:width .5s;border:3px solid transparent;border-radius:4px}.sidebar-left{left:6px}.sidebar-right{right:6px}}.sidebar-tabs{top:0;bottom:0;height:100%;background-color:rgba(0,60,136,.5)}.sidebar-left .sidebar-tabs{left:0}.sidebar-right .sidebar-tabs{right:0}.sidebar-tabs,.sidebar-tabs>ul{position:absolute;width:40px;margin:0;padding:0;list-style-type:none}.sidebar-tabs>li,.sidebar-tabs>ul>li{width:100%;height:40px;color:#fff;font-size:12pt;overflow:hidden;transition:all 80ms}.sidebar-tabs>li:hover,.sidebar-tabs>ul>li:hover{color:#fff;background-color:rgba(0,60,136,.6)}.sidebar-tabs>li.active,.sidebar-tabs>ul>li.active{color:#fff;background-color:#0074d9}.sidebar-tabs>li.disabled,.sidebar-tabs>ul>li.disabled{color:rgba(255,255,255,.4)}.sidebar-tabs>li.disabled:hover,.sidebar-tabs>ul>li.disabled:hover{background:0 0}.sidebar-tabs>li.disabled>a,.sidebar-tabs>ul>li.disabled>a{cursor:default}.sidebar-tabs>li>a,.sidebar-tabs>ul>li>a{display:block;width:100%;height:100%;line-height:40px;color:inherit;text-decoration:none;text-align:center}.sidebar-tabs>ul+ul{bottom:0}.sidebar-content{position:absolute;top:0;bottom:0;background-color:rgba(255,255,255,.95);overflow-x:hidden;overflow-y:auto}.sidebar-left .sidebar-content{left:40px;right:0}.sidebar-right .sidebar-content{left:0;right:40px}.sidebar.collapsed>.sidebar-content{overflow-y:hidden}.sidebar-pane{display:none;left:0;right:0;box-sizing:border-box;padding:10px 20px}.sidebar-pane.active{display:block}.sidebar-header{margin:-10px -20px 0;height:40px;padding:0 20px;line-height:40px;font-size:14.4pt;color:#fff;background-color:#0074d9}.sidebar-right .sidebar-header{padding-left:40px}.sidebar-close{position:absolute;top:0;width:40px;height:40px;text-align:center;cursor:pointer}.sidebar-left .sidebar-close{right:0}.sidebar-right .sidebar-close{left:0}.sidebar{background-color:rgba(255,255,255,.4)}.sidebar-tabs{overflow:hidden}.sidebar-left~.sidebar-map .ol-scale-line,.sidebar-left~.sidebar-map .ol-zoom{margin-left:46px}.sidebar-right~.sidebar-map .ol-attribution,.sidebar-right~.sidebar-map .ol-full-screen,.sidebar-right~.sidebar-map .ol-rotate{margin-right:46px}@media (min-width:768px) and (max-width:991px){.sidebar-left~.sidebar-map .ol-scale-line,.sidebar-left~.sidebar-map .ol-zoom{margin-left:317px}.sidebar-right~.sidebar-map .ol-attribution,.sidebar-right~.sidebar-map .ol-full-screen,.sidebar-right~.sidebar-map .ol-rotate{margin-right:317px}}@media (min-width:992px) and (max-width:1199px){.sidebar-pane{min-width:350px}.sidebar-left~.sidebar-map .ol-scale-line,.sidebar-left~.sidebar-map .ol-zoom{margin-left:402px}.sidebar-right~.sidebar-map .ol-attribution,.sidebar-right~.sidebar-map .ol-full-screen,.sidebar-right~.sidebar-map .ol-rotate{margin-right:402px}}@media (min-width:1200px){.sidebar-pane{min-width:420px}.sidebar-left~.sidebar-map .ol-scale-line,.sidebar-left~.sidebar-map .ol-zoom{margin-left:472px}.sidebar-right~.sidebar-map .ol-attribution,.sidebar-right~.sidebar-map .ol-full-screen,.sidebar-right~.sidebar-map .ol-rotate{margin-right:472px}}@media (min-width:768px){.sidebar-tabs{border-radius:2px 0 0 2px}.collapsed .sidebar-tabs{border-radius:2px}.sidebar-content{border-radius:0 2px 2px 0}.sidebar-left~.sidebar-map .ol-scale-line,.sidebar-left~.sidebar-map .ol-zoom{transition:margin-left .5s}.sidebar-left.collapsed~.sidebar-map .ol-scale-line,.sidebar-left.collapsed~.sidebar-map .ol-zoom{margin-left:52px}.sidebar-right~.sidebar-map .ol-attribution,.sidebar-right~.sidebar-map .ol-full-screen,.sidebar-right~.sidebar-map .ol-rotate{transition:margin-right .5s}.sidebar-right.collapsed~.sidebar-map .ol-attribution,.sidebar-right.collapsed~.sidebar-map .ol-full-screen,.sidebar-right.collapsed~.sidebar-map .ol-rotate{margin-right:52px}}
--------------------------------------------------------------------------------
/static/sidebar-v2/css/ol2-sidebar.min.css:
--------------------------------------------------------------------------------
1 | .sidebar{position:absolute;top:0;bottom:0;width:100%;overflow:hidden;z-index:2000}.sidebar.collapsed{width:40px}@media (min-width:768px) and (max-width:991px){.sidebar{width:305px}.sidebar-pane{min-width:265px}}@media (min-width:992px) and (max-width:1199px){.sidebar{width:390px}}@media (min-width:1200px){.sidebar{width:460px}}.sidebar-left{left:0;border-right:3px solid transparent}.sidebar-right{right:0;border-left:3px solid transparent}@media (min-width:768px){.sidebar{top:8px;bottom:8px;transition:width .5s;border:3px solid transparent;border-radius:4px}.sidebar-left{left:8px}.sidebar-right{right:8px}}.sidebar-tabs{top:0;bottom:0;height:100%;background-color:rgba(0,60,136,.5)}.sidebar-left .sidebar-tabs{left:0}.sidebar-right .sidebar-tabs{right:0}.sidebar-tabs,.sidebar-tabs>ul{position:absolute;width:40px;margin:0;padding:0;list-style-type:none}.sidebar-tabs>li,.sidebar-tabs>ul>li{width:100%;height:40px;color:#fff;font-size:12pt;overflow:hidden;transition:all 80ms}.sidebar-tabs>li:hover,.sidebar-tabs>ul>li:hover{color:#fff;background-color:rgba(0,60,136,.6)}.sidebar-tabs>li.active,.sidebar-tabs>ul>li.active{color:#fff;background-color:#0074d9}.sidebar-tabs>li.disabled,.sidebar-tabs>ul>li.disabled{color:rgba(255,255,255,.4)}.sidebar-tabs>li.disabled:hover,.sidebar-tabs>ul>li.disabled:hover{background:0 0}.sidebar-tabs>li.disabled>a,.sidebar-tabs>ul>li.disabled>a{cursor:default}.sidebar-tabs>li>a,.sidebar-tabs>ul>li>a{display:block;width:100%;height:100%;line-height:40px;color:inherit;text-decoration:none;text-align:center}.sidebar-tabs>ul+ul{bottom:0}.sidebar-content{position:absolute;top:0;bottom:0;background-color:rgba(255,255,255,.95);overflow-x:hidden;overflow-y:auto}.sidebar-left .sidebar-content{left:40px;right:0}.sidebar-right .sidebar-content{left:0;right:40px}.sidebar.collapsed>.sidebar-content{overflow-y:hidden}.sidebar-pane{display:none;left:0;right:0;box-sizing:border-box;padding:10px 20px}.sidebar-pane.active{display:block}.sidebar-header{margin:-10px -20px 0;height:40px;padding:0 20px;line-height:40px;font-size:14.4pt;color:#fff;background-color:#0074d9}.sidebar-right .sidebar-header{padding-left:40px}.sidebar-close{position:absolute;top:0;width:40px;height:40px;text-align:center;cursor:pointer}.sidebar-left .sidebar-close{right:0}.sidebar-right .sidebar-close{left:0}.sidebar{background-color:rgba(255,255,255,.4)}.sidebar-tabs{overflow:hidden}.sidebar-left~.sidebar-map .olControlZoom,.sidebar-left~.sidebar-map .olScaleLine{margin-left:46px}.sidebar-right~.sidebar-map .olControlAttribution,.sidebar-right~.sidebar-map .olControlMousePosition,.sidebar-right~.sidebar-map .olControlPermalink{margin-right:46px}@media (min-width:768px) and (max-width:991px){.sidebar-left~.sidebar-map .olControlZoom,.sidebar-left~.sidebar-map .olScaleLine{margin-left:319px}.sidebar-right~.sidebar-map .olControlAttribution,.sidebar-right~.sidebar-map .olControlMousePosition,.sidebar-right~.sidebar-map .olControlPermalink{margin-right:319px}}@media (min-width:992px) and (max-width:1199px){.sidebar-pane{min-width:350px}.sidebar-left~.sidebar-map .olControlZoom,.sidebar-left~.sidebar-map .olScaleLine{margin-left:404px}.sidebar-right~.sidebar-map .olControlAttribution,.sidebar-right~.sidebar-map .olControlMousePosition,.sidebar-right~.sidebar-map .olControlPermalink{margin-right:404px}}@media (min-width:1200px){.sidebar-pane{min-width:420px}.sidebar-left~.sidebar-map .olControlZoom,.sidebar-left~.sidebar-map .olScaleLine{margin-left:474px}.sidebar-right~.sidebar-map .olControlAttribution,.sidebar-right~.sidebar-map .olControlMousePosition,.sidebar-right~.sidebar-map .olControlPermalink{margin-right:474px}}@media (min-width:768px){.sidebar-tabs{border-radius:4px 0 0 4px}.collapsed .sidebar-tabs{border-radius:4px}.sidebar-content{border-radius:0 4px 4px 0}.sidebar-left~.sidebar-map .olControlZoom,.sidebar-left~.sidebar-map .olScaleLine{transition:margin-left .5s}.sidebar-left.collapsed~.sidebar-map .olControlZoom,.sidebar-left.collapsed~.sidebar-map .olScaleLine{margin-left:54px}.sidebar-right~.sidebar-map .olControlAttribution,.sidebar-right~.sidebar-map .olControlMousePosition,.sidebar-right~.sidebar-map .olControlPermalink{transition:margin-right .5s}.sidebar-right.collapsed~.sidebar-map .olControlAttribution,.sidebar-right.collapsed~.sidebar-map .olControlMousePosition,.sidebar-right.collapsed~.sidebar-map .olControlPermalink{margin-right:54px}}
--------------------------------------------------------------------------------
/static/sidebar-v2/js/ol3-sidebar.js:
--------------------------------------------------------------------------------
1 | ol.control.Sidebar = function (settings) {
2 |
3 | var defaults = {
4 | element: null,
5 | position: 'left'
6 | }, i, child;
7 |
8 | this._options = Object.assign({}, defaults, settings);
9 |
10 | ol.control.Control.call(this, {
11 | element: document.getElementById(this._options.element),
12 | target: this._options.target
13 | });
14 |
15 | // Attach .sidebar-left/right class
16 | this.element.classList.add('sidebar-' + this._options.position);
17 |
18 | // Find sidebar > div.sidebar-content
19 | for (i = this.element.children.length - 1; i >= 0; i--) {
20 | child = this.element.children[i];
21 | if (child.tagName === 'DIV' &&
22 | child.classList.contains('sidebar-content')) {
23 | this._container = child;
24 | }
25 | }
26 |
27 | // Find sidebar ul.sidebar-tabs > li, sidebar .sidebar-tabs > ul > li
28 | this._tabitems = this.element.querySelectorAll('ul.sidebar-tabs > li, .sidebar-tabs > ul > li');
29 | for (i = this._tabitems.length - 1; i >= 0; i--) {
30 | this._tabitems[i]._sidebar = this;
31 | }
32 |
33 | // Find sidebar > div.sidebar-content > div.sidebar-pane
34 | this._panes = [];
35 | this._closeButtons = [];
36 | for (i = this._container.children.length - 1; i >= 0; i--) {
37 | child = this._container.children[i];
38 | if (child.tagName == 'DIV' &&
39 | child.classList.contains('sidebar-pane')) {
40 | this._panes.push(child);
41 |
42 | var closeButtons = child.querySelectorAll('.sidebar-close');
43 | for (var j = 0, len = closeButtons.length; j < len; j++) {
44 | this._closeButtons.push(closeButtons[j]);
45 | }
46 | }
47 | }
48 | };
49 |
50 | ol.inherits(ol.control.Sidebar, ol.control.Control);
51 |
52 | ol.control.Sidebar.prototype.setMap = function(map) {
53 | var i, child;
54 |
55 | for (i = this._tabitems.length - 1; i >= 0; i--) {
56 | child = this._tabitems[i];
57 | var sub = child.querySelector('a');
58 | if (sub.hasAttribute('href') && sub.getAttribute('href').slice(0,1) == '#') {
59 | sub.onclick = this._onClick.bind(child);
60 | }
61 | }
62 |
63 | for (i = this._closeButtons.length - 1; i >= 0; i--) {
64 | child = this._closeButtons[i];
65 | child.onclick = this._onCloseClick.bind(this);
66 | }
67 | };
68 |
69 | ol.control.Sidebar.prototype.open = function(id) {
70 | var i, child;
71 |
72 | // hide old active contents and show new content
73 | for (i = this._panes.length - 1; i >= 0; i--) {
74 | child = this._panes[i];
75 | if (child.id == id)
76 | child.classList.add('active');
77 | else if (child.classList.contains('active'))
78 | child.classList.remove('active');
79 | }
80 |
81 | // remove old active highlights and set new highlight
82 | for (i = this._tabitems.length - 1; i >= 0; i--) {
83 | child = this._tabitems[i];
84 | if (child.querySelector('a').hash == '#' + id)
85 | child.classList.add('active');
86 | else if (child.classList.contains('active'))
87 | child.classList.remove('active');
88 | }
89 |
90 | // open sidebar (if necessary)
91 | if (this.element.classList.contains('collapsed')) {
92 | this.element.classList.remove('collapsed');
93 | }
94 |
95 | return this;
96 | };
97 |
98 | ol.control.Sidebar.prototype.close = function() {
99 | // remove old active highlights
100 | for (var i = this._tabitems.length - 1; i >= 0; i--) {
101 | var child = this._tabitems[i];
102 | if (child.classList.contains('active'))
103 | child.classList.remove('active');
104 | }
105 |
106 | // close sidebar
107 | if (!this.element.classList.contains('collapsed')) {
108 | this.element.classList.add('collapsed');
109 | }
110 |
111 | return this;
112 | };
113 |
114 | ol.control.Sidebar.prototype._onClick = function() {
115 | if (this.classList.contains('active')) {
116 | this._sidebar.close();
117 | } else if (!this.classList.contains('disabled')) {
118 | this._sidebar.open(this.querySelector('a').hash.slice(1));
119 | }
120 | };
121 |
122 | ol.control.Sidebar.prototype._onCloseClick = function() {
123 | this.close();
124 | };
125 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # PLA-Live-Map
2 | Flask application that displays live information on an interactive map for Pokemon Legends: Arceus.
3 | 
4 |
5 | ## PLA-Live-Map uses [sysbot-base](https://github.com/olliz0r/sys-botbase) to connect to the switch, and this must be installed on your console
6 |
7 | # How to run:
8 | 1. Install requirements ``pip install -r requirements.txt``
9 | 2. Copy-paste ``config.json.template`` and rename to ``config.json``
10 | 3. Edit the ``IP`` field to contain your switch's IP
11 | 4. Run main.py ``python3 ./main.py``
12 | 5. Open ``http://localhost:8080/`` in your browser
13 | 6. Select your current map
14 |
15 | # Troubleshooting
16 | - What does ``FileNotFoundError: [Errno 2] No such file or directory: 'config.json'`` mean?
17 | - This error means the script could not find your config file in the directory its being run, make sure youre running the script from cmd in the project's directory, and that you've actually renamed ``config.json.template`` to ``config.json``.
18 |
19 | - I'm getting ``ModuleNotFoundError: No module named 'requests'`` even though the pip install command runs fine!
20 | - Make sure that you do not have multiple python versions installed, and **DO NOT USE THE WINDOWS STORE PYTHON**. You can uninstall versions by searching "Uninstall" in your windows search bar and selecting "Add or remove program".
21 | - Windows tells me ``Python was not found; run without arguments to install form the Microsoft Store...`` but I thought we didnt want windows store python?
22 | - Windows does this whenever it cant detect an already installed version and you try to use python, you can disable this by typing "Manage app execution aliases" in your windows search bar and deselecting python and python3.
23 | - The script is telling me ``TimeoutError: timed out``, what does this mean?
24 | - This error is a general connection error, common causes include:
25 | - The ip in your config.json is not your switch's actual ip.
26 | - The switch is not connected to the same internet as your pc.
27 | - Your internet connection is failing.
28 | - When I click on a marker I get ``binascii.Error: Odd-length string``
29 | - This error means that sysbot-base gave the script bad data, the cause of this is typically trying to read from memory (this happens when you click on a marker) while its already doing an action. Do not click any markers until the script is done doing whatever action its doing (you can see the progress in the terminal/cmd).
30 | - If this happens once, it may cause sysbot-base to get stuck, to fix this you can restart the script and your console.
31 | - What does ``ConnectionAbortedError`` mean?
32 | - This error happens when something caused the connection to the switch to abruptly stop, make sure your switch and pc are still connected to the internet, and restart the script.
33 | - Nothing is advancing correctly! or Every marker has the same generator seed! or The near shiny button makes a marker green but its way past the limit I have set?
34 | - If you've gotten to this point it means that your pc can connect to your switch, and that sysbot-base is able to send information to your pc. The most common causes of these issues are another program running on the switch that accesses memory. Make sure to not have programs like Edizon or CaptureSight running while you are trying to rng (Edizon might be accessing memory by default if its installed, so it may be best to uninstall it.)
35 | - Also make sure you do not have a mass outbreak active on your map if you are trying to rng a non mass outbreak, this will cause the group ids to be shifted and things will not advance properly.
36 | - Lastly, make sure your game is on the **latest version (1.0.2)** as the pointers used are specific to this version.
37 |
38 | # Current features
39 | - Ability to read all active spawns with "Update Active Spawns" (Pokemon are displayed as a red pokeball)
40 | - Ability to track and display the players current position on the map with "Track Player Position"
41 | - Ability to teleport to any location on the map at the specified height on click with "Teleport"
42 | - Ability to teleport to specific markers on the map with "Teleport to marker id X" in the marker pop-up
43 | - Ability to read the spawner information and next shiny advance of known group ids and/or active pokemon
44 | - Ability to read the current map's mass outbreak information
45 | - Ability to read the pokemon that you are currently in battle with
46 |
47 | # Credits
48 | - berichan's [PLA Warper](https://github.com/berichan/PLAWarper) for the pointer to player location
49 | - Serebii's [Pokearth](https://www.serebii.net/pokearth/hisui/) for the map images
50 |
51 | # Licensed Software
52 | - PLA-Live-Map uses [sidebar-v2](https://github.com/Turbo87/sidebar-v2) which is licensed under the [MIT License](./static/sidebar-v2/LICENSE)
--------------------------------------------------------------------------------
/nxreader.py:
--------------------------------------------------------------------------------
1 | """Simplified class to read information from sys-botbase
2 | https://github.com/Lincoln-LM/PyNXReader"""
3 | import socket
4 | import binascii
5 | from time import sleep
6 |
7 | class NXReader:
8 | """Simplified class to read information from sys-botbase"""
9 | def __init__(self, ip_address = None, port = 6000):
10 | self.socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
11 | self.socket.settimeout(1)
12 | self.socket.connect((ip_address, port))
13 | print('Connected')
14 | self.ls_lastx = 0
15 | self.ls_lasty = 0
16 | self.rs_lastx = 0
17 | self.rs_lasty = 0
18 | self._configure()
19 |
20 | def _configure(self):
21 | self.send_command('configure echoCommands 0')
22 |
23 | def send_command(self,content):
24 | """Send a command to sys-botbase on the switch"""
25 | content += '\r\n' #important for the parser on the switch side
26 | self.socket.sendall(content.encode())
27 |
28 | def recv(self,size):
29 | """Receive response from sys-botbase"""
30 | return binascii.unhexlify(self.socket.recv(2 * size + 1)[0:-1])
31 |
32 | def close(self):
33 | """Close connection to switch"""
34 | print("Exiting...")
35 | self.pause(0.5)
36 | self.socket.shutdown(socket.SHUT_RDWR)
37 | self.socket.close()
38 | print('Disconnected')
39 |
40 | # A/B/X/Y/LSTICK/RSTICK/L/R/ZL/ZR/PLUS/MINUS/DLEFT/DUP/DDOWN/DRIGHT/HOME/CAPTURE
41 | def click(self,button):
42 | """Press and release button"""
43 | self.send_command('click '+ button)
44 |
45 | def press(self,button):
46 | """Press and hold button"""
47 | self.send_command('press '+ button)
48 |
49 | def release(self,button):
50 | """Release held button"""
51 | self.send_command('release '+ button)
52 |
53 | # setStick LEFT/RIGHT
75 | #poke
76 | def read(self,address,size,filename = None):
77 | """Read bytes from heap"""
78 | self.send_command(f'peek 0x{address:X} 0x{size:X}')
79 | sleep(size/0x8000)
80 | buf = self.recv(size)
81 | if filename is not None:
82 | if filename == '':
83 | filename = f'dump_heap_0x{address:X}_0x{size:X}.bin'
84 | with open(filename,'wb') as file_out:
85 | file_out.write(buf)
86 | return buf
87 |
88 | def read_int(self,address,size,filename = None):
89 | """Read integer from heap"""
90 | return int.from_bytes(self.read(address,size,filename),'little')
91 |
92 | def write(self,address,data):
93 | """Write data to heap"""
94 | self.send_command(f'poke 0x{address:X} 0x{data}')
95 |
96 | def read_main(self,address,size,filename = None):
97 | """Read bytes from main"""
98 | self.send_command(f'peekMain 0x{address:X} 0x{size:X}')
99 | sleep(size/0x8000)
100 | buf = self.recv(size)
101 | if filename is not None:
102 | if filename == '':
103 | filename = f'dump_heap_0x{address:X}_0x{size:X}.bin'
104 | with open(filename,'wb') as file_out:
105 | file_out.write(buf)
106 | return buf
107 |
108 | def read_main_int(self,address,size,filename = None):
109 | """Read integer from main"""
110 | return int.from_bytes(self.read_main(address,size,filename),'little')
111 |
112 | def write_main(self,address,data):
113 | """Write data to main"""
114 | self.send_command(f'pokeMain 0x{address:X} 0x{data}')
115 |
116 | def read_pointer(self,pointer,size,filename = None):
117 | """Read bytes from pointer"""
118 | jumps = pointer.replace("[","").replace("main","").split("]")
119 | command = f'pointerPeek 0x{size:X} 0x{" 0x".join(jump.replace("+","") for jump in jumps)}'
120 | self.send_command(command)
121 | sleep(size/0x8000)
122 | buf = self.recv(size)
123 | if filename is not None:
124 | if filename == '':
125 | filename = f'dump_heap_{pointer}_0x{size:X}.bin'
126 | with open(filename,'wb') as file_out:
127 | file_out.write(buf)
128 | return buf
129 |
130 | def read_pointer_int(self,pointer,size,filename = None):
131 | """Read integer from pointer"""
132 | return int.from_bytes(self.read_pointer(pointer,size,filename = filename),'little')
133 |
134 | def write_pointer(self,pointer,data):
135 | """Write data to pointer"""
136 | jumps = pointer.replace("[","").replace("main","").split("]")
137 | command = f'pointerPoke 0x{data} 0x{" 0x".join(jump.replace("+","") for jump in jumps)}'
138 | self.send_command(command)
139 |
140 | @staticmethod
141 | def pause(duration):
142 | """Pause connection to switch"""
143 | sleep(duration)
144 |
--------------------------------------------------------------------------------
/static/sidebar-v2/css/leaflet-sidebar.css:
--------------------------------------------------------------------------------
1 | .sidebar {
2 | position: absolute;
3 | top: 0;
4 | bottom: 0;
5 | width: 100%;
6 | overflow: hidden;
7 | z-index: 2000; }
8 | .sidebar.collapsed {
9 | width: 40px; }
10 | @media (min-width: 768px) {
11 | .sidebar {
12 | top: 10px;
13 | bottom: 10px;
14 | transition: width 500ms; } }
15 | @media (min-width: 768px) and (max-width: 991px) {
16 | .sidebar {
17 | width: 305px; } }
18 | @media (min-width: 992px) and (max-width: 1199px) {
19 | .sidebar {
20 | width: 390px; } }
21 | @media (min-width: 1200px) {
22 | .sidebar {
23 | width: 460px; } }
24 |
25 | .sidebar-left {
26 | left: 0; }
27 | @media (min-width: 768px) {
28 | .sidebar-left {
29 | left: 10px; } }
30 |
31 | .sidebar-right {
32 | right: 0; }
33 | @media (min-width: 768px) {
34 | .sidebar-right {
35 | right: 10px; } }
36 |
37 | .sidebar-tabs {
38 | top: 0;
39 | bottom: 0;
40 | height: 100%;
41 | background-color: #fff; }
42 | .sidebar-left .sidebar-tabs {
43 | left: 0; }
44 | .sidebar-right .sidebar-tabs {
45 | right: 0; }
46 | .sidebar-tabs, .sidebar-tabs > ul {
47 | position: absolute;
48 | width: 40px;
49 | margin: 0;
50 | padding: 0;
51 | list-style-type: none; }
52 | .sidebar-tabs > li, .sidebar-tabs > ul > li {
53 | width: 100%;
54 | height: 40px;
55 | color: #333;
56 | font-size: 12pt;
57 | overflow: hidden;
58 | transition: all 80ms; }
59 | .sidebar-tabs > li:hover, .sidebar-tabs > ul > li:hover {
60 | color: #000;
61 | background-color: #eee; }
62 | .sidebar-tabs > li.active, .sidebar-tabs > ul > li.active {
63 | color: #fff;
64 | background-color: #0074d9; }
65 | .sidebar-tabs > li.disabled, .sidebar-tabs > ul > li.disabled {
66 | color: rgba(51, 51, 51, 0.4); }
67 | .sidebar-tabs > li.disabled:hover, .sidebar-tabs > ul > li.disabled:hover {
68 | background: transparent; }
69 | .sidebar-tabs > li.disabled > a, .sidebar-tabs > ul > li.disabled > a {
70 | cursor: default; }
71 | .sidebar-tabs > li > a, .sidebar-tabs > ul > li > a {
72 | display: block;
73 | width: 100%;
74 | height: 100%;
75 | line-height: 40px;
76 | color: inherit;
77 | text-decoration: none;
78 | text-align: center; }
79 | .sidebar-tabs > ul + ul {
80 | bottom: 0; }
81 |
82 | .sidebar-content {
83 | position: absolute;
84 | top: 0;
85 | bottom: 0;
86 | background-color: rgba(255, 255, 255, 0.95);
87 | overflow-x: hidden;
88 | overflow-y: auto; }
89 | .sidebar-left .sidebar-content {
90 | left: 40px;
91 | right: 0; }
92 | .sidebar-right .sidebar-content {
93 | left: 0;
94 | right: 40px; }
95 | .sidebar.collapsed > .sidebar-content {
96 | overflow-y: hidden; }
97 |
98 | .sidebar-pane {
99 | display: none;
100 | left: 0;
101 | right: 0;
102 | box-sizing: border-box;
103 | padding: 10px 20px; }
104 | .sidebar-pane.active {
105 | display: block; }
106 | @media (min-width: 768px) and (max-width: 991px) {
107 | .sidebar-pane {
108 | min-width: 265px; } }
109 | @media (min-width: 992px) and (max-width: 1199px) {
110 | .sidebar-pane {
111 | min-width: 350px; } }
112 | @media (min-width: 1200px) {
113 | .sidebar-pane {
114 | min-width: 420px; } }
115 |
116 | .sidebar-header {
117 | margin: -10px -20px 0;
118 | height: 40px;
119 | padding: 0 20px;
120 | line-height: 40px;
121 | font-size: 14.4pt;
122 | color: #fff;
123 | background-color: #0074d9; }
124 | .sidebar-right .sidebar-header {
125 | padding-left: 40px; }
126 |
127 | .sidebar-close {
128 | position: absolute;
129 | top: 0;
130 | width: 40px;
131 | height: 40px;
132 | text-align: center;
133 | cursor: pointer; }
134 | .sidebar-left .sidebar-close {
135 | right: 0; }
136 | .sidebar-right .sidebar-close {
137 | left: 0; }
138 |
139 | .sidebar-left ~ .sidebar-map {
140 | margin-left: 40px; }
141 | @media (min-width: 768px) {
142 | .sidebar-left ~ .sidebar-map {
143 | margin-left: 0; } }
144 |
145 | .sidebar-right ~ .sidebar-map {
146 | margin-right: 40px; }
147 | @media (min-width: 768px) {
148 | .sidebar-right ~ .sidebar-map {
149 | margin-right: 0; } }
150 |
151 | .sidebar {
152 | box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65); }
153 | .sidebar.leaflet-touch {
154 | box-shadow: none;
155 | border-right: 2px solid rgba(0, 0, 0, 0.2); }
156 | @media (min-width: 768px) {
157 | .sidebar {
158 | border-radius: 4px; }
159 | .sidebar.leaflet-touch {
160 | border: 2px solid rgba(0, 0, 0, 0.2); } }
161 |
162 | @media (min-width: 768px) {
163 | .sidebar-left ~ .sidebar-map .leaflet-left {
164 | transition: left 500ms; } }
165 |
166 | @media (min-width: 768px) and (max-width: 991px) {
167 | .sidebar-left ~ .sidebar-map .leaflet-left {
168 | left: 315px; } }
169 |
170 | @media (min-width: 992px) and (max-width: 1199px) {
171 | .sidebar-left ~ .sidebar-map .leaflet-left {
172 | left: 400px; } }
173 |
174 | @media (min-width: 1200px) {
175 | .sidebar-left ~ .sidebar-map .leaflet-left {
176 | left: 470px; } }
177 |
178 | @media (min-width: 768px) {
179 | .sidebar-left.collapsed ~ .sidebar-map .leaflet-left {
180 | left: 50px; } }
181 |
182 | @media (min-width: 768px) {
183 | .sidebar-right ~ .sidebar-map .leaflet-right {
184 | transition: right 500ms; } }
185 |
186 | @media (min-width: 768px) and (max-width: 991px) {
187 | .sidebar-right ~ .sidebar-map .leaflet-right {
188 | right: 315px; } }
189 |
190 | @media (min-width: 992px) and (max-width: 1199px) {
191 | .sidebar-right ~ .sidebar-map .leaflet-right {
192 | right: 400px; } }
193 |
194 | @media (min-width: 1200px) {
195 | .sidebar-right ~ .sidebar-map .leaflet-right {
196 | right: 470px; } }
197 |
198 | @media (min-width: 768px) {
199 | .sidebar-right.collapsed ~ .sidebar-map .leaflet-right {
200 | right: 50px; } }
201 |
--------------------------------------------------------------------------------
/static/sidebar-v2/examples/gmaps.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | sidebar-v2 example
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 | sidebar-v2
50 |
51 |
52 |
53 |
A responsive sidebar for mapping libraries like Leaflet or OpenLayers.
54 |
55 |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
56 |
57 |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
58 |
59 |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
60 |
61 |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
A responsive sidebar for mapping libraries like Leaflet or OpenLayers.
55 |
56 |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
57 |
58 |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
59 |
60 |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
61 |
62 |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
A responsive sidebar for mapping libraries like Leaflet or OpenLayers.
56 |
57 |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
58 |
59 |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
60 |
61 |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
62 |
63 |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
A responsive sidebar for mapping libraries like Leaflet or OpenLayers.
56 |
57 |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
58 |
59 |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
60 |
61 |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
62 |
63 |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
A responsive sidebar for mapping libraries like Leaflet or OpenLayers.
56 |
57 |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
58 |
59 |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
60 |
61 |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
62 |
63 |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.