final beta edits
This commit is contained in:
Nasir Anthony Montalvo
@@ -1,68 +1,85 @@
|
||||
---
|
||||
# collection "Browse" page
|
||||
layout: page
|
||||
custom-foot: js/browse-js.html
|
||||
---
|
||||
{%- assign fields = site.data.config-browse -%}
|
||||
|
||||
<!-- Welcome Header and Description -->
|
||||
{%- assign fields = site.data.config-browse -%}
|
||||
|
||||
<!-- Show the Welcome Text only on the Browse page -->
|
||||
{% if page.url == '/browse/' %}
|
||||
<div class="row mb-4">
|
||||
<div class="col-lg-12 text-center">
|
||||
<h1>welcome_to_the_archive</h1>
|
||||
<p class="lead">Browse through materials from the archive by scrolling freely, or using the search bar to filter items by keywords in our archival metadata. You can use keywords like "pageant" or "Gary" to find people, events, locations, content types, or whatever you're looking for.</p>
|
||||
<p class="small text-muted"><a href="/read/soakies/">Learn more about the materials within this archive ></a></p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<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 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>
|
||||
<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 %}
|
||||
<button class="dropdown-item" type="button" data-field="{{ f.field }}">{{ f.facet_name | default: f.display_name | default: cap-field }}</button>
|
||||
{% assign cap-field = f.field | capitalize %}
|
||||
<option value="{{ f.field }}">{{ f.facet_name | default: f.display_name | default: cap-field }}</option>
|
||||
{% endfor %}
|
||||
<button class="dropdown-item" type="button" data-field="display_template">Content Type</button>
|
||||
<option value="display_template" data-bs-toggle="tooltip" title="The content type (e.g. image, video, document)">Content Type</option>
|
||||
{% if site.data.theme.advanced-search == true %}
|
||||
<div class="dropdown-divider"></div>
|
||||
<button class="dropdown-item" type="button" data-field="advanced">Advanced Search...</button>
|
||||
<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" data-bs-toggle="tooltip" title="The content type (e.g. image, video, document)">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>
|
||||
</div>{% endif %}
|
||||
<input type="text" class="form-control" id="filterTextBox" placeholder="Filter ... " aria-label="Search">
|
||||
<!-- Update the date range inputs section -->
|
||||
{% endif %}
|
||||
<input type="text" class="form-control" id="filterTextBox" placeholder="Filter ..." aria-label="Search">
|
||||
<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-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">
|
||||
@@ -74,15 +91,16 @@ custom-foot: js/browse-js.html
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<!-- Active filter indicators -->
|
||||
<div id="activeFilters" class="mt-2 text-start"></div>
|
||||
<div class="h2" id="numberOf"></div>
|
||||
|
||||
<div id="loadingIcon" class="text-center">
|
||||
<div class="spinner-border text-dark" role="status"><span class="visually-hidden">Loading...</span></div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user