some styling

Author: remicousin

controls.py

@@ -22,7 +22,7 @@ def Text(id, default):
         dbc Input component with text inputs.
     """
     return [ dbc.Input(id=id, type="text",
-                       size="sm", className="m-1 d-inline-block w-auto",debounce=True,  value=default) ]
+                       size="sm", className="m-1 d-inline-block w-auto", debounce=True, value=default) ]
 
 
 def Number(id, default, min=None, max=None, html_size=None):
@@ -158,7 +158,7 @@ def Sentence(*elems):
 
     return dbc.Form(groups)
 
-def Block(title, *body, is_on=True, width="100%"): #width of the block in its container
+def Block(title, *body, is_on=True, width="100%", border_color="grey"): #width of the block in its container
     """Separates out components in individual Cards
 
     Auto-generates a formatted block with a card header and body.
@@ -185,10 +185,14 @@ def Block(title, *body, is_on=True, width="100%"): #width of the block in its co
         the_display = "inline-block"
     else:
         the_display = "none"
-    return dbc.Card([
-        dbc.CardHeader(title),
-        dbc.CardBody(body),
-    ], className="mb-4 ml-4 mr-4", style={"display": the_display, "width": width})
+    return dbc.Card(
+        [
+            dbc.CardHeader(title),
+            dbc.CardBody(body),
+        ],
+        className="mb-4 ml-4 mr-4",
+        style={"display": the_display, "width": width, "border-color": border_color, "line-height": 1},
+    )
 
 def Options(options,labels=None):
     """ Creates options for definition of different Dash components.

enacts/wat_bal/layout_monit.py

@@ -280,6 +280,7 @@ def controls_layout(
                                             min=lat_min,
                                             max=lat_max,
                                             type="number",
+                                            style={"height": "auto", "padding-bottom": "0px"},
                                         ),
                                         dbc.Label("Latitude", style={"font-size": "80%"}),
                                         dbc.Tooltip(
@@ -296,6 +297,7 @@ def controls_layout(
                                             min=lon_min,
                                             max=lon_max,
                                             type="number",
+                                            style={"height": "auto", "padding-bottom": "0px"},
                                         ),
                                         dbc.Label("Longitude", style={"font-size": "80%"}),
                                         dbc.Tooltip(
@@ -305,7 +307,7 @@ def controls_layout(
                                         )
                                     ]),
                                 ),
-                                dbc.Button(id="submit_lat_lng", children='Submit'),
+                                dbc.Button(id="submit_lat_lng", children='Submit', color="secondary"),
                             ],
                         ),
                     ),
@@ -317,6 +319,7 @@ def controls_layout(
                                 {"label": val["menu_label"], "value": key}
                                 for key, val in CONFIG["map_text"].items()
                             ],
+                            style={"padding-top": "0px", "padding-bottom": "0px"},
                         ),
                     ),
                     Block(
@@ -355,7 +358,8 @@ def controls_layout(
                         Sentence(
                             Number("kc_end", CONFIG["kc_v"][4], min=0, max=2, html_size=4),
                         ),
-                        dbc.Button(id="submit_kc", children='Submit'),
+                        dbc.Button(id="submit_kc", children='Submit', color="success"),
+                        border_color="green",
                     ),
                     Block(
                         "Compare to...",
@@ -403,7 +407,8 @@ def controls_layout(
                         Sentence(
                             Number("kc2_end", CONFIG["kc_v"][4], min=0, max=2, html_size=4),
                         ),
-                        dbc.Button(id="submit_kc2", children='Submit'),
+                        dbc.Button(id="submit_kc2", children='Submit', color="primary"),
+                        border_color="blue",
                     ),
                 ],
                 style={"position":"relative","height":"60%", "overflow":"scroll"},