pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #92 from dod-ccpo/ui/responsive-tables

Browse Source 
Assorted table and layout fixes
This commit is contained in:
andrewdds 2018-07-24 14:26:39 -04:00 committed by GitHub
commit 51ed8c2169
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 101 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scss/components/_global_navigation.scss
View File

@ -4,7 +4,7 @@
.sidenav__link {
padding-right: $gap;
@include media($medium-screen) {
@include media($large-screen) {
padding-right: $gap * 2;
}
}
@ -12,7 +12,7 @@
.sidenav__link-label {
@include hide;
@include media($medium-screen) {
@include media($large-screen) {
@include unhide;
padding-left: $gap;
}

2
scss/components/_layout.scss
View File

@ -26,7 +26,7 @@ body {
.global-panel-container {
margin: $gap;
max-width: $site-max-width;
overflow: auto;
overflow-x: hidden;
@include media($medium-screen) {
margin: $gap * 2;

37
scss/elements/_tables.scss
View File

@ -39,5 +39,42 @@
.table-cell--expand {
width: 100%;
}
.table-cell--hide-small {
display: none;
@include media($medium-screen) {
display: table-cell;
}
}
}
@at-root .panel #{&} {
tr:last-child td {
border-bottom: 0;
}
&:last-child {
margin-bottom: 0;
}
}
}
.responsive-table-wrapper {
overflow-x: auto;
@include panel-margin;
table {
margin-bottom: 0;
}
@at-root .panel #{&} {
tr:last-child td {
border-bottom: 0;
}
&:last-child {
margin-bottom: 0;
}
}
}

65
templates/requests.html.to
View File

@ -20,46 +20,39 @@
</button>
</form>
</div>
<div class='col col--grow col--pad'>
<select id="filter_status" name="filter_status" required="">
<option value="" selected disabled>Filter by status</option>
<option value="">Active</option>
<option value="">Pending</option>
<option value="">Denied</option>
</select>
</div>
</div>
</div>
<div class="panel">
<table>
<thead>
<tr>
<th>Order ID</th>
<th>Request Date</th>
<th>Requester</th>
<th>Total Apps</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for r in requests %}
<tr>
<td><a href="{{ reverse_url('request_form_update', 1, r['order_id']) }}">{{ r['order_id'] }}</a>
{% if r['is_new'] %}<span class="usa-label">New</span>
</td>
<div class='responsive-table-wrapper'>
<table>
<thead>
<tr>
<th scope="col">Order ID</th>
<th scope="col">Request Date</th>
<th scope="col">Requester</th>
<th scope="col">Total Apps</th>
<th scope="col">Status</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
{% for r in requests %}
<tr>
<th scope="row"><a href="{{ reverse_url('request_form_update', 1, r['order_id']) }}">{{ r['order_id'] }}</a>
{% if r['is_new'] %}<span class="usa-label">New</span>
</th>
{% end %}
<td>{{ r['date'] }}</td>
<td>{{ r['full_name'] }}</td>
<td>{{ r['app_count'] }}</td>
<td>{{ r['status'] }}</td>
<td><a href="">Download</a></td>
</tr>
{% end %}
<td>{{ r['date'] }}</td>
<td>{{ r['full_name'] }}</td>
<td>{{ r['app_count'] }}</td>
<td>{{ r['status'] }}</td>
<td><a href="">Download</a></td>
</tr>
{% end %}
</tbody>
</table>
</tbody>
</table>
</div>
</div>
</div>

62
templates/styleguide.html.to
View File

@ -175,39 +175,41 @@
</ul>
</section>
<table class='col--grow'>
<thead>
<tr>
<th class='table-cell--expand'>Expanded Column</th>
<th>Normal Column</th>
<th class='table-cell--align-right'>Right Aligned</th>
<th class='table-cell--shrink'>Shrunk</th>
</tr>
</thead>
<div class='responsive-table-wrapper'>
<table>
<thead>
<tr>
<th class='table-cell--expand'>Expanded Column</th>
<th class='table-cell--hide-small'>Hidden on Small</th>
<th class='table-cell--align-right'>Right Aligned</th>
<th class='table-cell--shrink'>Shrunk</th>
</tr>
</thead>
<tbody>
<tr>
<td class='table-cell--expand'>Table Cell</td>
<td>Table Cell</td>
<td class='table-cell--align-right'>1,234.56</td>
<td class='table-cell--shrink'>Table Cell</td>
</tr>
<tbody>
<tr>
<td class='table-cell--expand'>Table Cell</td>
<td class='table-cell--hide-small'>Table Cell</td>
<td class='table-cell--align-right'>1,234.56</td>
<td class='table-cell--shrink'>Table Cell</td>
</tr>
<tr>
<td class='table-cell--expand'>Table Cell</td>
<td>Table Cell</td>
<td class='table-cell--align-right'>1,231,253.43</td>
<td class='table-cell--shrink'>Table Cell</td>
</tr>
<tr>
<td class='table-cell--expand'>Table Cell</td>
<td class='table-cell--hide-small'>Table Cell</td>
<td class='table-cell--align-right'>1,231,253.43</td>
<td class='table-cell--shrink'>Table Cell</td>
</tr>
<tr>
<td class='table-cell--expand'>Table Cell</td>
<td>Table Cell</td>
<td class='table-cell--align-right'>564.54</td>
<td class='table-cell--shrink'>Table Cell</td>
</tr>
</tbody>
</table>
<tr>
<td class='table-cell--expand'>Table Cell</td>
<td class='table-cell--hide-small'>Table Cell</td>
<td class='table-cell--align-right'>564.54</td>
<td class='table-cell--shrink'>Table Cell</td>
</tr>
</tbody>
</table>
</div>
<div class='action-group'>
<a href='/styleguide' class='action-group__action usa-button usa-button-big'>Action Group Button</a>