Merge pull request #92 from pvgenuchten/basic-layout
introduce mini.css
This commit is contained in:
Tom Kralidis
+12
-1
@@ -433,7 +433,7 @@ class API(object):
|
||||
self.config['server']['url'], dataset, next_)
|
||||
}, {
|
||||
'type': 'application/json',
|
||||
'title': 'Collection',
|
||||
'title': self.config['datasets'][dataset]['title'],
|
||||
'rel': 'collection',
|
||||
'href': '{}/collections/{}'.format(
|
||||
self.config['server']['url'], dataset)
|
||||
@@ -525,8 +525,19 @@ class API(object):
|
||||
}, {
|
||||
'rel': 'collection',
|
||||
'type': 'application/json',
|
||||
'title': self.config['datasets'][dataset]['title'],
|
||||
'href': '{}/collections/{}'.format(
|
||||
self.config['server']['url'], dataset)
|
||||
}, {
|
||||
'rel': 'prev',
|
||||
'type': 'application/json',
|
||||
'href': '{}/collections/{}/items/{}'.format(
|
||||
self.config['server']['url'], dataset, identifier)
|
||||
}, {
|
||||
'rel': 'next',
|
||||
'type': 'application/json',
|
||||
'href': '{}/collections/{}/items/{}'.format(
|
||||
self.config['server']['url'], dataset, identifier)
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
@@ -1,39 +1,24 @@
|
||||
body {
|
||||
background-color: #ffffff;
|
||||
font-family: arial, verdana, sans-serif;
|
||||
text-align: left;
|
||||
float: left;
|
||||
}
|
||||
.flat {
|
||||
border: 0px;
|
||||
}
|
||||
header {
|
||||
display: inline-block;
|
||||
}
|
||||
table {
|
||||
border-width: 2px;
|
||||
border-spacing: 0px;
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-collapse: collapse;
|
||||
background-color: white;
|
||||
main {
|
||||
background-color:white
|
||||
}
|
||||
table th {
|
||||
border-width: 4px;
|
||||
padding: 5px;
|
||||
border-style: solid;
|
||||
border-color: gray;
|
||||
background-color: white;
|
||||
|
||||
.crumbs {
|
||||
background-color:rgb(230, 230, 230);
|
||||
padding: 6px;
|
||||
}
|
||||
table td {
|
||||
border-width: 4px;
|
||||
padding: 5px;
|
||||
border-style: solid;
|
||||
border-color: gray;
|
||||
background-color: white;
|
||||
}
|
||||
.header-img {
|
||||
float: left;
|
||||
margin: 0px 15px 15px 0px;
|
||||
border: 0;
|
||||
.crumbs a {
|
||||
padding-left:10px;
|
||||
color:black;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
#items-map {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
@@ -3,9 +3,11 @@
|
||||
<head>
|
||||
<meta charset="{{ config['server']['encoding'] }}">
|
||||
<title>{% block title %}{{ config['metadata']['identification']['title'] }} -{% endblock %}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="language" content="{{ config['server']['language'] }}">
|
||||
<meta name="description" content="{{ config['metadata']['identification']['title'] }}">
|
||||
<meta name="keywords" content="{{ config['metadata']['identification']['keywords']|join(',') }}">
|
||||
<link rel="stylesheet" href="https://unpkg.com/mini.css@3.0.1/dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="{{ config['server']['url'] }}/static/css/default.css">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
|
||||
@@ -17,15 +19,39 @@
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1><a title="{{ config['metadata']['identification']['title'] }}" href="{{ config['server']['url'] }}/?f=html">{{ config['metadata']['identification']['title'] }}</a><a title="JSON" href="{{ config['server']['url'] }}/"><img alt="JSON" src="{{ config['server']['url'] }}/static/img/json.png" width="30" height="30"/></a></h1>
|
||||
<span itemprop="description">{{ config['metadata']['identification']['description'] }}</span>
|
||||
<header class="sticky row">
|
||||
<div class="col-sm-12 col-md-10 col-md-offset-1">
|
||||
<a role="button" title="{{ config['metadata']['identification']['description'] }}" href="{{ config['server']['url'] }}/?f=html">{{ config['metadata']['identification']['title'] }}</a>
|
||||
<a href="#" role="button" style="float:right">Contact</a>
|
||||
<a href="#" role="button" style="float:right">About</a>
|
||||
</div>
|
||||
</header>
|
||||
<hr/>
|
||||
{% block body %}
|
||||
{% endblock %}
|
||||
<hr/>
|
||||
<footer>Powered by <a title="pygeoapi" href="https://github.com/geopython/pygeoapi">pygeoapi</a> {{ version }}</footer>
|
||||
<div class="sticky row crumbs">
|
||||
<div class="col-sm-12 col-md-10 col-md-offset-1">
|
||||
{% block crumbs %}
|
||||
<a href="{{ config['server']['url'] }}">Home</a>
|
||||
{% endblock %}
|
||||
<span style="float:right">
|
||||
<a href="{{ data['links'] | map(rel='self') | attr('href') }}?f=json">JSON</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<main>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-10 col-md-offset-1">
|
||||
<br/>
|
||||
{% block body %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="row bottom">
|
||||
<div class="col-sm-12 col-md-10 col-md-offset-1">
|
||||
Powered by <a title="pygeoapi" href="https://github.com/geopython/pygeoapi">pygeoapi</a> {{ version }}
|
||||
</div>
|
||||
</footer>
|
||||
{% block extrafoot %}
|
||||
{% endblock %}
|
||||
</body>
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ super() }} {{ data['title'] }} {% endblock %}
|
||||
{% block crumbs %}{{ super() }}
|
||||
<a href="../collections">Collections</a>
|
||||
<a href="./{{ data['name'] }}">{{ data['title'] }}</a>
|
||||
{% endblock %}
|
||||
{% block body %}
|
||||
<section id="collection">
|
||||
<h2>{{ data['title'] }}<a title="JSON" href="{{ config['server']['url'] }}/collections/{{ data['name'] }}"><img alt="JSON" src="{{ config['server']['url'] }}/static/img/json.png" width="30" height="30"/></a></h2>
|
||||
<h2>{{ data['title'] }}</h2>
|
||||
<div>{{ data['description'] }}</div>
|
||||
<div><a title="Browse Features" href="{{ config['server']['url'] }}/collections/{{ data['name'] }}/items?f=html">Browse Features</a></div>
|
||||
<div><a title="Browse Items" href="{{ config['server']['url'] }}/collections/{{ data['name'] }}/items?f=html">Browse</a> through the items of the collection {{ data['title'] }}</div>
|
||||
<h2>Links</h2>
|
||||
<ul>
|
||||
{% for link in data['links'] %}
|
||||
|
||||
@@ -1,11 +1,17 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ super() }} Collections {% endblock %}
|
||||
{% block crumbs %}{{ super() }}
|
||||
<a href="./collections">Collections</a>
|
||||
{% endblock %}
|
||||
{% block body %}
|
||||
<section id="collections">
|
||||
<h2>Collections <a title="JSON" href="{{ config['server']['url'] }}/collections"><img alt="JSON" src="{{ config['server']['url'] }}/static/img/json.png" width="30" height="30"/></a></h2>
|
||||
<h2>Collections in this service</h2>
|
||||
<ul>
|
||||
{% for k, v in config['datasets'].items()%}
|
||||
<li><a title="{{ v['title'] }}" href="{{ config['server']['url'] }}/collections/{{ k }}?f=html">{{ v['title'] }}</a></li>
|
||||
<li>
|
||||
<a title="{{ v['title'] }}" href="{{ config['server']['url'] }}/collections/{{ k }}?f=html">{{ v['title'] }}</a><br/>
|
||||
{{ v['description'] }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
@@ -1,31 +1,47 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ super() }} {{ data['title'] }} {% endblock %}
|
||||
{% block crumbs %}{{ super() }}
|
||||
<a href="../../../collections">Collections</a>
|
||||
{% for link in data['links'] %}
|
||||
{% if link.rel == 'collection' %}
|
||||
<a href="{{ link['href'] }}">{{ link['title'] }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<a href="../items">Items</a>
|
||||
<a href="./{{ data['ID'] }}">{{ data['title'] or data['ID'] }}</a>
|
||||
{% endblock %}
|
||||
{% block extrahead %}
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"/>
|
||||
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
|
||||
<style>
|
||||
#items {
|
||||
width: 80%;
|
||||
}
|
||||
#items-map {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<section id="items">
|
||||
<h2>{{ data['title'] }}</h2>
|
||||
<span>{{ data['description'] }}</span>
|
||||
<h2>Feature {{ data['ID'] }} <a title="JSON" href="./{{ data['ID'] }}"><img alt="JSON" src="{{ config['server']['url'] }}/static/img/json.png" width="30" height="30"/></a></h2>
|
||||
<table>
|
||||
<tr>
|
||||
<td><h3>Properties</h3>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<h2>Item {{ data['ID'] }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div id="items-map"></div>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Property</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>ID</td>
|
||||
<td>{{ data.ID }}</td>
|
||||
</tr>
|
||||
{% for k, v in data['properties'].items() %}
|
||||
<tr>
|
||||
<th>{{ k }}</th>
|
||||
<td>{{ k }}</td>
|
||||
{% if k == 'links' %}
|
||||
<td>
|
||||
<ul>
|
||||
@@ -39,13 +55,21 @@
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td>
|
||||
<div id="items-map"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div col-sm-12">
|
||||
{% for link in data['links'] %}
|
||||
{% if link['rel'] == 'prev' %}
|
||||
<a role="button" href="{{ link['href'] }}&f=html">Prev</a>
|
||||
{% elif link['rel'] == 'next' %}
|
||||
<a role="button" href="{{ link['href'] }}&f=html">Next</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@@ -1,32 +1,69 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ super() }} {{ data['title'] }} {% endblock %}
|
||||
{% block crumbs %}{{ super() }}
|
||||
<a href="../../collections">Collections</a>
|
||||
{% for link in data['links'] %}
|
||||
{% if link.rel == 'collection' %}
|
||||
<a href="{{ link['href'] }}">{{ link['title'] }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<a href="./items">Items</a>
|
||||
{% endblock %}
|
||||
{% block extrahead %}
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"/>
|
||||
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
|
||||
<style>
|
||||
#items {
|
||||
width: 80%;
|
||||
}
|
||||
#items-map {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<section id="items">
|
||||
<h2>{{ data['title'] }}</h2>
|
||||
<span>{{ data['description'] }}</span>
|
||||
<h2>Features <a title="JSON" href="./items"><img alt="JSON" src="{{ config['server']['url'] }}/static/img/json.png" width="30" height="30"/></a></h2>
|
||||
{% for link in data['links'] %}
|
||||
{% if link['rel'] == 'prev' %}
|
||||
<a href="{{ link['href'] }}&f=html">Prev</a>
|
||||
{% elif link['rel'] == 'next' %}
|
||||
<a href="{{ link['href'] }}&f=html">Next</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div id="items-map"></div>
|
||||
<div class="row col-sm-12">
|
||||
<h2>Items</h2>
|
||||
</div>
|
||||
|
||||
{% if data['features'] %}
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div id="items-map"></div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
{% for k, v in data['features'][0]['properties'].items() %}
|
||||
<th>{{ k }}</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for ft in data['features'] %}
|
||||
<tr>
|
||||
<td data-label="ID"><a href="items/{{ ft.ID }}">{{ ft.ID }}</a></td>
|
||||
{% for k, v in ft['properties'].items() %}
|
||||
<td data-label="{{ k }}">{{ v }}</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="row col-sm-12">
|
||||
<p>No items</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="row">
|
||||
<div col-sm-12">
|
||||
{% for link in data['links'] %}
|
||||
{% if link['rel'] == 'prev' %}
|
||||
<a role="button" href="{{ link['href'] }}">Prev</a>
|
||||
{% elif link['rel'] == 'next' %}
|
||||
<a role="button" href="{{ link['href'] }}">Next</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
@@ -42,7 +79,7 @@
|
||||
var geojson_data = {{ data['features'] |to_json }};
|
||||
var items = new L.GeoJSON(geojson_data, {
|
||||
onEachFeature: function (feature, layer) {
|
||||
var html_ = '<span><a target="_blank" href="items/' + feature.ID + '?f=html">' + feature.ID + '</a></span>';
|
||||
var html_ = '<span><a href="items/' + feature.ID + '?f=html">' + feature.ID + '</a></span>';
|
||||
layer.bindPopup(html_);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -11,10 +11,12 @@
|
||||
</table>
|
||||
</section>
|
||||
<section id="conformance">
|
||||
<h2><a href="{{ config['server']['url'] }}/conformance?f=html">Conformance</a></h2>
|
||||
<h2>Conformance</h2>
|
||||
<a href="{{ config['server']['url'] }}/conformance?f=html">View the conformance classes of this service</a>
|
||||
</section>
|
||||
<section id="collections">
|
||||
<h2><a href="{{ config['server']['url'] }}/collections?f=html">Collections</a></h2>
|
||||
<h2>Collections</h2>
|
||||
<a href="{{ config['server']['url'] }}/collections?f=html">View the collections in this service.</a>
|
||||
</section>
|
||||
<section id="links">
|
||||
<h2>Links</h2>
|
||||
|
||||
Reference in New Issue
Block a user