Added images to the problem index page (fitbenchmarking#1381)

RabiyaF · Nov 18, 2024 · 470c13b · 470c13b
1 parent 6ddfa4e
commit 470c13b
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 13 deletions.
diff --git a/fitbenchmarking/templates/css/custom_style.css b/fitbenchmarking/templates/css/custom_style.css
@@ -95,4 +95,27 @@ a {
   color: #333;
   max-width: 800px;
   margin: 20px auto;
+}
+
+.table-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin: 20px 0;
+}
+
+.left-column {
+  flex: 0 0 85%;
+  padding-right: 10px;
+}
+
+.right-column {
+  flex: 0 0 15%;
+  display: flex;
+  justify-content: center;
+}
+
+.right-column form button img {
+  width: auto;
+  height: 110px;
 }
diff --git a/fitbenchmarking/templates/images/accuracy.png b/fitbenchmarking/templates/images/accuracy.png
diff --git a/fitbenchmarking/templates/images/compare.png b/fitbenchmarking/templates/images/compare.png
diff --git a/fitbenchmarking/templates/images/energy.png b/fitbenchmarking/templates/images/energy.png
diff --git a/fitbenchmarking/templates/images/local_min.png b/fitbenchmarking/templates/images/local_min.png
diff --git a/fitbenchmarking/templates/images/runtime.png b/fitbenchmarking/templates/images/runtime.png
diff --git a/fitbenchmarking/templates/problem_index_page.html b/fitbenchmarking/templates/problem_index_page.html
@@ -25,20 +25,32 @@ <h1 class="title">FitBenchmarking results: {{ group_name }}</h1>
                 <h4>Table formats</h4>
                 {{ index }}
                 <hr>
-                <div class="row">
+                <div class="table-row">
                     {% for type, link, description in zip(table_type, links, description) %}
-                        <h3>
-                        <a href="{{ link }}"><code>{{ type }}</code> table</a>
-                        </h3>
-                        <p>{{ description }}</p>
-                        <h3>
-                        <form>
-                            <button class="btn default" type="submit" formaction="{{ link }}">
-                            <i class="fa fa-table"></i>
-                            </button>
-                        </form>
-                        </h3>
-                        <hr>
+                        <div class="left-column">
+                            <h3>
+                                <a href="{{ link }}"><code>{{ type }}</code> table</a>
+                            </h3>
+                            <p>{{ description }}</p>
+                        </div>
+                        <div class="right-column">
+                            <form>
+                                <button class="btn default" type="submit" formaction="{{ link }}">
+                                    {% if type == "compare" %}
+                                        <img src="../images/compare.png" alt="compare icon">
+                                    {% elif type == "acc" %}
+                                        <img src="../images/accuracy.png" alt="accuracy icon">
+                                    {% elif type == "runtime" %}
+                                        <img src="../images/runtime.png" alt="runtime icon">
+                                    {% elif type == "local_min" %}
+                                        <img src="../images/local_min.png" alt="local min icon">
+                                    {% else %}
+                                        <img src="../images/energy.png" alt="energy icon">
+                                    {% endif %}
+                                </button>
+                            </form>
+                        </div>
+                        <hr style="width: 100%;">
                     {% endfor %}
                 </div>
                 <center>