[RHDX-309] Add Kiosk Mode option

[staceymosier]

JIRA Issue Link

RHDX-309

Verification Process

1. Sign in and edit the page /eventtutorials/
2. See the Kiosk Mode field option. Check it to enable and publish the change
3. View the page and verify it has a minimal header
4. Remove the setting and publish; Verify the page updates to show the full website header
5. View other content types and non-nodes (assemblies, term, user pages) and verify there are no new or introduced php warnings

[jordanpagewhite]

I like this solution a lot, and this is so much simpler and more maintainable than what I originally anticipated were the requirements of this feature request. I have just 1 quick idea of how we could improve this even further. Since we know that users will be using Chromebooks, we can assuming that the viewport(s) for these device(s) will likely be relatively small (at most medium) for laptops.

One way that we could maximize 'above-the-fold' content is to reduce the padding within the header. If we create some unique selector, perhaps on the top-level component, within your page--kiosk-mode.html.twig template, then we can target (for example) the div.component and reduce the 64px vertical padding to something like 16px.

Example:

[jordanpagewhite]

Also @sjcox-rh from a UX / user workflow perspective,

If a user navigates from (for example) the https://developer-preview-3514.ext.us-west.dc.preprod.paas.redhat.com/eventtutorials/ page that Stacey linked to one of the Katacoda scenarios, do we need to create some way for the user(s) to get back to the https://developer-preview-3514.ext.us-west.dc.preprod.paas.redhat.com/eventtutorials/ page? The original functionality of the breadcrumbs assumed that Katacoda courses would all live under the /courses route, so the breadcrumb 'All Courses' directs back to the /courses route.

[sjcox-rh]

@staceymosier Looking good! I agree with everything @jordanpagewhite mentioned. Didn't realize the padding was that large, would be even better to decrease it down to 16 like he mentioned since chromebook screen resolutions are generally less. Also if we update the padding in this page, we should update the nav padding in the katacoda course and individual katacoda lesson nodes since both navs for those nodes are using the 64px padding. I can open a ticket for that as well. That way the nav will match across the whole workflow.

As for the breadcrumbs, once the user clicks into a lesson from this page (or similar page that would be created for an event), @jordanpagewhite you are right is assuming that the user should be taken back to this page (this page being the event tutorials page in this scenario).

Should I open up a new ticket to capture a change in the breadcrumbs from a lesson perspective to take the user back to the "All lessons" page in the workflow?

[staceymosier]

@sjcox-rh I will address the padding for the Katakoda (kiosk-mode) header here in this PR.

Regarding breadcrumbs, it may be easier to have a short chat. I cannot determine what the end scenario will be based on the comments above. If we can speak today or tomorrow morning, it may be possible to put it into this PR.

[staceymosier]

@sjcox-rh @jordanpagewhite Spacing is reduced to --rhd-theme--container-spacer-md 16px.
Breadcrumbs question will go into a ticket for next sprint. Thanks!

[sjcox-rh]

@staceymosier good to go!

[jordanpagewhite]

Thank you @staceymosier for those changes. I created this issue to track the breadcrumbs request https://projects.engineering.redhat.com/browse/RHDX-329

[jordanpagewhite]

Looks good to me. Thank you