Skip to content

Commit d6bb876

Browse files
webb-benwebb-ben
authored
Update HTML templates (#39)
* Update pygeoapi.config.yml * Keep UI within brand guidelines * Update HTML link types * Fix graph URL
1 parent f3e4c7e commit d6bb876

File tree

7 files changed

+124
-125
lines changed

7 files changed

+124
-125
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ Any time a change is made to the resource in Hydroshare or to the pygeoapi confi
3636
- schema: https://schema.org/
3737
name_at_outlet: schema:name
3838
links:
39-
- type: application/html
39+
- type: text/html
4040
rel: canonical
4141
title: data source
4242
href: https://github.com/internetofwater/ref_rivers

‎pygeoapi-skin-dashboard/templates/collections/collection.html

Lines changed: 43 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -11,75 +11,70 @@
1111
{% endblock %}
1212

1313
{% block body %}
14+
<style>
15+
.browse-link {
16+
font-size: 1.2em;
17+
}
18+
</style>
1419
<section id="collection">
15-
<div class="row">
16-
<div class="col-sm">
17-
<h1>{{ data['title'] }}</h1>
18-
<p>{{ data['description'] }}</p>
19-
<p>
20-
{% for kw in data['keywords'] %}
21-
<span class="badge badge-info">{{ kw }}</span>
22-
{% endfor %}
23-
</p>
24-
</div>
25-
</div>
26-
27-
2820
<div class="row">
2921
<div class="col-md-6">
30-
<div class="card shadow mb-4">
31-
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
32-
<h6 class="m-0 font-weight-bold text-primary">
33-
Items coverage
34-
</h6>
35-
</div>
36-
<!-- Card Body -->
37-
<div>
38-
<div id="collection-map" style="height:300px"></div>
39-
</div>
22+
<div class="col-sm">
23+
<h1>{{ data['title'] }}</h1>
24+
<p>{{ data['description'] }}</p>
25+
<p>
26+
{% for kw in data['keywords'] %}
27+
<span class="badge badge-info">{{ kw }}</span>
28+
{% endfor %}
29+
</p>
4030
</div>
41-
</div>
42-
<div class="col-md-6">
43-
{% if data['itemType'] == 'feature' or data['itemType'] == 'record' %}
31+
{% if data['itemType'] == 'feature' or data['itemType'] == 'record' %}
4432
<h3>Browse</h3>
4533
<ul>
4634
<li>
4735
<div>
48-
<a title="Browse Items" href="{{ config['server']['url'] }}/collections/{{ data['id'] }}/items">
49-
Browse through the items of "{{ data['title'] }}"</a></div>
36+
<a title="Browse Items" class="browse-link"
37+
href="{{ config['server']['url'] }}/collections/{{ data['id'] }}/items">
38+
Browse through the items of {{ data['title'] }}</a>
39+
</div>
5040
</li>
5141
</ul>
52-
<h3>Queryables</h3>
42+
{% for provider in config['resources'][data['id']]['providers'] %}
43+
{% if 'tile' in provider['type'] %}
44+
<h3>{% trans %}Tiles{% endtrans %}</h3>
5345
<ul>
5446
<li>
5547
<div>
56-
<a title="Display Queryables" href="{{ config['server']['url'] }}/collections/{{ data['id'] }}/queryables">
57-
Display Queryables of "{{ data['title'] }}"</a></div>
48+
<a title="{% trans %}Display Tiles{% endtrans %}" class="browse-link"
49+
href="{{ data['collections_path'] }}/{{ data['id'] }}/tiles">
50+
{% trans %}Display Tiles of{% endtrans %} {{ data['title'] }}</a>
51+
</div>
5852
</li>
5953
</ul>
54+
{% endif %}
55+
{% endfor %}
56+
{% endif %}
6057
<h3>Links</h3>
6158
<ul>
6259
{% for link in data['links'] %}
60+
{% if link['type'] == 'text/html' and link['rel'] != 'self' %}
6361
<li>
64-
<a title="{{ link['rel'] }}" href="{{ link['href'] }}">
62+
<a title="{{ link['rel'] }}" class="browse-link" href="{{ link['href'] }}">
6563
<span>{{ link['title'] }}</span> (<span>{{ link['type'] }}</span>)
66-
</a></li>
64+
</a>
65+
</li>
66+
{% endif %}
6767
{% endfor %}
6868
</ul>
69-
{% for provider in config['resources'][data['id']]['providers'] %}
70-
{% if 'tile' in provider['type'] %}
71-
<h3>Tiles</h3>
72-
<ul>
73-
<li>
69+
</div>
70+
<div class="col-md-6">
71+
<div class="card shadow mb-4">
72+
<!-- Card Body -->
7473
<div>
75-
<a title="Display Tiles" href="{{ config['server']['url'] }}/collections/{{ data['id'] }}/tiles">Display Tiles of "{{ data['title'] }}"</a>
74+
<div id="collection-map" style="height: 500px"></div>
7675
</div>
77-
</li>
78-
</ul>
79-
{% endif %}
80-
{% endfor %}
81-
{% endif %}
82-
</div>
76+
</div>
77+
</div>
8378
</div>
8479
</section>
8580
{% endblock %}
@@ -99,7 +94,9 @@ <h3>Tiles</h3>
9994
['{{ data['extent']['spatial']['bbox'][0][3] }}', '{{ data['extent']['spatial']['bbox'][0][0] }}'],
10095
['{{ data['extent']['spatial']['bbox'][0][3] }}', '{{ data['extent']['spatial']['bbox'][0][2] }}'],
10196
['{{ data['extent']['spatial']['bbox'][0][1] }}', '{{ data['extent']['spatial']['bbox'][0][2] }}']
102-
]);
97+
], {
98+
color: "#1B335F"
99+
});
103100

