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

Styling tweaks

Browse Source
This commit is contained in:
richard-dds 2018-11-07 12:11:42 -05:00
parent 12f5e6f79e
commit 746bdc8b01
2 changed files with 26 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
styles/components/_search_bar.scss
View File

@ -6,10 +6,18 @@
padding: $gap;
flex-wrap: wrap;
@include media($large-screen) {
flex-wrap: nowrap;
}
.search-bar__filters {
display: flex;
}
.usa-input {
margin: 0;
flex-grow: 1;
flex-shrink: 0;
flex-shrink: 1;
flex-basis: 100%;
height: $search-input-height;
position: relative;

32
templates/requests/index.html
View File

@ -94,22 +94,24 @@
</button>
</div>
<div class='usa-input'>
<label for='filter-status'>Filter requests by status</label>
<select v-model="statusValue" id="filter-status" name="filter-status">
<option value="" selected disabled>Filter by status</option>
<option value="">All</option>
<option v-for="status in statuses" :value="status">!{ status }</option>
</select>
</div>
<div class="search-bar__filters">
<div class='usa-input'>
<label for='filter-status'>Filter requests by status</label>
<select v-model="statusValue" id="filter-status" name="filter-status">
<option value="" selected disabled>Filter by status</option>
<option value="">All</option>
<option v-for="status in statuses" :value="status">!{ status }</option>
</select>
</div>
<div class='usa-input'>
<label for='filter-dod-component'>Filter requests by DOD component</label>
<select v-model="dodComponentValue" id="filter-dod-component" name="filter-dod-component">
<option value="" selected disabled>Filter by DOD Component</option>
<option value="">All</option>
<option v-for="dodComponent in dodComponents" :value="dodComponent">!{ dodComponent }</option>
</select>
<div class='usa-input'>
<label for='filter-dod-component'>Filter requests by DOD component</label>
<select v-model="dodComponentValue" id="filter-dod-component" name="filter-dod-component">
<option value="" selected disabled>Filter by DOD Component</option>
<option value="">All</option>
<option v-for="dodComponent in dodComponents" :value="dodComponent">!{ dodComponent }</option>
</select>
</div>
</div>
</form>
{% endif %}