Skip to content
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

[Tidy] Remove redundant CSS and add updated bootstrap file #931

Merged
merged 16 commits into from
Dec 17, 2024
+98 −137
Merged

[Tidy] Remove redundant CSS and add updated bootstrap file #931

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
df220b2
Remove collapse.css
huong-li-nguyen Dec 16, 2024
128d4c7
Simplify table
huong-li-nguyen Dec 16, 2024
cf157d3
Add table example
huong-li-nguyen Dec 16, 2024
bcd1b16
Consolidate usage of dashboard-container
huong-li-nguyen Dec 16, 2024
04419a2
Simplify CSS selectors
huong-li-nguyen Dec 16, 2024
32e8ac3
Create 20241216_144313_huong_li_nguyen_remove_redundant_css.md
huong-li-nguyen Dec 16, 2024
48f5d5d
Update vizro-bootstrap.min.css
huong-li-nguyen Dec 16, 2024
a2b3ab1
Update bootstrap_overwrites.css
huong-li-nguyen Dec 16, 2024
a3d8370
Fix bg colors in bootstrap
huong-li-nguyen Dec 16, 2024
dc1a8a1
Add updated file
huong-li-nguyen Dec 16, 2024
c135d96
Update bootstrap theme
huong-li-nguyen Dec 16, 2024
363aa71
Workaround for specificity conflict
huong-li-nguyen Dec 16, 2024
b4610fe
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Dec 16, 2024
53a64ff
Update vizro-bootstrap.min.css
huong-li-nguyen Dec 17, 2024
3395145
Add comment
huong-li-nguyen Dec 17, 2024
47e88d0
Update vizro-bootstrap.min.css
huong-li-nguyen Dec 17, 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
48 changes: 48 additions & 0 deletions vizro-core/changelog.d/20241216_144313_huong_li_nguyen_remove_redundant_css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!--
A new scriv changelog fragment.

Uncomment the section that is right (remove the HTML comment wrapper).
-->

<!--
### Highlights ✨

- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))

-->
<!--
### Removed

- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))

-->
<!--
### Added

- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))

-->
<!--
### Changed

- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))

-->
<!--
### Deprecated

- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))

-->
<!--
### Fixed

- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))

-->
<!--
### Security

- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))

-->
34 changes: 14 additions & 20 deletions vizro-core/examples/scratch_dev/app.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,24 @@
from vizro import Vizro
import vizro.plotly.express as px
import vizro.models as vm
from vizro.tables import dash_ag_grid
import pandas as pd
from vizro.tables import dash_data_table

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv")
columnDefs = [
{"field": "athlete", "headerName": "The full Name of the athlete"},
{"field": "age", "headerName": "The number of Years since the athlete was born"},
{"field": "country", "headerName": "The Country the athlete was born in"},
{"field": "sport", "headerName": "The Sport the athlete participated in"},
{"field": "total", "headerName": "The Total number of medals won by the athlete"},
]
gapminder = px.data.gapminder()

defaultColDef = {
"wrapHeaderText": True,
"autoHeaderHeight": True,
}
table = vm.Page(
title="Table",
components=[
vm.Table(
figure=dash_data_table(data_frame=gapminder, page_size=5),
title="Gapminder Data Insights",
header="""#### An Interactive Exploration of Global Health, Wealth, and Population""",
footer="""SOURCE: **Plotly gapminder data set, 2024**""",
)
],
)


# Test app -----------------
page = vm.Page(
title="Page Title",
components=[vm.AgGrid(figure=dash_ag_grid(df, columnDefs=columnDefs, defaultColDef=defaultColDef))],
)
dashboard = vm.Dashboard(pages=[page])
dashboard = vm.Dashboard(pages=[table])

if __name__ == "__main__":
Vizro().build(dashboard).run()
5 changes: 5 additions & 0 deletions vizro-core/src/vizro/static/css/bootstrap_overwrites.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,11 @@ All the HEX values starting with --text-code are taken from the Github code high
}

