Improved association panel style

mlcommons · Aug 5, 2024 · 444786e · 444786e
1 parent 0f95027
commit 444786e
Showing 1 changed file with 44 additions and 31 deletions.
diff --git a/cli/medperf/web_ui/templates/benchmark_detail.html b/cli/medperf/web_ui/templates/benchmark_detail.html
@@ -16,31 +16,40 @@
 
     .detail-container {
         display: flex;
-        justify-content: center;
+        flex-direction: column;
+        align-items: center;
         width: 100%;
-        flex-wrap: nowrap;
     }
 
-    .detail-panel {
+    .detail-panel, .associations-panel {
         flex: 1;
         max-width: 60%;
         padding-right: 20px;
         box-sizing: border-box;
         margin: 0 auto;
     }
 
-    .association-panel {
-        flex: 1;
-        padding-left: 20px;
-        box-sizing: border-box;
-    }
-
     .association-card {
         margin-bottom: 20px;
     }
 
+    .associations-panel {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        width: 100%;
+        margin-top: 20px;
+    }
+
+    .associations-column {
+        flex: 1;
+        min-width: 150px;
+        max-width: 48%;
+        box-sizing: border-box;
+    }
+
     @media (max-width: 992px) {
-        .detail-panel, .association-panel {
+        .detail-panel, .associations-panel {
             max-width: 100%;
             padding-right: 0;
             padding-left: 0;
@@ -95,31 +104,35 @@ <h5 class="card-title mb-0">Details</h5>
             </div>
         </div>
     </div>
-    <div class="association-panel">
-        <h2 class="my-4">Associated Datasets</h2>
-        {% for assoc in datasets_associations %}
-        <div class="card association-card {% if assoc.approval_status == 'REJECTED' %}invalid-card{% endif %}">
-            <div class="card-body">
-                <h5 class="card-title">{{ datasets[assoc.dataset].name }}</h5>
-                <p class="card-text"><strong>Approval Status:</strong> {{ assoc.approval_status }}</p>
-                <p class="card-text"><strong>Approved At:</strong> {{ assoc.approved_at }}</p>
-                <p class="card-text"><strong>Modified At:</strong> {{ assoc.modified_at }}</p>
-                <p class="card-text"><strong>Initiated By:</strong> <i class="fas fa-user"></i> {{ assoc.initiated_by }}</p>
+    <div class="associations-panel">
+        <div class="associations-column">
+            <h2 class="my-4">Associated Datasets</h2>
+            {% for assoc in datasets_associations %}
+            <div class="card association-card {% if assoc.approval_status == 'REJECTED' %}invalid-card{% endif %}">
+                <div class="card-body">
+                    <h5 class="card-title">{{ datasets[assoc.dataset].name }}</h5>
+                    <p class="card-text"><strong>Approval Status:</strong> {{ assoc.approval_status }}</p>
+                    <p class="card-text"><strong>Approved:</strong> <span class="text-muted small" data-date="{{ assoc.approved_at }}"></span></p>
+                    <p class="card-text"><strong>Modified:</strong> <span class="text-muted small" data-date="{{ assoc.modified_at }}"></span></p>
+                    <p class="card-text"><strong>Initiated By:</strong> <i class="fas fa-user"></i> {{ assoc.initiated_by }}</p>
+                </div>
             </div>
+            {% endfor %}
         </div>
-        {% endfor %}
-        <h2 class="my-4">Associated Models</h2>
-        {% for assoc in models_associations %}
-        <div class="card association-card {% if assoc.approval_status == 'REJECTED' %}invalid-card{% endif %}">
-            <div class="card-body">
-                <h5 class="card-title">{{ models[assoc.model_mlcube].name }}</h5>
-                <p class="card-text"><strong>Approval Status:</strong> {{ assoc.approval_status }}</p>
-                <p class="card-text"><strong>Approved At:</strong> {{ assoc.approved_at }}</p>
-                <p class="card-text"><strong>Modified At:</strong> {{ assoc.modified_at }}</p>
-                <p class="card-text"><strong>Initiated By:</strong> <i class="fas fa-user"></i> {{ assoc.initiated_by }}</p>
+        <div class="associations-column">
+            <h2 class="my-4">Associated Models</h2>
+            {% for assoc in models_associations %}
+            <div class="card association-card {% if assoc.approval_status == 'REJECTED' %}invalid-card{% endif %}">
+                <div class="card-body">
+                    <h5 class="card-title">{{ models[assoc.model_mlcube].name }}</h5>
+                    <p class="card-text"><strong>Approval Status:</strong> {{ assoc.approval_status }}</p>
+                    <p class="card-text"><strong>Approved:</strong> <span class="text-muted small" data-date="{{ assoc.approved_at }}"></span></p>
+                    <p class="card-text"><strong>Modified:</strong> <span class="text-muted small" data-date="{{ assoc.modified_at }}"></span></p>
+                    <p class="card-text"><strong>Initiated By:</strong> <i class="fas fa-user"></i> {{ assoc.initiated_by }}</p>
+                </div>
             </div>
+            {% endfor %}
         </div>
-        {% endfor %}
     </div>
 </div>
 {% endblock %}