Skip to content

Commit df40aa9

Browse files
theodorosploumistheodorosploumis
committed
feat: Improve ux, patch by sweagent
1 parent c341d31 commit df40aa9

File tree

10 files changed

+198
-9
lines changed

10 files changed

+198
-9
lines changed

‎_includes/buttons-front.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<div class='buttons'>
22
<a class='button red' href='/all'>→ View all Tools</a>
3+
<a class='button' href='/deprecated/'>⚠ Deprecated Tools</a>
34
<a class='button' href='/uploads/download.pdf'>↓ Download as PDF</a>
45
<a class='button' href='https://github.com/drupaltools/drupaltools.github.io#contributing'>+ Add your Project</a>
56
</div>

‎_includes/buttons.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@
22
<a class='button red' href='/'>← Back to Popular</a>
33
<a class='button hide-on-table' href='/all/table/'>→ Display as Table</a>
44
<a class='button hide-on-grid' href='/all/'>→ Display as Grid</a>
5+
<a class='button' href='/deprecated/'>⚠ Deprecated Tools</a>
56
<a class='button' href='https://github.com/drupaltools/drupaltools.github.io#contributing'>+ Add your Project</a>
67
</div>

‎_includes/filters.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
11
<div class="filters">
2+
<input type="text" class="search-input" placeholder="🔍 Search tools..." />
3+
4+
<select class="sort-by">
5+
<option value="none" class="default">- Sort By -</option>
6+
<option value="name-asc">Name (A-Z)</option>
7+
<option value="name-desc">Name (Z-A)</option>
8+
<option value="created-asc">Created (Oldest)</option>
9+
<option value="created-desc">Created (Newest)</option>
10+
</select>
11+
212
<select class="filter-created">
313
<option value="none" class="default">- Created -</option>
414
{% capture list_created %}

‎_layouts/project.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
<div class="description">{{ page.description }}</div>
2323
<div class="filter-requires"><label>Requires: </label>{{ page.requires | sort | join: ', ' | downcase }}</div>
2424
<div class="filter-category"><label>Category: </label>{{ page.category | sort | join: ', ' | downcase }}</div>
25+
<a class="project-edit" title="Edit on GitHub" href="https://github.com/drupaltools/drupaltools.github.io/edit/master/_data/projects/{{ page.name | slugify }}.yml" target="_blank">✎ Edit on GitHub</a>
2526
</article>
2627
</div>
2728

‎_sass/_layout.scss‎

Lines changed: 65 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -323,6 +323,12 @@
323323
}
324324

