Custom Search Config Screen

by Erik Bartlow

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
    <div class="panel panel-default">
        <div class="panel-body">
            <h4>Customized Searches</h4>
            <p>Here, you can create your won customized dashboards. You can save them as private or public based on your needs. Follow these steps to create the dashboards.</p>
            <div class="bs-callout bs-callout-primary">
                <ol style="list-style-type:decimal">
                    <li>Available Fields- Select fields you want to include as columns in the dashboard</li>
                    <li>Choose Search Criteria- Filter down the results further by selecting the values you need.</li>
                    <li>Choose Search Criteria- Add multiple filter criteria using 'Wildcard' feature (AND/OR).</li>
                    <li>Additional Options -Name your search and select 'Public/Private'.</li>
                    <li>Click "OK" to save and apply your search.</li>
                </ol>
            </div>
            <form>
                <table class="table table-striped table-form table-fixed">
                    <thead>
                        <tr class="bg-primary">
                            <th colspan="2" class="col-xs-3">
                                <i class="fa fa-list-ul"></i> Available Fields
                            </th>
                            <th colspan="3" class="col-xs-9">
                                <i class="fa fa-filter"></i> Choose Search Criteria
                            </th>
               ...

CSS

body { margin: 10px }
.search-in-item-group {
  display: block;
}

.search-in-item {
  padding: 5px;
  background-color: #72b03a;
  border-radius: 5px;
  color: #FFF;
}

.search-in-item i {
  padding: 0px 4px;
  color: #c6c6c6;
}

body {
  margin: 10px
}

.table-form tbody {
  font-size: 1em;
}

.table-form tbody .checkbox {
  margin: 0px;
}

.table-form tbody .form-control {
  font-size: 1em;
}

.table-form tbody .form-group label {
  text-align: left;
}

.table-fixed {
  width: 100%;
  background-color: #f3f3f3;
}

.table-fixed tbody {
  height: 225px;
  overflow-y: auto;
  width: 100%;
}

.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
  display: block;
}

.table-fixed tbody td {
  float: left;
}

.table-fixed thead tr th {
  float: left;
  background-color: #f39c12;
  border-color: #e67e22;
}

.table-fixed .grouped>.form-group {
  display: inline-block !important;
}

.bs-callout {
  padding: 5px 0px;
  margin: 20px 0;
  border: 1px solid #eee;
  border-left-width: 5px;
  border-radius: 3px;
}

.bs-callout h4 {
  margin-top: 0;
  margin-bottom: 5px;
}

.bs-callout p:last-child {
  margin-bottom: 0;
}

.bs-callout code {
  border-radius: 3px;
}

.bs-callout+.bs-callout {
  margin-top: -2px;
}

.bs-callout-default {
  border-left-color: #777;
}

.bs-callout-default h4 {
  color: #777;
}

.bs-callout-primary {
  border-left-color: #428bca;
}

.bs-callout-primary h4 {
  color: #428bca;
}

.bs-callout-success {
  border-left-color: #5cb85c;
}

.bs-callout-success h4 {
  color: #5cb85c;
}

.bs-callout-danger {
  border-left-color: #d9534f;
}

.bs-callout-danger h4 {
  color: #d9534f;
}

.bs-callout-warning {
  border-left-color: #f0ad4e;
}

.bs-callout-warning h4 {
  color: #f0ad4e;
}

.bs-callout-info {
  border-left-color: #5bc0de;
}

.bs-callout-info h4 {
  color: #5bc0de;
}