Skip to content

Commit fd0ec83

Browse files
pusewiczpusewicz
committed
Redesign Libraries page with mrbgems grid and JS search
1 parent ed5905b commit fd0ec83

1 file changed

Lines changed: 129 additions & 36 deletions

File tree

‎libraries/index.html‎

Lines changed: 129 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,136 @@
11
---
2-
layout: default
3-
title: mruby - libraries
2+
layout: redesign
3+
title: mruby - Libraries
44
---
55

6-
<div class="row">
7-
<div class="col-md-12">
8-
<h2 class="page-header">Libraries</h2>
6+
{% assign total = site.data.mgems | size %}
7+
8+
<section class="libs-header">
9+
<div class="libs-header__inner">
10+
<div>
11+
<div class="page-header__eyebrow">
12+
<span class="page-header__eyebrow-dot"></span>
13+
Libraries
14+
</div>
15+
<h1 class="page-header__heading">mrbgems</h1>
16+
<p class="page-header__description">
17+
<strong>mrbgems</strong> is mruby's package manager. See the
18+
<a href="https://github.com/mruby/mruby/blob/master/doc/guides/mrbgems.md">mrbgems doc</a>
19+
for how to use it.
20+
</p>
21+
</div>
22+
<div class="libs-header__count">
23+
<span class="libs-header__count-number">{{ total }}</span>
24+
<span class="libs-header__count-label">community<br>libraries</span>
25+
</div>
926
</div>
10-
</div>
11-
<div class="row">
12-
<div class="col-md-12">
13-
<p>
14-
<strong>mrbgems</strong> is mruby's package manager. See the <a href="https://github.com/mruby/mruby/blob/master/doc/guides/mrbgems.md">mrbgems doc</a> for more information about how to use it.
15-
</p>
27+
</section>
28+
29+
<section class="libs-toolbar">
30+
<div class="libs-toolbar__inner">
31+
<div class="libs-search">
32+
<svg class="libs-search__icon" width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
33+
<circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.5"/>
34+
<line x1="9.5" y1="9.5" x2="13" y2="13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
35+
</svg>
36+
<input
37+
class="libs-search__input"
38+
id="libs-search-input"
39+
type="search"
40+
placeholder="Search libraries…"
41+
aria-label="Search libraries"
42+
autocomplete="off"
43+
>
44+
</div>
45+
<span class="libs-toolbar__count" id="libs-count">Showing {{ total }} libraries</span>
1646
</div>
17-
</div>
18-
<div class="row">
19-
<div class="col-md-12">
20-
<table class="table table-striped table-bordered">
21-
<thead>
22-
<th>Name</th>
23-
<th>Description</th>
24-
<th>Author</th>
25-
</thead>
26-
<tbody>
27-
{% for mgem_data in site.data.mgems %}
28-
<tr>
29-
<td>
30-
<a href="{{ mgem_data.website }}">{{ mgem_data.name }}</a>
31-
</td>
32-
<td>
33-
{{ mgem_data.description }}
34-
</td>
35-
<td>
36-
{{ mgem_data.author }}
37-
</td>
38-
</tr>
39-
{% endfor %}
40-
</tbody>
41-
</table>
47+
</section>
48+
49+
<section class="libs-grid">
50+
<div class="libs-grid__inner">
51+
<div class="libs-grid__rows" id="libs-grid">
52+
{% assign gems = site.data.mgems %}
53+
{% assign row_size = 3 %}
54+
{% assign row_index = 0 %}
55+
{% for mgem in gems %}
56+
{% assign mod = row_index | modulo: row_size %}
57+
{% if mod == 0 %}<div class="libs-row">{% endif %}
58+
<a
59+
href="{{ mgem.website }}"
60+
class="libs-card"
61+
data-name="{{ mgem.name | downcase }}"
62+
data-author="{{ mgem.author | downcase }}"
63+
data-description="{{ mgem.description | downcase }}"
64+
>
65+
<div class="libs-card__header">
66+
<span class="libs-card__name">{{ mgem.name }}</span>
67+
<span class="libs-card__author">{{ mgem.author }}</span>
68+
</div>
69+
<p class="libs-card__description">{{ mgem.description }}</p>
70+
</a>
71+
{% assign row_index = row_index | plus: 1 %}
72+
{% assign mod_end = row_index | modulo: row_size %}
73+
{% if mod_end == 0 or forloop.last %}</div>{% endif %}
74+
{% endfor %}
75+
</div>
76+
<div class="libs-no-results" id="libs-no-results" aria-live="polite">
77+
<p class="libs-no-results__text">No libraries match your search.</p>
78+
</div>
79+
</div>
80+
</section>
81+
82+
<div class="libs-footer">
83+
<div class="libs-footer__inner">
84+
<span class="libs-footer__text" id="libs-footer-count">Showing {{ total }} libraries —</span>
85+
<a href="https://github.com/mruby/mgem-list" class="libs-footer__link">view all on GitHub &#8594;</a>
4286
</div>
4387
</div>
88+
89+
<script>
90+
(function () {
91+
var input = document.getElementById('libs-search-input');
92+
var countLabel = document.getElementById('libs-count');
93+
var footerCount = document.getElementById('libs-footer-count');
94+
var noResults = document.getElementById('libs-no-results');
95+
var cards = Array.from(document.querySelectorAll('.libs-card'));
96+
var total = cards.length;
97+
var timer;
98+
99+
function update(query) {
100+
var q = query.trim().toLowerCase();
101+
var visible = 0;
102+
103+
cards.forEach(function (card) {
104+
var match = !q
105+
|| card.dataset.name.indexOf(q) !== -1
106+
|| card.dataset.author.indexOf(q) !== -1
107+
|| card.dataset.description.indexOf(q) !== -1;
108+
if (match) {
109+
card.removeAttribute('hidden');
110+
visible++;
111+
} else {
112+
card.setAttribute('hidden', '');
113+
}
114+
});
115+
116+
if (q) {
117+
countLabel.textContent = 'Showing ' + visible + ' of ' + total + ' libraries';
118+
footerCount.textContent = 'Showing ' + visible + ' of ' + total + ' libraries \u2014';
119+
} else {
120+
countLabel.textContent = 'Showing ' + total + ' libraries';
121+
footerCount.textContent = 'Showing ' + total + ' libraries \u2014';
122+
}
123+
124+
if (visible === 0) {
125+
noResults.classList.add('is-visible');
126+
} else {
127+
noResults.classList.remove('is-visible');
128+
}
129+
}
130+
131+
input.addEventListener('input', function () {
132+
clearTimeout(timer);
133+
timer = setTimeout(function () { update(input.value); }, 150);
134+
});
135+
})();
136+
</script>

0 commit comments

Comments
 (0)