Skip to content

Instantly share code, notes, and snippets.

@smlombardi

smlombardi/searchbar.html

Created March 6, 2015 20:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save smlombardi/fe83a1899a29b3a1ab28 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save smlombardi/fe83a1899a29b3a1ab28 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
searchbar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/design_system.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="container">
<div class="row toolbar">
<div class="col-md-3">
left stuff
</div>
<div class="col-md-9">
<div class="row searchbar">
<div class="col-md-12 text-right">
<form novalidate>
<!-- left group -->
<div class="form-group col-md-9 debug">
<!-- internal group of label and field -->
<div class="row form-unit">
<!-- label -->
<div class="col-md-3 text-right form-label">
<label for="csbQuery">Search</label>
</div>
<!-- field -->
<div class="col-md-9">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
All
<!--Placeholder, should be changed dyamically-->
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<!--FIXME: Should be a json list that's localized-->
<li><a>All</a>
</li>
<li><a>Last Name</a>
</li>
<li><a>First Name</a>
</li>
<li><a>Company</a>
</li>
<li><a>Street</a>
</li>
<li><a>City</a>
</li>
<li><a>State</a>
</li>
<li><a>Zip</a>
</li>
<li><a>Country</a>
</li>
</ul>
</div>
<input ng-model="searchParams.searchText" ng-model-options="queryOptions" pattern="..+" type="search" class="form-control address-search" id="csbQuery">
</div>
</div>
</div>
</div>
<!-- right group-->
<div class="form-group col-md-3 debug">
<!-- internal group of label and field -->
<div class="row form-unit">
<!-- label -->
<div class="col-md-5 text-right form-label">
<label for="csbFilter">Sort by</label>
</div>
<!-- field -->
<div class="col-md-7">
<select ng-model="searchParams.sortField" class="form-control" id="csbFilter">
<option value="contact.lastName">Last Name</option>
<option value="contact.firstName">First Name</option>
<option value="contact.companyName">Company</option>
<option value="streetLine1">Street</option>
<option value="city">City</option>
<option value="state">State</option>
<option value="isoCountry">Country</option>
<option value="postalCode">ZIP</option>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 fpo">
Hello
</div>
</div>
</div>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
Raw
searchbar.scss
@mixin bp($point) {
$bp-babybear: "(max-width: 600px)";
$bp-mamabear: "(max-width: 1280px)";
$bp-papabear: "(max-width: 1600px)";
@if $point == papa-bear {
@media #{$bp-papabear} {
@content;
}
}
@else if $point == mama-bear {
@media #{$bp-mamabear} {
@content;
}
}
@else if $point == baby-bear {
@media #{$bp-babybear} {
@content;
}
}
}
.toobar {
margin-bottom: 10px;
}
.fpo {
padding: 30px;
background-color: #eee;
min-height: 400px;
}
body {
margin: 40px;
}
.searchbar {
.form-group {
padding: 0;
}
.form-unit {
padding: 0;
.form-label {
padding-right: 10px;
padding-top: 7px;
text-align: right;
@include bp(baby-bear) {
text-align: left;
}
}
>div {
padding: 0;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment