Skip to content

Commit

Permalink
refactor: Make search look better
Browse files Browse the repository at this point in the history
  • Loading branch information
@petesfrench
petesfrench committed Nov 7, 2024
1 parent 1a065cc commit d2bb8be
Showing 1 changed file with 110 additions and 108 deletions.
218 changes: 110 additions & 108 deletions templates/_search-form.html
View file
Original file line number Diff line number Diff line change
@@ -1,129 +1,131 @@
<form method="GET" class="p-form js-asset-search">
{% set params = request.values.to_dict() %}
<div class="row--25-25-25-25">
<div class="row">

<div class="col">
<div class="col-4">
<label for="tag">Tag</label>
<input class="js-tags" type="text" name="tag" placeholder="Tag" id="tag" value="{% if params.tag %}{{ params.tag }}{% endif %}">
<button class="p-button--positive" style="margin-top:45px;">Search</button>
</div>

<div class="col-8">
<div class="row">
{% set asset_types = [
"Datasheets", "Guides", "Ebook", "Whitepaper", "Case Study",
"Explainer Video", "Tutorial Video", "Demo", "Infographic",
"Diagram", "Icon", "Illustration", "Image"
]
%}
<div class="col-2 js-select">
<label for="asset-type">Asset type</label>
<select name="asset_type">
<option value="">Any type</option>
{% for asset_type in asset_types %}
{% set asset_value = asset_type|lower|replace(' ', '-') %}
<option value="{{ asset_value }}" {% if asset_value in params.asset_type %}selected{% endif %}>
{{ asset_type }}
</option>
{% endfor %}
</select>
</div>

{% set asset_types = [
"Datasheets", "Guides", "Ebook", "Whitepaper", "Case Study",
"Explainer Video", "Tutorial Video", "Demo", "Infographic",
"Diagram", "Icon", "Illustration", "Image"
]
%}
<div class="col js-select">
<label for="asset-type">Asset type</label>
<select name="asset_type">
<option value="">Any type</option>
{% for asset_type in asset_types %}
{% set asset_value = asset_type|lower|replace(' ', '-') %}
<option value="{{ asset_value }}" {% if asset_value in params.asset_type %}selected{% endif %}>
{{ asset_type }}
</option>
{% endfor %}
</select>
</div>

{% set languages = [
"Arabic", "Bengali", "Bhojpuri", "Bulgarian", "Catalan", "Chinese",
"Croatian", "Czech", "Danish", "Dutch", "English", "Estonian",
"Finnish", "French", "German", "Greek", "Gujrati", "Hausa", "Hebrew",
"Hindi/Urdu", "Hungarian", "Indonesian", "Italian", "Japanese",
"Javanese", "Korean", "Lithuanian", "Mandarin Chinese", "Marathi",
"Nigerian Pidgin", "Norwegian", "Persian", "Polish", "Portuguese",
"Punjabi", "Romanian", "Russian", "Serbian", "Slovak", "Slovenian",
"Spanish", "Swedish", "Tamil", "Telugu", "Thai", "Turkish",
"Ukrainian", "Vietnamese", "Other"
]
%}
<div class="col js-select">
<label id="language">Language</label>
<select
id="language-select"
aria-labelledby="language"
name="language">
<option value="">Any language</option>
{% for language in languages %}
<option value="{{ language }}" {% if language in params.language %}selected{% endif %}>
{{ language }}
</option>
{% endfor %}
</select>
<input type="text" class="u-hide js-language-select-hidden" name="language">
</div>
{% set languages = [
"Arabic", "Bengali", "Bhojpuri", "Bulgarian", "Catalan", "Chinese",
"Croatian", "Czech", "Danish", "Dutch", "English", "Estonian",
"Finnish", "French", "German", "Greek", "Gujrati", "Hausa", "Hebrew",
"Hindi/Urdu", "Hungarian", "Indonesian", "Italian", "Japanese",
"Javanese", "Korean", "Lithuanian", "Mandarin Chinese", "Marathi",
"Nigerian Pidgin", "Norwegian", "Persian", "Polish", "Portuguese",
"Punjabi", "Romanian", "Russian", "Serbian", "Slovak", "Slovenian",
"Spanish", "Swedish", "Tamil", "Telugu", "Thai", "Turkish",
"Ukrainian", "Vietnamese", "Other"
]
%}

<div class="col">
<label>Salesforce campaign ID number</label>
<input type="text" class="js-salesforce-campaign-id" id="salesforce-campaign-id-number" name="salesforce_campaign_id" placeholder="Number" value="{% if params.salesforce_campaign_id %}{{ params.salesforce_campaign_id }}{% endif %}">
</div>
<div class="col-2 js-select">
<label id="language">Language</label>
<select
id="language-select"
aria-labelledby="language"
name="language">
<option value="">Any language</option>
{% for language in languages %}
<option value="{{ language }}" {% if language in params.language %}selected{% endif %}>
{{ language }}
</option>
{% endfor %}
</select>
<input type="text" class="u-hide js-language-select-hidden" name="language">
</div>

<div class="col js-select">
<label id="product">Product</label>
<select
id="product-select"
aria-labelledby="product"
name="product">
<option value="">Any product</option>
{% for product in products_list.products %}
<option value="{{ product.slug }}" {% if product.slug in params.product_types %}selected{% endif %}>
{{ product.name }}
</option>
{% endfor %}
</select>
</div>
<div class="col-2">
<label>Salesforce ID number</label>
<input type="text" class="js-salesforce-campaign-id" id="salesforce-campaign-id-number" name="salesforce_campaign_id" placeholder="Number" value="{% if params.salesforce_campaign_id %}{{ params.salesforce_campaign_id }}{% endif %}">
</div>

