`src/web/views/city.ejs`

50 lines
<%- include('partials/head', { title: city + ' restaurants', description: 'All ' + total.toLocaleString() + ' restaurants in ' + city + '. Address, cuisine, neighborhood.' }) %>

<main class="container">
  <p class="crumbs"><a href="/">All restaurants</a> · <%= city %></p>

  <header class="hero">
    <h1><%= city %>.</h1>
    <p class="lede"><%= total.toLocaleString() %> restaurants.</p>
  </header>

  <% if (cityCuisines.length > 0) { %>
    <section class="cuisine-hero">
      <h2>Cuisines in <%= city %></h2>
      <ul>
        <% cityCuisines.slice(0, 12).forEach(c => { %>
          <li><a href="/?city=<%= encodeURIComponent(city) %>&cuisine=<%= encodeURIComponent(c.cuisine) %>">
            <span class="ch-name"><%= c.cuisine %></span>
            <span class="ch-n"><%= c.n.toLocaleString() %></span>
          </a></li>
        <% }); %>
      </ul>
    </section>
  <% } %>

  <section style="margin-top:2rem;">
    <h2 style="font-family:'Playfair Display',Georgia,serif;font-size:1.5rem;">First 50 alphabetically</h2>
    <p class="muted" style="margin-top:-0.25rem;font-size:.85rem;">
      <a href="/?city=<%= encodeURIComponent(city) %>">See all <%= total.toLocaleString() %> →</a>
    </p>
    <ol class="rest-list">
      <% topRows.forEach(r => { %>
        <li>
          <div class="group rest-card" style="display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center;padding:1rem 0;">
            <div class="rest-main">
              <a href="/r/<%= r.slug %>"><h2 style="font-size:1.15rem;margin:0;"><%= r.name %></h2></a>
              <p class="addr"><%= r.address %></p>
              <% if (r.cuisine) { %><p class="cuisine" style="display:inline-block;"><%= r.cuisine %></p><% } %>
            </div>
            <div class="rest-meta">
              <% if (r.cuisine) { %><span class="cuisine"><%= r.cuisine %></span><% } %>
            </div>
          </div>
        </li>
      <% }); %>
    </ol>
  </section>
</main>

<%- include('partials/foot') %>