circuitpython-org/downloads.html
Jeff Epler 6f0b124e5b
Designate labels for checkbox in filters
This means that the user can hit anywhere on the big target like
"Adafruit" instead of only being able to click the small checkbox. It
may also improve accessibility.

Additionally, the mouse cursor over the checkbox and its label is
changed to the "pointer" to indicate an action is available by clicking.
2022-11-06 13:09:10 -06:00

172 lines
6.7 KiB
HTML

---
layout: default
title: Downloads
permalink: /downloads
excerpt: CircuitPython supported boards.
---
<div id="downloads-page">
<h1>Downloads</h1>
<div class="downloads-inputs">
<div class="downloads-search">
<label class="search-wrapper">
<input type="text" id="search" placeholder="Search for CircuitPython boards" />
</label>
</div>
<div class="downloads-filter">
<button class="filter" title="Filter Boards"><i class="fas fa-sliders-h"
aria-hidden="true"></i> Filters</button>
</div>
<div class="downloads-filter-tags">
</div>
</div>
<div class="downloads-filter-content">
<div class="filter-buttons">
<button class="save-changes" title="Close and Save Changes"><i class="fas fa-times" aria-hidden="true"></i></button>
</div>
<div>
<div class="manufacturers">
<fieldset>
<legend>Manufacturers</legend>
<ul class="content"></ul>
</fieldset>
</div>
<div>
<div class="features">
<fieldset>
<legend>Features</legend>
<ul class="content"></ul>
</fieldset>
</div>
<div class="mcufamilies">
<fieldset>
<legend>Processor family</legend>
<ul class="content"></ul>
</fieldset>
</div>
</div>
<div class="sort-by">
<fieldset>
<legend>Sort By</legend>
<ul class="content">
<li><input type="radio" name="sort-by" value="downloads" aria-label="Downloads" id="sortby-downloads" checked><label for="sortby-downloads">Downloads</label></li>
<li><input type="radio" name="sort-by" value="alpha-asc" aria-label="Board Name (A to Z)" id="sortby-alpha-asc" ><label for="sortby-alpha-asc">Board Name (A to Z)</label></li>
<li><input type="radio" name="sort-by" value="alpha-desc" aria-label="Board Name (Z to A)" id="sortby-alpha-desc"><label for="sortby-alpha-desc">Board Name (Z to A)</label></li>
<li><input type="radio" name="sort-by" value="date-desc" aria-label="Date Added (Newest First)" id="sortby-date-desc"><label for="sortby-date-desc">Date Added (Newest First)</label></li>
<li><input type="radio" name="sort-by" value="date-asc" aria-label="Date Added (Oldest First)" id="sortby-date-asc"><label for="sortby-date-asc">Date Added (Oldest First)</label></li>
</ul>
</fieldset>
</div>
</div>
</div>
<div class="download-count">
{% comment %}
Get a total number of boards by running through both loops
to get an accurate total.
{% endcomment %}
{% assign board_count = 0 %}
{% assign boards = site.data.files %}
{% for board in boards %}
{% assign info = site.board | where: 'board_id', board.id %}
{% if info.size == 0 %}
{% assign info = site.board | where: 'board_id', 'unknown' %}
{% endif %}
{% assign info = info[0] %}
{% if info.downloads_display == false %}
{% continue %}
{% endif %}
{% assign board_count = board_count | plus: 1 %}
{% endfor %}
{% for board in site.board %}
{% assign info = site.data.files | where: 'id', board.board_id | first %}
{% if info == nil and board.board_id != 'unknown' %}
{% if board.downloads_display == false %}
{% continue %}
{% endif %}
{% assign board_count = board_count | plus: 1 %}
{% endif %}
{% endfor %}
Displaying <span id="board_count">{{ board_count }}</span> boards.
</div>
<div class="downloads-section">
{% comment %}
The following are boards that are in the _data/files.json build
process. Separate loops due to wanting to sort by download count first.
{% endcomment %}
{% assign boards = site.data.files | sort: "downloads" | reverse %}
{% for board in boards %}
{% assign info = site.board | where: 'board_id', board.id %}
{% assign info_name = info[0].name %}
{% if info.size == 0 %}
{% assign info = site.board | where: 'board_id', 'unknown' %}
{% assign info_name = board.id %}
{% endif %}
{% assign info = info[0] %}
{% if info.downloads_display == false %}
{% continue %}
{% endif %}
{% if info.board_id != 'unknown' %}
{% assign download_url = info.url %}
{% else %}
{% capture download_url %}{{ info.url }}?unknown_id={{ board.id }}{% endcapture %}
{% endif %}
<div class="download" data-id="{{ board.id }}"
data-name="{{ info.name | default: board.id }}"
data-downloads="{{ board.downloads }}"
data-manufacturer="{{ info.manufacturer }}"
data-mcufamily="{{ info.family }}"
data-features="{{ info.features | join: ','}}"
data-date="{{ info.date_added }}">
<a href="{{ download_url | relative_url }}">
<div>
<div class="img-responsive-4by3">
{% include downloads/board_image.html board_image=info.board_image %}
</div>
<div class="details">
<h3>{{ info_name | default: board.id }}</h3>
By {{ info.manufacturer }}
</div>
</div>
</a>
</div>
{% endfor %}
{% comment %}
The following are boards that are not yet in the _data/files.json build
process and have no downloads.
{% endcomment %}
{% for board in site.board %}
{% assign info = site.data.files | where: 'id', board.board_id | first %}
{% if info == nil and board.board_id != 'unknown' %}
{% if board.downloads_display == false %}
{% continue %}
{% endif %}
<div class="download" data-id="{{ board.board_id }}"
data-name="{{ board.name }}"
data-downloads="0"
data-manufacturer="{{ board.manufacturer }}"
data-mcufamily="{{ board.family }}"
data-features="{{ board.features | join: ','}}"
data-date="{{ board.date_added }}">
<a href="{{ board.url | relative_url }}">
<div>
<div class="img-responsive-4by3">
{% include downloads/board_image.html board_image=board.board_image %}
</div>
<div class="details">
<h3>{{ board.name }}</h3>
By {{ board.manufacturer }}
</div>
</div>
</a>
</div>
{% endif %}
{% endfor %}
</div>
</div>
<script src="/assets/javascript/downloads.js"></script>