midgard/blokmap
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases 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

47
src/index.html
View file

@ -36,16 +36,18 @@
<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>
<div class="period">{{#if period.start}} {{#if online}}
Periode: {{date period.start}} tot {{date period.end}} {{else}}
{{else}} <div class="period">{{#if period.start}}
Open gedurende het hele jaar. Periode: {{date period.start}} tot {{date period.end}}
{{/if}} {{else}}
Open gedurende het hele jaar.
{{/if}}
</div> </div>
<h4>Openingsuren</h4> <table class="desktop">
<table class="desktop">
<tr> <tr>
<td>Maandag</td> <td>Maandag</td>
<td>Dinsdag</td> <td>Dinsdag</td>
@ -55,15 +57,18 @@
<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>
<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>