Restructure the component-level UI layout #1148
Description
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.