Skip to content

Instantly share code, notes, and snippets.

@brsmith080

brsmith080/QwXNYM.markdown

Last active August 29, 2015 14:18
Show Gist options
  • Save brsmith080/5ff3ca2668bd18a7f2a1 to your computer and use it in GitHub Desktop.
Save brsmith080/5ff3ca2668bd18a7f2a1 to your computer and use it in GitHub Desktop.
Download ZIP
QwXNYM
Raw
index.html
<link href="//netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
<div class='container'>
<h1>Comparable Filters</h1>
<div class='row-fluid'>
<div class='span3 column'>
<div class='section'>
<h5>
<input type='checkbox'> Comparable Sales
</h5>
<select class='span11'>
<option selected>All</option>
</select>
</div>
<div class='section'>
<h5>
<input type='checkbox'> Include Sales Within
</h5>
<select class='span11'>
<option selected>5 Miles</option>
</select>
</div>
<div class='section'>
<h5>
<input type='checkbox'> MLS Listings
</h5>
<div class='controls controls-row'>
<label class='span3'>
<input type='checkbox' /> Open
</label>
<label class='span3'>
<input type='checkbox' /> Closed
</label>
</div>
<div class='controls controls-row'>
<label class='span3'>
<input type='checkbox' /> Pending
</label>
<label class='span3'>
<input type='checkbox' /> Expired
</label>
</div>
</div>
<div class='section'>
<h5>Minimum # Compare Sales</h5>
<select class='span11'>
<option selected>3 Comps</option>
</select>
<h5>Maximum # Compare Sales</h5>
<select class='span11'>
<option selected>10 Comps</option>
</select>
</div>
<div class='section'>
<h5>Property Type <small>(select mutiple)</small></h5>
<label>
<input type='checkbox' /> Single Family Home
</label>
<label>
<input type='checkbox' /> Condo/Townhome/Row Home/Co-Op
</label>
<label>
<input type='checkbox' /> Mfd/Mobile Home
</label>
<label>
<input type='checkbox' /> Farms/Ranches
</label>
<label>
<input type='checkbox' /> Land
</label>
<label>
<input type='checkbox' /> Multi-Family Property
</label>
</div>
</div>
<div class='span3 column'>
<div class='section'>
<h5>Year Built</h5>
<div class='controls controls-row'>
<label class='span2'>Subject:</label>
<span class='span9'>1921</span>
</div>
<div class='controls controls-row'>
<label class='span2'>From:</label>
<input class='span9' type='text' />
</div>
<div class='controls controls-row'>
<label class='span2'>To:</label>
<input class='span9' type='text' />
</div>
</div>
<div class='section'>
<h5>As Of Date</h5>
<div class='controls controls-row'>
<select class='span6'>
<option>Current Date</option>
</select>
<!-- not using the bootstrap input-append since it doesnt account for grid -->
<div class='span5 input-cap'>
<input type='text' value='03/20/2015' />
<div class='cap'>
<i class="icon-calendar"></i>
</div>
</div>
</div>
<h5>Recording Date</h5>
<div class='controls controls-row'>
<select class='span11'>
<option>1 Year</option>
</select>
</div>
<div class='controls controls-row'>
<label class='span2'>From</label>
<div class='span4 input-cap'>
<input type='text' value='03/20/2015' />
<div class='cap'>
<i class="icon-calendar"></i>
</div>
</div>
<label class='span1'>To</label>
<div class='span4 input-cap'>
<input type='text' value='03/20/2015' />
<div class='cap'>
<i class="icon-calendar"></i>
</div>
</div>
</div>
</div>
</div>
<div class='span3 column'>
<div class='section'>
<h5>Price</h5>
<div class='row-fluid thin'>
<small class='span5 center'>max</small>
<small class='offset1 span5 center'>min</small>
</div>
<div class='controls controls-row'>
<input type='text' placeholder='no min' class='span5'/>
<label class='span1'>to</label>
<input type='text' placeholder='no max' class='span5'/>
</div>
</div>
<div class='section'>
<label>Beds</label>
</div>
<div class='section'>
<label>Baths</label>
</div>
</div>
<div class='span3 column'>
<div class='section'>
<h5>Gross Living Area</h5>
<div class='controls controls-row'>
<label class='span2'>Subject:</label>
<span class='span9'>1,314 sqft</span>
</div>
<div class='controls controls-row'>
<label class='span2'>From:</label>
<input type='text' class='span4'/>
<label class='span2'>sqft -</label>
<div class='span4 input-cap'>
<input type='text' value='' />
<div class='cap'>%</div>
</div>
</div>
<div class='controls controls-row'>
<label class='span2'>To:</label>
<input type='text' class='span4'/>
<label class='span2'>sqft +</label>
<div class='span4 input-cap'>
<input type='text' value='' />
<div class='cap'>%</div>
</div>
</div>
</div>
<div class='section'>
<h5>Lot Size</h5>
<div class='controls controls-row'>
<label class='span2'>Subject:</label>
<span class='span9'>10,314 sqft</span>
</div>
<div class='controls controls-row'>
<label class='span2'>Units:</label>
<select class='span10'>
<option>Square Feet</option>
</select>
</div>
<div class='controls controls-row'>
<label class='span2'>From:</label>
<input type='text' class='span4'/>
<label class='span2'>sqft -</label>
<div class='span4 input-cap'>
<input type='text' value='' />
<div class='cap'>%</div>
</div>
</div>
<div class='controls controls-row'>
<label class='span2'>To:</label>
<input type='text' class='span4'/>
<label class='span2'>sqft +</label>
<div class='span4 input-cap'>
<input type='text' value='' />
<div class='cap'>%</div>
</div>
</div>
</div>
</div>
</div>
</div>
Raw
style.css
body { margin: 0; padding:0; width: 100%; }
h1 { border-bottom: #666 solid 4px; margin-bottom: 5px; padding: 0; margin: 0; }
.container { width: auto !important; padding: 10px; }
.section {
padding: 2px 2px 2px 25px;
border-top: 1px solid #ddd;
}
.section:first-child { border-top: none; }
.section:last-child { border-bottom: none; }
.row-fluid { overflow: hidden; }
.column {
border-right: 1px solid #ddd;
margin-bottom: -99999px;
padding-bottom: 99999px;
margin-left: 0 !important;
width: 25% !important;
}
.column:last-child { border-right: none; }
.section h5 { margin-left: -12px;}
.section h5 input[type=checkbox] {
margin:0;
margin-top: -3px; /* maybe? */
}
.section .controls-row label { }
.section .input-cap {
position:relative;
padding-right: 45px; /* 12px input padding, 20px width on cap, 10px padding on cap, 2px border on cap, 1px input border */
}
.section .input-cap input {
border-radius: 4px 0 0 4px;
width: 100%;
margin: 0;
}
.section .input-cap .cap {
position: absolute;
top: 0;
right:0;
display: inline-block;
width: 20px;
height: 20px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 20px;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
background-color: #eeeeee;
border: 1px solid #ccc;
border-radius: 0 4px 4px 0;
margin-left: -1px
}
.center { text-align: center; }
.row-fluid.thin { min-height: 20px; }
.row-fluid.thin [class*="span"] { min-height: 20px; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment