Design generic search results so that when the user searches generic pages/content they would see a simple list of results

[gissoo]

Here is the figma file for desktop and mobile represented as layout on the page + components with auto layouts implemented

[thatbudakguy]

this is great! i think we had talked about having thumbnails for pages that had images, but i'm OK with just using the cdh icons instead — it'll look cleaner and we don't have to deal with the problem of missing images.

my only question is about the pagination: could we see it in different states? I'm wondering if the active page indicator stays in the middle when there are many pages, like PPA's:

or if we just always show all the pages, kind of like how the blog section of the site is currently. if it helps, when i tested there were never more than a few (<10) pages of results for any search, and I think it'd be a long time before that was likely to change.

[gissoo]

@thatbudakguy Thanks for writing! Re: the pagination – let's make this another issue, was going to ask you how much detail you need about pagination right now, I'll create another issue for that.

[rlskoeser]

The search results look good to me too. I presume we can use the existing logic to determine which icon is displayed for a given page? (I think there's a template tag or method that determines it based on url; these are the same icons that are used when pages show up as a tile on their parent page.)

If someone were to link directly to a search, would they be able to see any header branding or navigation, or would they not see any because the search bar is active?

[thatbudakguy]

i don't think the current template tag behavior is on @gissoo's radar. my current reading of these designs are that we always use the "page" icon until styles are created for different page types, and that the icon might later indicate the page type (not its position in the hierarchy or URL). but maybe the template tag will ultimately accomplish the same thing...

by way of explanation, the icon logic @rlskoeser mentions is here: https://github.com/Princeton-CDH/cdh-web/blob/d480de7d412e3d3c508eff6e0726d4ad5a24390f/cdhweb/pages/templatetags/cdh_tags.py#L10-L26

basically, this lets us choose an icon for a page based on the URL to that page. we go down the list above, and if the URL includes one of the words on the left side, we use the icon named on the right side (so anything with /people/ in the URL uses the "people" or ppl icon).

as @rlskoeser mentions, we already use this to pick icons for the tiles at the bottom of pages — you can see here that the contact page URL matches /contact/ above so it gets the convo icon:

@gissoo what do you think of using this system? I can apply it to the search results so that we can see how it looks.

[gissoo]

@thatbudakguy @rlskoeser Thank you for writing, as we discussed on Zoom previously, I'm fine with that, love that solution!

• Here are the designs for the generic search results on the "Search Results – Generic Pages" on the Figma file – as we decided we are deprioritizing the pagination, so you don't need to pay attention to the pagination component – Following the search form component and issue you see the CDH logo at the top of the page (to respond to @rlskoeser 's comment above) – Also I have added the results count as its own component as well with auto layout.

• I have created the RM and Blue styles here as well – added them to the components – note the components have three properties here (the second two are being used for now till we expand on the search result types):

Note: to inspect the spacing between components check out the bottom margins of each component (you can do that on the mock up as well)