From 55bb8c5c7200673f21aa5d9043d00a8b3897e248 Mon Sep 17 00:00:00 2001
From: Henrik Hautakoski <henrik.hautakoski@gmail.com>
Date: Wed, 5 Sep 2018 00:32:49 +0200
Subject: [PATCH] app/views/callback/show.volt: some cleanup (fixing proper
 accordion behavior also)

---
 app/views/callback/show.volt | 43 ++++++++++++++++++------------------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/app/views/callback/show.volt b/app/views/callback/show.volt
index 3e30bcd..7114fe6 100644
--- a/app/views/callback/show.volt
+++ b/app/views/callback/show.volt
@@ -5,14 +5,14 @@
         <h5 class="pull-right"><strong>Created at:</strong> {{ item.created_at }}</h5>
     </div>
 
-    <div class="request-list" id="request-log" role="tablist" aria-multiselectable="true">
+    <div class="panel-group request-list" id="request-list" role="tablist" aria-multiselectable="true">
 
         {% for index, req in page.items %}
 
-        <div class="request-list-item">
-            <a class="request-list-item-header collapsed" href="#request{{ index }}"
-               data-toggle="collapse" data-parent="#request-log"
-               aria-expanded="true" aria-controls="request{{ index }}">
+        <div class="panel request-list-item">
+            <a id="request-item-head-{{ index }}" class="request-list-item-header collapsed"
+               href="#request-item-body-{{ index }}" aria-controls="request-item-body-{{ index }}"
+               data-parent="#request-list" data-toggle="collapse"  aria-expanded="true" >
 
                 <div class="request-list-item-header-row">
 
@@ -44,28 +44,28 @@
                     </span>
 
                 </div>
-
-
             </a>
 
-            <div class="collapse" id="request{{ index }}"
-                 role="tabpanel" aria-labelledby="head{{ index }}">
+            <div id="request-item-body-{{ index }}" class="collapse"
+                 role="tabpanel" aria-labelledby="request-item-head-{{ index }}">
 
                 <div class="request-list-item-detail">
 
                     {% if req.getUriQuery()|length > 0 %}
 
                     <button class="request-list-item-detail-button" type="button"
-                            data-toggle="collapse" data-target="#query{{ index }}"
-                            aria-expanded="false" aria-controls="query{{ index }}">
+                            data-toggle="collapse" data-target="#request-list-item-detail-query-{{ index }}"
+                            aria-expanded="false" aria-controls="request-list-item-detail-query-{{ index }}">
                         Query
                     </button>
 
-                    <div class="collapse in" id="query{{ index }}">
+                    <div id="request-list-item-detail-query-{{ index }}" class="collapse in">
                         <table class="request-list-item-detail-headers">
                             <thead>
-                            <th class="request-list-item-detail-headers-key">Key</th>
-                            <th class="request-list-item-detail-headers-value">Value</th>
+                            <tr>
+                                <th class="request-list-item-detail-headers-key">Key</th>
+                                <th class="request-list-item-detail-headers-value">Value</th>
+                            </tr>
                             </thead>
                             <tbody>
                             {% for key, val in req.getUriQuery() %}
@@ -81,16 +81,18 @@
                     {% endif %}
 
                     <button class="request-list-item-detail-button" type="button"
-                            data-toggle="collapse" data-target="#headers{{ index }}"
-                            aria-expanded="false" aria-controls="headers{{ index }}">
+                            data-toggle="collapse" data-target="#request-list-item-detail-headers-{{ index }}"
+                            aria-expanded="false" aria-controls="request-list-item-detail-headers-{{ index }}">
                         Headers
                     </button>
 
-                    <div class="collapse" id="headers{{ index }}">
+                    <div id="request-list-item-detail-headers-{{ index }}" class="collapse">
                         <table class="request-list-item-detail-headers">
                             <thead>
+                            <tr>
                                 <th class="request-list-item-detail-headers-key">Key</th>
                                 <th class="request-list-item-detail-headers-value">Value</th>
+                            </tr>
                             </thead>
                             <tbody>
                             {% for key, val in req.getHeaders() %}
@@ -104,12 +106,12 @@
                     </div>
 
                     <button class="request-list-item-detail-button" type="button"
-                            data-toggle="collapse" data-target="#body{{ index }}"
-                            aria-expanded="false" aria-controls="body{{ index }}">
+                            data-toggle="collapse" data-target="#request-list-item-detail-body-{{ index }}"
+                            aria-expanded="false" aria-controls="request-list-item-detail-body-{{ index }}">
                         Body
                     </button>
 
-                    <div class="request-list-item-detail-body collapse in" id="body{{ index }}">
+                    <div id="request-list-item-detail-body-{{ index }}" class="request-list-item-detail-body collapse in">
 
                         {% if (req.getBody()|length < 1) %}
                         <div class="blankslate blankslate-sm">
@@ -120,7 +122,6 @@
                         {% endif %}
                     </div>
                 </div>
-
             </div>
         </div>