[Demo] Adjust layout for smaller screensize

[nadijagraca]

Description

Adjust layout and css to allow Vizro-AI chart UI to render in smaller screen sizes well.

Screenshot

Notice

• I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":

  • I submit this contribution under the Apache 2.0 license and represent that I am entitled to do so on behalf of myself, my employer, or relevant third parties, as applicable.
  • I certify that (a) this contribution is my original creation and / or (b) to the extent it is not my original creation, I am authorized to submit this contribution on behalf of the original creator(s) or their licensees.
  • I certify that the use of this contribution as authorized by the Apache 2.0 license does not violate the intellectual property rights of anyone else.
  • I have not referenced individuals, products or companies in any commits, directly or indirectly.
  • I have not added data or restricted code in any commits, directly or indirectly.

[github-actions]

View the example dashboards of the current commit live on PyCafe ☕ 🚀

Updated on: 2024-11-15 15:08:31 UTC
Commit: f88435d

Link: vizro-core/examples/dev/

Link: vizro-core/examples/scratch_dev

Link: vizro-core/examples/visual-vocabulary/

Link: vizro-ai/examples/dashboard_ui/

[huong-li-nguyen]

The download icon and the download label should be in the same container and the tooltip should be around the entire button - this way this looks like one component.

Currently you get the tooltip if you hover of the icon only, but normally I would hover over the entire button instead of individual elements within.

So something like this. You still have to customise some CSS for it to look good, but structurally the button will be one component, so the tooltip will appear when you hover over the entire button, not only the icon and the label consists of the icon and the text label. I am not sure if you need all of these html.divs - I've removed some of them below. This way it's easier to customise CSS and see which of these containers we really need

class DropdownMenu(vm.VizroBaseModel):
    """Custom dropdown menu component."""

    type: Literal["dropdown_menu"] = "dropdown_menu"

    def build(self):
        """Returns custom dropdown menu."""
        dropdown_menu = dbc.DropdownMenu(
            id="dropdown-menu-button",
            label=[html.Span("download", className="material-symbols-outlined", id=f"{self.id}-icon"), html.Span("Download")],
            children=[
                dbc.DropdownMenuItem(
                    children=[
                        dbc.Button(children="JSON", id=f"{self.id}-json", className="download-button"),
                    ]
                ),
                dbc.DropdownMenuItem(
                    children=[
                        dbc.Button(children="HTML", id=f"{self.id}-html", className="download-button"),
                    ]
                ),
                dcc.Download(id="download-file"),
                dbc.Tooltip(
                        "Download this plot to your device as a plotly JSON or interactive HTML file "
                        "for easy sharing or future use.",
                        target="dropdown-menu-button",
                    ),
            ],
            toggleClassName="dropdown-menu-toggle-class",
        )

        return dropdown_menu

[huong-li-nguyen]

I am not sure how the layout worked before for bigger/smaller screensizes, but when I see reduce the screen width, I see these containers still overlapping, and the buttons seem to be not readable anymore.

This might have to be done by switching to a flexbox model for small screen sizes, so getting rid of the grid-layout and have the form and chart underneath each other (see our current layout.css file)