search

riptano / docs-ui

The UI and theme for DataStax Docs.
https://riptano.github.io/docs-ui/
Mozilla Public License 2.0
2 stars 0 forks source link

Interactive graphic #73

Open eric-schneider opened 6 months ago

eric-schneider commented 6 months ago

Our old UI has a feature that allows writers to place an interactive "slideshow" of images within a page. So far, this has only been utilized in the ZDM documentation. However, even though this feature hasn't been widely adopted in our other docs (and despite its very basic functionality), internal and external users have praised it for helping them understand a very complex process (ZDM) without having to vertically scroll through images.

In order for the ZDM docs to have parity in the new UI, we need to implement a similar feature in the new UI that offers an equivalent or better experience.

The widget is completely user-directed, and doesn't have (or need) automatic playback. It has basic navigation controls to move forward/backward between slides, and has the option to restart the slideshow on the last slide.

Because the slides are quite size-restricted within the widget, users can click on a slide to open it in a lightbox. Therefore to replicate the current UX, this feature will depend on https://github.com/riptano/docs-ui/issues/68.

Each "slide" consists of an image and a description. Here's the syntax:

[.swiper]
====
[.slide]
--
.Walk through the illustrated migration phases
Discover the migration concepts, software components, and sequence of operations.

image:migration-introduction9.png["Introductory page prompts you to click the Start button to begin the graphical presentation."]
--

...

[.slide]
-- 
.Phase 5: Connect directly to Target
In this phase, move your client applications off the ZDM Proxy and connect the apps directly to Target. Once that happens, the migration is complete.

image:migration-phase5ra9.png["Illustrates migration Phase 5, as summarized in the text. Back and Restart buttons are available for navigation within the graphic."]
--
====
johnsmartco commented 5 months ago

Thanks @eric-schneider for highlighting the existing functionality from the prior ui in this new docs-ui issue.