src/components/Header.svelte

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