redo search bars on requests and workspace members screens

This commit is contained in:
Andrew Croce 2018-07-31 09:39:39 -04:00
parent d93cea0809
commit 8f90a8f379
2 changed files with 73 additions and 45 deletions

View File

@ -38,27 +38,25 @@
<div class="col col--grow"> <div class="col col--grow">
<div class='panel panel__actions'> <form class='search-bar'>
<div class='row'> <div class='usa-input search-input'>
<div class='col col--grow col--pad'> <label for='requests-search'>Search requests by Order ID</label>
<form class="usa-search usa-search-small"> <input type='search' id='requests-search' name='requests-search' placeholder="Search by Order ID"/>
<label class="usa-sr-only" for="search-field-small">Search small</label> <button type="submit">
<input id="search-field-small" type="search" name="search" placeholder="Search by Order ID"> <span class="hide">Search</span>
<button type="submit"> </button>
<span class="usa-sr-only">Search</span>
</button>
</form>
</div>
<div class='col col--grow col--pad'>
<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>
</div>
<div class='usa-input'>
<label for='filter-status'>Filter requests by status</label>
<select id="filter-status" name="filter-status">
<option value="" selected disabled>Filter by status</option>
<option value="">Active</option>
<option value="">Pending</option>
<option value="">Denied</option>
</select>
</div>
</form>
<div class='responsive-table-wrapper'> <div class='responsive-table-wrapper'>
<table> <table>

View File

@ -3,7 +3,37 @@
{% block workspace_content %} {% block workspace_content %}
<div class='panel panel__actions'> <form class='search-bar'>
<div class='usa-input search-input'>
<label for='members-search'>Search members by name</label>
<input type='search' id='members-search' name='members-search' placeholder="Search by name"/>
<button type="submit">
<span class="hide">Search</span>
</button>
</div>
<div class='usa-input filter-input'>
<label for='filter-status'>Filter members by status</label>
<select id="filter-status" name="filter-status">
<option value="" selected disabled>Filter by status</option>
<option value="">Active</option>
<option value="">Pending</option>
<option value="">Denied</option>
</select>
</div>
<div class='usa-input filter-input'>
<label for='filter-role'>Filter members by role</label>
<select id="filter-role" name="filter-role">
<option value="" selected disabled>Filter by role</option>
<option value="">Admin</option>
<option value="">CCPO</option>
<option value="">Developer</option>
</select>
</div>
</form>
{# <div class='panel panel__actions'>
<div class='row'> <div class='row'>
<div class='col col--grow col--pad'> <div class='col col--grow col--pad'>
<form class="usa-search usa-search-small"> <form class="usa-search usa-search-small">
@ -31,32 +61,32 @@
</select> </select>
</div> </div>
</div> </div>
</div> #}
<div class='responsive-table-wrapper'>
<table>
<thead>
<tr>
<th scope="col" width="50%">Name</th>
<th scope="col" class='table-cell--shrink'>&nbsp;<span class="hide">Status Flag</span></th>
<th scope="col">Status</th>
<th scope="col">Workspace Role</th>
</tr>
</thead>
<tbody>
{% for m in members %}
<tr>
<td><a href="#" class="icon-link icon-link--large">{{ m['first_name'] }} {{ m['last_name'] }}</a></td>
<td class='table-cell--shrink'>{% if m['num_projects'] == '0' %} <span class="label label--info">No Project Access</span> {% end %}</td>
<td>{{ m['status'] }}</a></td>
<td>{{ m['workspace_role'] }}</a></td>
</tr>
{% end %}
</tbody>
</table>
</div> </div>
<div class="panel">
<div class='responsive-table-wrapper'>
<table>
<thead>
<tr>
<th scope="col" width="50%">Name</th>
<th scope="col" class='table-cell--shrink'>&nbsp;<span class="hide">Status Flag</span></th>
<th scope="col">Status</th>
<th scope="col">Workspace Role</th>
</tr>
</thead>
<tbody>
{% for m in members %}
<tr>
<td><a href="#" class="icon-link icon-link--large">{{ m['first_name'] }} {{ m['last_name'] }}</a></td>
<td class='table-cell--shrink'>{% if m['num_projects'] == '0' %} <span class="label label--info">No Project Access</span> {% end %}</td>
<td>{{ m['status'] }}</a></td>
<td>{{ m['workspace_role'] }}</a></td>
</tr>
{% end %}
</tbody>
</table>
</div>
</div>
{% end %} {% end %}