WIP Dashboard : progress on intro block

web/dashboard/app.py

@@ -101,12 +101,13 @@ def get_template(self):
             title="OpenSciMetrics",
             favicon="https://www.nih.gov/favicon.ico",
             sidebar=[],
-            accent_base_color=ui.MAIN_COLOR,
+            accent=ui.MAIN_COLOR,
             theme_toggle=False,
-            raw_css=[ui.CSS_VARS, preload_css],
+            raw_css=[ui.CSS_VARS, ui.CSS_GLOBAL, preload_css],
             css_files=[
                 "https://rsms.me/inter/inter.css",
                 "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap",
+                "css/global/intro.css",
             ],
         )
         # <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -121,7 +122,6 @@ def get_template(self):
     def dashboard_page(self):
         template = self.get_template()
         dashboard = MainDashboard({"RTransparent": pn.state.cache["data"]})
-        # template.main.append(dashboard.get_intro_block())
         template.main.append(dashboard.get_dashboard())
         template.sidebar.append(dashboard.get_sidebar())
 

web/dashboard/css/global/intro.css

@@ -0,0 +1,62 @@
+.intro-block {
+    background-color: var(--background-color);
+    color: rgba(0, 0, 0, 0.87);
+
+    padding-left:30px;
+    padding-right:30px;
+    padding-top: 1px;
+    padding-bottom: 20px;
+}
+
+.intro-block p {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 150%;
+    letter-spacing: 0.15px;
+}
+
+.intro-block button {
+    margin-right:10px;
+}
+
+.explore-data-button {
+
+    background: #2196F3;
+    /* elevation/2 */
+    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.12), 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+
+
+    /* button/small */
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 13px;
+    line-height: 22px;
+    /* identical to box height, or 169% */
+    letter-spacing: 0.46px;
+    text-transform: uppercase;
+
+    color: #FFFFFF;
+    border-color:transparent;  
+} 
+
+.learn-more-button, .github-button {
+
+    background-color: unset;
+    border-color: transparent;
+
+    /* button/small */
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 13px;
+    line-height: 22px;
+    /* identical to box height, or 169% */
+    letter-spacing: 0.46px;
+    text-transform: uppercase;
+    color: rgba(0, 0, 0, 0.87);
+
+}

web/dashboard/main_dashboard.py

@@ -507,30 +507,29 @@ def get_top_bar(self):
         )
 
     def get_intro_block(self):
-        explore_data_button = pn.widgets.Button(
-            name="EXPLORE THE DATA", width=180, button_style="solid"
-        )
-
-        learn_more_button = pn.widgets.Button(
-            name="LEARN MORE",
-            width=180,
-            button_style="solid",
-            button_type="light",
-        )
-        github_button = pn.widgets.Button(
-            name="GITHUB",
-            width=180,
-            button_style="solid",
-            button_type="light",
-        )
-
-        return pn.Column(
-            pn.pane.Markdown("#OpenSciMetrics Dashboard"),
-            pn.pane.Markdown(
-                "OpenSciMetrics is a tool designed to evaluate open science practices in biomedical publications, such as data sharing, code availability, and research transparency. Our goal is to provide insights into how these practices evolve over time and across different fields, journals, and countries. Use the dashboard below to explore key metrics and trends."
-            ),
-            pn.Row(explore_data_button, learn_more_button, github_button),
+        add_intro_block = pn.pane.HTML(
+            """
+            <script type="text/javascript">
+                const intro_block = document.createElement("div");
+                intro_block.innerHTML = `
+                    <div class="intro-block">
+                        <h1>OpenSciMetrics Dashboard</h1>
+                        <p>OpenSciMetrics is a tool designed to evaluate open science practices in biomedical publications, such as data sharing, code availability, and research transparency. Our goal is to provide insights into how these practices evolve over time and across different fields, journals, and countries. Use the dashboard below to explore key metrics and trends.</p>
+                        <div class="intro-buttons">
+                            <button class="explore-data-button">Explore the data</button>
+                            <button class="learn-more-button">LEARN MORE</button>
+                            <button class="github-button">GITHUB</button>
+                        </div>
+                    </div>
+                `;
+                console.log(intro_block);
+                console.log(document.querySelector('#header-design-provider'));
+                document.querySelector('#header-design-provider').appendChild(intro_block);
+            </script>
+            """
         )
+        print(add_intro_block)
+        return add_intro_block
 
     def get_dashboard(self):
         print("GET_DASHBOARD")
@@ -539,7 +538,10 @@ def get_dashboard(self):
         dashboard = pn.Column(
             "# Data and code transparency",
             pn.Column(
-                self.get_top_bar(), self.echarts_pane, sizing_mode="stretch_width"
+                self.get_top_bar(),
+                self.echarts_pane,
+                # self.get_intro_block(),
+                sizing_mode="stretch_width",
             ),
         )
 

web/dashboard/ui.py

@@ -13,7 +13,7 @@ def css(selector: Union[str, Iterable[str]], declarations: dict[str, str]) -> st
     )
 
 
-MAIN_COLOR = "#1e81f0"
+MAIN_COLOR = "#1e81f0"  # rgb 30, 129, 240
 
 CSS_VARS = css(
     ":root",
@@ -23,6 +23,8 @@ def css(selector: Union[str, Iterable[str]], declarations: dict[str, str]) -> st
     },
 )
 
+CSS_GLOBAL = css("#header.shadow", {"box-shadow": "unset"})
+
 """
 the structure of css_modifiers is as follows:
 {