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

Use block-list instead of panel

Browse Source
This commit is contained in:
Luis Cielak 2018-07-23 15:45:46 -04:00
parent 245b6a5f27
commit 56d6077f48
4 changed files with 40 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
scss/elements/_inputs.scss
View File

@ -24,3 +24,19 @@ select {
padding-bottom: 0.5rem;
}
}
.usa-search {
padding-top: 2px;
margin-right: 2rem;
input[type=search] {
height: 4.4rem;
font-size: 1.7rem;
color: $color-black;
}
button {
min-height: 4.4rem;
}
}

33
scss/elements/_panel_actions.scss
View File

@ -1,33 +0,0 @@
/*
* Panels Actions
* Form inputs and other actions for panels
*/
.panel__actions {
display: flex;
padding: $gap;
&--filter {
width: 50%;
}
&--search {
width: 50%;
}
.usa-search {
padding-top: 2px;
margin-right: 2rem;
input[type=search] {
height: 4.4rem;
font-size: 1.7rem;
color: $color-black;
}
button {
min-height: 4.4rem;
}
}
}

5
scss/elements/_tables.scss
View File

@ -16,11 +16,6 @@
th {
@include block-list-header;
&:first-child {
padding: $gap * 2 !important; // This overrides USWDS's no padding
}
}
td {

47
templates/requests.html.to
View File

@ -9,33 +9,34 @@
<div class="col col--grow">
<div class="panel">
<div class="panel__actions">
<div class="panel__actions--search">
<form class="usa-search usa-search-small">
<label class="usa-sr-only" for="search-field-small">Search small</label>
<input id="search-field-small" type="search" name="search" placeholder="Search by Order ID">
<button type="submit">
<span class="usa-sr-only">Search</span>
</button>
</form>
</div>
<div class="panel__actions--filter">
<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>
<section class="block-list">
<ul>
<li class="block-list__item">
<span>
<form class="usa-search usa-search-small">
<label class="usa-sr-only" for="search-field-small">Search small</label>
<input id="search-field-small" type="search" name="search" placeholder="Search by Order ID">
<button type="submit">
<span class="usa-sr-only">Search</span>
</button>
</form>
</span>
<span>
<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>
</span>
</li>
</ul>
</section>
<div class="panel">
<table class="usa-table-borderless" width="100%">
<table>
<thead>
<tr>
<th>Order ID</th>