/* CARDS */
.card {
height: 100%;
width: 100%;
}
petar-qb marked this conversation as resolved.
Show resolved Hide resolved

.card .nav-link {
height: 100%;
}
Expand Down
37 changes: 0 additions & 37 deletions vizro-core/src/vizro/static/css/collapse.css
View file
Open in desktop

This file was deleted.

103 changes: 24 additions & 79 deletions vizro-core/src/vizro/static/css/table.css
View file
Open in desktop
huong-li-nguyen marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -1,93 +1,38 @@
#right-side .dash-cell {
height: 48px !important;
#dashboard-container .dash-cell {
height: 3rem !important;
petar-qb marked this conversation as resolved.
Show resolved Hide resolved
}

#right-side .dash-table-container {
padding-bottom: 12px;
}

#right-side
.dash-table-container
.dash-spreadsheet-container
.dash-spreadsheet-inner
th {
background-color: var(--right-side-bg);
color: var(--text-primary);
#dashboard-container .dash-spreadsheet-inner th {
background-color: inherit;
padding: 10px 0;
}

#right-side
.dash-table-container
.dash-spreadsheet-container
.dash-spreadsheet-inner
td {
background-color: var(--right-side-bg);
color: var(--text-primary);
}

#right-side
.dash-table-container
.dash-spreadsheet-container
.dash-spreadsheet-inner
table {
--hover: var(--right-side-bg);

width: 100%;
#dashboard-container .dash-spreadsheet-inner td {
background-color: inherit;
}

#right-side
.dash-table-container
.dash-spreadsheet-container
.dash-spreadsheet-inner
td
.dash-cell-value.unfocused {
font-size: 14px;
#dashboard-container .dash-spreadsheet-inner table {
--hover: inherit;
}

#right-side
.dash-table-container
.dash-spreadsheet-container
.dash-spreadsheet-inner
.column-header-name {
font-size: 14px;
/* Styling for pagination element */
#dashboard-container .first-page,
#dashboard-container .previous-page,
#dashboard-container .next-page,
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm assuming you are repeating #dashboard-container for higher specificity? I'm just curious would we achieve the same result without the repetition?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It would be fine without it. However, if you take a look at the console in the current scratch dev example, you'll see that one dash selector actually has a higher specificity. So if we remove the dashboard-container id, the only reason this works is because the current dash selector does not have these properties defined. In this case, it's just safer to add it, so our selector always has higher specificity.

Screenshot 2024-12-17 at 13 42 08

#dashboard-container .last-page {
background: inherit;
color: var(--text-secondary);
}

.dash-table-container .previous-next-container .page-number {
color: var(--text-primary);
}

#right-side .dash-table-container .previous-next-container {
font-size: 14px;
padding: 4px 0;
}

#right-side .dash-table-container .previous-next-container button,
#right-side
.dash-table-container
.previous-next-container
.page-number
.current-page-container
.current-page-shadow,
.dash-table-container
.previous-next-container
.page-number
.current-page-container
input.current-page {
background: transparent;
color: var(--text-primary);
font-size: 14px;
#dashboard-container input.current-page,
.table-container input.current-page::placeholder {
background: inherit;
color: var(--text-primary) !important;
}

#right-side
.dash-table-container
.previous-next-container
.page-number
.current-page-container
.current-page-shadow::placeholder,
.dash-table-container
.previous-next-container
.page-number
.current-page-container
input.current-page::placeholder {
color: var(--text-primary) !important;
#dashboard-container button.first-page:hover,
#dashboard-container button.previous-page:hover,
#dashboard-container button.next-page:hover,
#dashboard-container button.last-page:hover {
color: var(--text-primaryHover) !important;
}
2 changes: 1 addition & 1 deletion vizro-core/src/vizro/static/css/vizro-bootstrap.min.css
View file
Open in desktop

Large diffs are not rendered by default.

Loading