evan/ewpratten.com
1
Fork 0
Code Actions

Add project type selection

Browse Source
This commit is contained in:
Evan Pratten 2021-04-15 10:40:52 -04:00
parent ae64544596
commit a1d343eab1
3 changed files with 46 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
assets/js/project-wall.js Normal file
View File

@ -0,0 +1,24 @@
function updateProjectWall(category) {
// Check if all projects should be shown
var showAll = category == "all";
// Get the wrapper element
var wallWrapper = document.getElementById("project-grid");
wallWrapper.querySelectorAll(".home-project").forEach((project) => {
// Determine if the project should be shown
let types = project.dataset.types.split(",");
if (showAll || types.includes(category)){
project.classList.remove("hidden");
} else {
project.classList.add("hidden");
}
});
// Refresh the wall
orderProjectGrid();
}

3
assets/js/projects.gen.json Normal file
View File

@ -0,0 +1,3 @@
---
---
{{site.data.projects | jsonify}}

20
index.html
View File

@ -129,11 +129,27 @@ uses:
<div style="padding-top:3rem;"></div>
<div style="margin:auto;width:max-content;max-width:100%;">
<button style="margin:5px;" type="button" class="btn btn-outline-info btn-sm"
onclick="updateProjectWall('all');">All</button>
<button style="margin:5px;" type="button" class="btn btn-outline-info btn-sm"
onclick="updateProjectWall('app');">Apps</button>
<button style="margin:5px;" type="button" class="btn btn-outline-info btn-sm"
onclick="updateProjectWall('web');">Web</button>
<button style="margin:5px;" type="button" class="btn btn-outline-info btn-sm"
onclick="updateProjectWall('plugin');">Plugins</button>
<button style="margin:5px;" type="button" class="btn btn-outline-info btn-sm"
onclick="updateProjectWall('library');">Libraries</button>
<button style="margin:5px;" type="button" class="btn btn-outline-info btn-sm"
onclick="updateProjectWall('game');">Games</button>
</div>
<div class="row" id="project-grid">
{% for project in site.data.projects %}
<div class="col-sm-4 project-item">
<div class="card home-project">
<div class="card home-project"
data-types="{% for type in project.types %}{{type}},{% endfor %}">
{% if project.hero %}
<img src="{{project.hero.img_src}}" class="card-img-top" alt="{{project.title}}"
loading="auto">
@ -196,6 +212,8 @@ uses:
setTimeout(orderProjectGrid, 5000);
</script>
<script src="/assets/js/project-wall.js"></script>
<!-- Dotdav -->
<!-- <script src="{{site.baseurl}}/assets/js/easyScrollDots.min.js"></script>