← back to Stars of Design

views/partials/grid-controls.ejs

22 lines

<div class="grid-controls" data-grid-controls>
  <div class="grid-controls-left">
    <span class="grid-count" data-grid-count><%= total %></span> <span class="muted">designers</span>
  </div>
  <div class="grid-controls-right">
    <label class="control">
      <span>Sort</span>
      <select id="sort-select" data-sort>
        <option value="newest"  <%= sortKey === 'newest'  ? 'selected' : '' %>>Newest added</option>
        <option value="era"     <%= sortKey === 'era'     ? 'selected' : '' %>>By era</option>
        <option value="city"    <%= sortKey === 'city'    ? 'selected' : '' %>>By city</option>
        <option value="name_az" <%= sortKey === 'name_az' ? 'selected' : '' %>>Name A→Z</option>
        <option value="style"   <%= sortKey === 'style'   ? 'selected' : '' %>>By style</option>
      </select>
    </label>
    <label class="control">
      <span>Density</span>
      <input id="density-slider" type="range" min="220" max="440" step="20" value="320" data-density>
    </label>
  </div>
</div>