Update styles

edan-bainglass · Jan 3, 2025 · c8403c0 · c8403c0
1 parent bbc6781
commit c8403c0
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 27 deletions.
diff --git a/src/aiidalab_qe/app/result/components/status/status.py b/src/aiidalab_qe/app/result/components/status/status.py
@@ -167,12 +167,14 @@ def update(self, node=None):
     def _build_header(self, node, level):
         self.level = level
         self.title = self._humanize_title(node)
-        self.indentation = ipw.HTML(self._get_indentation(self.level))
+        self.indentation = self._get_indentation(level)
         self.emoji = ipw.HTML()
         self.state = ipw.HTML()
+        self.header = ipw.HBox()
+        self.header.add_class("tree-node-header")
 
     def _get_indentation(self, level=0):
-        return "&nbsp;" * 6 * level
+        return ipw.HTML(layout=ipw.Layout(width=f"{22 * level}px"))
 
     def _get_emoji(self, state):
         return {
@@ -258,19 +260,16 @@ def _build_header(self, node, level):
         self.toggle.on_click(self._toggle_branches)
         self.label = ipw.HTML(self.title)
         self.tally = ipw.HTML()
-        self.header = ipw.HBox(
-            children=[
-                self.indentation,
-                self.toggle,
-                self.emoji,
-                self.label,
-                ipw.HTML(" | "),
-                self.state,
-                ipw.HTML(" | "),
-                self.tally,
-            ],
-            layout=ipw.Layout(align_items="center"),
-        )
+        self.header.children = [
+            self.indentation,
+            self.toggle,
+            self.emoji,
+            self.label,
+            ipw.HTML(" | "),
+            self.state,
+            ipw.HTML(" | "),
+            self.tally,
+        ]
 
     def _add_children(self, node):
         for child in node.called:
@@ -327,16 +326,13 @@ def _build_header(self, node, level):
         )
         self.label.add_class("calculation-link")
         self.label.on_click(self._on_label_click)
-        self.header = ipw.HBox(
-            children=[
-                self.indentation,
-                self.emoji,
-                self.label,
-                ipw.HTML(" | "),
-                self.state,
-            ],
-            layout=ipw.Layout(align_items="center"),
-        )
+        self.header.children = [
+            self.indentation,
+            self.emoji,
+            self.label,
+            ipw.HTML(" | "),
+            self.state,
+        ]
 
     def _on_label_click(self, _):
         if self.on_inspect is None:

diff --git a/src/aiidalab_qe/app/static/styles/custom.css b/src/aiidalab_qe/app/static/styles/custom.css
@@ -113,6 +113,11 @@ footer {
   min-width: fit-content !important;
 }
 
+.simplified-process-tree .tree-node-header {
+  align-items: center;
+  padding-left: 12px;
+}
+
 .simplified-process-tree .widget-html-content {
   line-height: 1.5;
 }
@@ -148,7 +153,7 @@ footer {
 }
 
 .simplified-process-tree .tree-node-toggle {
-  margin-right: 6px;
+  margin: 0 6px 0 -16px;
 }
 
 .simplified-process-tree .tree-node-toggle:hover:enabled,
@@ -162,7 +167,7 @@ footer {
 }
 
 .simplified-process-tree .calculation-link {
-  color: var(--color-info);
+  color: var(--color-link);
 }
 
 .simplified-process-tree .calculation-link:hover:enabled,

diff --git a/src/aiidalab_qe/app/static/styles/variables.css b/src/aiidalab_qe/app/static/styles/variables.css
@@ -1,4 +1,5 @@
 :root {
+  --color-link: #0000ee;
   --color-init: #eee;
   --color-ready: #fcf8e3;
   --color-active: #d9edf7;