experiment card (no treatments and rollouts variation)

Wumpus-Central · Nov 27, 2024 · eddc233 · eddc233
1 parent 8ec1473
commit eddc233
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/assets/app.js b/assets/app.js
@@ -67,20 +67,21 @@ async function openExperiment(exp_id, exp_kind){
     const response = await fetch(fixedExpPath);
     let experiment = await response.json();
 
-    const experimentTitle = document.createElement("div");
+    const experimentTitle = document.createElement("h3");
     const experimentId = document.createElement("div");
 
     if(!experiment["label"]){
         experimentTitle.textContent = experiment["id"];
+        experimentId.textContent = `Id: ${experiment["id"]}`;
     } else {
         experimentTitle.textContent = experiment["label"];
-        experimentId.textContent = experiment["id"];
+        experimentId.textContent = `Id: ${experiment["id"]}`;
     }
 
     experimentCardHeader.appendChild(experimentTitle);
 
     const experimentKind = document.createElement("div");
-    experimentKind.textContent = experiment["kind"];
+    experimentKind.textContent = `Kind: ${experiment["kind"]}`;
 
     experimentCardContent.appendChild(experimentId);
     experimentCardContent.appendChild(experimentKind);

diff --git a/assets/styles.css b/assets/styles.css
@@ -157,17 +157,37 @@ ul.bodyNavButtonsContainer li:last-child {
 }
 
 .experimentCardHeader {
+    align-content: center;
+    height: 45px;
     background-color: var(--app-element-bg-color);
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
 }
 
+.experimentCardHeader h3 {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-left: 10px;
+    padding-right: 10px;
+    margin: 0;
+}
+
 .experimentCardContent {
+    padding: 10px;
     background-color: var(--app-element-bg-color-lighter-200);
     border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
 }
 
+.experimentCardContent div {
+    margin-bottom: 7px;
+}
+
+.experimentCardContent div:last-child {
+    margin-bottom: 0px;
+}
+
 @media (max-width: 768px) {
     header ul.navButtonsContainer {
         overflow-x: auto;