update site design

1 files changed, 27 insertions, 15 deletions

diff --git a/services/app/templates/answer_view.html.twig b/services/app/templates/answer_view.html.twig
index 9a55a20..24b5a1c 100644
--- a/services/app/templates/answer_view.html.twig
+++ b/services/app/templates/answer_view.html.twig
@@ -26,27 +26,39 @@
   <h2>実行結果</h2>
   <div class="js-phper-token">
     {% if phper_token %}
-      バーディー！ {{ phper_token }}
+      <div class="alert alert-success">
+        バーディー！ {{ phper_token }}
+      </div>
     {% endif %}
   </div>
-  <div>
+  <div class="mt-3">
     ステータス: <span class="js-aggregated-execution-status" data-answer-id="{{ answer.answer_id }}">{{ answer.execution_status.label() }}</span>
     {% if answer.execution_status.showLoadingIndicator() %}
       <div class="js-aggregated-execution-status-loading-indicator spinner-border text-primary spinner-border-sm" role="status"><span class="visually-hidden">Loading...</span></div>
     {% endif %}
   </div>
-  <table>
-    {% for ex in testcase_executions %}
-      <tr>
-        <td>テストケース {{ loop.index }}</td>
-        <td>
-          ステータス: <span class="js-testcase-execution-status" data-testcase-execution-id="{{ ex.testcase_execution_id }}">{{ ex.status.label() }}</span>
-          {% if ex.status.showLoadingIndicator() %}
-            <span class="js-testcase-execution-status-loading-indicator spinner-border text-primary spinner-border-sm" role="status" data-testcase-execution-id="{{ ex.testcase_execution_id }}"><span class="visually-hidden">Loading...</span></span>
-          {% endif %}
-        </td>
-      </tr>
-    {% endfor %}
-  </table>
+  <div class="mt-3">
+    <table class="table table-striped table-bordered">
+      <thead>
+        <tr>
+          <th>テストケース</th>
+          <th>ステータス</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for ex in testcase_executions %}
+          <tr>
+            <td>{{ loop.index }}</td>
+            <td>
+              <span class="js-testcase-execution-status" data-testcase-execution-id="{{ ex.testcase_execution_id }}">{{ ex.status.label() }}</span>
+              {% if ex.status.showLoadingIndicator() %}
+                <span class="js-testcase-execution-status-loading-indicator spinner-border text-primary spinner-border-sm" role="status" data-testcase-execution-id="{{ ex.testcase_execution_id }}"><span class="visually-hidden">Loading...</span></span>
+              {% endif %}
+            </td>
+          </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
   <script type="module" src="{{ base_path() }}/assets/loading.js"></script>
 {% endblock %}