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

Assorted table and layout fixes

Browse Source
This commit is contained in:
Andrew Croce 2018-07-24 11:01:48 -04:00
parent 0a3c1a00df
commit cac4ab0b72
5 changed files with 75 additions and 37 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 {
.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;
}
} }
} }

7
templates/requests.html.to
View File

@ -14,8 +14,10 @@
<div class="panel__heading"> <div class="panel__heading">
<h1>Requests <a class="usa-button usa-button-secondary" href='{{ reverse_url('request_new') }}'>New Request</a></h1> <h1>Requests <a class="usa-button usa-button-secondary" href='{{ reverse_url('request_new') }}'>New Request</a></h1>
</div> </div>
</div>
<table class="usa-table-borderless" width="100%"> <div class='responsive-table-wrapper'>
<table>
<thead> <thead>
<tr> <tr>
<th scope="col">Order ID</th> <th scope="col">Order ID</th>
@ -42,9 +44,6 @@
{% end %} {% end %}
</tbody> </tbody>
</table> </table>
</div> </div>
</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>