Add shadows to elements (#49)

* Fix debug regression * Add shadows to elements
mlcommons · Jan 31, 2024 · 9a0a373 · 9a0a373
1 parent e63d0d9
commit 9a0a373
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 6 deletions.
diff --git a/src/coffee/templates/_benchmark_card.html b/src/coffee/templates/_benchmark_card.html
@@ -1,4 +1,4 @@
-<div class="container text-start border border-2 rounded-4 p-5">
+<div class="container text-start border border-2 rounded-4 p-5 box-shadow-light">
     {% if show_benchmark_header %}
         <div class="row mb-4">
             <div class="col">

diff --git a/src/coffee/templates/_sut_card.html b/src/coffee/templates/_sut_card.html
@@ -1,4 +1,4 @@
-<div class="container text-start border border-2 rounded-4 p-5">
+<div class="container text-start border border-2 rounded-4 p-5 box-shadow-light">
     <div class="row">
         <div class="col pe-5">
             <h2 class="mb-0">{{ stars_description[benchmark_score.stars() | round | int]["rank"] }}</h2>

diff --git a/src/coffee/templates/benchmark.html b/src/coffee/templates/benchmark.html
@@ -33,11 +33,11 @@ <h2 class="mb-3">AI Systems Evaluated</h2>
             <div class="row px-3 py-4 border-bottom rounded-top-4 dropdown-title-bar">
                 <div class="col">AI System</div>
                 <div class="col">Overall Safety Rating</div>
-                <div class="col">Explanation 111</div>
+                <div class="col">Explanation</div>
                 <div class="col"></div>
             </div>
             {% for benchmark_score in grouped_benchmark_scores[benchmark_definition] %}
-                <div class="row p-3 align-items-center{% if not loop.last %} border-bottom{% endif %}">
+                <div class="row p-3 box-shadow-light align-items-center{% if not loop.last %} border-bottom{% endif %}">
                     <div class="col"><span class="align-middle">{{ benchmark_score.sut.name }}</span></div>
                     <div class="col">
                         <div class="d-flex gap-2 align-items-center">

diff --git a/src/coffee/templates/static/style.css b/src/coffee/templates/static/style.css
@@ -88,3 +88,7 @@ footer {
 .btn-chevron {
     font-size: 12px !important;
 }
+
+.box-shadow-light {
+  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.025);
+}
diff --git a/src/coffee/templates/test_report.html b/src/coffee/templates/test_report.html
@@ -39,7 +39,7 @@ <h2 class="mb-3">Tests Run</h2>
                 consequat.</p>
         </div>
 
-        <div class="container border rounded-4 text-start">
+        <div class="container border rounded-4 text-start box-shadow-light">
             <div class="row px-3 py-4 border-bottom rounded-top-4 dropdown-title-bar">
                 <div class="col">Test</div>
                 <div class="col">No. of iterations</div>
@@ -79,7 +79,7 @@ <h2 class="mb-3">Tests Run</h2>
             <h2 class="mb-3">Test Details</h2>
         </div>
 
-        <div class="container p-5 border rounded-4 text-start">
+        <div class="container p-5 border rounded-4 text-start box-shadow-light">
             <div class="row">
                 <div class="col">
                     <span class="mb-2 light-text">Benchmark UID <i class="bi bi-info-circle ms-1"></i></span>