Skip to content

Instantly share code, notes, and snippets.

@ganmahmud

ganmahmud/search_result.html

Created January 2, 2018 18:48
Show Gist options
  • Save ganmahmud/0c1916d8ab1b76a4f1f13a337880d254 to your computer and use it in GitHub Desktop.
Save ganmahmud/0c1916d8ab1b76a4f1f13a337880d254 to your computer and use it in GitHub Desktop.
Download ZIP
Angular Sample
Raw
search_result.html
<!-- search fields -->
<div class="container margin-t20">
<div class="row lnb">
<div class="col-sm-6 col-xs-6">
<div class="khojnow-brand">
<a href="../app"><img src="images/logo.png" alt="Logo" class="img-responsive"></a>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<a href="#" class="login-nav padding-zero-imp btn btn-info radius-zero" data-toggle="modal" data-target="#loginmodal">
<i class="fa fa-sign-in"></i><span class="sign-in-text">Login</span>
</a>
</div>
</div>
<div class="search-box" ng-controller="SearchCtrl">
<form name="searchForm" ng-submit="detailSearch(searchItem)">
<div class="nothing">
<div class="col-sm-3 padding-zero">
<div class="input-group">
<div class="input-group-btn">
<select class="btn radius-zero height50" style="border-color:#ccc;">
<option>Dhaka</option>
<option>Chittagong</option>
<option>Sylhet</option>
</select>
</div>
<!-- /btn-group -->
<input type="text" class="form-control radius-zero height50" aria-label="..." placeholder="Area Name">
</div>
<!-- /input-group -->
</div>
<div class="col-sm-9 padding-zero margin-top-10">
<div class="input-group">
<div class="search-dropdown-result-box" ng-if="showSearchDropdown">
<div class="search-loading text-center" ng-show="loader">
<i class="fa fa-spin fa-cog fa-2x"></i>
</div>
<table class="table table-hover table-condensed borderless" ng-show="!loader">
<tbody>
<tr ng-repeat="(key, value) in suggestion">
<td class="cell-width-limited padding-zero-imp hidden-sm hidden-xs">
<a ng-href="business/{{value.id}}/{{value.name}}"><img class="img-responsive search-img-sm" src="images/sample1.jpg" alt="khojnow"></a>
</td>
<td class="vertical-center">
<span>{{value.name}}</span>
<span class="search-result-cat">
Category:&nbsp;
<a href="category/">Partycenter</a>|<a href="category/">Restaurant</a>
</span>
</td>
</tr>
</tbody>
</table>
</div>
<input type="text" class="main-search-field form-control radius-zero height50" aria-label="..." placeholder="Search Establishment,e,g. hospital" ng-model="searchItem" ng-keyup="quickSearch(searchItem)">
<div class="input-group-btn">
<button type="submit" class="btn btn-khojnow radius-zero" style="padding:14px 20px;"><i class="fa fa-search"></i></button>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
</div>
</form>
</div>
</div>
<!-- search fields ends-->
<!-- search results -->
<br>
<!-- alternate card -->
<div class="container blocks">
<div style="text-align: center;" ng-if="filteredBusiness.length == 0">
<i class="fa fa-spinner fa-pulse fa-4x"></i>
</div>
<div class="wells col-md-4 col-sm-6 verified yes" ng-repeat="(key, value) in filteredBusiness">
<div class="card-img">
<a ng-href="business/{{value.id}}/{{value.name}}"><img src="images/sample1.jpg" alt="Image" class="img-responsive"></a>
<span class="share">
<div class="dropdown">
<button title="Share on social network" class="btn dropdown-toggle br-circle" type="button" data-toggle="dropdown">
<i class="fa fa-share-alt"></i>
</button>
<ul class="dropdown-menu social">
<li><a href="#" class="fb"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="google"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</span>
</div>
<div class="card-header">
<h4 class="card-name">
<a ng-href="business/{{value.id}}/{{value.name}}">
<span>
{{value.name}}
<i class="verified-icon fa fa-check-circle" title="Verified"></i>
</span>
</a>
</h4>
<span class="star-rating">
<fieldset>
<input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Outstanding">5 stars</label>
<input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Very Good">4 stars</label>
<input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Good">3 stars</label>
<input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Poor">2 stars</label>
<input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Very Poor">1 star</label>
</fieldset>
</span>
</div>
<div class="card-info">
<ul class="info-list block js-equal-height">
<li>
<a class="text-decor" href="tel:8801714417744">
<span class="info-icon back-brown1">
<i title="Phone Number" class="fa fa-phone"></i>
</span>
<span class="info-text">{{value.contact || 'Not Available'}}</span>
</a>
</li>
<li>
<address>
<span class="info-icon back-brown2">
<i class="fa fa-home" title="Address"></i>
</span>
<span class="info-text">
{{value.address | limitTo:30 || 'Not Available'}} <!-- prev limit 30 -->
</span>
</address>
</li>
<li>
<p class="margin-bottom-zero">
<span class="info-icon back-blue">
<i class="fa fa-location-arrow" title="Location"></i>
</span>
<span class="info-text" data-tooltip="{{value.location || 'Not Available'}}">
{{value.location | limitTo:50 || 'Not Available'}}...
</span>
</p>
</li>
<li>
<a class="text-decor" href="#">
<span class="info-icon back-pink">
<i title="Send this info to a email address" class="fa fa-map-marker"></i>
</span>
<span class="info-text">Map</span></a>
</li>
<li>
<a class="text-decor" href="#">
<span class="info-icon back-green">
<i title="Send this info to a email address" class="fa fa-envelope"></i>
</span>
<span class="info-text">Tell a friend</span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="row text-center">
<button type="button" class="btn btn-large btn-default" ng-click="filterResult(limit + 10)">See More</button>
</div>
<!-- Modal -->
<div class="modal fade" id="loginmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Modal title
</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Username/Email address</label>
<input type="email" class="form-control"
id="exampleInputEmail1" placeholder="Enter email"/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control"
id="password" placeholder="Enter Password"/>
</div>
<button type="submit" class="btn btn-success">Login</button>
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-danger">New here ? <b>Register</b></a>
<button type="button" class="btn btn-default"data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div> <!-- modal ends -->
<script type="text/javascript">
function heightsEqualizer(selector) {
var elements = document.querySelectorAll(selector),
max_height = 0,
len = 0,
i;
if ( (elements) && (elements.length > 0) ) {
len = elements.length;
for (i = 0; i < len; i++) { // get max height
elements[i].style.height = ''; // reset height attr
if (elements[i].clientHeight > max_height) {
max_height = elements[i].clientHeight;
}
}
for (i = 0; i < len; i++) { // set max height to all elements
elements[i].style.height = max_height + 'px';
}
}
}
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function() {
heightsEqualizer('.js-equal-height');
});
window.addEventListener('resize', function(){
heightsEqualizer('.js-equal-height');
});
}
setTimeout(function () { // set 1 second timeout for having all fonts loaded
heightsEqualizer('.js-equal-height');
}, 1000);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment