Fix CSS alignment bugs and add more templates (#106)

mckinsey · Oct 11, 2023 · 76c775e · 76c775e
1 parent b49a42b
commit 76c775e
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 14 deletions.
diff --git a/vizro-core/changelog.d/20231011_110304_huong_li_nguyen_fix_css_bugs.md b/vizro-core/changelog.d/20231011_110304_huong_li_nguyen_fix_css_bugs.md
@@ -0,0 +1,41 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Removed
+
+- A bullet item for the Removed category.
+
+-->
+
+### Added
+
+- Add plotly layout template for waterfall chart type ([#106](https://github.com/mckinsey/vizro/pull/106))
+- Add CSS default styling for `textarea` ([#106](https://github.com/mckinsey/vizro/pull/106))
+
+<!--
+### Changed
+
+- A bullet item for the Changed category.
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category.
+
+-->
+
+### Fixed
+
+- Fix alignment between control panel, dashboard title and page title ([#106](https://github.com/mckinsey/vizro/pull/106))
+
+<!--
+### Security
+
+- A bullet item for the Security category.
+
+-->
diff --git a/vizro-core/src/vizro/_themes/_templates/template_dark.py b/vizro-core/src/vizro/_themes/_templates/template_dark.py
@@ -92,6 +92,21 @@ def create_template_dark() -> Template:
         )
     ]
 
+    template_dark.data.waterfall = [
+        go.Waterfall(
+            decreasing={"marker": {"color": COLORS["DISCRETE_10"][1]}},
+            increasing={"marker": {"color": COLORS["DISCRETE_10"][0]}},
+            totals={"marker": {"color": COLORS["GREY_55"]}},
+            textfont_color=template_dark.layout.title.font.color,
+            textposition="outside",
+            connector={
+                "line": {
+                    "color": template_dark.layout.xaxis.tickcolor,
+                    "width": 1,
+                }
+            },
+        )
+    ]
     return template_dark
 
 

diff --git a/vizro-core/src/vizro/_themes/_templates/template_light.py b/vizro-core/src/vizro/_themes/_templates/template_light.py
@@ -90,6 +90,17 @@ def create_template_light() -> Template:
         )
     ]
 
+    template_light.data.waterfall = [
+        go.Waterfall(
+            decreasing={"marker": {"color": COLORS["DISCRETE_10"][1]}},
+            increasing={"marker": {"color": COLORS["DISCRETE_10"][0]}},
+            totals={"marker": {"color": COLORS["GREY_30"]}},
+            textfont_color=template_light.layout.title.font.color,
+            textposition="outside",
+            connector={"line": {"color": template_light.layout.xaxis.tickcolor, "width": 1}},
+        )
+    ]
+
     return template_light
 
 

diff --git a/vizro-core/src/vizro/static/css/accordion.css b/vizro-core/src/vizro/static/css/accordion.css
@@ -79,6 +79,7 @@
   display: flex;
   flex-direction: column;
   overflow-x: hidden;
+  margin-top: -10px;
 }
 
 .accordion_item {

diff --git a/vizro-core/src/vizro/static/css/card.css b/vizro-core/src/vizro/static/css/card.css
@@ -22,11 +22,6 @@
   top: -8px;
 }
 
-blockquote {
-  border-left: var(--spacing-01) var(--text-secondary) solid;
-  padding-left: var(--spacing-01);
-}
-
 .card_button {
   height: 84%;
   position: absolute;

diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css
@@ -11,8 +11,7 @@
   display: flex;
   flex: 0 0 auto;
   flex-direction: column;
-  padding: 30px 32px 0 32px;
-  scrollbar-gutter: stable;
+  padding: 40px 32px 0 32px;
   width: 352px;
   overflow: auto;
   gap: var(--spacing-04);
@@ -58,7 +57,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-06);
-  padding: 0 0 24px 0;
+  padding: 4px 0 24px 0;
 }
 
 .page_error_container {
@@ -87,12 +86,8 @@
   width: 336px;
 }
 
-hr {
-  border-bottom: 1px solid var(--border-subtle-alpha-01);
-  width: 100%;
-}
-
 .dashboard_title_outer {
+  display: flex;
+  flex-direction: column;
   width: 100%;
-  height: 32px;
 }
diff --git a/vizro-core/src/vizro/static/css/types.css b/vizro-core/src/vizro/static/css/types.css
@@ -0,0 +1,19 @@
+textarea {
+  background-color: var(--field-enabled);
+  padding: var(--spacing-02);
+}
+
+textarea:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--focus-focus) inset;
+}
+
+hr {
+  border-bottom: 1px solid var(--border-subtle-alpha-01);
+  width: 100%;
+}
+
+blockquote {
+  border-left: var(--spacing-01) var(--text-secondary) solid;
+  padding-left: var(--spacing-01);
+}