104101
map.addLayer(bbox_layer);
105102
map.fitBounds(bbox_layer.getBounds(), {maxZoom: 10});

‎pygeoapi-skin-dashboard/templates/collections/items/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,11 @@ <h6 class="m-0 font-weight-bold text-primary">
171171
var geojson_data = {{ data['features'] | to_json | safe }};
172172

173173
var items = new L.GeoJSON(geojson_data, {
174+
style: function (feature) {
175+
return {
176+
color: "#1B335F"
177+
};
178+
},
174179
onEachFeature: function (feature, layer) {
175180
{% if data.get('uri_field') -%}
176181
var url = feature['properties']['{{ data['uri_field'] }}'];
@@ -179,6 +184,17 @@ <h6 class="m-0 font-weight-bold text-primary">
179184
{%- endif %}
180185
var html = '<span><a href="' + url + '">' + {% if data['title_field'] %} feature['properties']['{{ data['title_field'] }}'] {% else %} feature.id {% endif %} + '</a></span>';
181186
layer.bindPopup(html);
187+
layer.on('click', function (e) {
188+
items.eachLayer(function (l) {
189+
items.resetStyle(l);
190+
});
191+
layer.setStyle({
192+
weight: e.target.options.weight * 2,
193+
color: '#E6000B',
194+
fillColor: '#E6000B',
195+
});
196+
layer.bringToFront();
197+
});
182198
}
183199
});
184200
{% if data['features'][0]['geometry']['type'] == 'Point' %}

‎pygeoapi-skin-dashboard/templates/collections/items/item.html

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,13 @@ <h2 class="mx-auto">Graph Results</h2>
167167
}
168168
));
169169
var geojson_data = {{ data | to_json | safe }};
170-
var items = new L.GeoJSON(geojson_data);
170+
var items = new L.GeoJSON(geojson_data, {
171+
style: function (feature) {
172+
return {
173+
color: "#1B335F"
174+
};
175+
},
176+
});
171177

172178
map.addLayer(items);
173179
map.fitBounds(items.getBounds(), {maxZoom: 10});

‎pygeoapi-skin-dashboard/templates/collections/tiles/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ <h3>Tiles</h3>
139139
clearHighlight();
140140
highlight = e.layer.properties.id || e.layer.properties.fid || e.layer.properties.uri;
141141
tilesPbfLayer.setFeatureStyle(highlight, {
142-
weight: e.layer.options.weight + 3,
142+
weight: 2 + e.layer.options.weight * 2,
143143
color: '#E6000B',
144144
opacity: 1,
145145
fillColor: '#E6000B',

‎pygeoapi-skin-dashboard/templates/landing_page.html

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,23 @@ <h1>{{ config['metadata']['identification']['title'] }}</h1>
1111
<mark class="badge badge-info">{{ kw }}</mark>
1212
{% endfor %}
1313
</p>
14+
<div class="row">
15+
<div class="col-md-6">
1416
{% if data['collection'] %}
1517
<section id="collections">
1618
<h2>{% trans %}Collections{% endtrans %}</h2>
1719
<p>
18-
<a href="{{ config['server']['url'] }}/collections?f=html">{% trans %}View the collections in this service{% endtrans %}</a>
20+
<a class="browse-link" href="{{ config['server']['url'] }}/collections?f=html">
21+
{% trans %}View the collections in this service{% endtrans %}</a>
1922
</p>
2023
</section>
2124
{% endif %}
2225
{% if data['stac'] %}
2326
<section id="collections">
2427
<h2>{% trans %}Sitemap{% endtrans %}</h2>
2528
<p>
26-
<a href="{{ config['server']['url'] }}/stac/sitemap?f=html">{% trans %}View the Geoconnex sitemap{% endtrans %}</a>
29+
<a class="browse-link" href="{{ config['server']['url'] }}/stac/sitemap?f=html">
30+
{% trans %}View the Geoconnex sitemap{% endtrans %}</a>
2731
</p>
2832
</section>
2933
{% endif %}
@@ -35,6 +39,8 @@ <h2>{% trans %}Processes{% endtrans %}</h2>
3539
</p>
3640
</section>
3741
{% endif %}
42+
</div>
43+
<div class="col-md-6">
3844
<section id="documentation">
3945
<h2>{% trans %}Documentation{% endtrans %}</h2>
4046
<p>
@@ -47,7 +53,13 @@ <h2>{% trans %}Documentation{% endtrans %}</h2>
4753
<a href="{{ config['server']['url'] }}/openapi?f=json">{% trans %}OpenAPI Document{% endtrans %}</a>
4854
</p>
4955
</section>
50-
56+
</div>
57+
</div>
5158
</div>
5259
</div>
60+
<style>
61+
.browse-link {
62+
font-size: 1.2em;
63+
}
64+
</style>
5365
{% endblock %}

0 commit comments

Comments
 (0)