Modify document page, document feed and commissioner page wagtail templates

[JonellaCulmer]

What we're after: To make it easier for users to find documents and other content on commissioner pages, we need to make adjustments that support the addition of document feeds.

Changes: Commissioner page - Ensure we can include a button to link to a document feed page

Document feed page - Needs to sort by three things: category, subject, and year, external links, PDFs, video all need to be options for items in the feed and display with the correct icons.

Document page - Change template to add new field for Page URL, to accommodate external links, format external links to appear as such on the document feed page (may be a document feed template change instead), dropdown for a type of link (PDF, wagtail page, external link in the template

Completion criteria:

• [ ] The above changes (or some version of that) be done.

Designs

[rfultz]

(studying site structure, tinkering, breaking things (locally))

[rfultz]

Been working through options, breaking things. Ran through options and scope with John and Jonella on Friday. Now to implement it!

[rfultz]

Have created the CommissionerItem but also working my way through a StreamField for the DocumentChooserBlock and ParentalKey functionality for linking commissioners to their items (statements, opinions, etc)

[JonellaCulmer]

@rfultz When we get to the testing for this, we need to make sure to include content since they live in Wagtail and we use these templates elsewhere.

cc: @dorothyyeager @AmyKort

[rfultz]

Big discussion yesterday about taxonomy functionality. Started the overhaul

[rfultz]

Apparently the cms doesn't have a hierarchical taxonomy at all and it's not native to our versions of Django or Wagtail. (The first pull-down on the Latest Updates page isn't a taxonomy but a page type. Implementing the current proposed primary taxonomy for Commissioner Items in the same manner would add 30 new page types to the cms.)

[dorothyyeager]

Creating 30 new page types would be completely confusing for all the staff who use Wagtail to do daily updates for their job (not just the Content Team, but Press, Public Records, Info, etc.)

Is it possible to treat these like report pages (similar to the files in https://www.fec.gov/about/reports-about-fec/)? Those are all document pages.

[rfultz]

Yeah, 30 new page types is a non-starter. The reports pages only have one taxonomy, though, so not an equal comparison.

My ideal is for the new commissioner items to be one new type (done) and add them to the left panel in the admin menu so they don't clutter the rest of the site—especially because they won't have specific parent pages.

I'm working through an idea to have a single taxonomy but filter which options appear where—one place in the code, easy hierarchical management for admins, and two groups for the end user

[rfultz]

We can start reviewing code now, but there will likely be changes after #3947

[rfultz]

After yesterday's discussion, we're looking at a temporary solution to demo next week. cons: would work only with this one page and would require extensive code editing by site authors. pro: would maintain current appearance and cmd-f options

[rfultz]

@JonellaCulmer here's a grab of the what I've got the results text added. Meh. I put little thought into it, knowing you were coming along behind me :)

I wonder if we should update this ticket with the new approach rather than the first attempt

[JonellaCulmer]

Thanks, @rfultz!

And that sounds good to me too, or rather opening a new fresh ticket with just the solution we're working on and close this one in favor of that one.

[JonellaCulmer]

@rfultz How much would you hate me if we introduced another line of text that says Results when the fields are used? It matches our other places were we display text results like this: Election search and Compliance search

I’d also like to change the color of the highlight to match other sections on the site (example: https://www.fec.gov/help-candidates-and-committees/filing-reports/redesignating-and-reattributing-contributions/) I’m asking James Jones exactly what color that is, because it’s not officially in our pattern library. I’ve estimated it in my mockup with a 50% opacity of our red.

A couple other things, we need to add a dividing line above the filters to make it more clear that there’s a separation in the content that will be searched. Nothing above the line/search box will be searched.

And Tom talked about the grouping of the filters, so I rearranged them in the mockup. And we need to talk about the example text. Looping in @dorothyyeager from content for her thoughts on that. Dorothy, it's a free text search, similar to some of our other keyword searches.

Let me know what you think about the results portion.

[rfultz]

@JonellaCulmer would the Results headline appear only when a filter has been used? And then disappear again when all of the filters are back to 'All' and the text search is blank?

@dorothyyeager, I'm not sure how the rest of the site's searches work, but the text search field is only looking for content on this page and only lower on the page than these fields (the Commissioner Items blocks). There is no form submission, no page reload, no way to link to a filtered search of this page—it's purely done in-browser

[rfultz]

Until we get the color code, I just grabbed the color from the Feedback tab :)

[JonellaCulmer]

@rfultz That makes the most sense to me.

Alternate versions. What do you think?

[rfultz]

Is there a difference between these two?

The left-aligned headline with a pipe separating it from a kind of subhead / label, are we using that anywhere else?

[JonellaCulmer]

@rfultz No, we're not using that elsewhere. It's a slight modification on the first one I sent, in an attempt to make it a bit easier to spot the results. It's different from the guidance search where we have 100% page width to work with. The tighter coupling may improve the findability/usability of the results text.

The difference between the two is there is a line below results in the first and no line in the second. The line seems heavy to me in this space and I wanted to get your thoughts on that. There's also a dividing line between the search and the text at the very top of the page - another line separating the search feature from the results seems a bit too much to me. What do you think?

[dorothyyeager]

@JonellaCulmer @rfultz You guys are doing a great job thinking this through.

The highlight field is from "reporting examples" in case you need to find a template with it in Wagtail. Let me know if I should make a ticket to put it in our pattern library.

I like the new order of the fields.

For the example text - I think we need to show an example of a two-word text search; something like "dark money" or "foreign national" would work. That way users will see whether they need quotes or AND or whatever they need to get the phrase.

[JonellaCulmer]

@dorothyyeager Okay. Combined with my desire to show that partial words will work, what do you think about the following:

Examples: dark money, dark, dar

cc: @rfultz

[rfultz]

For the text search, I'd be wary of suggesting more complicated searches. The logic is that the characters are in that order but could get complicated if we cross otherwise-invisible tags (<b>, </i>, <em>, </a>, etc). I've set the field not to allow punctuation to limit breaking things, like if they search for code that could execute something. This is more of a "find in page" than search as most of us think of search.

Just a reminder: the results will update as the user types each character. As they type "Dark", it'll be filtered by "d", then "da", then "dar", in near-realtime.

[JonellaCulmer]

@rfultz @dorothyyeager Per our discussion. This is the example text we'll go with.

[rfultz]

Update: holding for details/content (holding for the content data, not the content team)

[jason-upchurch]

@rfultz I moved this to innovation sprint in preparation for the next iteration. Please let me know if I need to reprioritize it--thank you!

[JonellaCulmer]

Iceboxed for now, saving work for when we need to pick it up again.