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

2
scss/components/_layout.scss
View File

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

37
scss/elements/_tables.scss
View File

@ -39,5 +39,42 @@
.table-cell--expand { .table-cell--expand {
width: 100%; 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;
}
} }
} }

63
templates/requests.html.to
View File

@ -20,46 +20,39 @@
</button> </button>
</form> </form>
</div> </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> </div>
<div class="panel"> <div class="panel">
<div class='responsive-table-wrapper'>
<table> <table>
<thead> <thead>
<tr> <tr>
<th>Order ID</th> <th scope="col">Order ID</th>
<th>Request Date</th> <th scope="col">Request Date</th>
<th>Requester</th> <th scope="col">Requester</th>
<th>Total Apps</th> <th scope="col">Total Apps</th>
<th>Status</th> <th scope="col">Status</th>
<th>Actions</th> <th scope="col">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for r in requests %} {% for r in requests %}
<tr> <tr>
<td><a href="{{ reverse_url('request_form_update', 1, r['order_id']) }}">{{ r['order_id'] }}</a> <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> {% if r['is_new'] %}<span class="usa-label">New</span>
</td> </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 %} {% end %}
<td>{{ r['date'] }}</td> </tbody>
<td>{{ r['full_name'] }}</td> </table>
<td>{{ r['app_count'] }}</td> </div>
<td>{{ r['status'] }}</td>
<td><a href="">Download</a></td>
</tr>
{% end %}
</tbody>
</table>
</div> </div>
</div> </div>

62
templates/styleguide.html.to
View File

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