princeton-cdh / lenape-timetree Goto Github PK

force-directed layout that takes branch and century into account (nodes don't yet fall exactly within their century band)

available for review on the current version of the site:
https://princeton-cdh.github.io/lenape-timetree/

please review and provide feedback about next steps / how to refine the layout

these are reflected in the "typefaces + visual styles" figma page for now

• They were reviewed by Rebecca and good enough for now.

Here is the link to the sitemap on Figma

The sitemap was reviewed at our meeting and revised live based on team's feedback.

What's in scope:

• the sequence and logic of the panel (how a panel can be closed/collapsed + how the project intro can be viewed)
• the visual style of the two buttons (button to bring back the project intro, and the one to collapse the panel)

dev notes

• download google docs with leaf content as text files
• remove old leaves in case of name changes
• run the script to convert content to hugo leaf files
• commit changes

needs input from @gissoo on how to calculate this (size of viz, does it adjust/reflow on page resize; where to center the tree, etc.)

setup a preliminary tag index page with alphabetized tags and counts using built-in hugo functionality (it's easy, can include links to leaf pages by tag as provisional implementation)

Here are the colors with labels – please let me know if you have any questions.

there is a chance the "branch region background" color may change.

I think a minimum height for the percy mobile capture would be useful, can we try 960px?

Originally posted by @gissoo in #45 (comment)

should be able to adapt from geniza or startwords

dev notes

• adapt initial function for drawing leaves (see https://observablehq.com/d/32bcd3234e4021e1 )
• use leaves instead of circles for nodes in the graph
• rotate leaves to adjust orientation based on tree or branch and/or position on the screen

Note that the leaf function likely needs more variation, will benefit from Gissoo's input when she's able to respond

Here are the design specs in the type table on figma

Not in scope: the site title type style

dev notes

• make leaves keyboard navigable
• make keyboard nav order logical
• make the leaves buttons (role = button)
  • aria label: display title of the leaf
  • area described by: display date and branch
  • trigger button on enter & space bar; transfer focus in, then close button transfers focus back.
• disable leaf button when tag is active and leaf does not have tag
• make the panel act like a modal (transfer focus; announce; for keyboard user, send them to the close button after tabbing through last tag; return focus to the next leaf after the clicked one)
• separate tag from panel: closing panel should no longer close the tag
• h2 equivalent label for each branch (possible target from the branch legend in the intro)
• make the footer tab order first before the tree
• make the intro dom order first before the tree
• allow zoom on desktop (tracked separately)
• buttons for zoom in/out (tracked separately)
• #199
• ensure visually hidden content is also hidden from screen readers
• ensure visually hidden/disabled buttons are disabled or hidden from screen readers

revisions after testing:

• update node order in the dom to follow visual left-to-right branch order
• revert focus style customization for active tag close button
• ensure invisible branch headers retain tabindex="-1" (focussable but not part of default tab sequence)
• clean up focus style for invisible branch header when focused
• when tag is active, make tagging act like a modal (contain within tree + tag)

dev notes

• adapt history behavior from startwords contextual notes code

What's in scope: the visual style of a selected leaf

dev notes

• figure out how to include one to three images in leaf content; update templates as needed for sizing
• add a couple of examples; draw from spreadsheet https://docs.google.com/spreadsheets/d/1MH-R-AqolnHMI8DfVaLzXBhWlVTg7r9miSPNtonvlPg/edit#gid=1316270331
• document how to add and edit images
• revise import script structure as needed

not in scope: the site title / display font

https://www.figma.com/file/sGOn9MZy6ML0yNxuiQJ8u5/Lenape-Time-Tree?node-id=207%3A58&t=pRzWC9cOIALn0Mvf-1

Here is the first round of wireframes – a lot helpful feedback was received from the team

dev notes

updates based on whiteboarding conversation 2022-12-08:

• change svg width to 800
• svg container width to 65% on desktop
• selected leaf panel should be 28% on desktop
  • panel on mobile: full width; tablet/1024 (768 up?), max width should be 320px, centered
  • configure percy to take snapshots for 768, 1024 for selected leaf only
• homepage intro text should be in the same space as the selected leaf panel (show at start / show when not selected)

This issue tracks design work through the CDH design review workflow.

Here is a link to the

Description:

How the proposal/idea can fail:

Questions:

1. Does the idea and/or the design make sense to you? If not, please say why
2. Is there anything that you expected to see and is missing?

Additional context
Add any other context or screenshots about the design here.

This is the first round, and was reviewed by Rebecca.

The next steps regarding this issue are:

• look into if and how fonts with commercial licenses can be used on a site on github pages
• continue search for typefaces that can be used on our site (keep looking on google fonts)
• apply more colors options for the site

Adapt from geniza; start with homepage (should eventually have one content page also). At least mobile + desktop; maybe a tablet size also.

This issue tracks design work through the CDH design review workflow.

Here is a link to the

Description:

How the proposal/idea can fail:

Questions:

1. Does the idea and/or the design make sense to you? If not, please say why
2. Is there anything that you expected to see and is missing?

Additional context
Add any other context or screenshots about the design here.

Here are revised wireframes

What was revised:

1. less prominent search form
2. navigation to be moved to the footer and incorporated as part of the tree
3. page content (intro) to be placed in the panel
4. some use of actual data and labels placed in particular orders on the tree

In scope:

• grid on desktop (i.e. width of the content on the page)
• H1 and H2 styles and spacing
• paragraph styles
• bullet styles
• image and image caption styles
• link styles
• resources/citation styles (indents, italics, links, spacing)
• list styles (spacing and header styles)
• spacing between elements

NOTE: I am not creating a single page design for each root page, instead I'm proposing all the styles on one page and showing how they would apply to our content (taken from the root data docs on the drive).

What's in scope:

• The visual style of the project intro

What's in scope:

• the logic and sequence of interactions with a tag
• the visual styles of the selected tag and the leaves in the course of their interaction – UPDATE: explore other visual styles other than the checkmarks to signify clickable tags.