diff --git a/dao_analyzer/apps/common/presentation/dashboard_view/dashboard_view.py b/dao_analyzer/apps/common/presentation/dashboard_view/dashboard_view.py index 92a1e6c4..7e163094 100644 --- a/dao_analyzer/apps/common/presentation/dashboard_view/dashboard_view.py +++ b/dao_analyzer/apps/common/presentation/dashboard_view/dashboard_view.py @@ -103,7 +103,7 @@ def __generate_header( html.Div([ html.Div(TEXT['ecosystem_selector_title']), html.Div(children=ecosystems, className='ecosystems-wrapper'), - ], className='select-platform-wrapper'), + ], className='header-selector-wrapper'), className='col d-flex justify-content-center'), # 2. Network selector html.Div( @@ -114,12 +114,12 @@ def __generate_header( value = networkRadio.get_value(), className = 'checklist-filter', id='org-network-radio'), - ], className='select-network-wrapper'), + ], className='header-selector-wrapper'), className='col-3 d-flex justify-content-center'), # 3. DAO selector (and filtering) html.Div( html.Div(children=[ - html.Div(html.Span(TEXT['dao_selector_title'])), + html.Div(TEXT['dao_selector_title']), html.Div([ dcc.Checklist( options = filterGroup.get_options(), @@ -127,15 +127,15 @@ def __generate_header( className='checklist-filter d-flex flex-column', id='org-filter', ), - html.Div(dcc.Dropdown( + dcc.Dropdown( id='org-dropdown', options=organization_list.get_dict_representation(), value=org_value, clearable=False, - )), + ), html.Div("", id='org-number', className='number-of-daos'), - ], className='flex-grow-1'), - ], className='select-dao-wrapper'), + ], className='dao-dropdown-wrapper'), + ], className='header-selector-wrapper select-dao-wrapper'), className='col d-flex justify-content-center'), # 4. information storing (hidden from user) # The following dcc is changed in callbacks that modify the dao-info-container diff --git a/dao_analyzer/assets/stylesheet.css b/dao_analyzer/assets/stylesheet.css index ba7b53a9..a99fc44e 100644 --- a/dao_analyzer/assets/stylesheet.css +++ b/dao_analyzer/assets/stylesheet.css @@ -15,6 +15,8 @@ --front-color: var(--bs-white); --bs-body-color: #383838; --footer-background: #2F2F2F; + --body-header-gap: 1em; + --body-header-internal-padding: 1em; } a { @@ -132,27 +134,39 @@ a { } .select-dao-wrapper { + width: 100%; + max-width: 275px; +} + +.dao-dropdown-wrapper { display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - padding: 2rem 0; - gap: 1.5rem; + flex-direction: column; flex-grow: 1; - max-width: 450px; + align-items: flex-start; + justify-content: center; + width: 100%; + height: 100%; } -.select-network-wrapper { - display: flex; - flex-direction: row; - justify-content: space-evenly; - align-items: center; - gap: 1.5rem; +#org-dropdown { + width: 100%; } -#org-network-radio { +.header-selector-wrapper { display: flex; flex-direction: column; + justify-content: space-between; + align-items: flex-start; + gap: var(--body-header-gap); + padding-top: var(--body-header-internal-padding); + padding-bottom: var(--body-header-internal-padding); +} + +#org-network-radio { + display: grid; + grid-auto-flow: column; + column-gap: 1em; + grid-template-rows: repeat(3, 1fr); } .checklist-filter > label { @@ -170,18 +184,12 @@ a { transform: scale(1.3); } -.select-platform-wrapper { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - gap: 1.5rem; -} - .ecosystems-wrapper { display: flex; flex-direction: row; gap: 1rem; + flex-grow: 1; + align-items: center; } .ecosystem {