Skip to content

[Demo] Add banner to visual vocabulary dashboard #868

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Nov 13, 2024
Merged

[Demo] Add banner to visual vocabulary dashboard #868

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
20d61fd
add banner to visual vocabulary dashboard
nadijagraca Nov 12, 2024
fbf0d66
Redesign anchor and tidy CSS
huong-li-nguyen Nov 12, 2024
b66b40d
Merge branch 'main' into demo/vizro-core/add_banner_to_demo_dashboards
huong-li-nguyen Nov 13, 2024
aa4b4a6
Merge branch 'main' into demo/vizro-core/add_banner_to_demo_dashboards
huong-li-nguyen Nov 13, 2024
c8d2e5d
Tidy
huong-li-nguyen Nov 13, 2024
b9af599
Merge branch 'main' into demo/vizro-core/add_banner_to_demo_dashboards
huong-li-nguyen Nov 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 5 additions & 11 deletions vizro-core/examples/visual-vocabulary/app.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
)
)
Expand Down
28 changes: 17 additions & 11 deletions vizro-core/examples/visual-vocabulary/assets/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,20 +92,26 @@ img[src*="#chart-icon"] {
}

.anchor-container {
background: #060a17;
align-items: center;
background: var(--text-primary);
border-top-left-radius: 8px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😱 A rounded border?!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And one other thing I noticed. Do we really want the banner to block out the whole horizontal space rather than just floating on top of the underlying content?
image

Copy link
Contributor

@huong-li-nguyen huong-li-nguyen Nov 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes 😄 I didn't like the border as is and for the banner we can make an exception 👍

It's not the banner that blocks the whole horizontal space. The banner floats already just on top of the underlying content. That horizontal space has always been there and is part of our initial layout design. It's coming from the right-side container and its padding :)

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;
}