Merge pull request #402 from JarvusInnovations/dash[-improve-styling]

["dash"] Improve Dash styling

Author: BrianThomasRoss

src/assets/app.css

@@ -0,0 +1,73 @@
+/*
+-------------------------------------------------------------
+	Use this file to add generic styling to the app
+---------------------------------------------------------
+*/
+
+body {
+	font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+main h1 {
+	margin-bottom: 1.5rem;
+}
+
+main h2 {
+	margin-bottom: 1rem;
+	margin-top: 3rem;
+}
+
+main h3,
+main h4 {
+	margin-bottom: .75rem;
+	margin-top: 1.5rem;
+}
+
+/* hide spinner arrows */
+input[type="number"] {
+	-moz-appearance: textfield;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+	display: none;
+}
+/* end hide spinner arrows */
+
+/* make Dash date picker fit in better with bootstrap styles */
+.form-control .SingleDatePicker {
+	display: block;
+	margin: -.375rem -.75rem;
+}
+
+.form-control .SingleDatePickerInput {
+	background: none;
+	border: 0;
+	display: block;
+}
+
+.form-control .DateInput {
+	background: none;
+	display: block;
+	width: auto;
+}
+
+.form-control .DateInput_input {
+	background: none;
+	font: inherit;
+	padding: .375rem .75rem;
+}
+
+.form-control .DateInput_fang {
+	margin-top: -.75rem;
+}
+
+.form-control .DayPicker__withBorder {
+	box-shadow: 0 2px 6px rgba(0,0,0,.2),
+		0 0 0 1px rgba(0,0,0,.1);
+}
+
+.form-control .SingleDatePicker_picker {
+	margin-top: calc(-.75rem - 1px); /* 1px connects with pointer */
+}
+/* end date picker wrangling */

src/assets/favicon.ico

@@ -0,0 +1,28 @@
+
+/*
+------------------------------------------------------------------
+Place a link to this file in you source code before your site's
+CSS files.
+
+This will allow you to make style overrides if any of the
+Penn Medicine Masthead CSS rules conflict with those of you site.
+
+If you have questions or need assistance, contact us at
+[email protected]
+------------------------------------------------------------------
+*/
+
+.penn-medicine-header {
+	background-color: #2a3980;
+}
+
+.penn-medicine-header__logo {
+	background-image: url(https://www.pennmedicine.org/Assets/PennMedicine/built/images/assets/logo-white.svg);
+	background-repeat: no-repeat;
+	background-size: 90%;
+	display: block;
+	height: 33px;
+	width: 230px;
+	text-indent: -999999px;
+	margin-bottom: -2px;
+}

src/assets/penn-medicine-header.css

@@ -1,4 +1,11 @@
-"""Builds the root component
+"""Combines all components
+
+The `sidebar` component combines all the inputs while other components potentially
+have callbacks.
+
+To add or remove components, adjust the `setup`.
+If callbacks are present, also adjust `CALLBACK_INPUTS`, `CALLBACK_OUTPUTS` and
+`callback_body`.
 """
 from collections import OrderedDict
 
@@ -28,6 +35,7 @@ class Body(Component):
     """
     external_stylesheets = [
         BOOTSTRAP,
+        'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap',
     ]
 
     def __init__(self, language, defaults):
@@ -42,6 +50,21 @@ def __init__(self, language, defaults):
         )
 
     def get_html(self):
+        """Glues individual setup components together
+        """
+        return Div(
+            className="app",
+            children=self.components["navbar"].html + [
+                Div(
+                    className="app-content",
+                    children=
+                    self.components["sidebar"].html
+                    + self.components["index"].html
+                )
+            ]
+        )
+
+    def get_html_old(self):
         """Glues individual setup components together
         """
         return Div(children=

src/chime_dash/app/assets/app.css

@@ -21,7 +21,6 @@ def get_html(self) -> List[ComponentMeta]:
         content = self.content
         return [Div(
             children=[
-                H1(className="penn-medicine-header__title", id="title", children=content["title"]),
                 Markdown(content["description"])
           ]
         )]

src/chime_dash/app/assets/favicon.ico

@@ -29,26 +29,35 @@ def get_html(self) -> List[ComponentMeta]:
         """Initialize the navigation bar
         """
         nav = dbc.Navbar(
-            children=dbc.Container(
-                [
-                    dbc.Row(
-                        children=[
-                            html.A(
-                                href="https://www.pennmedicine.org",
-                                className="penn-medicine-header__logo",
-                                title="Go to the Penn Medicine home page",
-                            ),
-                            dbc.NavbarBrand(children="CHIME", href="/"),
-                        ],
-                        align="center",
-                        no_gutters=True,
+            className="penn-medicine-header px-0",
+            children=html.Div(
+                className="d-flex align-items-center w-100",
+                children=[
+                    html.Div(
+                        className="px-3",
+                        style={"width": "320px"},
+                        children=html.A(
+                            href="https://www.pennmedicine.org",
+                            className="penn-medicine-header__logo",
+                            title="Go to the Penn Medicine home page",
+                        ),
                     ),
-                ]
-                + self.menu.html,
-                fluid=True,
+                    html.Div(
+                        className="flex-fill",
+                        children=dbc.Container(
+                            children=[dbc.NavbarBrand(
+                                children=html.H1(
+                                    style={"font": "inherit", "margin": "0"},
+                                    children="COVID-19 Hospital Impact Model for Epidemics (CHIME)"
+                                ),
+                                href="/"
+                            )] + self.menu.html
+                        ),
+                    )
+                ],
             ),
             dark=True,
             fixed="top",
-            color="dark",
+            color="",
         )
         return [nav]