src/components/Header.svelte

   1 <script>
   2
   3   import { last_updated_store } from '../lib/stores.js';
   4
   5   let last_updated;
   6
   7   last_updated_store.subscribe(data => {
   8     if (!data) { return; }
   9     last_updated = data;
  10   });
  11
  12 </script>
  13 <style>
  14   header {
  15     width: 100%;
  16     padding: 5px 15px;
  17     z-index: 5;
  18   }
  19
  20   header .brand {
  21     white-space: nowrap;
  22   }
  23
  24   header .brand a:hover{
  25     text-decoration: none;
  26   }
  27
  28   header .brand h1 {
  29     display: inline;
  30     font-size: 1.5em;
  31     color: #333;
  32   }
  33
  34   header .brand img {
  35     display: inline-block;
  36     margin-right: 5px;
  37     margin-top: -5px;
  38   }
  39
  40   header #last-updated {
  41     font-size: 0.7em;
  42     white-space: nowrap;
  43     text-align: center;
  44 /*    display: none;
  45 */  }
  46
  47   header .dropdown-menu {
  48     z-index: 1005;
  49   }
  50
  51   #loading {
  52     display: none;
  53     position: absolute;
  54     top: 0;
  55     width: 100%;
  56     background-color: #eee;
  57     z-index: 100;
  58     padding: 10px;
  59     text-align: center;
  60   }
  61 </style>
  62
  63 <header class="container-fluid">
  64   <div class="row">
  65     <div class="col-4">
  66       <div class="brand">
  67         <a href="search.html">
  68           <img alt="logo" src="images/osm_logo.120px.png" width="30" height="30"/>
  69           <h1>Nominatim</h1>
  70         </a>
  71       </div>
  72     </div>
  73     <div class="col-4">
  74       <div id="last-updated" class="text-center">
  75         <div id="loading">loading...</div>
  76         {#if last_updated}
  77           <div id="api-request">
  78             Data from <a href="{last_updated.api_request_url}">API request</a>
  79             <span id="api-request-debug">(<a href="{last_updated.api_request_url_debug}">debug output</a>)</span>
  80           </div>
  81           Data last updated: <span id="data-date">{last_updated.date}</span>
  82         {/if}
  83       </div>
  84     </div>
  85     <div class="col-4 text-right">
  86       <div class="dropdown">
  87         <button class="dropdown-toggle btn btn-sm btn-outline-secondary" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
  88           About &amp; Help
  89         </button>
  90         <div class="dropdown-menu dropdown-menu-right">
  91           <a class="dropdown-item" href="https://nominatim.org/release-docs/develop/api/Overview/" target="_blank">API Reference</a>
  92           <a class="dropdown-item" href="https://nominatim.org/release-docs/develop/api/Faq/" target="_blank">FAQ</a>
  93           <a class="dropdown-item" href="https://help.openstreetmap.org/tags/nominatim/">OpenStreetMap Help</a>
  94           <a class="dropdown-item" href="https://github.com/osm-search/Nominatim">Nominatim on Github</a>
  95           <a class="dropdown-item" href="https://github.com/osm-search/nominatim-ui">This frontend on Github</a>
  96           <div class="dropdown-divider"></div>
  97           <a class="dropdown-item" href="#" data-toggle="modal" data-target="#report-modal">Report problem with results</a>
  98         </div>
  99       </div>
 100     </div>
 101   </div>
 102 </header>