From a8f705b7164e88876d88aa51dd79c5cac4c88787 Mon Sep 17 00:00:00 2001 From: Pierre-Olivier Simonard Date: Sun, 25 Aug 2024 08:59:58 +0200 Subject: [PATCH] WIP Dashboard : progress on intro block --- web/dashboard/app.py | 6 +-- web/dashboard/css/global/intro.css | 62 ++++++++++++++++++++++++++++++ web/dashboard/main_dashboard.py | 50 ++++++++++++------------ web/dashboard/ui.py | 4 +- 4 files changed, 94 insertions(+), 28 deletions(-) create mode 100644 web/dashboard/css/global/intro.css diff --git a/web/dashboard/app.py b/web/dashboard/app.py index f779b6a7..68548938 100644 --- a/web/dashboard/app.py +++ b/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", ], ) # @@ -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()) diff --git a/web/dashboard/css/global/intro.css b/web/dashboard/css/global/intro.css new file mode 100644 index 00000000..5de020fa --- /dev/null +++ b/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); + +} diff --git a/web/dashboard/main_dashboard.py b/web/dashboard/main_dashboard.py index 33b4b5c3..ad8db002 100644 --- a/web/dashboard/main_dashboard.py +++ b/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( + """ + + """ ) + 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", ), ) diff --git a/web/dashboard/ui.py b/web/dashboard/ui.py index 6721a495..d6dc6495 100644 --- a/web/dashboard/ui.py +++ b/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: {