mixin checkboxTag(label)
	input(type="checkbox" id=label value="")
	label.btn.btn-default.btn-sm(for=label)=label
mixin optgroup(groupname)
	optgroup(label=groupname)
		option Option 1
		option Option 2
		option Option 3
mixin room(gallery,name,bldg,num,capacity,dept)
	td
		a.lightbox(href="#" data-featherlight=gallery)
			img(src="https://placehold.it/65")
			br
			| <span class="fa fa-picture-o" aria-hidden="true"></span> View gallery
	td=name
	td=bldg
	td=num
	td=capacity
	td=dept
// Form
.container
	h1 Room Search
	form
		fieldset
			.row
				.col-sm-6
					.form-group.form-group-lg
						label(for="name") Room Name:
						input#name.form-control(type="text")
					.form-group.form-group-lg
						label(for="number") Room Number:
						input#number.form-control(type="number")
					.form-group.form-group-lg
						label(for="department") Building:
							select(class="form-control")
								option(selected) Select building...
								+optgroup('Group 1')
								+optgroup('Group 2')
								+optgroup('Group 3')
				.col-sm-6
					.form-group.form-group-lg
						label(for="department") Department:
							select(class="form-control")
								option(selected) Select department...
								+optgroup('Group 1')
								+optgroup('Group 2')
								+optgroup('Group 3')
					label(for="capacity") Room capacity:
					.input-group
						span.input-group-addon 10
						input#capacity.form-control(type="range" min="10" max="200" step="10" value="100" oninput="outputUpdate(value)")
						output#capacity-value.input-group-addon(for="capacity") 50
					br
					// Had to add this because people couldn't understand the slider
					.form-group
						strong Room capacity:
						.row
							.col-sm-3
								label(for="1-24")
									input(type="radio" id="1-24" name="capacity" value="1-24")
									|  1-24
							.col-sm-3
								label(for="25-49")
									input(type="radio" id="25-49" name="capacity" value="25-49")
									|  25-49
							.col-sm-3
								label(for="50-99")
									input(type="radio" id="50-99" name="capacity" value="50-99")
									|  50-99
							.col-sm-3
								label(for="100-300")
									input(type="radio" id="100-300" name="capacity" value="100-300")
									|  100-300

					.form-group
						strong Room features:
						.checkbox-button
							+checkboxTag("Projector")
							+checkboxTag("Dry Erase Board")
							+checkboxTag("Smart Classroom")
							+checkboxTag("PC Connection")
							+checkboxTag("Computer, Dell")
							+checkboxTag("Document Camera")
							+checkboxTag("VHS Connection")
			.row
				.col-xs-12
					input#submit.btn.btn-primary.btn-sm.pull-right(type="submit" value="Update Search")
					
