Added filtering to team page #8437
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Removed bios from the html and changed the sizes of the containers to match. Added in length check to name -- if someone's name is over a certain character limit, the font size will shrink. Changed some of the keys in the team.json file. Began editing the route in code.py to organize team members based on role (staff/fellow/volunteer).
Have it working using a script tag, and only in the console -- nothing is changing on the screen itself yet.
Got the watch:js to work by editing the package.json. Still have a couple of errors in the console, one is in the footer component which I haven't touched and the other is a missing jquery module. Hopefully once those get straightened out the js will work!
Filtering works! If the filtering doesn't return any results, a message is appended to the container reflecting that. On team.json, changed 'role' to 'roles' and 'department' to 'departments', since people can have more than one of each. On team.less, added the css for the separator between sections -- need to get feedback on what it should look like / if we want to do something else instead. On code.py and index.html, simplified the python code and the imports
Changed the layout to be more mobile-friendly, made the icons a bit smaller
Changed json roles and departments to be arrays, changed filtering on team.js to match a partial string. Filtering works in all cases except for when user changes both role and department -- 'fellows' are still showing up in the 'volunteer' section. Should be a quick fix. After that, still need to put in 'current/past fellows' section and same for volunteers.
Filtering works -- just need to add in maybe a subtitle and sort for staff current/emeritus and fellows current/past. Also want to keep working on the sorting logic -- it seems inefficient the way I'm doing it.
Staff is now separated into "Current" and "Emeritus", Fellows is separated into "Current" and "Past". Fixed a bug where the "favorite book" icon was showing up on people who didn't have a link to their book in the JSON. Added new Fellows to the JSON, removed bios, and removed some placeholder text. Filtering all works, but the code seems inefficient. Also need to look at CSS for select tags
for more information, see https://pre-commit.ci
|
Wonderful job @Lasseignejk, thank you! |
mekarpeles
added
the
On testing.openlibrary.org
Codecov Report
@@ Coverage Diff @@
## master #8437 +/- ##
==========================================
- Coverage 16.62% 15.90% -0.72%
==========================================
Files 84 85 +1
Lines 4433 4633 +200
Branches 758 814 +56
==========================================
Hits 737 737
- Misses 3212 3379 +167
- Partials 484 517 +33
|
jimchamp
removed
the
On testing.openlibrary.org
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Works on/closes #7650
feature
Technical
Adds filtering to the team page using Javascript. Clicking on the
selectelements for role and department will cause the people shown below to change accordingly using DOM manipulation. If no one matches the role/department the patron has selected, a message is shown reflecting that.The JSON file was changed so role and department are arrays (people can belong to more than one of each) and more people were added.
Screenshot
Notes
Changes to the UI include getting rid of the bio section and adding subsections for the 'Staff' and 'Fellows' headers.
What still needs work
Need to update the CSS on the select elements. We've talked about using the droppers found on Open Library as inspiration, but the droppers are actually lots of divs. Refactoring that will take some time.
Many of the past Fellows don't have images or any links. It would be nice to have more information for their card on the page!