`views/public/designers.ejs`

69 lines
<%- include('../partials/head', { title }) %>
<%- include('../partials/header') %>

<main class="designers-page">
  <section class="section">
    <div class="wrap">
      <h1>Browse Designers</h1>
      <p class="muted">Filter by style, era, or search by name, city, or signature.</p>

      <form class="filter-form" method="get" action="/designers">
        <label class="control">
          <span>Search</span>
          <input type="search" name="q" placeholder="name, city, or style" value="<%= filter.q || '' %>">
        </label>
        <label class="control">
          <span>Style</span>
          <select name="style">
            <option value="">All</option>
            <% styles.forEach(function (s) { %>
              <option value="<%= s %>" <%= filter.style === s ? 'selected' : '' %>><%= s %></option>
            <% }) %>
          </select>
        </label>
        <label class="control">
          <span>Era</span>
          <select name="era">
            <option value="">All</option>
            <% eras.forEach(function (e) { %>
              <option value="<%= e %>" <%= filter.era === e ? 'selected' : '' %>><%= e %></option>
            <% }) %>
          </select>
        </label>
        <button class="btn primary" type="submit">Filter</button>
        <a class="btn ghost" href="/designers">Reset</a>
      </form>

      <%- include('../partials/grid-controls', { total, sortKey }) %>

      <div class="designer-grid" data-designer-grid>
        <% designers.forEach(function (d) { %>
          <article class="designer-card">
            <header>
              <span class="card-mark" aria-hidden="true"><%= (d.name || '?').split(' ').slice(0,2).map(function (w) { return w[0]; }).join('') %></span>
              <div>
                <h3><a href="/designers/<%= d.slug %>"><%= d.name %></a></h3>
                <p class="muted"><%= d.era %><% if (d.city) { %> · <%= d.city %><% } %></p>
              </div>
            </header>
            <% if (d.headline) { %>
              <p class="headline"><%= d.headline %></p>
            <% } %>
            <% if (d.styles && d.styles.length) { %>
              <ul class="tags">
                <% d.styles.forEach(function (s) { %><li><%= s %></li><% }) %>
              </ul>
            <% } %>
          </article>
        <% }); %>
        <% if (!designers.length) { %>
          <p class="empty">No designers match those filters yet. Try resetting or <a href="/submit">submit one</a>.</p>
        <% } %>
      </div>
    </div>
  </section>
</main>

<%- include('../partials/footer') %>
<script src="/js/grid-controls.js" defer></script>