<div class="col">
<div class="p-search-and-filter js-authors-search" tabindex="0">
<label for="author-search">Author</label>
<div class="p-search-and-filter__search-container" aria-expanded="false">
{% if params.author_email and params.author_firstname and params.author_lastname %}
<span class="p-chip js-author-chip" data-email="{{ params.author_email }}" data-firstname="{{ params.author_firstname }}" data-lastname="{{ params.author_lastname }}">
<span class="p-chip__value js-content">{{ params.author_firstname + " " + params.author_lastname }}</span>
<button class="p-chip__dismiss">Dismiss</button>
</span>
{% else %}
<span class="p-chip js-author-chip u-hide">
<span class="p-chip__value js-content"></span>
<button class="p-chip__dismiss">Dismiss</button>
</span>
{% endif %}
<div class="p-search-and-filter__box" data-overflowing="false">
<input autocomplete="off" class="p-search-and-filter__input js-authors-input" placeholder="Search authors" type="text" value="" id="author-search">
<input type="text" class="u-hide js-hidden-field-email" name="author_email" value="{% if params.author_email %}{{ params.author_email }}{% endif %}">
<input type="text" class="u-hide js-hidden-field-firstname" name="author_firstname" value="{% if params.author_firstname %}{{ params.author_firstname }}{% endif %}">
<input type="text" class="u-hide js-hidden-field-lastname" name="author_lastname" value="{% if params.author_lastname %}{{ params.author_lastname }}{% endif %}">
</div>
<div class="col-2 js-select">
<label id="product">Product</label>
<select
id="product-select"
aria-labelledby="product"
name="product">
<option value="">Any product</option>
{% for product in products_list.products %}
<option value="{{ product.slug }}" {% if product.slug in params.product_types %}selected{% endif %}>
{{ product.name }}
</option>
{% endfor %}
</select>
</div>
<div class="p-search-and-filter__panel js-chips-panel" aria-hidden="true">
<div class="p-filter-panel-section">
<div class="p-filter-panel-section__header">
<h4 class="p-filter-panel-section__heading p-heading--5">Authors</h4>

<div class="col-4">
<div class="p-search-and-filter js-authors-search" tabindex="0">
<label for="author-search">Author</label>
<div class="p-search-and-filter__search-container" aria-expanded="false">
{% if params.author_email and params.author_firstname and params.author_lastname %}
<span class="p-chip js-author-chip" data-email="{{ params.author_email }}" data-firstname="{{ params.author_firstname }}" data-lastname="{{ params.author_lastname }}">
<span class="p-chip__value js-content">{{ params.author_firstname + " " + params.author_lastname }}</span>
<button class="p-chip__dismiss">Dismiss</button>
</span>
{% else %}
<span class="p-chip js-author-chip u-hide">
<span class="p-chip__value js-content"></span>
<button class="p-chip__dismiss">Dismiss</button>
</span>
{% endif %}
<div class="p-search-and-filter__box" data-overflowing="false">
<input autocomplete="off" class="p-search-and-filter__input js-authors-input" placeholder="Search authors" type="text" value="" id="author-search">
<input type="text" class="u-hide js-hidden-field-email" name="author_email" value="{% if params.author_email %}{{ params.author_email }}{% endif %}">
<input type="text" class="u-hide js-hidden-field-firstname" name="author_firstname" value="{% if params.author_firstname %}{{ params.author_firstname }}{% endif %}">
<input type="text" class="u-hide js-hidden-field-lastname" name="author_lastname" value="{% if params.author_lastname %}{{ params.author_lastname }}{% endif %}">
</div>
</div>
<div class="p-filter-panel-section__chips js-authors-chip-container">
<p><strong>No results found...</strong></p>
<div class="p-search-and-filter__panel js-chips-panel" aria-hidden="true">
<div class="p-filter-panel-section">
<div class="p-filter-panel-section__header">
<h4 class="p-filter-panel-section__heading p-heading--5">Authors</h4>
</div>
<div class="p-filter-panel-section__chips js-authors-chip-container">
<p><strong>No results found...</strong></p>
</div>
<template id="author-unselected-chip-template">
<button class="p-chip js-unselected">
<span class="p-chip__value js-content"></span>
</button>
</template>
</div>
</div>
<template id="author-unselected-chip-template">
<button class="p-chip js-unselected">
<span class="p-chip__value js-content"></span>
</button>
</template>
</div>
</div>
</div>
</div>

<div class="col">
<label for="date-range">Date range</label>
<input type="text" id="date-range" name="start_date" placeholder="Select date..." class="js-date-picker">
<input type="text" class="u-hide js-hidden-field-startdate">
<input type="text" class="u-hide js-hidden-field-enddate">
</div>
<div class="col-3">
<label for="date-range">Date range</label>
<input type="text" id="date-range" name="start_date" placeholder="Select date..." class="js-date-picker">
<input type="text" class="u-hide js-hidden-field-startdate">
<input type="text" class="u-hide js-hidden-field-enddate">
</div>

<div class="col">
<button class="p-button--positive" style="margin-top:45px;">Search</button>
</div>
</div>
</div>
</form>

0 comments on commit d2bb8be

Please sign in to comment.