91 lines
5.9 KiB
HTML
91 lines
5.9 KiB
HTML
---
|
|
# collection "Browse" page
|
|
layout: page
|
|
custom-foot: js/browse-js.html
|
|
---
|
|
{%- assign fields = site.data.config-browse -%}
|
|
|
|
<div class="row mb-2">
|
|
<div class="col-7 col-lg-9">{{ content }}</div>
|
|
<div class="col-5 col-lg-3 text-end text-lg-start">{% if site.data.theme.advanced-search == true %}{% include advanced-search-modal.html %}{% endif %}</div>
|
|
</div>
|
|
<div class="row mb-3 justify-content-center">
|
|
<div class="col-lg-8 text-center">
|
|
<form role="search" id="browseFilter" onsubmit="submitFilter(); return false;">
|
|
<div class="input-group input-group-lg">
|
|
{% if site.data.theme.faceted-search == true %}
|
|
<select class="form-control form-select d-none d-lg-block" id="fieldSelect" style="max-width: 200px;" aria-label="select search field to filter">
|
|
<option value="all">All Fields</option>
|
|
<option value="title">Title</option>
|
|
{% for f in fields %}
|
|
{% assign cap-field = f.field | capitalize %}
|
|
<option value="{{ f.field }}">{{ f.facet_name | default: f.display_name | default: cap-field }}</option>
|
|
{% endfor %}
|
|
<option value="display_template">Content Type</option>
|
|
{% if site.data.theme.advanced-search == true %}
|
|
<option value="" disabled>─────────────</option>
|
|
<option value="advanced">Advanced Search...</option>{% endif %}
|
|
</select>
|
|
<!-- Mobile filter button - shows only on small screens -->
|
|
<div class="{% if site.data.theme.faceted-search == true %}dropdown d-lg-none{% else %}d-none{% endif %}">
|
|
<button class="py-3 btn btn-outline-secondary" type="button" id="mobileFilterButton" data-bs-toggle="dropdown" aria-expanded="false" title="Filter options">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-funnel" viewBox="0 0 16 16">
|
|
<path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
|
|
</svg>
|
|
<span id="selectedField" class="d-none d-sm-inline ms-1">All Fields</span>
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<button class="dropdown-item" type="button" data-field="all">All Fields</button>
|
|
<button class="dropdown-item" type="button" data-field="title">Title</button>
|
|
{% for f in fields %}
|
|
{% assign cap-field = f.field | capitalize %}
|
|
<button class="dropdown-item" type="button" data-field="{{ f.field }}">{{ f.facet_name | default: f.display_name | default: cap-field }}</button>
|
|
{% endfor %}
|
|
<button class="dropdown-item" type="button" data-field="display_template">Content Type</button>
|
|
{% if site.data.theme.advanced-search == true %}
|
|
<div class="dropdown-divider"></div>
|
|
<button class="dropdown-item" type="button" data-field="advanced">Advanced Search...</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>{% endif %}
|
|
<input type="text" class="form-control" id="filterTextBox" placeholder="Filter ... " aria-label="Search">
|
|
<!-- Update the date range inputs section -->
|
|
<div id="dateRangeInputs" class="date-range-inputs">
|
|
<div class="date-input-group">
|
|
<!-- Single text input for the date_created field -->
|
|
<input type="text" id="dateCreated" class="ms-2 form-control" placeholder="Enter Date (Text)">
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-success" type="submit" title="Filter items" id="filterButton" >Search</button>
|
|
<button class="btn btn-outline-secondary filter d-none d-lg-flex" onclick="resetFilter(); return false;" data-filter="">Reset</button>
|
|
</div>
|
|
</form>
|
|
<!-- Active filter indicators -->
|
|
<div id="activeFilters" class="mt-2 text-start"></div>
|
|
<div class="h2" id="numberOf"></div>
|
|
</div>
|
|
<div class="col-lg-2">
|
|
<div class="dropdown">
|
|
<button class="btn btn-secondary mt-1 dropdown-toggle" type="button" id="browseSortButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Sort by <span id="sortFilter">Random</span>
|
|
</button>
|
|
<div class="dropdown-menu browse-sort-menu" aria-labelledby="browseSortButton">
|
|
<button class="dropdown-item browse-sort-item {% if site.data.theme.default-sort-field == '' %}active{% endif %}" data-filter="random">Random</button>
|
|
<button class="dropdown-item browse-sort-item" data-filter="title">Title</button>
|
|
{% assign sort_options = site.data.config-browse | where_exp: 'i','i.sort_name != nil' %}
|
|
{% for o in sort_options %}
|
|
<button class="dropdown-item browse-sort-item" data-filter="{{ o.field | escape }}">{{ o.sort_name }}</button>
|
|
{% endfor %}
|
|
</div>
|
|
<button class="btn btn-outline-secondary filter p-1 d-lg-none float-end" onclick="resetFilter(); return false;" data-filter="">Reset</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="loadingIcon" class="text-center">
|
|
<div class="spinner-border text-dark" role="status"><span class="visually-hidden">Loading...</span></div>
|
|
</div>
|
|
|
|
<div class="row" id="browseItems"></div>
|