From 20d61fd791a3d96bedf318872c3c86cc41fed39a Mon Sep 17 00:00:00 2001 From: nadijagraca Date: Tue, 12 Nov 2024 12:39:40 +0100 Subject: [PATCH 1/3] add banner to visual vocabulary dashboard --- ...sic_graca_add_banner_to_demo_dashboards.md | 48 +++++++++++++++++++ vizro-core/examples/visual-vocabulary/app.py | 17 +++++++ .../visual-vocabulary/assets/css/custom.css | 19 ++++++++ 3 files changed, 84 insertions(+) create mode 100644 vizro-core/changelog.d/20241112_123240_nadija_ratkusic_graca_add_banner_to_demo_dashboards.md diff --git a/vizro-core/changelog.d/20241112_123240_nadija_ratkusic_graca_add_banner_to_demo_dashboards.md b/vizro-core/changelog.d/20241112_123240_nadija_ratkusic_graca_add_banner_to_demo_dashboards.md new file mode 100644 index 000000000..7c0d58d4f --- /dev/null +++ b/vizro-core/changelog.d/20241112_123240_nadija_ratkusic_graca_add_banner_to_demo_dashboards.md @@ -0,0 +1,48 @@ + + + + + + + + + diff --git a/vizro-core/examples/visual-vocabulary/app.py b/vizro-core/examples/visual-vocabulary/app.py index c465de0ed..876abcf1c 100644 --- a/vizro-core/examples/visual-vocabulary/app.py +++ b/vizro-core/examples/visual-vocabulary/app.py @@ -2,9 +2,11 @@ from typing import Union +import dash_bootstrap_components as dbc import vizro.models as vm from chart_groups import ALL_CHART_GROUP, CHART_GROUPS, ChartGroup, IncompletePage from custom_components import FlexContainer, Markdown +from dash import get_asset_url, html from vizro import Vizro @@ -108,6 +110,21 @@ def make_navlink(chart_group: ChartGroup) -> vm.NavLink: ) app = Vizro().build(dashboard) +app.dash.layout.children.append( + html.Div( + [ + html.Div( + [ + "Made using ", + html.Img(src=get_asset_url("logo.svg"), id="banner", alt="Vizro logo"), + dbc.NavLink("vizro", href="https://github.com/mckinsey/vizro", target="_blank", external_link=True), + ], + className="anchor-div", + ), + ], + className="anchor-container", + ) +) server = app.dash.server if __name__ == "__main__": diff --git a/vizro-core/examples/visual-vocabulary/assets/css/custom.css b/vizro-core/examples/visual-vocabulary/assets/css/custom.css index 5c0a89a57..3cb78ecec 100644 --- a/vizro-core/examples/visual-vocabulary/assets/css/custom.css +++ b/vizro-core/examples/visual-vocabulary/assets/css/custom.css @@ -90,3 +90,22 @@ img[src*="#chart-icon"] { .intro-text ul:last-of-type { margin-bottom: 0; } + +.anchor-container { + background: #060a17; + bottom: 0; + display: flex; + font-weight: 600; + gap: 2rem; + height: 2rem; + padding: 4px; + place-content: baseline center; + position: fixed; + width: 100%; +} + +.anchor-div { + display: flex; + flex-direction: row; + justify-content: center; +} From fbf0d66f8c91f00aeb89ea49af441700da070f53 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 12 Nov 2024 13:43:45 +0100 Subject: [PATCH 2/3] Redesign anchor and tidy CSS --- vizro-core/examples/visual-vocabulary/app.py | 16 ++++------- .../visual-vocabulary/assets/css/custom.css | 28 +++++++++++-------- 2 files changed, 22 insertions(+), 22 deletions(-) diff --git a/vizro-core/examples/visual-vocabulary/app.py b/vizro-core/examples/visual-vocabulary/app.py index 876abcf1c..f05a50e42 100644 --- a/vizro-core/examples/visual-vocabulary/app.py +++ b/vizro-core/examples/visual-vocabulary/app.py @@ -111,17 +111,11 @@ def make_navlink(chart_group: ChartGroup) -> vm.NavLink: app = Vizro().build(dashboard) app.dash.layout.children.append( - html.Div( - [ - html.Div( - [ - "Made using ", - html.Img(src=get_asset_url("logo.svg"), id="banner", alt="Vizro logo"), - dbc.NavLink("vizro", href="https://github.com/mckinsey/vizro", target="_blank", external_link=True), - ], - className="anchor-div", - ), - ], + dbc.NavLink( + ["Made with ", html.Img(src=get_asset_url("logo.svg"), id="banner", alt="Vizro logo"), "vizro"], + href="https://github.com/mckinsey/vizro", + target="_blank", + external_link=True, className="anchor-container", ) ) diff --git a/vizro-core/examples/visual-vocabulary/assets/css/custom.css b/vizro-core/examples/visual-vocabulary/assets/css/custom.css index 3cb78ecec..ef2fce294 100644 --- a/vizro-core/examples/visual-vocabulary/assets/css/custom.css +++ b/vizro-core/examples/visual-vocabulary/assets/css/custom.css @@ -92,20 +92,26 @@ img[src*="#chart-icon"] { } .anchor-container { - background: #060a17; + align-items: center; + background: var(--text-primary); + border-top-left-radius: 8px; bottom: 0; + color: var(--text-contrast-primary); display: flex; - font-weight: 600; - gap: 2rem; - height: 2rem; - padding: 4px; - place-content: baseline center; + font-size: 0.8rem; + font-weight: 500; + height: 24px; + padding: 0 12px; position: fixed; - width: 100%; + right: 0; } -.anchor-div { - display: flex; - flex-direction: row; - justify-content: center; +.anchor-container:focus, +.anchor-container:hover { + background: var(--text-secondary); + color: var(--text-contrast-primary); +} + +img#banner { + height: 16px; } From c8d2e5d5fc76342a85bf764a0e8557983c299830 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Wed, 13 Nov 2024 11:54:28 +0100 Subject: [PATCH 3/3] Tidy --- vizro-ai/examples/dashboard_ui/app.py | 2 +- vizro-core/examples/visual-vocabulary/app.py | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/vizro-ai/examples/dashboard_ui/app.py b/vizro-ai/examples/dashboard_ui/app.py index e8b29f7dc..48dc43d21 100644 --- a/vizro-ai/examples/dashboard_ui/app.py +++ b/vizro-ai/examples/dashboard_ui/app.py @@ -308,7 +308,7 @@ def update_model_dropdown(value): [ "Made using ", html.Img(src=get_asset_url("logo.svg"), id="banner", alt="Vizro logo"), - dbc.NavLink("vizro", href="https://github.com/mckinsey/vizro", target="_blank", external_link=True), + dbc.NavLink("vizro", href="https://github.com/mckinsey/vizro", target="_blank"), ], style={"display": "flex", "flexDirection": "row"}, ), diff --git a/vizro-core/examples/visual-vocabulary/app.py b/vizro-core/examples/visual-vocabulary/app.py index f05a50e42..159e39b02 100644 --- a/vizro-core/examples/visual-vocabulary/app.py +++ b/vizro-core/examples/visual-vocabulary/app.py @@ -115,7 +115,6 @@ def make_navlink(chart_group: ChartGroup) -> vm.NavLink: ["Made with ", html.Img(src=get_asset_url("logo.svg"), id="banner", alt="Vizro logo"), "vizro"], href="https://github.com/mckinsey/vizro", target="_blank", - external_link=True, className="anchor-container", ) )