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 {
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 {
.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;
}
}
}

7
templates/requests.html.to
View File

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