Added labels on top

Grasia · Jul 19, 2022 · 4e7af00 · 4e7af00
1 parent 2bcb59c
commit 4e7af00
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 28 deletions.
diff --git 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,28 +114,28 @@ 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(),
                         value = filterGroup.get_values(),
                         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
@@ -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 {