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

Aangepaste popup voor online bibs

Browse source
This commit is contained in:
7734485917411998476 2021-05-10 20:24:47 +02:00 committed by GitHub
parent 9ee63912d6
commit 4690583c57
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/index.html
View file

@ -36,15 +36,17 @@
<h3>{{name}} ({{capacity}} pl.)</h3> <h3>{{name}} ({{capacity}} pl.)</h3>
{{#if wheelchair}}<img src="img/Wheelchair_symbol.svg" class="wheelchair" style="width:30px;height:30px;">{{/if}} {{#if wheelchair}}<img src="img/Wheelchair_symbol.svg" class="wheelchair" style="width:30px;height:30px;">{{/if}}
{{#if wifi}}<img src="img/Logo_WiFi.svg" class="wifi" style="width:40px;height:20px;">{{/if}} {{#if wifi}}<img src="img/Logo_WiFi.svg" class="wifi" style="width:40px;height:20px;">{{/if}}
{{#if online}}<img src="img/Online.png" class="wifi" style="width:50px;height:50px;">{{/if}}
<img src="img/{{type}}.png" class="type"> <img src="img/{{type}}.png" class="type">
<div class="location">Locatie: {{address}}</div> <div class="location">{{#if online}}Link: <a href={{address}}>{{address}}</a>{{else}}Locatie: {{address}}{{/if}}</div>
{{#if online}}
{{else}}
<div class="period">{{#if period.start}} <div class="period">{{#if period.start}}
Periode: {{date period.start}} tot {{date period.end}} Periode: {{date period.start}} tot {{date period.end}}
{{else}} {{else}}
Open gedurende het hele jaar. Open gedurende het hele jaar.
{{/if}} {{/if}}
</div> </div>
<h4>Openingsuren</h4>
<table class="desktop"> <table class="desktop">
<tr> <tr>
<td>Maandag</td> <td>Maandag</td>
@ -64,6 +66,9 @@
<td>{{#if hours.sunday}}{{hours.sunday}}{{else}}Gesloten{{/if}}</td> <td>{{#if hours.sunday}}{{hours.sunday}}{{else}}Gesloten{{/if}}</td>
</tr> </tr>
</table> </table>
<h4>Openingsuren</h4>
<table class="mobile"> <table class="mobile">
<tr> <tr>
<td>Maandag</td> <td>Maandag</td>
@ -88,8 +93,10 @@
<td>{{#if hours.sunday}}{{hours.sunday}}{{else}}Gesloten{{/if}}</td> <td>{{#if hours.sunday}}{{hours.sunday}}{{else}}Gesloten{{/if}}</td>
</tr> </tr>
</table> </table>
{{/if}}
{{#if extra}}{{{extra}}}{{/if}} {{#if extra}}{{{extra}}}{{/if}}
</div> </div>
</script> </script>
<script id="info-template" type="text/x-handlebars-template"> <script id="info-template" type="text/x-handlebars-template">
@ -112,11 +119,15 @@
</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: 29px;">Enkel week</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(120,120,120); margin-top: 1px; margin-left: 5px;"></div> <div style="height: 10px; width: 10px; background: rgb(120,120,120); margin-top: 1px; margin-left: 5px;"></div>
<span style="position: absolute; left: 25px; top: 55px;">Opent binnenkort</span> <span style="position: absolute; left: 25px; top: 53px;">Opent binnenkort</span>
</div>
<div style="width: 125px; height: 18px; padding-top: 5px; padding-left: 5px;">
<div style="height: 10px; width: 10px; background: rgb(124,252,120); margin-top: 1px; margin-left: 5px;"></div>
<span style="position: absolute; left: 25px; top: 77px;">Online</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>