Adjust analysis buttons on work pages

[craigsapp]

On work pages such as https://1520s-project.org/work/?id=Wil3027

1. Display analysis images above the toggle buttons to display the analyses.
2. Do not interleave analysis buttons and images.
3. Resize the analysis plots to be smaller.

[craigsapp]

Implemented with commit https://github.com/benory/1520s-project-website/commit/73fab93e8a5845aa4f141d3661c00c6cb9eb683d

Example of all analyses being displayed:

I would suggest having the on/off buttons (all buttons excluding the hide/show accidentals) with light gray background when the plot is visible (and white when hidden).

An enhancement would be to allow the analysis display status be remembered across different works. In other words, when you turn on the activity plot display, this will be remembered, and the activity plot will be displayed by default when loading another work page.

Note: I changed "Activity Plots" to "Activity". using Plots with plural sounds strange, as there is only one plot showing activity. Activity Plot would be OK.

Note: the Show/Hide Editorial Accidentals button now has different widths for each state. Is that intentional? It is distracting that the button width changes when it is clicked (causing the other buttons to the right to all shift when the accidental button is pushed). Setting a min-width css attribute on the accidental button would fix this behavior.

Related to capitalization of the analysis buttons: they do not match the styles of the metadata information above the analysis buttons. Compare:

In the metadata, only the first letter is capitalized, while in the buttons, every non-preposition word is capitalized. They should use the same system (and I think capitalizing only the first entry of the metadata field/button is easier to read).

Note that the sizes of the analysis plots are given by this CSS code in the work/styles-local.html file:

.analysis-plot {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
    min-width: 500px;
    width: 60%;
}

width:60% with extra controls on the smallest and largest the images using max-width:1000px; and min-width:500px;.

---

I find it useful to display vocal ranges by note counts and by durations since they show slightly different aspects of the music. Comparing the two helps to identify which notes are typically treated as harmonic or non-harmonic in the music, for example.

"Vocal Ranges by Note Durations" is a bit long, but OK if you want to be clear.

Also, if you want only by note durations, I can set up the plots to hide the (durations) text on the top right of the range plot since that is redundant with the vocal range button.

[benory]

Thanks, Craig! All of this looks great.

On your advice, I've made a series of adjustments:

• I've added a light grey background to the buttons, when they are active. (I added the classList "active" when they are clicked.)
• I've fixed the capitalization issue.
• I've adjusted the minimum width of the "hide/show accidentals" button such that the button width does not change.

I've just pushed the last of these updates.

[benory]

The minimum width issue for the accidentals button seems to have been fixed in Google Chrome, but not in Safari.

[craigsapp]

It is working for me in Safari:

(images are not exactly the same size, but the buttons on the Safari page are).

I am using Safari 16.5.2