IEEE.org     |     IEEE Xplore Digital Library     |     IEEE Standards     |     IEEE Spectrum     |     More Sites

Commit 2efcf2e6 authored by Amy Rose's avatar Amy Rose
Browse files

add basic filters skeleton

parent 91c29bef
Pipeline #850 passed with stage
in 3 minutes and 26 seconds
{% comment %}
TODO: documentation
{% endcomment %}
<div class="checkbox-dropdown">
<span class="checkbox-dropdown-label">
{{ include.label }}
</span>
<ul class="checkbox-dropdown-list">
{% for option in include.options %}
<li>
<input
type="checkbox"
id="{{ option }}"
name="{{ include.name }}"
value="{{ option }}"
/>
<label for="{{ option }}">{{ option }}</label>
</li>
{% endfor %}
</ul>
</div>
......@@ -2,6 +2,8 @@
TODO: documentation
{% endcomment %}
{% assign filters = "college|type|semester" | split: "|" %}
<noscript>
<p class="error">
Sorry, projects searching requires JavaScript to be enabled in order to
......@@ -15,25 +17,51 @@ TODO: documentation
type="text"
placeholder="Search Projects"
/>
<div id="filters-row">
{% for filter in filters %}
{% assign capitalized = filter | capitalize %}
{% assign label = "Select " | append: capitalized %}
{% assign name = "filter-" | append: filter %}
{% comment %}
Workaround for the fact that you can't do:
site.projects | map: filter | uniq
{% endcomment %}
{% assign options = ("" | split: ",") %}
{% for project in site.projects %}
{% assign options = options | push: project[filter] %}
{% endfor %}
{% assign options = options | uniq %}
{%
include checkbox-dropdown.html
label=label
name=name
options=options
%}
{% endfor %}
</div>
</div>
<div id="projects-container">
{% for project-page in site.projects %}
<div id="{{ project-page.mystic-slug }}" class="project">
<h2>{{ project-page.project }}</h2>
<p>{{ project-page.tldr }}</p>
<p>{{ project-page.owner | join: " & " }}</p>
<a href="{{ project-page.url | relative_url }}">View more</a>
{% for project in site.projects %}
<div id="{{ project.mystic-slug }}" class="project">
<h2>{{ project.project-name }}</h2>
<p>{{ project.tldr }}</p>
<p>{{ project.owner | join: " & " }}</p>
<a href="{{ project.url | relative_url }}">View more</a>
</div>
{% endfor %}
</div>
</div>
<script>
const PROJECTS_DATA = {
{% for project-page in site.projects %}
"{{ project-page.mystic-slug }}": {
"name": "{{ project-page.project }}",
"tldr": "{{ project-page.tldr }}",
"owner": "{{ project-page.owner | join: ' & ' }}",
{% for project in site.projects %}
"{{ project.mystic-slug }}": {
"name": "{{ project.project-name }}",
"tldr": "{{ project.tldr }}",
"owner": "{{ project.owner | join: ' & ' }}",
"college": "{{ project.college }}",
"type": "{{ project.type }}",
"semester": "{{ project.semester }}",
},
{% endfor %}
}
......
---
layout: project
project: Sound Voltex
project-name: Sound Voltex
tldr: A 6-key + 2-knob game about applying effects to music
owner:
- dj TAKA
- PHQAUSE
mystic-slug: test1
college:
- SDVX
- Museca
type: Dynamic VSRG
semester: Spring 2012
---
## List of Services
......
---
layout: project
project: beatmania IIDX
project-name: beatmania IIDX
tldr: The genre-defining 7-key + turntable game
owner: L.E.D.
mystic-slug: test2
college: IIDX
type: Static VSRG
semester: Spring 1999
---
## List of Services
......
---
layout: project
project: pop'n music
project-name: pop'n music
tldr: The deceptively difficult 9-button color burger-smashing game
owner: wac
mystic-slug: test3
college: none
type: Dynamic VSRG
semester: Fall 1998
---
## List of Services
......
---
layout: project
project: Dance Dance Revolution
project-name: Dance Dance Revolution
tldr: The ubiquitous 4-panel dance game that swept the world
owner: NAOKI
mystic-slug: test4
college: DDR
type: Dynamic VSRG
semester: Fall 1998
---
## List of Services
......
---
layout: project
project: jubeat
project-name: jubeat
tldr: A 16-button musical whack-a-mole game on life support
owner: S-C-U
mystic-slug: test5
college: none
type: Whack-a-mole
semester: Summer 2008
---
## List of Services
......
---
layout: project
project: GuitarFreaks & DrumMania
project-name: GuitarFreaks & DrumMania
tldr: The games that Guitar Hero ripped off
owner: Yoshihiko Koezuka
mystic-slug: test6
college: GFDM
type: Static VSRG
semester: Spring 1999
---
## List of Services
......
/* Styles for checkbox dropdowns (checkbox-dropdown.html) */
/*
Some styling aspects such as sizing, positioning, and margins are deliberately
omitted, since these will vary by usage and be styled accordingly elsewhere.
*/
.checkbox-dropdown {
border: 1px solid #727578;
border-radius: 3px;
padding: 0.5em;
.checkbox-dropdown-label {
font-size: 1em;
}
.checkbox-dropdown-list {
//position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
li {
display: flex;
flex-direction: row;
input {
margin-right: 1em;
}
}
}
}
......@@ -3,22 +3,34 @@
#projects-search {
display: flex;
flex-direction: column;
padding: 0 15%;
margin-bottom: 2em;
input {
#projects-search-bar {
display: block;
box-sizing: content-box;
font-size: 0.9em;
margin: 0 15%;
padding: 1em;
outline: none;
border: 1px solid #727578;
border-radius: 2px;
border-radius: 3px;
&:focus {
outline: 1px solid darken(#727578, 10%);
}
}
#filters-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 1em;
.checkbox-dropdown {
width: 12em;
margin: 0 auto;
margin-bottom: 1em;
}
}
}
#projects-container {
......
......@@ -10,6 +10,7 @@
@import "includes/black-link-bar";
@import "includes/card-tiles";
@import "includes/cards";
@import "includes/checkbox-dropdown";
@import "includes/event";
@import "includes/footer";
@import "includes/horizontal-row";
......
......@@ -2,7 +2,7 @@
/* Config - Field and its search weight (scalar) */
// TODO: refine values
const SEARCHABLE_FIELDS = {
const SEARCH_FIELDS = {
"name": 3.5,
"owner": 1.75,
"tldr": 1,
......@@ -57,7 +57,7 @@ function search_projects(search_text) {
return PROJECTS_LIST.filter(project => {
project.search_valid = Object.entries(project)
.some(([field, value]) => {
if (Object.keys(SEARCHABLE_FIELDS).includes(field)) {
if (Object.keys(SEARCH_FIELDS).includes(field)) {
return value
.trim()
.toLowerCase()
......@@ -76,7 +76,7 @@ function search_projects(search_text) {
function sort_projects(search_text, projects) {
projects.forEach(project => {
const scores = [];
Object.entries(SEARCHABLE_FIELDS)
Object.entries(SEARCH_FIELDS)
.forEach(([search_field, weight]) => {
const value = project[search_field];
const dist = levenshtein(value, search_text);
......@@ -84,6 +84,7 @@ function sort_projects(search_text, projects) {
scores.push(score);
});
project.search_score = Math.min(...scores);
project.div.setAttribute("score", project.search_score); /* TODO: REMOVE!!!!! */
});
projects
.sort((a, b) => (
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment