Fabio/tileserver-gl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix: clean up styling, use data attrs

Browse source 
Signed-off-by: Martijn van Exel <m@rtijn.org>
This commit is contained in:
Martijn van Exel 2024-08-02 09:45:51 -06:00
parent 634fdcca7b
commit 9815e76433
2 changed files with 15 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
public/resources/index.css
View file

@ -90,6 +90,12 @@ section {
border: 1px solid #ededed; border: 1px solid #ededed;
border-top: none; border-top: none;
} }
.filter-item {
background: #fbfbfb;
height: 150px;
border: 1px solid #ededed;
border-top: none;
}
.item:nth-child(odd) { .item:nth-child(odd) {
background-color: #fbfbfb; background-color: #fbfbfb;
} }

20
public/templates/index.tmpl
View file

@ -18,12 +18,10 @@
var filter = document.getElementById('filter').value.toLowerCase(); var filter = document.getElementById('filter').value.toLowerCase();
var items = document.getElementsByClassName('item'); var items = document.getElementsByClassName('item');
for (var i = 0; i < items.length; i++) { for (var i = 0; i < items.length; i++) {
var item = items[i]; var item = items[i];
var details = item.getElementsByClassName('details')[0]; var dataName = item.getAttribute('data-name')?.toLowerCase() ?? '';
if(!details) continue; var dataIdentifier = item.getAttribute('data-id')?.toLowerCase() ?? '';
var name = details.getElementsByTagName('h3')[0].textContent.toLowerCase(); item.hidden = !(dataName.indexOf(filter) > -1 || dataIdentifier.indexOf(filter) > -1);
var identifier = details.getElementsByClassName('identifier')[0].textContent.toLowerCase().replace(/^identifier: /, '');
item.hidden = !(name.indexOf(filter) > -1 || identifier.indexOf(filter) > -1);
} }
} }
</script> </script>
@ -35,11 +33,11 @@
<h2 class="box-header">Filter</h2> <h2 class="box-header">Filter</h2>
<!-- filter box --> <!-- filter box -->
<div class="box"> <div class="box">
<div class="item"> <div class="filter-item">
<div class="filter-details"> <div class="filter-details">
<h3>Filter styles and data by name or identifier.</h3> <h3>Filter styles and data by name or identifier</h3>
<!-- filter input , needs to call filter() when content changes...--> <!-- filter input , needs to call filter() when content changes...-->
<input id="filter" type="text" oninput="filter()" placeholder="Filter by name or identifier" /> <input id="filter" type="text" oninput="filter()" placeholder="Start typing name or identifier" />
</div> </div>
</div> </div>
</div> </div>
@ -47,7 +45,7 @@
<h2 class="box-header">Styles</h2> <h2 class="box-header">Styles</h2>
<div class="box"> <div class="box">
{{#each styles}} {{#each styles}}
<div class="item"> <div class="item" data-id="{{@key}}" data-name="{{name}}">
{{#if thumbnail}} {{#if thumbnail}}
<img src="{{public_url}}styles/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" /> <img src="{{public_url}}styles/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
{{else}} {{else}}
@ -94,7 +92,7 @@
<h2 class="box-header">Data</h2> <h2 class="box-header">Data</h2>
<div class="box"> <div class="box">
{{#each data}} {{#each data}}
<div class="item"> <div class="item" data-id="{{@key}}" data-name="{{tileJSON.name}}">
{{#if thumbnail}} {{#if thumbnail}}
<img src="{{public_url}}data/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" /> <img src="{{public_url}}data/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
{{else}} {{else}}