325325
th {
326+
position: sticky;
327+
top: 0;
328+
background: #fff;
329+
z-index: 10;
330+
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
331+
326332
select {
327333
display: block;
328334
width: 100%;
@@ -358,6 +364,41 @@ th {
358364
background: url(../img/book.png) no-repeat;
359365
}
360366

367+
.project-edit {
368+
display: block;
369+
background-color: #f0f0f0;
370+
color: #666;
371+
padding: 4px;
372+
text-align: center;
373+
text-decoration: none;
374+
font-size: 12px;
375+
border-radius: 3px;
376+
margin-top: 5px;
377+
378+
&:visited {
379+
text-decoration: none;
380+
color: #666;
381+
}
382+
383+
&:hover,
384+
&:focus {
385+
text-decoration: none;
386+
color: #333;
387+
background-color: #e0e0e0;
388+
}
389+
}
390+
391+
.project-edit-table {
392+
font-size: 18px;
393+
text-decoration: none;
394+
color: #666;
395+
396+
&:hover,
397+
&:focus {
398+
color: $site-blue;
399+
}
400+
}
401+
361402
// Tile - flexbox
362403
.project-wrapper-tile {
363404
padding: 10px;
@@ -425,6 +466,24 @@ th {
425466

426467
.filters {
427468
margin: 0 14px 20px 2px;
469+
470+
.search-input {
471+
padding: 6px 10px;
472+
border: 1px solid #ddd;
473+
border-radius: 3px;
474+
font-size: 14px;
475+
width: 200px;
476+
margin-right: 10px;
477+
478+
&:focus {
479+
outline: none;
480+
border-color: $site-blue;
481+
}
482+
}
483+
484+
select {
485+
margin-right: 10px;
486+
}
428487
}
429488

430489
.results {
@@ -435,7 +494,8 @@ th {
435494
.js-hidden-created,
436495
.js-hidden-category,
437496
.js-hidden-requires,
438-
.js-hidden-drupal {
497+
.js-hidden-drupal,
498+
.js-hidden-search {
439499
display: none;
440500
}
441501

@@ -501,7 +561,8 @@ th {
501561
.project-wrapper-tile {
502562
.filter-requires,
503563
.filter-category,
504-
.description {
564+
.description,
565+
.project-edit {
505566
display: none;
506567
}
507568
}
@@ -518,7 +579,8 @@ th {
518579

519580
.filter-requires,
520581
.filter-category,
521-
.description {
582+
.description,
583+
.project-edit {
522584
display: block;
523585
overflow: hidden;
524586
white-space: normal;

‎all/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
{% assign category = project.category | sort | join: ', ' | downcase %}
1212
{% assign drupal = project.drupal_versions | sort | join: ', ' %}
1313

14-
<div class="column result-row" data-created="{{ project.year_created }}" data-requires="{{ requires }}" data-category="{{ category }}" data-drupal="{{ drupal }}">
14+
<div class="column result-row" data-name="{{ project.name }}" data-created="{{ project.year_created }}" data-requires="{{ requires }}" data-category="{{ category }}" data-drupal="{{ drupal }}">
1515
<div class="js-close"> </div>
1616
<article class="project-wrapper-tile">
1717
<div class="name"><a href="{{ project.homepage }}">{{ project.name }}</a> (<span class="td-filter" data-class="td-created">{{ project.year_created }}</span>)</div>
@@ -33,6 +33,7 @@
3333
<div class="filter-category"><label>Category: </label>{{ project.category | sort | join: ', ' | downcase }}</div>
3434

3535
<a class="js-more" href="{{ project.name }}">more details</a>
36+
<a class="project-edit" title="Edit on GitHub" href="https://github.com/drupaltools/drupaltools.github.io/edit/master/_data/projects/{{ project_hash[0] }}.yml" target="_blank">✎ Edit</a>
3637
</article>
3738
</div>
3839
{% endfor %}

‎all/table/index.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
<th class="sort-filter"><span>Created</span></th>
1818
<th class="sort-filter"><span>Requires</span></th>
1919
<th class="sort-filter"><span>Category</span></th>
20+
<th>Edit</th>
2021
</tr>
2122
{% assign project_hashes = site.data.projects | sort %}
2223
{% for project_hash in project_hashes %}
@@ -26,7 +27,7 @@
2627
{% assign category = project.category | sort | join: ', ' | downcase %}
2728
{% assign drupal = project.drupal_versions | sort | join: ', ' %}
2829

29-
<tr class="result-row" data-created="{{ project.year_created }}" data-requires="{{ requires }}" data-category="{{ category }}" data-drupal="{{ drupal }}">
30+
<tr class="result-row" data-name="{{ project.name }}" data-created="{{ project.year_created }}" data-requires="{{ requires }}" data-category="{{ category }}" data-drupal="{{ drupal }}">
3031
<td>{{ forloop.index }}</td>
3132
<td>
3233
<h4 class="project-title"><a href="{{ project.homepage }}">{{ project.name }}</a></h4>
@@ -44,6 +45,7 @@ <h4 class="project-title"><a href="{{ project.homepage }}">{{ project.name }}</a
4445
<td class="filter-created">{{ project.year_created }}</td>
4546
<td class="filter-requires">{{ requires }}</td>
4647
<td class="filter-category">{{ category }}</td>
48+
<td><a class="project-edit-table" title="Edit on GitHub" href="https://github.com/drupaltools/drupaltools.github.io/edit/master/_data/projects/{{ project_hash[0] }}.yml" target="_blank">✎</a></td>
4749
</tr>
4850
{% endfor %}
4951

‎deprecated/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
layout: default
3+
title: Deprecated Drupal tools
4+
hero_title: Deprecated Drupal tools
5+
---
6+
<div class="project-tiles row">
7+
{% assign project_hashes = site.data.projects | sort %}
8+
{% for project_hash in project_hashes %}
9+
10+
{% assign project = project_hash[1] %}
11+
{% assign requires = project.requires | sort | join: ', ' | downcase %}
12+
{% assign category = project.category | sort | join: ', ' | downcase %}
13+
{% assign drupal = project.drupal_versions | sort | join: ', ' %}
14+
15+
{% if category contains 'deprecated' %}
16+
<div class="column result-row" data-name="{{ project.name }}" data-created="{{ project.year_created }}" data-requires="{{ requires }}" data-category="{{ category }}" data-drupal="{{ drupal }}">
17+
<div class="js-close"> </div>
18+
<article class="project-wrapper-tile">
19+
<div class="name"><a href="{{ project.homepage }}">{{ project.name }}</a> (<span class="td-filter" data-class="td-created">{{ project.year_created }}</span>)</div>
20+
21+
<div class="logo-icons-wrapper">
22+
<div class="logo">{% if project.logo == null %}<img src="/img/no-image.png" />{% else %}<img src="{{ project.logo }}" />{% endif %}</div>
23+
24+
<div class="project-icons">
25+
<a class="project-source" title="Source" href="{{ project.source }}">{{ project.source | replace:'https://','' | replace:'http://','' }}</a>
26+
{% if project.docs %}
27+
<a class="project-docs" title="Docs" href="{{ project.docs }}">{{ project.docs | replace:'https://','' | replace:'http://','' }}</a>
28+
{% endif %}
29+
<span class="project-drupal filter-drupal">{{ project.drupal_versions | sort | join: ', ' }}</span>
30+
</div>
31+
</div>
32+
33+
<div class="description">{{ project.description }}</div>
34+
<div class="filter-requires"><label>Requires: </label>{{ project.requires | sort | join: ', ' | downcase }}</div>
35+
<div class="filter-category"><label>Category: </label>{{ project.category | sort | join: ', ' | downcase }}</div>
36+
37+
<a class="js-more" href="{{ project.name }}">more details</a>
38+
<a class="project-edit" title="Edit on GitHub" href="https://github.com/drupaltools/drupaltools.github.io/edit/master/_data/projects/{{ project_hash[0] }}.yml" target="_blank">✎ Edit</a>
39+
</article>
40+
</div>
41+
{% endif %}
42+
{% endfor %}
43+
</div>

‎index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
{% assign category = project.category | sort | join: ', ' | downcase %}
1515
{% assign drupal = project.drupal_versions | sort | join: ', ' %}
1616

17-
<div class="column result-row" data-created="{{ project.year_created }}" data-requires="{{ requires }}" data-category="{{ category }}" data-drupal="{{ drupal }}">
17+
<div class="column result-row" data-name="{{ project.name }}" data-created="{{ project.year_created }}" data-requires="{{ requires }}" data-category="{{ category }}" data-drupal="{{ drupal }}">
1818
<div class="js-close"> </div>
1919
<article class="project-wrapper-tile">
2020
<div class="name"><a href="{{ project.homepage }}">{{ project.name }}</a> (<span class="td-filter" data-class="td-created">{{ project.year_created }}</span>)</div>
@@ -36,6 +36,7 @@
3636
<div class="filter-category"><label>Category: </label>{{ project.category | sort | join: ', ' | downcase }}</div>
3737

3838
<a class="js-more" href="{{ project.name }}">more details</a>
39+
<a class="project-edit" title="Edit on GitHub" href="https://github.com/drupaltools/drupaltools.github.io/edit/master/_data/projects/{{ project_hash[0] }}.yml" target="_blank">✎ Edit</a>
3940
</article>
4041
</div>
4142
{% endif %}

‎js/scripts.js‎

Lines changed: 70 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,72 @@
11
jQuery(function($) {
22

33
const rows = $(".result-row"),
4-
body = $("body");
4+
body = $("body"),
5+
rowsContainer = rows.parent();
56

67
$(".results-text").text(rows.length);
78

8-
$("select").change(function() {
9+
// Search functionality
10+
$(".search-input").on("keyup", function() {
11+
const searchTerm = $(this).val().toLowerCase();
12+
13+
rows.each(function() {
14+
const el = $(this),
15+
name = el.attr("data-name") ? el.attr("data-name").toLowerCase() : "",
16+
category = el.attr("data-category") ? el.attr("data-category").toLowerCase() : "",
17+
requires = el.attr("data-requires") ? el.attr("data-requires").toLowerCase() : "",
18+
description = el.find(".description").text().toLowerCase();
19+
20+
if (name.indexOf(searchTerm) >= 0 ||
21+
category.indexOf(searchTerm) >= 0 ||
22+
requires.indexOf(searchTerm) >= 0 ||
23+
description.indexOf(searchTerm) >= 0) {
24+
el.removeClass("js-hidden-search");
25+
} else {
26+
el.addClass("js-hidden-search");
27+
}
28+
});
29+
30+
updateResultsCount();
31+
});
32+
33+
// Sort functionality
34+
$(".sort-by").change(function() {
35+
const sortValue = $(this).val();
36+
37+
if (sortValue === "none") {
38+
return;
39+
}
40+
41+
const sortedRows = rows.sort(function(a, b) {
42+
const aEl = $(a),
43+
bEl = $(b);
44+
45+
if (sortValue === "name-asc") {
46+
const aName = aEl.attr("data-name") || "",
47+
bName = bEl.attr("data-name") || "";
48+
return aName.localeCompare(bName);
49+
} else if (sortValue === "name-desc") {
50+
const aName = aEl.attr("data-name") || "",
51+
bName = bEl.attr("data-name") || "";
52+
return bName.localeCompare(aName);
53+
} else if (sortValue === "created-asc") {
54+
const aYear = parseInt(aEl.attr("data-created")) || 0,
55+
bYear = parseInt(bEl.attr("data-created")) || 0;
56+
return aYear - bYear;
57+
} else if (sortValue === "created-desc") {
58+
const aYear = parseInt(aEl.attr("data-created")) || 0,
59+
bYear = parseInt(bEl.attr("data-created")) || 0;
60+
return bYear - aYear;
61+
}
62+
return 0;
63+
});
64+
65+
rowsContainer.append(sortedRows);
66+
});
67+
68+
// Filter functionality
69+
$("select:not(.sort-by)").change(function() {
970
const el = $(this),
1071
attr = el.attr("class").replace("filter-",""),
1172
selected = el.val();
@@ -28,9 +89,15 @@ jQuery(function($) {
2889
$(this).removeClass("js-hidden-"+attr);
2990
});
3091
}
31-
92+
93+
updateResultsCount();
3294
});
3395

96+
function updateResultsCount() {
97+
const visibleRows = rows.filter(":visible").length;
98+
$(".results-text").text(visibleRows);
99+
}
100+
34101
// Click to open a project
35102
$(".js-more").click(function(e){
36103
e.preventDefault();

0 commit comments

Comments
 (0)