CSS Issues on Dock Element

[mrjarbenne]

The current code is running here: https://hwdsb.staging.boreal321.com/

I'm using our Revealjs Presentations functionality in place of the content, and I've added some CSS (slidewrapper) to make the slide deck fluid:

https://github.com/hwdsbcommons/DigitalSignage/blob/master/index.php
https://github.com/hwdsbcommons/DigitalSignage/blob/master/style.css#L68

Now the struggle is with the Dock at the bottom, which needs to flow with the slide deck, rather than overlapping the slides on some screen sizes. On smaller screens the Dock seems to disappear entirely.

Aside: Once that is worked out, I can start working on fixed height widgets for things like the Clock and Twitter that was previously rendered in a different way in the ReadMe. The existing theme allowed php to run in the widget area, which I see as a security risk in our environment. If you see other superfluous code while you are poking around feel free to remove. This theme aspired to be a plugin and I've tried to remove that functionality where applicable.

[r-a-y]

Because you are resizing the <iframe> to 100% width, the height becomes variable and the dock needs to take that into account.

This should be addressed in commit b9c0563 (forgot to tag this in the commit message) and aa3265c.

To view, make sure you are logged-in and purge your browser cache. One other thing is the dock height doesn't change if you resize your browser. If you resize your browser, you need to refresh the page in order to see the dock at its rightful place.

[mrjarbenne]

One other thing is the dock height doesn't change if you resize your browser. If you resize your browser, you need to refresh the page in order to see the dock at its rightful place.

That shouldn't be a big deal. The theme is for Digital Signage, which once running, won't change orientation or viewport size. Thanks for sort this out.

[mrjarbenne]

There still seems to some orientations where the dock falls out side of view. It seems to occur when the browser window is perfectly sized for the slideshow.

Because of the responsive nature of the Reveal Slideshow, will I always struggle with this?

Would it make more sense to add a sidebar space as well, to better control the aspect ratio of the slideshow, which seems to do well in 4:3 rather than 16:9, in order to keep the dock in view?

[r-a-y]

Yes to both questions.

It all depends on what size you are showing this on. If you are showing this on a HD TV or monitor, then you'd need to ensure that the IFRAME is set to 4:3.

[mrjarbenne]

Primarily on an HD TV. I'm trying to recreate the Panic Statusboard app that they have stopped developing (https://panic.com/blog/the-future-of-status-board/), but I'm completely out of my depth.

Related: Is the IFRAME the best way to do this if I'm trying to pull up /presentation/announcements or is there a better way to call up the presentation within the page template? Perhaps a variation on what the plugin itself uses to render the presentation: https://github.com/hwdsbcommons/reveal-js-presentations/blob/master/templates/taxonomy-presentation.php