Revision of title block

[sammeltassen]

Elaboration of a new feature described in:

• Stand-alone exhibition viewer, presenter mode and other exhibition improvements #15

Exhibition pages always start with a title block on the top left:

This is good for recognisability (publications and collections have a similar title block in the same position) but it also limits the layout options of the first part of exhibitions. We aim to add support for IIIF ranges in exhibitions as well later this year, which would be used for making a table of contents. This adds a requirement for an overview of chapters, which needs to be taken into account for this revision.

Some solutions:

1. The position of the title block can be customised using a new type of canvas and behaviour property. Chapter titles are blocks as well (but this would be difficult to encode in the Manifest Editor since ranges are not a canvasses: you'd need to make both a canvas and a range, pointing at that canvas, to create a chapter). The table of contents could be shown in a modal after clicking a title block.
2. The title is shown above the exhibition, similar to the object label on object pages. Chapter titles interrupt the grid of blocks, and provide sharing links and a "back to top" button. The table of contents can be unfolded at the top of the page (or opened in a modal) to navigate the exhibition.
3. The table of contents is shown as a sticky element on the right of the exhibition, and is collapsed as a sticky menu on mobile (maybe at the bottom rather than on the top of screen). This needs to be combined with 2.

[sammeltassen]

Another possibility is to keep the fixed title block but turn it into a row with other (fixed) blocks that contain:

• The introduction (the manifest summary and metadata rather than a separate canvas?)
• Table of contents
• Sharing links

Although this reduces the role of the first painted canvas as a kind of hero image.

[sammeltassen]

Here sketches of a title at the top of the page, a sticky menu at the bottom (that appears when scrolling the exhibition), and a chapter title. It does seem a more focussed start than the previous sketch. (We have to take into account that the exhibition will also be rendered stand-alone, without the blue header on top.) I added the arrows as a way to go to the next/previous heading. Not sure if that's useful.

[stephenwf]

@sammeltassen Do they headings indicate a new range?

[sammeltassen]

@stephenwf Yes indeed–and I realise ranges can be more complex, like different views on the same exhibition, but this is a simple interpretation as as TOC.

[stephenwf]

Thanks @sammeltassen we will assume a single top level range on the Manifest with non-nested ranges that include one or more canvas IDs in that case, with labels to make the ToC.

What does the menu in your latest image look like when open?

[sammeltassen]

I don't have a visual of that yet. The problem I was facing is that users need to be able to unfold the TOC at the top of the exhibition, but also from the bottom menu after the heading disappeared. It would be good if both TOCs are the same. So perhaps the TOC appears in a modal (like a text panel)? Then the downward pointing arrow in the first image should be a hamburger like in the bottom bar.

[funkydunc]

Just to clarify if my understanding is correct:

• 'Table of Contents' link at the top will open TOC modal
• Sticky menu at bottom will be visible, once you have started scrolling down or paging with the arrows
• Hamburger on sticky menu will open TOC modal

is that correct?

... so why change the first top arrow to a burger? You need the arrow to navigate to page 2, and you can open the TOC from the Table Of Contents link.

[sammeltassen]

Yes you're right. I think the modal can contain some additional information:

• The manifest title, summary and metadata (if available)
• Table of contents (ranges)
• Sharing links: Open in Manifest Editor and Open in Theseus

Instead of "table of contents" the link at the top right could read "about"

[funkydunc]

Hi Jules.
Would you mind providing a sketch for the modal containing those elements please?
The manifest metadata can be quite long. How do you envisage that fitting inside a modal along with the table of contents?
Thanks

[sammeltassen]

Yes I will, but this will need to wait until Mon

[funkydunc]

Hi @sammeltassen
with regards to the sticky grey title bar appearance on small devices, can I suggest this layout? (reduced font size and with the section label below the title)

with the option of truncating any labels that are too long?

thanks.

[funkydunc]

Hi @sammeltassen here is an example of the agreed form for the structures to be added to the exhibition manifests.

"structures": [{
    "id": "https://heritage.tudelft.nl/manifest_example/range/r0",
    "type": "Range",
    "label": {
        "en": [
            "Table of Contents"
        ],
        "nl": [
            "Inhoudsopgave"
        ]
    },
    "items": [
        {
            "id": "https://heritage.tudelft.nl/manifest_example/range/r1",
            "type": "Range",
            "label": {
                "en": [
                    "Exhibition section 1 title"
                ],
                "nl": [
                    "Tentoonstelling sectie 1 label"
                ]
            },
            "items": [
                {
                    "type": "Canvas",
                    "id": "https://heritage.tudelft.nl/canvas/1"
                },
                {
                    "type": "Canvas",
                    "id": "https://heritage.tudelft.nl/canvas/2"
                }
            ]
        },
        {
            "id": "https://heritage.tudelft.nl/manifest_example/range/r2",
            "type": "Range",
            "label": {
                "en": [
                    "Exhibition section 2 title"
                ],
                "nl": [
                    "Tentoonstelling sectie 2 label"
                ]
            },
            "items": [
                {
                    "type": "Canvas",
                    "id": "https://heritage.tudelft.nl/canvas/3"
                },
                {
                    "type": "Canvas",
                    "id": "https://heritage.tudelft.nl/canvas/4"
                }
            ]
        }
    ]
}]

[sammeltassen]

@funkydunc Some additional sketches below for the main title, menu bar and toc. Important changes:

• I think we can do without the chapter titles between the blocks. The reason is those titles appear as well in the exhibition blocks itself, so they are double. The changing title of the menu bar signifies a new chapter. Importantly, it should also change back when scrolling up again!
• When clicking the title, the menu bar expands full width into a table of contents. After clicking a title in the toc, it collapses again. The height of the menu adapts to the length of the toc; it could cover the whole page. On mobile, it should cover the entire screen (and become a scrollable surface if needed)
• I've used the mono font in the menu bar which follows the appearance of the block titles and toc's on article pages
• The main exhibition title is now removed from the menu bar
• I've removed the up/down buttons for now, I'm not sure if they are very useful for navigation, but they could be added as additional buttons in the menu bar.
• Font sizes should follow the logic of the rest of the page i.e. don't take the sizes in the sketches too literally

[sammeltassen]

So this also means that the toc won't be available directly from the top of the page, which is fine I guess. The menu bar only appears when the first canvas block hits the top of the page. On mobile it can stay at the bottom for easy reach (we could actually give this a try on desktop as well–in which case the menu bar could be visible immediately? see the sketch).

[funkydunc]

Hi @sammeltassen Thanks for this update.

What do you think about having the sticky menu bar at the top initially, instead of the existing Exhibition title, like this? Then the menu bar is always there consistently, and the TOC is always viewable from one place. (This means retaining the Title in the bar).

[sammeltassen]

@funkydunc I think I'd prefer the sticky footer option because it doesn't compete with the real menu bar and can include the title of the first chapter, which would be too much to put at the top initially