From 45f09946cd841f7b8ad0f3598d2095d6c9213b1b Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Wed, 4 Dec 2024 13:55:51 +0100 Subject: [PATCH 01/15] Remove img CSS classes --- .../docs/pages/user-guides/card-button.md | 11 +++++----- .../vizro/static/css/bootstrap_overwrites.css | 6 ++++++ vizro-core/src/vizro/static/css/images.css | 21 ------------------- 3 files changed, 12 insertions(+), 26 deletions(-) delete mode 100644 vizro-core/src/vizro/static/css/images.css diff --git a/vizro-core/docs/pages/user-guides/card-button.md b/vizro-core/docs/pages/user-guides/card-button.md index 3c5ad2d7d..c5fcdecf8 100755 --- a/vizro-core/docs/pages/user-guides/card-button.md +++ b/vizro-core/docs/pages/user-guides/card-button.md @@ -323,10 +323,10 @@ Note the added URL hash `#my-image`. Now create a CSS file placed in your `asset Use the following pre-defined URL hashes in your image path to apply Vizro's default styling. #### To float the image next to the text: +To float an image for example to the right of the text, use the `src` attribute as a CSS selector. Follow these steps: -- floating-left: `![](my_image.png#floating-left)` -- floating-right: `![](my_image.png#floating-right)` -- floating-center: `![](my_image.png#floating-center)` +1. Add a hash (#) to the image URL, e.g., `![](assets/images/continents/europe.svg#my-image)` +2. Target that hash in your custom CSS file `img[src*="#my-image"] { float: right; }` !!! example "Card with floating image" === "images.css" @@ -334,6 +334,7 @@ Use the following pre-defined URL hashes in your image path to apply Vizro's def img[src*="#my-image"] { width: 120px; height: 120px; + float: right; } ``` @@ -349,7 +350,7 @@ Use the following pre-defined URL hashes in your image path to apply Vizro's def text=""" ### My card with floating image! - ![](assets/images/continents/europe.svg#my-image#floating-right) + ![](assets/images/continents/europe.svg#my-image) Commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit. @@ -381,7 +382,7 @@ Use the following pre-defined URL hashes in your image path to apply Vizro's def pages: - components: - text: | - ![](assets/images/continents/europe.svg#my-image#floating-right) + ![](assets/images/continents/europe.svg#my-image) Commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit. diff --git a/vizro-core/src/vizro/static/css/bootstrap_overwrites.css b/vizro-core/src/vizro/static/css/bootstrap_overwrites.css index 7384ffe6d..47c30f5c5 100644 --- a/vizro-core/src/vizro/static/css/bootstrap_overwrites.css +++ b/vizro-core/src/vizro/static/css/bootstrap_overwrites.css @@ -71,3 +71,9 @@ To ensure the dynamic height adjustment and prevent scrolling, the height must b label[for="theme-selector"] { display: none; } + +img[src*="icon-top"] { + filter: var(--fill-icon-image-card); + height: 36px; + width: 36px; +} diff --git a/vizro-core/src/vizro/static/css/images.css b/vizro-core/src/vizro/static/css/images.css deleted file mode 100644 index df3e4a4d0..000000000 --- a/vizro-core/src/vizro/static/css/images.css +++ /dev/null @@ -1,21 +0,0 @@ -img[src*="floating-right"] { - float: right; -} - -img[src*="floating-left"] { - float: left; -} - -img[src*="floating-center"] { - display: block; - float: none; - height: auto; - margin: auto; - max-width: 100%; -} - -img[src*="icon-top"] { - filter: var(--fill-icon-image-card); - height: 36px; - width: 36px; -} From 617b1e6cae75ce61b9b406ae8eadbc672ca48565 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Wed, 4 Dec 2024 13:58:20 +0100 Subject: [PATCH 02/15] Add changelog --- ...8_huong_li_nguyen_remove_custom_img_css.md | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 vizro-core/changelog.d/20241204_135618_huong_li_nguyen_remove_custom_img_css.md diff --git a/vizro-core/changelog.d/20241204_135618_huong_li_nguyen_remove_custom_img_css.md b/vizro-core/changelog.d/20241204_135618_huong_li_nguyen_remove_custom_img_css.md new file mode 100644 index 000000000..46dd57511 --- /dev/null +++ b/vizro-core/changelog.d/20241204_135618_huong_li_nguyen_remove_custom_img_css.md @@ -0,0 +1,48 @@ + + + + +### Removed + +- Remove CSS in static folder to float images. ([#919](https://github.com/mckinsey/vizro/pull/919)) + + + + + + + From c9664e61be858749ee063ff54fb983e11ecf6fe0 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Wed, 4 Dec 2024 12:59:13 +0000 Subject: [PATCH 03/15] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- vizro-core/docs/pages/user-guides/card-button.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/vizro-core/docs/pages/user-guides/card-button.md b/vizro-core/docs/pages/user-guides/card-button.md index c5fcdecf8..c47f2f715 100755 --- a/vizro-core/docs/pages/user-guides/card-button.md +++ b/vizro-core/docs/pages/user-guides/card-button.md @@ -323,10 +323,11 @@ Note the added URL hash `#my-image`. Now create a CSS file placed in your `asset Use the following pre-defined URL hashes in your image path to apply Vizro's default styling. #### To float the image next to the text: + To float an image for example to the right of the text, use the `src` attribute as a CSS selector. Follow these steps: 1. Add a hash (#) to the image URL, e.g., `![](assets/images/continents/europe.svg#my-image)` -2. Target that hash in your custom CSS file `img[src*="#my-image"] { float: right; }` +1. Target that hash in your custom CSS file `img[src*="#my-image"] { float: right; }` !!! example "Card with floating image" === "images.css" From 9b458f9cfaa93afbe95b8d05375ec86b35a175b2 Mon Sep 17 00:00:00 2001 From: Li Nguyen <90609403+huong-li-nguyen@users.noreply.github.com> Date: Wed, 4 Dec 2024 14:51:29 +0100 Subject: [PATCH 04/15] Update vizro-core/changelog.d/20241204_135618_huong_li_nguyen_remove_custom_img_css.md Co-authored-by: Antony Milne <49395058+antonymilne@users.noreply.github.com> --- .../20241204_135618_huong_li_nguyen_remove_custom_img_css.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vizro-core/changelog.d/20241204_135618_huong_li_nguyen_remove_custom_img_css.md b/vizro-core/changelog.d/20241204_135618_huong_li_nguyen_remove_custom_img_css.md index 46dd57511..750a8d283 100644 --- a/vizro-core/changelog.d/20241204_135618_huong_li_nguyen_remove_custom_img_css.md +++ b/vizro-core/changelog.d/20241204_135618_huong_li_nguyen_remove_custom_img_css.md @@ -13,7 +13,7 @@ Uncomment the section that is right (remove the HTML comment wrapper). ### Removed -- Remove CSS in static folder to float images. ([#919](https://github.com/mckinsey/vizro/pull/919)) +- Remove built-in CSS shortcuts `#floating-*` to float images. These can still be provided manually. ([#919](https://github.com/mckinsey/vizro/pull/919))