midgard/blokmap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Consistent indentation please

Browse source
This commit is contained in:
Midgard 2020-05-20 17:00:25 +02:00
parent fb377030ef
commit 43fdcf0c87
Signed by: midgard
GPG key ID: 511C112F1331BBB4
4 changed files with 122 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
.editorconfig Normal file
View file

@ -0,0 +1,13 @@
# https://editorconfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 4
[*.html]
indent_size = 2

44
src/css/map.css
View file

@ -1,28 +1,28 @@
html, body { html, body {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#map { #map {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.leaflet-popup-content-wrapper, .leaflet-popup-content-wrapper,
.leaflet-control-zoom { .leaflet-control-zoom {
border-radius: 0px; border-radius: 0px;
} }
.leaflet-popup-content-wrapper { .leaflet-popup-content-wrapper {
width: 600px; width: 600px;
max-height: 400px; max-height: 400px;
overflow-y:auto overflow-y: auto;
} }
.leaflet-popup-content { .leaflet-popup-content {
width:auto !important; width: auto !important;
} }
a img { a img {
@ -48,8 +48,8 @@ table {
} }
.mobile tr td:first-child { .mobile tr td:first-child {
padding: 0; padding: 0;
padding-right: 10px; padding-right: 10px;
} }
.mobile tr:nth-child(2n) { .mobile tr:nth-child(2n) {
@ -69,21 +69,21 @@ table {
} }
.legend { .legend {
height: 52px; height: 52px;
width: 130px; width: 130px;
background-color: #fff; background-color: #fff;
box-shadow: 0 1px 5px rgba(0,0,0,0.65); box-shadow: 0 1px 5px rgba(0,0,0,0.65);
} }
.holiday-legend { .holiday-legend {
height: 72px; height: 72px;
width: 145px; width: 145px;
background-color: #fff; background-color: #fff;
box-shadow: 0 1px 5px rgba(0,0,0,0.65); box-shadow: 0 1px 5px rgba(0,0,0,0.65);
} }
.legend .holiday { .legend .holiday {
display: none; display: none;
} }
.type { .type {

116
src/index.html
View file

@ -1,11 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="nl">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Bloklocaties in Vlaanderen</title> <title>Bloklocaties in Vlaanderen</title>
<meta name="apple-itunes-app" content="app-id=602640924"> <meta name="apple-itunes-app" content="app-id=602640924">
<meta name="google-play-app" content="app-id=be.ugent.zeus.hydra"> <meta name="google-play-app" content="app-id=be.ugent.zeus.hydra">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta property="og:site_name" content="Zeus WPI"> <meta property="og:site_name" content="Zeus WPI">
<meta property="og:type" content="article"> <meta property="og:type" content="article">
@ -30,65 +30,60 @@
</head> </head>
<body> <body>
<div id="map"></div> <div id="map"></div>
<script id="popup-template" type="text/x-handlebars-template"> <script id="popup-template" type="text/x-handlebars-template">
<div id="resto-popup"> <div id="resto-popup">
<h3>{{name}} ({{capacity}} pl.)</h3> <h3>{{name}} ({{capacity}} pl.)</h3>
<img src="img/{{type}}.png" class="type"> <img src="img/{{type}}.png" class="type">
<div class="text">Locatie: {{address}}<br /> <div class="text">Locatie: {{address}}<br />
{{#if period.start}} {{#if period.start}}
Van {{period.start}} tot {{period.end}} Van {{period.start}} tot {{period.end}}
{{else}} {{else}}
Open gedurende het hele jaar. Open gedurende het hele jaar.
{{/if}} {{/if}}
</div> </div>
<h4>Openingsuren</h4> <h4>Openingsuren</h4>
<table class="desktop"> <table class="desktop">
<tr> <tr>
<td>Maandag</td> <td>Maandag</td>
<td>Dinsdag</td> <td>Dinsdag</td>
<td>Woensdag</td> <td>Woensdag</td>
<td>Donderdag</td> <td>Donderdag</td>
<td>Vrijdag</td> <td>Vrijdag</td>
<td>Zaterdag</td> <td>Zaterdag</td>
<td>Zondag</td> <td>Zondag</td>
</tr> </tr><tr>
<tr> <td>{{#if hours.monday}}{{{hours.monday}}}{{else}}Gesloten{{/if}}</td>
<td>{{#if hours.monday}}{{{hours.monday}}}{{else}}Gesloten{{/if}}</td> <td>{{#if hours.tuesday}}{{{hours.tuesday}}}{{else}}Gesloten{{/if}}</td>
<td>{{#if hours.tuesday}}{{{hours.tuesday}}}{{else}}Gesloten{{/if}}</td> <td>{{#if hours.wednesday}}{{{hours.wednesday}}}{{else}}Gesloten{{/if}}</td>
<td>{{#if hours.wednesday}}{{{hours.wednesday}}}{{else}}Gesloten{{/if}}</td> <td>{{#if hours.thursday}}{{{hours.thursday}}}{{else}}Gesloten{{/if}}</td>
<td>{{#if hours.thursday}}{{{hours.thursday}}}{{else}}Gesloten{{/if}}</td> <td>{{#if hours.friday}}{{{hours.friday}}}{{else}}Gesloten{{/if}}</td>
<td>{{#if hours.friday}}{{{hours.friday}}}{{else}}Gesloten{{/if}}</td> <td>{{#if hours.saturday}}{{{hours.saturday}}}{{else}}Gesloten{{/if}}</td>
<td>{{#if hours.saturday}}{{{hours.saturday}}}{{else}}Gesloten{{/if}}</td> <td>{{#if hours.sunday}}{{{hours.sunday}}}{{else}}Gesloten{{/if}}</td>
<td>{{#if hours.sunday}}{{{hours.sunday}}}{{else}}Gesloten{{/if}}</td> </tr>
</tr>
</table> </table>
<table class="mobile"> <table class="mobile">
<tr> <tr>
<td>Maandag</td> <td>Maandag</td>
<td>{{#if hours.monday}}{{{hours.monday}}}{{else}}Gesloten{{/if}}</td> <td>{{#if hours.monday}}{{{hours.monday}}}{{else}}Gesloten{{/if}}</td>
</tr>
<tr>
<td>Dinsdag</td>
<td>{{#if hours.tuesday}}{{{hours.tuesday}}}{{else}}Gesloten{{/if}}</td>
</tr>
<tr>
<td>Woensdag</td>
<td>{{#if hours.wednesday}}{{{hours.wednesday}}}{{else}}Gesloten{{/if}}</td>
</tr>
<tr>
<td>Donderdag</td>
<td>{{#if hours.thursday}}{{{hours.thursday}}}{{else}}Gesloten{{/if}}</td>
</tr><tr> </tr><tr>
<td>Vrijdag</td> <td>Dinsdag</td>
<td>{{#if hours.friday}}{{{hours.friday}}}{{else}}Gesloten{{/if}}</td> <td>{{#if hours.tuesday}}{{{hours.tuesday}}}{{else}}Gesloten{{/if}}</td>
</tr> </tr><tr>
<tr> <td>Woensdag</td>
<td>Zaterdag</td> <td>{{#if hours.wednesday}}{{{hours.wednesday}}}{{else}}Gesloten{{/if}}</td>
<td>{{#if hours.saturday}}{{{hours.saturday}}}{{else}}Gesloten{{/if}}</td> </tr><tr>
</tr> <td>Donderdag</td>
<tr> <td>{{#if hours.thursday}}{{{hours.thursday}}}{{else}}Gesloten{{/if}}</td>
<td>Zondag</td> </tr><tr>
<td>{{#if hours.sunday}}{{{hours.sunday}}}{{else}}Gesloten{{/if}}</td> <td>Vrijdag</td>
<td>{{#if hours.friday}}{{{hours.friday}}}{{else}}Gesloten{{/if}}</td>
</tr><tr>
<td>Zaterdag</td>
<td>{{#if hours.saturday}}{{{hours.saturday}}}{{else}}Gesloten{{/if}}</td>
</tr><tr>
<td>Zondag</td>
<td>{{#if hours.sunday}}{{{hours.sunday}}}{{else}}Gesloten{{/if}}</td>
</tr> </tr>
</table> </table>
{{#if extra}}{{{extra}}}{{/if}} {{#if extra}}{{{extra}}}{{/if}}
@ -103,18 +98,18 @@
</script> </script>
<script id="legend-template" type="text/x-handlebars-template"> <script id="legend-template" type="text/x-handlebars-template">
<div style="padding-top: 5px;"> <div style="padding-top: 5px;">
<div style="width: 125px; height: 18px; padding-top: 5px; padding-left: 5px;"> <div style="width: 125px; height: 18px; padding-top: 5px; padding-left: 5px;">
<div style="height: 10px; width: 10px; background: rgb(209,39,35); margin-top: -1px; margin-left: 5px;"></div> <div style="height: 10px; width: 10px; background: rgb(209,39,35); margin-top: -1px; margin-left: 5px;"></div>
<span style="position: absolute; left: 25px; top: 5px;">Week en weekend</span> <span style="position: absolute; left: 25px; top: 5px;">Week en weekend</span>
</div> </div>
<div style="width: 125px; height: 18px; padding-top: 5px; padding-left: 5px;"> <div style="width: 125px; height: 18px; padding-top: 5px; padding-left: 5px;">
<div style="height: 10px; width: 10px; background: rgb(36, 126, 202); margin-top: 1px; margin-left: 5px;"></div> <div style="height: 10px; width: 10px; background: rgb(36, 126, 202); margin-top: 1px; margin-left: 5px;"></div>
<span style="position: absolute; left: 25px; top: 30px;">Enkel week</span> <span style="position: absolute; left: 25px; top: 30px;">Enkel week</span>
</div> </div>
<div style="width: 140px; height: 18px; padding-top: 5px; padding-left: 5px;" class="holiday"> <div style="width: 140px; height: 18px; padding-top: 5px; padding-left: 5px;" class="holiday">
<div style="height: 10px; width: 10px; background: rgb(121, 230, 121); margin-top: 0px; margin-left: 5px;"></div> <div style="height: 10px; width: 10px; background: rgb(121, 230, 121); margin-top: 0px; margin-left: 5px;"></div>
<span style="position: absolute; left: 25px; top: 53px;">Tijdens kerstvakantie</span> <span style="position: absolute; left: 25px; top: 53px;">Tijdens kerstvakantie</span>
</div> </div>
</div> </div>
</script> </script>
@ -129,14 +124,13 @@
}(document, 'script', 'facebook-jssdk'));</script> }(document, 'script', 'facebook-jssdk'));</script>
<!-- Google Analytics SDK --> <!-- Google Analytics SDK -->
<script> <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-25444917-8', 'auto');
ga('send', 'pageview');
ga('create', 'UA-25444917-8', 'auto');
ga('send', 'pageview');
</script> </script>
</body> </body>
</html> </html>

64
src/js/map.js
View file

@ -72,90 +72,90 @@ $(document).ready(function() {
// code copied from http://jsfiddle.net/sowelie/3JbNY/ // code copied from http://jsfiddle.net/sowelie/3JbNY/
var HoverMarker = L.Marker.extend({ var HoverMarker = L.Marker.extend({
bindPopup: function(htmlContent, options) { bindPopup: function(htmlContent, options) {
if (options && options.showOnMouseOver) { if (options && options.showOnMouseOver) {
// call the super method // call the super method
L.Marker.prototype.bindPopup.apply(this, [htmlContent, options]); L.Marker.prototype.bindPopup.apply(this, [htmlContent, options]);
// unbind the click event // unbind the click event
this.off("click", this.openPopup, this); this.off("click", this.openPopup, this);
// bind to mouse over // bind to mouse over
this.on("mouseover", function(e) { this.on("mouseover", function(e) {
// get the element that the mouse hovered onto // get the element that the mouse hovered onto
var target = e.originalEvent.fromElement || e.originalEvent.relatedTarget; var target = e.originalEvent.fromElement || e.originalEvent.relatedTarget;
var parent = this._getParent(target, "leaflet-popup"); var parent = this._getParent(target, "leaflet-popup");
// check to see if the element is a popup, and if it is this marker's popup // check to see if the element is a popup, and if it is this marker's popup
if (parent == this._popup._container) if (parent == this._popup._container)
return true; return true;
// show the popup // show the popup
this.openPopup(); this.openPopup();
}, this); }, this);
// and mouse out // and mouse out
this.on("mouseout", function(e) { this.on("mouseout", function(e) {
// get the element that the mouse hovered onto // get the element that the mouse hovered onto
var target = e.originalEvent.toElement || e.originalEvent.relatedTarget; var target = e.originalEvent.toElement || e.originalEvent.relatedTarget;
// check to see if the element is a popup // check to see if the element is a popup
if (this._getParent(target, "leaflet-popup")) { if (this._getParent(target, "leaflet-popup")) {
L.DomEvent.on(this._popup._container, "mouseout", this._popupMouseOut, this); L.DomEvent.on(this._popup._container, "mouseout", this._popupMouseOut, this);
return true; return true;
} }
// hide the popup // hide the popup
this.closePopup(); this.closePopup();
}, this); }, this);
} }
}, },
_popupMouseOut: function(e) { _popupMouseOut: function(e) {
// detach the event // detach the event
L.DomEvent.off(this._popup, "mouseout", this._popupMouseOut, this); L.DomEvent.off(this._popup, "mouseout", this._popupMouseOut, this);
// get the element that the mouse hovered onto // get the element that the mouse hovered onto
var target = e.toElement || e.relatedTarget; var target = e.toElement || e.relatedTarget;
// check to see if the element is a popup // check to see if the element is a popup
if (this._getParent(target, "leaflet-popup")) if (this._getParent(target, "leaflet-popup"))
return true; return true;
// check to see if the marker was hovered back onto // check to see if the marker was hovered back onto
if (target == this._icon) if (target == this._icon)
return true; return true;
// hide the popup // hide the popup
this.closePopup(); this.closePopup();
}, },
_getParent: function(element, className) { _getParent: function(element, className) {
var parent = element.parentNode; var parent = element.parentNode;
while (parent != null) { while (parent != null) {
if (parent.className && L.DomUtil.hasClass(parent, className)) if (parent.className && L.DomUtil.hasClass(parent, className))
return parent; return parent;
parent = parent.parentNode; parent = parent.parentNode;
} }
return false; return false;
} }
}); });