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; padding: $gap;
flex-wrap: wrap; flex-wrap: wrap;
@include media($large-screen) {
flex-wrap: nowrap;
}
.search-bar__filters {
display: flex;
}
.usa-input { .usa-input {
margin: 0; margin: 0;
flex-grow: 1; flex-grow: 1;
flex-shrink: 0; flex-shrink: 1;
flex-basis: 100%; flex-basis: 100%;
height: $search-input-height; height: $search-input-height;
position: relative; position: relative;

32
templates/requests/index.html
View File

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