Merge branch '6-cleanup-request-list-module' into 'dev'

Resolve "cleanup request-list module."

Closes #6

See merge request pnx/httpcb!21

app/assets/sass/_variables.scss

@@ -127,6 +127,24 @@ $button-gitlab-bg:             $gitlab-color;
 $button-linkedin-color:        white;
 $button-linkedin-bg:           $linkedin-color;
 
+// ----------------------------------
+//   List group
+// ----------------------------------
+
+$list-group-item-color:             $text-color;
+$list-group-item-background:        transparent;
+$list-group-item-border-color:      $gray-light;
+
+$list-group-hover-background:       $gray-lightest;
+$list-group-item-active-background: $brand-color;
+
+// ----------------------------------
+//   List group
+// ----------------------------------
+
+$card-border-color: $gray-light;
+$card-header-background: $gray-lightest;
+
 // ----------------------------------
 //   Shadows
 // ----------------------------------
@@ -199,14 +217,5 @@ $callback-list-arrow-color:         $callback-list-border-color;
 //   Request list
 // ----------------------------------
 
-$request-item-color:                $text-color;
 $request-item-secondary-color:      $text-secondary-color;
-$request-item-background:           transparent;
-$request-item-border-color:         $gray-light;
-
-$request-item-active-color:         $request-item-color;
-$request-item-active-background:    $gray-lightest;
-$request-item-active-border-color:  $request-item-border-color;
-$request-item-hover-background:     $request-item-active-background;
-
 $request-detail-background:         lighten($brand-color, 45%);

app/assets/sass/application.scss

@@ -30,11 +30,13 @@
 @import "components/icon";
 @import "components/button";
 @import "components/badge";
+@import "components/card";
 @import "components/section";
 @import "components/spacer";
 @import "components/pagination";
 @import "components/blankslate";
-@import "components/request-item";
+@import "components/list-group";
+@import "components/request-list";
 @import "components/callback-list";
 
 // Views

app/assets/sass/components/_card.scss

@@ -0,0 +1,74 @@
+
+
+// ----------------------------------
+//  Base style.
+// ----------------------------------
+
+
+.card {
+    border: 1px solid $card-border-color;
+
+    &-header,
+    &-body {
+        display: block;
+        padding: .5em 1em;
+    }
+
+    //    Contextual colors
+    // ----------------------------------
+
+    &-header-default {
+        background-color: $card-header-background;
+    }
+
+    // Add border between header and body if they follow eachother.
+    &-header + &-body {
+        border-top: 1px solid $card-border-color;
+    }
+}
+
+//    Header link
+// ----------------------------------
+
+a.card-header,
+.card-header-link {
+    cursor: pointer;
+    color: $list-group-item-color;
+
+    &:hover,
+    &:active,
+    &:focus {
+        text-decoration: none;
+    }
+
+    &:hover {
+        background: $card-header-background;
+    }
+}
+
+
+// ----------------------------------
+//  Layouts
+// ----------------------------------
+
+
+//    Accordion
+// ----------------------------------
+
+.card-accordion {
+
+    .card {
+
+        &-header {
+            border-bottom: 0;
+        }
+
+        &-body {
+            border-top: 1px solid $card-border-color;
+        }
+    }
+
+    .card:not(:first-of-type) {
+        border-top: 0;
+    }
+}

app/assets/sass/components/_list-group.scss

@@ -0,0 +1,47 @@
+
+.list-group {
+
+    padding-left: 0;    // for <ul>, reset left padding.
+    margin-bottom: 0;   // for <ul>, reset bottom margin.
+
+    border: 1px solid $list-group-item-border-color;
+
+    &-item {
+
+        display: block;
+        padding: .5em 1em;
+
+        color: $list-group-item-color;
+        background-color: $list-group-item-background;
+
+        // Set buttom border for all but the last child.
+        &:not(:last-child) {
+            border-bottom: 1px solid $list-group-item-border-color;
+        }
+
+        &-active {
+            background-color: $list-group-item-active-background;
+        }
+    }
+}
+
+//    Links
+// ----------------------------------
+
+.list-group-item-link,
+a.list-group-item {
+
+    color: $list-group-item-color;
+    cursor: pointer;
+
+    &:hover,
+    &:active,
+    &:focus {
+        text-decoration: none;
+    }
+
+    &:hover,
+    &:focus {
+        background: $list-group-hover-background;
+    }
+}

app/assets/sass/components/_request-list.scss

@@ -1,39 +1,14 @@
 
 .request-list {
-
+    @extend .card-accordion;
 
     &-item {
+        @extend .card;
 
         // Header Section
         // --------------
         &-header {
-            display: block;
+            @extend .card-header, .card-header-link;
-            padding: .5em 1em;
-
-            color: $request-item-active-color;
-            background-color: $request-item-active-background;
-            border: 1px solid $request-item-active-border-color;
-
-            &:hover,
-            &:active,
-            &:focus {
-                color: $request-item-active-color;
-                text-decoration: none;
-            }
-
-            &.collapsed {
-                background-color: $request-item-background;
-
-                &:hover {
-                    background-color: $request-item-hover-background;
-                }
-
-                &:hover,
-                &:active,
-                &:focus {
-                    color: $request-item-color;
-                }
-            }
 
             &-row {
                 display: block;
@@ -80,10 +55,8 @@
         // Detail section
         // --------------
         &-detail {
-
+            @extend .card-body;
             background-color: $request-detail-background;
-            border: 1px solid $request-item-border-color;
-            padding: 1em;
 
             &-headers {
                 @extend .table, .table-bordered;
@@ -104,23 +77,5 @@
                 margin-bottom: 1em;
             }
         }
-
-        // Border overrides
-        // ----------------
-
-        // Remove bottom border from header for all but last request-item.
-        &:not(:last-child) &-header {
-            border-bottom: 0;
-        }
-
-        // Remove top border from detail element for last request-item.
-        &:last-child &-detail {
-            border-top: 0;
-        }
-
-        // Remove bottom border from detail element for all but last request-item.
-        &:not(:last-child) &-detail {
-            border-bottom: 0;
-        }
     }
 }

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">
+        <div class="panel request-list-item">
-            <a class="request-list-item-header collapsed" href="#request{{ index }}"
+            <a id="request-item-head-{{ index }}" class="request-list-item-header collapsed"
-               data-toggle="collapse" data-parent="#request-log"
+               href="#request-item-body-{{ index }}" aria-controls="request-item-body-{{ index }}"
-               aria-expanded="true" aria-controls="request{{ 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 }}"
+            <div id="request-item-body-{{ index }}" class="collapse"
-                 role="tabpanel" aria-labelledby="head{{ index }}">
+                 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 }}"
+                            data-toggle="collapse" data-target="#request-list-item-detail-query-{{ index }}"
-                            aria-expanded="false" aria-controls="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>
+                            <tr>
-                            <th class="request-list-item-detail-headers-value">Value</th>
+                                <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 }}"
+                            data-toggle="collapse" data-target="#request-list-item-detail-headers-{{ index }}"
-                            aria-expanded="false" aria-controls="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 }}"
+                            data-toggle="collapse" data-target="#request-list-item-detail-body-{{ index }}"
-                            aria-expanded="false" aria-controls="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>