archive/httpcb
Archived
1
0
Fork 0
Code Releases Activity

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

Browse source 
Resolve "cleanup request-list module."

Closes #6

See merge request pnx/httpcb!21
This commit is contained in:
Henrik Hautakoski 2018-09-05 17:46:13 +00:00
commit 751befc156
6 changed files with 168 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

27
app/assets/sass/_variables.scss
View file

@ -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%);

4
app/assets/sass/application.scss
View file

@ -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

74
app/assets/sass/components/_card.scss Normal file
View file

@ -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;
}
}

47
app/assets/sass/components/_list-group.scss Normal file
View file

@ -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;
}
}

53
app/assets/sass/components/_request-item.scss → app/assets/sass/components/_request-list.scss
View file

@ -1,39 +1,14 @@
.request-list {
@extend .card-accordion;
&-item {
@extend .card;
// Header Section
// --------------
&-header {
display: block;
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;
}
}
@extend .card-header, .card-header-link;
&-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;
}
}
}

43
app/views/callback/show.volt
View file

@ -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>