Merge pull request #481 from cisagov/ik/gov-table-style

Move table styles
This commit is contained in:
Neil MartinsenBurrell 2023-03-22 09:29:05 -05:00 committed by GitHub
commit 1c3473d189
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 59 additions and 48 deletions

View file

@ -222,10 +222,18 @@ section.dashboard {
p { p {
margin-bottom: 0; margin-bottom: 0;
} }
@include at-media(mobile-lg) {
margin-top: units(5);
h2 {
margin-bottom: units(3);
}
}
} }
.dotgov-table { .dotgov-table {
.usa-table {
width: 100%; width: 100%;
a { a {
@ -236,16 +244,20 @@ section.dashboard {
&:visited { &:visited {
color: color('primary'); color: color('primary');
} }
.usa-icon { .usa-icon {
// align icon with x height // align icon with x height
margin-top: units(0.5); margin-top: units(0.5);
margin-right: units(0.5); margin-right: units(0.5);
} }
} }
}
// Table on small mobile th[data-sortable]:not([aria-sort]) .usa-table__header__button {
.usa-table--stacked { right: auto;
}
}
.dotgov-table--stacked {
td, th { td, th {
padding: units(1) units(2) units(2px) 0; padding: units(1) units(2) units(2px) 0;
border: none; border: none;
@ -270,20 +282,15 @@ section.dashboard {
color: color('primary-darker'); color: color('primary-darker');
padding-bottom: units(2px); padding-bottom: units(2px);
} }
} }
@include at-media(mobile-lg) { @include at-media(mobile-lg) {
margin-top: units(5);
h2 { .dotgov-table {
margin-bottom: units(3); tr {
}
.usa-table tr {
border: none; border: none;
} }
.usa-table {
td, th { td, th {
border-bottom: 1px solid color('base-light'); border-bottom: 1px solid color('base-light');
} }
@ -299,8 +306,13 @@ section.dashboard {
} }
} }
td, th { tbody th {
padding: units(2); word-break: break-word;
}
td, th,
.usa-tabel th{
padding: units(2) units(2) units(2) 0;
} }
th:first-of-type { th:first-of-type {
@ -311,7 +323,6 @@ section.dashboard {
border-top: none; border-top: none;
} }
} }
}
} }

View file

@ -14,7 +14,7 @@
<h1>User management</h1> <h1>User management</h1>
{% if domain.permissions %} {% if domain.permissions %}
<table class="dotgov-table usa-table usa-table--borderless usa-table--stacked"> <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table--stacked dotgov-table">
<caption class="sr-only">Domain users</caption> <caption class="sr-only">Domain users</caption>
<thead> <thead>
<tr> <tr>

View file

@ -17,7 +17,7 @@
<section class="dashboard tablet:grid-col-11 desktop:grid-col-10"> <section class="dashboard tablet:grid-col-11 desktop:grid-col-10">
<h2>Registered domains</h2> <h2>Registered domains</h2>
{% if domains %} {% if domains %}
<table class="usa-table usa-table--borderless usa-table--stacked"> <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked">
<caption class="sr-only">Your domain applications</caption> <caption class="sr-only">Your domain applications</caption>
<thead> <thead>
<tr> <tr>
@ -56,7 +56,7 @@
<section class="dashboard tablet:grid-col-11 desktop:grid-col-10"> <section class="dashboard tablet:grid-col-11 desktop:grid-col-10">
<h2>Active domain requests</h2> <h2>Active domain requests</h2>
{% if domain_applications %} {% if domain_applications %}
<table class="usa-table usa-table--borderless usa-table--stacked"> <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked">
<caption class="sr-only">Your domain applications</caption> <caption class="sr-only">Your domain applications</caption>
<thead> <thead>
<tr> <tr>