docs: Tweak board list on board pages

This commit is contained in:
Johan Gunnarsson 2021-08-07 17:45:04 +02:00
parent e091b72d7e
commit 32ff4a72aa
4 changed files with 90 additions and 36 deletions

View File

@ -1,20 +0,0 @@
<table class="table table-sm table-hover" id="boards">
<thead>
<tr>
<th scope="col">Board</th>
<th scope="col">Board maker</th>
<th scope="col">SoC</th>
<th scope="col">CPU</th>
</tr>
</thead>
<tbody>
{% for board in site.boards %}
<tr data-href="/boards/{{ board.board_id }}.html">
<td><a href="/boards/{{ board.board_id }}.html">{{ board.board_name }}</a></td>
<td>{{ board.board_maker_name }}</td>
<td>{{ board.board_soc_name }}</td>
<td>{{ board.board_cpu_name }}</td>
</tr>
{% endfor %}
</tbody>
</table>

View File

@ -4,6 +4,7 @@ layout: default
<main role="main">
<div class="container">
<h2>{{ page.board_name }}</h2>
<p>Minimal, pure and up-to-date vanilla Debian SD card image for <i>{{ page.board_name }}</i>.</p>
<hr />
</div>
<div class="container">
@ -112,8 +113,69 @@ layout: default
<hr />
</div>
<div class="container">
<h3>Other boards</h3>
{% include boards.html %}
<h3>Boards by {{ page.board_maker_name }}</h3>
<table class="table table-sm table-hover" id="boards">
<caption>Boards made by {{ page.board_maker_name }}.</caption>
<thead>
<tr>
<th scope="col">Board</th>
<th scope="col">Board maker</th>
<th scope="col">SoC</th>
<th scope="col">CPU</th>
</tr>
</thead>
<tbody>
<tr data-href="/boards/{{ page.board_id }}.html">
<td><i>{{ page.board_name }}</i></td>
<td><i>{{ page.board_maker_name }}</i></td>
<td><i>{{ page.board_soc_name }}</i></td>
<td><i>{{ page.board_cpu_name }}</i></td>
</tr>
{% for board in site.boards %}
{% if board.board_maker_name == page.board_maker_name and board.board_id != page.board_id %}
<tr data-href="/boards/{{ board.board_id }}.html">
<td><a href="/boards/{{ board.board_id }}.html">{{ board.board_name }}</a></td>
<td>{{ board.board_maker_name }}</td>
<td>{{ board.board_soc_name }}</td>
<td>{{ board.board_cpu_name }}</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
<hr />
</div>
<div class="container">
<h3>Boards with {{ page.board_soc_name }}</h3>
<table class="table table-sm table-hover" id="boards">
<caption>Boards with {{ page.board_soc_name }} SoC.</caption>
<thead>
<tr>
<th scope="col">Board</th>
<th scope="col">Board maker</th>
<th scope="col">SoC</th>
<th scope="col">CPU</th>
</tr>
</thead>
<tbody>
<tr data-href="/boards/{{ page.board_id }}.html">
<td><i>{{ page.board_name }}</i></td>
<td><i>{{ page.board_maker_name }}</i></td>
<td><i>{{ page.board_soc_name }}</i></td>
<td><i>{{ page.board_cpu_name }}</i></td>
</tr>
{% for board in site.boards %}
{% if board.board_soc_name == page.board_soc_name and board.board_id != page.board_id %}
<tr data-href="/boards/{{ board.board_id }}.html">
<td><a href="/boards/{{ board.board_id }}.html">{{ board.board_name }}</a></td>
<td>{{ board.board_maker_name }}</td>
<td>{{ board.board_soc_name }}</td>
<td>{{ board.board_cpu_name }}</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
<hr />
</div>
</main>

View File

@ -13,7 +13,7 @@
body {
padding-top: 4.5rem;
}
#boards tbody tr {
#boards tbody tr:not(:first-child) {
cursor: pointer;
}
.pill {
@ -36,23 +36,15 @@
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/boards.html">Downloads</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/boards.html">Supported boards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/boards.html">Install instructions</a>
</li>
<!--
<li class="nav-item">
<a class="nav-link" href="#">Documentation</a>
</li>
-->
<li class="nav-item">
<a class="nav-link" href="https://github.com/johang/debian-sd-card-images">Source code</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/johang/debian-sd-card-images/issues">Bugs</a>
</li>
</ul>
<!--
<form class="form-inline my-2 my-lg-0">
@ -70,7 +62,7 @@
</footer>
<script type="text/javascript">
$(document).ready(function($) {
$("#boards tbody tr").click(function() {
$("#boards tbody tr:not(:first-child)").click(function() {
window.document.location = $(this).data("href");
});
});

View File

@ -5,13 +5,33 @@ layout: default
<main role="main">
<div class="container">
<h2>Supported boards</h2>
<p>Minimal, pure and up-to-date vanilla Debian SD card images for various ARM-based single board computers.</p>
<hr />
</div>
<div class="container">
{% include digitalocean.html %}
</div>
<div class="container">
{% include boards.html %}
<table class="table table-sm table-hover" id="boards">
<thead>
<tr>
<th scope="col">Board</th>
<th scope="col">Board maker</th>
<th scope="col">SoC</th>
<th scope="col">CPU</th>
</tr>
</thead>
<tbody>
{% for board in site.boards %}
<tr data-href="/boards/{{ board.board_id }}.html">
<td><a href="/boards/{{ board.board_id }}.html">{{ board.board_name }}</a></td>
<td>{{ board.board_maker_name }}</td>
<td>{{ board.board_soc_name }}</td>
<td>{{ board.board_cpu_name }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<hr />
</div>
</main>