Simplify

edan-bainglass · Jan 5, 2025 · 7812418 · 7812418
1 parent d6aa79c
commit 7812418
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 83 deletions.
diff --git a/src/aiidalab_qe/app/result/components/summary/model.py b/src/aiidalab_qe/app/result/components/summary/model.py
@@ -69,16 +69,13 @@ def generate_report_html(self):
         """
         env = Environment()
         template = files(templates).joinpath("workflow_summary.jinja").read_text()
-        summary_format = DEFAULT["summary_format"]
-        style = files(styles).joinpath(f"summary/{summary_format}.css").read_text()
         parameters = self._generate_report_parameters()
         report = {key: value for key, value in parameters.items() if value is not None}
         schema = json.load(Path(__file__).parent.joinpath("schema.json").open())
         return env.from_string(template).render(
-            style=style,
             report=report,
             schema=schema,
-            format=summary_format,
+            format=DEFAULT["summary_format"],
         )
 
     def generate_report_text(self, report_dict):

diff --git a/src/aiidalab_qe/app/static/styles/summary.css b/src/aiidalab_qe/app/static/styles/summary.css
@@ -33,20 +33,71 @@
   text-decoration: none;
 }
 
-.settings-summary {
-  margin: 2px;
-  font-family: Arial, sans-serif;
-  line-height: 1.6;
+/* Table format */
+
+.summary-table table {
+  font-family: arial, sans-serif;
+  border-collapse: collapse;
+  border: 1px solid #bbbbbb;
+  width: 100%;
 }
 
-.settings-summary ul {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
+.summary-table .section .entry {
+  text-align: left;
+  background-color: var(--color-init);
+}
+
+.summary-table .section .entry:nth-child(even) {
+  background-color: #fff;
+}
+
+.summary-table .section .entry .key,
+.summary-table .section .entry .value {
+  padding: 0 8px;
+}
+
+.summary-table .section .entry .key {
+  width: 250px;
+}
+
+@media (max-width: 1199px) {
+  .summary-table .section .entry .key {
+    width: 170px;
+  }
+}
+
+@media (max-width: 991px) {
+  .summary-table .section .entry .key {
+    width: 125px;
+  }
+}
+
+/* List format */
+
+.summary-list table {
+  width: 100%;
+  border: none;
+}
+
+.summary-list .section .entry {
+  background-color: #fff;
+  line-height: 1.5;
+}
+
+.summary-list .section .entry .key {
+  font-weight: bold;
+  margin-right: 5px;
 }
 
-.settings-summary ul ul {
-  margin-left: 20px;
+.summary-list .section .entry .key::after {
+  content: ":";
+}
+
+.summary-list .section .entry .key,
+.summary-list .section .entry .value {
+  padding: 0;
+  display: inline-block;
+  width: fit-content;
 }
 
 /* Error details */

diff --git a/src/aiidalab_qe/app/static/styles/summary/list.css b/src/aiidalab_qe/app/static/styles/summary/list.css
diff --git a/src/aiidalab_qe/app/static/styles/summary/table.css b/src/aiidalab_qe/app/static/styles/summary/table.css
diff --git a/src/aiidalab_qe/app/static/templates/workflow_summary.jinja b/src/aiidalab_qe/app/static/templates/workflow_summary.jinja
@@ -1,9 +1,3 @@
-<head>
-  <style>
-    {{ style }}
-  </style>
-</head>
-
 <body>
   <div class="workflow-summary summary-{{ format }}">
     {% for section in report %}
@@ -15,8 +9,8 @@
           <td class="key">{{ schema[key].title }}</td>
           <td class="value">
             {% if schema[key].type == "link" %}
-            <a class="link" href="{{ value['url'] }}" target="_blank">
-              {{ value['value'] }}
+            <a class="link" href="{{ value.url }}" target="_blank">
+              {{ value.value }}
             </a>
             {% else %}
             {{ value }}