src/components/Header.svelte

   1 <script>
   2   import LastUpdated from './LastUpdated.svelte';
   3 </script>
   4
   5 <style>
   6   header {
   7     width: 100%;
   8     padding: 5px 15px;
   9     z-index: 5;
  10   }
  11
  12   .brand {
  13     white-space: nowrap;
  14   }
  15
  16   .brand a:hover{
  17     text-decoration: none;
  18   }
  19
  20   .brand h1 {
  21     display: inline;
  22     font-size: 1.5em;
  23     color: #333;
  24   }
  25
  26   .brand img {
  27     display: inline-block;
  28     margin-right: 5px;
  29     margin-top: -5px;
  30   }
  31
  32   .dropdown-menu {
  33     z-index: 1005;
  34   }
  35 </style>
  36
  37 <header class="container-fluid">
  38   <div class="row">
  39     <div class="col-4">
  40       <div class="brand">
  41         <a href="search.html">
  42           <img alt="logo" src="images/osm_logo.120px.png" width="30" height="30"/>
  43           <h1>Nominatim</h1>
  44         </a>
  45       </div>
  46     </div>
  47     <div class="col-4">
  48       <LastUpdated/>
  49     </div>
  50     <div class="col-4 text-right">
  51       <div class="dropdown">
  52         <button class="dropdown-toggle btn btn-sm btn-outline-secondary" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
  53           About &amp; Help
  54         </button>
  55         <div class="dropdown-menu dropdown-menu-right">
  56           <a class="dropdown-item" href="https://nominatim.org/release-docs/develop/api/Overview/" target="_blank">API Reference</a>
  57           <a class="dropdown-item" href="https://nominatim.org/release-docs/develop/api/Faq/" target="_blank">FAQ</a>
  58           <a class="dropdown-item" href="https://help.openstreetmap.org/tags/nominatim/">OpenStreetMap Help</a>
  59           <a class="dropdown-item" href="https://github.com/osm-search/Nominatim">Nominatim on Github</a>
  60           <a class="dropdown-item" href="https://github.com/osm-search/nominatim-ui">This frontend on Github</a>
  61           <div class="dropdown-divider"></div>
  62           <a class="dropdown-item" href="#report-issue" data-toggle="modal" data-target="#report-modal">Report problem with results</a>
  63         </div>
  64       </div>
  65     </div>
  66   </div>
  67 </header>