ggeisler
commented
5 years ago Here's a list of manifests from our fixtures page that I've been using locally. Some subset of this list could be used as the plugin's default list of resources, maybe?
{ manifestUri: "http://media.nga.gov/public/manifests/nga_highlights.json", location: "National Gallery of Art"},
{ manifestUri: "https://data.ucd.ie/api/img/manifests/ucdlib:33064", location: "Irish Architectural Archive"},
{ manifestUri: "https://wellcomelibrary.org/iiif/b18035723/manifest", location: "Wellcome Library"},
{ manifestUri: "http://dams.llgc.org.uk/iiif/2.0/4389767/manifest.json", location: "The National Library of Wales"},
{ manifestUri: "https://demos.biblissima.fr/iiif/metadata/florus-dispersus/manifest.json", location: "Biblissima"},
{ manifestUri: "http://beta.biblissima.fr/iiif/manifest/ark:/43093/desc57cb76cd3739a24a9277b6669d95b5f3a590e771", location: "Biblissima"},
{ manifestUri: "https://www.e-codices.unifr.ch/metadata/iiif/gau-Fragment/manifest.json", location: "e-codices - Virtual Manuscript Library of Switzerland"},
{ manifestUri: "https://wellcomelibrary.org/iiif/collection/b18031511", location: "Wellcome Library"},
{ manifestUri: "https://gallica.bnf.fr/iiif/ark:/12148/btv1b10022508f/manifest.json", location: "Bibliothèque nationale de France"},
{ manifestUri: "https://manifests.britishart.yale.edu/Osbornfa1", location: "Beinecke Rare Book and Manuscript Library, Yale University"},
{ manifestUri: "https://iiif.biblissima.fr/chateauroux/B360446201_MS0005/manifest.json", location: "Biblissima"},
{ manifestUri: "https://iiif.durham.ac.uk/manifests/trifle/32150/t1/m4/q7/t1m4q77fr328/manifest", location: "Durham University Library"},
// { manifestUri: "https://iiif.vam.ac.uk/collections/O1023003/manifest.json", location: "Ocean liners"},
{ manifestUri: "http://storiiies.cogapp.com/holbein/manifest.json", location: "National Gallery, London"}
cbeer
mikeapp
This is part of #1833.
See the interactive mockup for a better sense of how the plugin is intended to work than I can give with screenshots.
A goal in the design of list view for the load window plugin is to keep the arrangement of resource elements consistent across device sizes, and to use that same arrangement in the sidebar of a collection or multivolume work where we show the manifests that are part of the larger work. For example, here is the proposed arrangement for the window sidebar and the load window on various device sizes:
Window sidebar
Mobile
Tablet
At tablet and larger, the device is wide enough to fit all resource elements in the same row:
Desktop
Linked elements
We don't want to make the entire row linked (because that makes it hard to scroll without selecting a resource on touch devices) but we do want a good-sized link target to make it easy and quick to open a resource. The thumbnail and title are visually grouped and should be a good link target. For accessibility purposes, we should probably group those two elements in HTML and make the group the link (so we don't have repeated links in screenreaders).
General suggestion: The thumbnail and title section takes 100% width on mobile, and 50% width on larger than mobile viewports (leaving the institutional elements the other 50%).
Add resource panel (Split to #1857)
The goal is to enable the user to add a resource via IIIF URL, but to minimize the space an always-present URL input would require. The proposed solution is a button at the bottom that is fixed at the bottom of the viewport. As shown in the screenshots above, in mobile the button just uses an icon but at larger sizes it includes a text label as well.
When selected, the add resource panel is displayed (slides up from bottom of viewport):
In terms of Material UI, this is an Expanding bottom sheet. The user can close the panel via the Cancel action or the title bar icon.
When the user clicks Add, a new row is immediately added to the top of the resource list and uses placeholder elements to indicate the resource is actively being retrieved (I couldn't easily do it in the mockup, but ideally the placeholder elements are animated to indicate something is happening. Similar to this example, though I'm not suggesting we use that module in particular.):
If the resource is successfully retrieved, it is added to the list where the placeholder row is (similar to Mirador 2, other than the placeholder elements).
Add resource error message (Split to #1873)
If the resource cannot be retrieved, we should let the user know by replacing the placeholder row with a notification banner. If we follow the Material UI guidelines for the banner, it is displayed at the top of the content area, is non-modal, and pushes content down rather than overlaying it:
(EDIT: @jvine and I discussed and we think we will need to ignore the Material UI guidelines in this case and show the notification banner in place of the placeholder row that failed to load, wherever that placeholder row is in the list. This is because the top-pinned banner placement won't be as intuitive if there are multiple manifest loading errors, or if the manifest that failed to load is not at the top of the list (e.g., on initial load of the list, several manifests fail to load).)