Passage / version metadata improvements

[jacobwegner]

What's in this PR:

• Integrates a new siblings widget:
• Expands metadata:
• Adds the version label to the top of the reader pane:

Preview via:

https://feature-passage-metadata-improvements--explorehomer-dev.netlify.app/reader?urn=urn%3Acts%3AgreekLit%3Atlg0012.tlg001.msA-folios%3A12r

Depends on:

• scaife-viewer/scaife-widgets#32
• scaife-viewer/explorehomer-atlas#55

[jacobwegner]

Display a human readable reference for the current passage

[jtauber]

I wonder if we should make the references in the "relationship" widgets a smaller font size, drop the border (except maybe on hover), change the "active" in sibling to be white-on-brand rather than just bold.

Here are the diffs in the above mockup:

.passage-siblings-widget [data-v-612dab5a] {
  /* border: 1px solid #e9ecef; */
  /* font-size: .8rem; */
  font-size: .7rem;
  padding: 0.1rem 0.3rem;
}

.active-sibling[data-v-612dab5a] {
  background: #b45141;
  color: #FFF;
}

.passage-siblings-widget[data-v-612dab5a] {
  /* grid-gap: .0825em; */
}

[jtauber]

Just an experiment for the Metadata:

But the key ideas are:

• put label and value on same line (wrap value if needed, perhaps use grid)
• distinguish label and value more (here by colour and typeface)
• use fixed-width for URN (if possible to do on a per-property basis like this)

[jtauber]

I did notice when fixed-height, the width of the grid seems too narrow and there's a horizontal scroll bar:

(my styling from above is still applied but I don't think that's causing this)

[jacobwegner]

I wonder if we should make the references in the "relationship" widgets a smaller font size, drop the border (except maybe on hover), change the "active" in sibling to be white-on-brand rather than just bold.

Here are the diffs in the above mockup:

.passage-siblings-widget [data-v-612dab5a] {
  /* border: 1px solid #e9ecef; */
  /* font-size: .8rem; */
  font-size: .7rem;
  padding: 0.1rem 0.3rem;
}

.active-sibling[data-v-612dab5a] {
  background: #b45141;
  color: #FFF;
}

.passage-siblings-widget[data-v-612dab5a] {
  /* grid-gap: .0825em; */
}

@jtauber I like your changes and will work on implementing them within EH. I had wanted to do the brand background white color idea (overriding in EH) but I had also wanted to pick @paltman's brain to see if he had thoughts on how we'd be able to implement the styles within the widget proper, given that:

• $brand is defined at the project level
• the styles are defined at the widget level

@paltman: If we wanted the widget to make use of a variable for $brand, how would we best do that?

(we can certainly revisit this in our "post-scaife-widgets/skeleton" world, but I'm curious if there is prior art to follow from other Vue packages

[jacobwegner]

Just an experiment for the Metadata:

But the key ideas are:

• put label and value on same line (wrap value if needed, perhaps use grid)
• distinguish label and value more (here by colour and typeface)

Yep; I'll do my best to implement.

• use fixed-width for URN (if possible to do on a per-property basis like this)

@jtauber: Longer term, I want to change how metadata is queried from ATLAS and we will likely have more control. Shorter term, we can hardcode it.

The other thing we could do is move the URN out of metadata and to its own widget:

[jacobwegner]

@jtauber I've updated the siblings widget and took a pass at the metadata widget.

I couldn't quite get flexbox or a grid to do what you did in your mockup; you're welcome to make suggestions or provide a suggestion on https://github.com/scaife-viewer/scaife-widgets/pull/32/files#r445874727

[jacobwegner]

[jacobwegner]

@paltman thanks; when you're able, please check out https://github.com/scaife-viewer/scaife-widgets/pull/32 as well, as that is required for the changes here