diff --git a/climate_emotions_map/layout.py b/climate_emotions_map/layout.py index ad7803c..93d5134 100644 --- a/climate_emotions_map/layout.py +++ b/climate_emotions_map/layout.py @@ -27,7 +27,7 @@ } MAP_LAYOUT = { - "margin": {"l": 15, "r": 15, "t": 15, "b": 15}, + "margin": {"l": 0, "r": 0, "t": 15, "b": 15}, "colormap_range_padding": 0, } @@ -409,35 +409,37 @@ def create_map_plot(): decimals=NUM_DECIMALS, # opinion_colormap=OPINION_COLORMAP, ), - # vh = % of viewport height - # TODO: Revisit once plot margins are adjusted config=DCC_GRAPH_CONFIG, - style={"height": "65vh"}, + # NOTE: To verify centering/margins of figure, can apply a border + style={"maxHeight": "50vw", "height": "65vh"}, ), - # set max width - # TODO: Revisit once plot margins are adjusted - # style={"maxWidth": "70vw"}, - size="xl", + fluid=True, + w={"base": "100vw", "lg": "65vw"}, ) return us_map def create_map_disclaimer(): """Create the disclaimer for the map section of the dashboard.""" - return dmc.Flex( - [ + return dmc.Text( + children=[ html.I( - className="bi bi-exclamation-circle", style={"fontSize": 15} + className="bi bi-exclamation-circle", + style={ + "fontSize": 15, + "display": "inline", + "verticalAlign": "middle", + }, ), dmc.Text( children=SUPP_TEXT["map_disclaimer"], fs="italic", size="sm", + ms=5, # ta="center", + style={"display": "inline", "verticalAlign": "middle"}, ), ], - gap=5, - align="center", ) @@ -483,7 +485,7 @@ def create_bar_plots_for_question(question_id: str, subquestion_id: str): ), fluid=True, # TODO: Reduce currently hard-coded L/R margins in Plotly fig to fill up more available width - w={"base": "100vw", "lg": 1000}, + w={"base": "100vw", "lg": 1000, "xl": 1100}, # size="xl", ) return figure @@ -514,7 +516,7 @@ def create_selected_question_bar_plot(): ), fluid=True, # TODO: Reduce currently hard-coded L/R margins in Plotly fig to fill up more available width - w={"base": "100vw", "lg": 1000}, + w={"base": "100vw", "lg": 1000, "xl": 1100}, ) return dmc.Stack( @@ -628,6 +630,7 @@ def create_main(): dmc.GridCol( create_map_disclaimer(), span="content", + style={"maxWidth": "100%"}, ), dmc.GridCol( create_impact_dropdown(), diff --git a/climate_emotions_map/make_map.py b/climate_emotions_map/make_map.py index 1d6d3f0..8719e73 100644 --- a/climate_emotions_map/make_map.py +++ b/climate_emotions_map/make_map.py @@ -199,7 +199,11 @@ def make_map( hoverinfo="none", # no hoverbox but click events are still emitted (?) # TODO: revisit # position colorbar closer to plot area (map) - colorbar={"x": 1}, + colorbar={ + "x": 0.95, + "thicknessmode": "fraction", + "lenmode": "fraction", + }, ) # add outline for clicked state