<script>
+ import PageLink from './PageLink.svelte';
+ import ReverseLink from './ReverseLink.svelte';
+ import LastUpdated from './LastUpdated.svelte';
- import { last_updated_store } from '../lib/stores.js';
-
- let last_updated;
-
- last_updated_store.subscribe(data => {
- if (!data) { return; }
- last_updated = data;
- });
+ import { page } from '../lib/stores.js';
+ $: view = $page.tab;
</script>
-<style>
- header {
- width: 100%;
- padding: 5px 15px;
- z-index: 5;
- }
-
- header .brand {
- white-space: nowrap;
- }
- header .brand a:hover{
+<style>
+ .navbar-brand :global(a:hover) {
text-decoration: none;
}
- header .brand h1 {
+ .navbar-brand h1 {
display: inline;
- font-size: 1.5em;
+ font-size: 1.2em;
color: #333;
}
- header .brand img {
+ .navbar-brand img {
display: inline-block;
margin-right: 5px;
margin-top: -5px;
}
- header #last-updated {
- font-size: 0.7em;
+ .nav-item {
white-space: nowrap;
- text-align: center;
-/* display: none;
-*/ }
+ }
- header .dropdown-menu {
+ .dropdown-menu { /* need to be above map markers */
z-index: 1005;
}
- #loading {
+ .page-title-section {
display: none;
- position: absolute;
- top: 0;
- width: 100%;
- background-color: #eee;
- z-index: 100;
- padding: 10px;
text-align: center;
+ padding: 1em;
+ }
+ @media (max-width: 600px) {
+ .page-title-section {
+ display: block;
+ }
+ }
+
+ .search-section {
+ padding: 1em 30px;
+ background-color: #f5f5f5;
+ border-top: 2px solid #ddd;
+ border-bottom: 2px solid #ddd;
}
</style>
<header class="container-fluid">
- <div class="row">
- <div class="col-4">
- <div class="brand">
- <a href="search.html">
- <img alt="logo" src="images/osm_logo.120px.png" width="30" height="30"/>
- <h1>Nominatim</h1>
- </a>
- </div>
+ <nav class="navbar navbar-expand-sm navbar-light">
+ <div class="navbar-brand">
+ <PageLink page="search">
+ <img alt="logo" src="images/osm_logo.120px.png" width="30" height="30"/>
+ <h1>Nominatim</h1>
+ </PageLink>
</div>
- <div class="col-4">
- <div id="last-updated" class="text-center">
- <div id="loading">loading...</div>
- {#if last_updated}
- <div id="api-request">
- Data from <a href="{last_updated.api_request_url}">API request</a>
- <span id="api-request-debug">(<a href="{last_updated.api_request_url_debug}">debug output</a>)</span>
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarSupportedContent">
+ <ul class="navbar-nav mr-auto">
+ <li class="nav-item {view === 'search' ? 'active' : ''}">
+ <PageLink page="search" extra_classes="nav-link ">Search</PageLink>
+ </li>
+ <li class="nav-item {view === 'reverse' ? 'active' : ''}">
+ <ReverseLink extra_classes="nav-link ">Reverse</ReverseLink>
+ </li>
+ <li class="nav-item {view === 'details' ? 'active' : ''}">
+ <PageLink page="details" extra_classes="nav-link ">Search By ID</PageLink>
+ </li>
+ </ul>
+ <ul class="navbar-nav">
+ <li class="nav-item dropdown">
+ <a class="nav-link dropdown-toggle" href="#open-about-dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ About & Help
+ </a>
+ <div class="dropdown-menu dropdown-menu-right">
+ <a class="dropdown-item" href="https://nominatim.org/release-docs/develop/api/Overview/" target="_blank">API Reference</a>
+ <a class="dropdown-item" href="https://nominatim.org/release-docs/develop/api/Faq/" target="_blank">FAQ</a>
+ <a class="dropdown-item" href="https://help.openstreetmap.org/tags/nominatim/">OpenStreetMap Help</a>
+ <a class="dropdown-item" href="https://github.com/osm-search/Nominatim">Nominatim on Github</a>
+ <a class="dropdown-item" href="https://github.com/osm-search/nominatim-ui">This frontend on Github</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="#report-issue" data-toggle="modal" data-target="#report-modal">Report problem with results</a>
</div>
- Data last updated: <span id="data-date">{last_updated.date}</span>
- {/if}
- </div>
- </div>
- <div class="col-4 text-right">
- <div class="dropdown">
- <button class="dropdown-toggle btn btn-sm btn-outline-secondary" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
- About & Help
- </button>
- <div class="dropdown-menu dropdown-menu-right">
- <a class="dropdown-item" href="https://nominatim.org/release-docs/develop/api/Overview/" target="_blank">API Reference</a>
- <a class="dropdown-item" href="https://nominatim.org/release-docs/develop/api/Faq/" target="_blank">FAQ</a>
- <a class="dropdown-item" href="https://help.openstreetmap.org/tags/nominatim/">OpenStreetMap Help</a>
- <a class="dropdown-item" href="https://github.com/osm-search/Nominatim">Nominatim on Github</a>
- <a class="dropdown-item" href="https://github.com/osm-search/nominatim-ui">This frontend on Github</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#" data-toggle="modal" data-target="#report-modal">Report problem with results</a>
- </div>
- </div>
+ </li>
+ </ul>
</div>
- </div>
+ </nav>
</header>
+<section class="page-title-section">
+ <h2>{view}</h2>
+</section>
+<section class="search-section">
+ <slot/>
+</section>
+<LastUpdated/>
projects / nominatim-ui.git / blobdiff