// Results
.container
	hr
	h2 Search Results:
	.row
		.col-xs-12
			form
				fieldset
					label(for="roomSearch") Refine search:
					.input-group.input-group-lg
						span.input-group-addon
							span.fa.fa-search
						input#roomSearch.form-control(type="text")
					small#feedback Refine by room name, number, department, etc.
			.table-responsive
				table#results.table.table-striped
					thead
						tr
							th Photos
							th Name
							th Building
							th Number
							th Capacity
							th Department
					tbody
						tr
							+room('<a data-flickr-embed="true" href="https://www.flickr.com/photos/flickr/albums/72157641288898144" title="Flickr Galleries"><img src="https://farm3.staticflickr.com/2942/32353862104_cd543b7e76_c.jpg" width="100%" height="auto" alt="Flickr Galleries"></a><h3>Video Tour</h3><a href="https://flic.kr/p/YDTaVR" target="_blank"><span class="fa fa-video-camera" aria-hidden="true"></span> Video Tour #1</a><a href="https://flic.kr/p/YDTaVR" target="_blank"><span class="fa fa-video-camera" aria-hidden="true"></span> Video Tour #2</a><h3>Room Features</h3><ul class="list-group"><li class="list-group-item">Room feature</li><li class="list-group-item">Room feature</li><li class="list-group-item">Room feature</li></ul>','Bowden','Buildingname','216','50','Biology')
						tr
							+room('<a data-flickr-embed="true" data-context="true"  href="https://www.flickr.com/photos/flickr/23619204510/in/album-72157639868074114/" title="Photographer Finds Inspiration in Everyday Encounters"><img src="https://farm1.staticflickr.com/642/23619204510_b8413d624c_z.jpg" width="640" height="360" alt="Photographer Finds Inspiration in Everyday Encounters"></a><h3>Room Features</h3><ul class="list-group"><li class="list-group-item">Room feature</li><li class="list-group-item">Room feature</li><li class="list-group-item">Room feature</li></ul>','Callwyc','Buildingname','201','150','English')
						tr
							+room('<a data-flickr-embed="true" href="https://www.flickr.com/photos/flickr/albums/72157639868074114" title="The Weekly Flickr"><img src="https://farm4.staticflickr.com/3770/11990696506_986d8d7e05_b.jpg" width="100% height="auto" alt="The Weekly Flickr"></a><h3>Room Features</h3><ul class="list-group"><li class="list-group-item">Room feature</li><li class="list-group-item">Room feature</li><li class="list-group-item">Room feature</li></ul>','Bowden','Buildingname','323','75','Philosophy')
						tr
							+room('<a data-flickr-embed="true" href="https://www.flickr.com/photos/flickr/albums/72157645333227241" title="Flickr for Apple TV"><img src="https://farm4.staticflickr.com/3887/14312424000_8b8868ed95_b.jpg" width="100% height="auto" alt="Flickr for Apple TV"></a><h3>Room Features</h3><ul class="list-group"><li class="list-group-item">Room feature</li><li class="list-group-item">Room feature</li><li class="list-group-item">Room feature</li></ul>','LIBC','Buildingname','212','25','Jewish studies')
						tr
							+room('<a data-flickr-embed="true" href="https://www.flickr.com/photos/flickr/albums/72157657170330995" title="Throwback Thursday"><img src="https://farm2.staticflickr.com/1655/24348176220_0b89a6e2dc.jpg" width="100% height="auto" alt="Throwback Thursday"></a><h3>Room Features</h3><ul class="list-group"><li class="list-group-item">Room feature</li><li class="list-group-item">Room feature</li><li class="list-group-item">Room feature</li></ul>','MLANG ','Buildingname','128','75','German Studies')
						tr
							+room('<h3>This is just pop-up text</h3><p>This pop-up only shows some text and maybe links. Proactively repurpose mission-critical manufactured products and superior ROI. Rapidiously envisioneer.</p><ul><li>You can put anything in here</li><li>Even lists and stuff</li></ul><p>This is the end of the pop-up content.</p>','TEXT ','Buildingname','111','56','Pop-up text')

					
View Compiled
#capacity {height:45px;}
#capacity-value {
	font-size:2.5rem;
}
thead {font-weight:bold;}
//------------------------------------//
// CHECKBOX LABEL/BUTTONS             //
//------------------------------------//
.checkbox-button {
	label {
		margin-bottom:5px;
		padding:2px 10px;
		font-size:1.25;
		// Add empty checkbox square
		&:after {
			font-family:'fontawesome';
			color:#999;
			content:" " "\f096";
		}
	}
	// Appearance when checked
	input[type="checkbox"] {appearance:none;}
	input[type="checkbox"]:checked + label {
		background-color:#E5EBF1;
		&:after {content:" " "\f00d";} // fa-times
	}
}
View Compiled
// Capacity Slider output updated number
function outputUpdate(vol) {
	document.querySelector('#capacity-value').value = vol;
}
// jQuery Searchable https://www.npmjs.com/package/jquery.searchable
// https://bootsnipp.com/snippets/93XX
$( '#results' ).searchable({
    //selector      : '.row',
    //childSelector : '.column',
    searchField   : '#roomSearch',
    //       : true,
    //oddRow        : { 'background-color': '#f5f5f5' },
    //evenRow       : { 'background-color': '#fff' },
    hide          : function( elem ) {
        elem.fadeOut(50);
    },
    show          : function( elem ) {
        elem.fadeIn(50);
    },
    searchType    : 'fuzzy', // 'fuzzy' 'strict' 'default'
    onSearchActive : function( elem, term ) {
        elem.show();
    },
    //onSearchEmpty: function( elem ) {
        //elem.hide();
    //},
    onSearchFocus: function() {
        $( '#feedback' ).show().text( 'Search by room name, number, department, etc.' );
    },
    onSearchBlur: function() {
        $( '#feedback' ).hide();
    },
    clearOnLoad: false // 'true' will keep all results hidden by default
});
// Featherlight https://github.com/noelboss/featherlight/
$( '.lightbox' ).featherlight();
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
  2. https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
  3. https://cdn.rawgit.com/noelboss/featherlight/1.7.8/release/featherlight.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js
  3. https://cdn.jsdelivr.net/npm/jquery.searchable@1.1.0/jquery.searchable.min.js
  4. https://cdn.rawgit.com/noelboss/featherlight/1.7.8/release/featherlight.min.js
  5. https://embedr.flickr.com/assets/client-code.js