Restructure the component-level UI layout

[ggeisler]

Since the last community workcycle on ArcLight, several institutions -- Duke and University at Albany, SUNY, for example -- implemented production versions that included a significant change to the UI layout used for display component-level information (as opposed to the search results and home/repositories pages). Other institutions considering implementing ArcLight in the near future have also indicated preferring this updated UI layout.

Below is a very general description of the overall layout change. I think the Stanford developers currently working on ArcLight know how to find the relevant code from Duke to use as a more specific guide, when applicable. I'll also create more specific tickets that describe updates to individual sections that require more description and/or deviate somewhat from Duke's example.

• Change the component-level show page layout from a single-column to two-columns, where the sidebar column is 1/3rd of the page width, and the main content column is 2/3rds of the page width (i.e., a 4/8 column split) . This is different from the 3/9 column split used on the search results page but 1) we need the sidebar to be wider to accommodate a potentially deeply nested (and therefore indented) collection navigation tree, and 2) I don't think there's any UX problem with having two different sidebar/main content area proportions in these two contexts.

---

More specifically, this comparison shows where the major parts of the UI move from the current version of ArcLight to the recommended updated layout:

A: Breadcrumb section - Moves to the top of the main content area, separated from the component title and details by a bottom border. See #1176 for details.

B: Collection info - Moves to the top section of the sidebar column. See #1175 for details.

C: Collection overview - This tab and related collection metadata is currently only displayed when you are at the top, collection-level component page. The vertical tabs indicated by the right-side "C" in the current page move to the middle section of the sidebar column, with a section title of Collection overview.

D: Collection metadata - The metadata shown in the current Overview tab is shown in the main content area when any of the "Collection overview" tabs are selected in the middle section of the sidebar. So the vertical navigation in the updated "Collection overview" section works the same as it currently does, determining which section heading has focus and is scrolled to the top of the main content area.

E: Collection contents - The current "Contents" (when at the collection level) or "Collection context" (when at a level below collection) tab is moved to the bottom section of the sidebar, in a section with the heading Collection contents. See #1174 for details.

F: Online content - The current "Online content" tab changes to a new info box below the component title, with a redirect to a search results page. See #1168 for details.

G: Access info - The current "Access" tab shows the collection level access statement when at the collection level, and can show more specific access statements when at a lower level component. The collection level access info moves to the end of the collection metadata, and component-specific access info will be shown at the end of the component details in the main content area. See #1166 for details.

[jcoyne]

@ggeisler Can you provide a mockup for what happens when you press "Show only online content" and if you click one of the links under "Collection contents"?

How do we differentiate between bookmarking the collection and bookmarking the item in the new designs?

Is it your intention to get rid of the "Download EAD" link?

What happens when you click the "info" icon in section B. I don't believe that is in the old design.

I'm a bit confused in the existing design. It seems like we have two "Online Content" sections that represent different things:

Currently there is a difference between the "Access" that displays on a collection page and the "Access" that displays on a component page, but it's unclear whether you intend to keep this distinction in the new design. See https://github.com/projectblacklight/arclight/blob/main/app/components/arclight/document_component.html.erb#L120-L124 There are different fields from solr displayed in each section: https://github.com/projectblacklight/arclight/blob/main/lib/generators/arclight/templates/catalog_controller.rb#L359-L367

[ggeisler]

@jcoyne As I mentioned in my ticket description, I plan to provide more specific tickets that address details of individual sections of the general UI update. This ticket was meant as a general guide to how the layout should change. I'll address all of your questions in subsequent tickets or comments here when I have time.

[ggeisler]

@jcoyne

How do we differentiate between bookmarking the collection and bookmarking the item in the new designs?

I don't think the new layout changes anything with bookmarking. The bookmark control is still available in all the same places it currently is:

---

---

Plus the same bookmark affordance when displaying search results, which can display both collections and components, as we do now.