Open flukeout opened 7 years ago
Thinking about this a little this morning, I think a JSON structure to define the filters makes sense. It should both describe the different filters and their possible values (if they're not booleans). If we build this right, it should reduce the length of the render methods substantially.
Hwiggidy hmm hmm hmmm... so, that would be fine except it breaks down a bit for the Duration bubble and also for the Web Lit Skills where the 21C skills are separated off.
The main problem seems to be the endless repetition of bubbles though, so we could just pass in the values of those bubble groups via some JSON (instead of defining ALL of the options in JSON) like...
pillGroups {
"difficulty" : ["Beginner","Intermediate","Advanced"],
"age-range" : ["Kids", "Teens", "Adults"],
"web-lit-skills" : ["Code","Design",......
}
You know, with better naming etc. Thoughts?
So for the duration slider, we would hardcode that stuff into the render method since it's a one-off.
We'd have to go deeper than a single object. Perhaps we should just have each type as a component, and feed in the filters as a props array...that'll reduce some of the logic, which can get buggy. Just at the expense of being slightly WET
Progress Report
.less
file named after it in the CSS folderThe original prototype is still available at https://flukeout.github.io/curriculum-db-ui-test/
Up next
cc @hannahkane
I've updated the search and filter component to also have a mobile, narrow view - https://flukeout.github.io/curriculum-search-react/
Will tackle the results list now.
Progress Report Did a first pass of showing result based on a hypothetical JSON object of 'matching activities'. In production, the search UI will pass some parameters to the back end, which will then return the matches. This is why they do not update in the prototype...
Once the back-end pieces are rigged up, the list will update.
cc @hannahkane
@flukeout question about the search UI - when will it make a request to the backend to return matches? Does it do it on every keystroke or when you press Return or is there going to be a search button? Making a request to the server on every keystroke might be overkill.
I did this on the science site and added a throttle so that it wouldn't make a request until the user stopped typing for X amount of time. Seemed to work well.
On Fri, Nov 04, 2016 at 12:16 PM Gideon Thomas
< mailto:Gideon Thomas notifications@github.com
wrote:
a, pre, code, a:link, body { word-wrap: break-word !important; }
https://github.com/flukeout question about the search UI - when will it make a request to the backend to return matches? Does it do it on every keystroke or when you press Return or is there going to be a search button? Making a request to the server on every keystroke might be overkill.
—
You are receiving this because you were mentioned.
Reply to this email directly, https://github.com/mozilla/learning.mozilla.org/issues/2283#issuecomment-258476483 , or https://github.com/notifications/unsubscribe-auth/ABms-bR_Mx3mV-JZFejWytNoJDuQrqZ-ks5q61phgaJpZM4KKhJ7 .
Ah ok that's fine then
Yeah that sounds like a great solution @alanmoo, what was the timeout you used?
Looks like 400ms
Updated to a 400 ms delay before searching after a keystroke.
Up next
Questions for a certain Mr.Chad
cc @chadsansing
Update - https://flukeout.github.io/curriculum-search-react/
Looking good, @flukeout. Can you describe the logic of the search results? Would a collection show up if any of the activities within it matched the search criteria?
Small note - the pencil icon makes me think I can edit the item.
When we get to the point where we're ready to do user testing, I'll be curious to learn if the "Collections" concept and related UX is intuitive to people.
I'm thinking we need to adjust the copy at the top: "Activities and lesson plans to get you started" could be a little more descriptive. We could use that to introduce "collections" (e.g. "Activities and Collections"), and we could clarify the scope of the content (e.g. "to explore important Web concepts "). Something like that? Or am I over-complicating?
https://flukeout.github.io/curriculum-search-react/
UX For Collection Search
Nice changes. +1 on the UX for Collection search. Just wanted to clarify.
Even as we're gathering feedback on the new Teaching Activity page search & filter UI we've decided to also start building it as we go. We can make changes as we gather feedback, but are fairly confident the general theme of the prototype will remain.
The Plan
Questions
Will work on this with @alanmoo