cobuild-angular-stack
Version:
Base stack angular sass jade gulp
179 lines (177 loc) • 10.5 kB
HTML
<div id="kitchen" class="container-fluid product-sidebar">
<div class="row">
<div class="filters visible-xs col-xs-12">
<div class="form-group">
<div class="input-group">
<input ng-model="filterName" type="text" class="form-control" placeholder="{{'search' | translate}} {{'gifts' | translate}}">
<div class="input-group-btn">
<button class="btn btn-inverse" type="button">Buscar</button>
</div>
</div>
</div>
<div class="form-group filter-form clearfix">
<label class="control-label" >
Categoría
</label>
<select class="form-control" ng-options="c.id as c.name for c in categories" ng-model="categoriesFilter" dir="rtl">
<option value="" selected="selected" disabled>Seleccionar</option>
</select>
</div>
<hr>
<div class="form-group filter-form">
<label class="control-label" >
{{'price' | translate}}
</label>
<div class="slider">
<slider ng-model="filterPrice.result" min="filterPrice.min" step="filterPrice.step" max="filterPrice.max" value="filterPrice.value" range="true"></slider>
<span class="cool-font">{{'price' | translate}} {{filterPrice.result[0] | currency}} MX - {{filterPrice.result[1] | currency}} MX</span>
</div>
</div>
<hr>
<div class="form-group filter-form clearfix">
<label class="control-label" >
Tienda
</label>
<select class="form-control" ng-options="s.id as s.name for s in stores" ng-model="categoriesFilter" dir="rtl">
<option value="" selected="selected" disabled>Seleccionar</option>
</select>
</div>
</div>
<div class="filters hidden-xs col-md-2 col-sm-3 col-xs-12">
<aside>
<div class="form-group">
<label class="control-label margin-top" >
{{'filters' | translate}}
</label>
<input ng-model="filterName" type="text" class="form-control" placeholder="{{'search' | translate}} {{'gifts' | translate}}">
</div>
<!-- <div class="form-group filter-form">
<div class="comming-soon">
<p>PRÓXIMAMENTE</p>
</div>
<label class="control-label" >
{{'collections' | translate}}
</label>
<ul>
<li>Para Aventureros</li>
<li>Para Nuevo Hogar</li>
<li>Para Playeros</li>
</ul>
</div> -->
<div class="form-group filter-form price">
<label class="control-label" >
{{'price' | translate}}
</label>
<slider ng-model="filterPrice.result" min="filterPrice.min" step="filterPrice.step" max="filterPrice.max" value="filterPrice.value" range="true"></slider>
<span class="cool-font">{{'price' | translate}} {{filterPrice.result[0] | currency}} MX - {{filterPrice.result[1] | currency}} MX</span>
</div>
<div class="form-group filter-form categories">
<label class="control-label" >
{{'categories' | translate}}
</label>
<ul>
<li ng-repeat="category in categories" class="cool-font" ng-class="{'active': categoriesFilter.indexOf(category.id) != -1}">
<input id="{{category.id}}" type="checkbox" checklist-model="categoriesFilter" checklist-value="category.id">
<label class="type" for="{{category.id}}">
{{category.name}}
</label>
</li>
</ul>
</div>
<div class="form-group filter-form stores">
<label class="control-label" >
{{'stores' | translate}}
</label>
<ul>
<li ng-repeat="store in stores" class="cool-font" ng-class="{'active': storeFilter.indexOf(store.id) != -1}">
<input id="{{store.id}}" type="checkbox" checklist-model="storeFilter" checklist-value="store.id">
<label class="type" for="{{store.id}}">
{{store.name}}
</label>
</li>
</ul>
</div>
</aside>
</div>
<div class="col-md-10 col-sm-9 col-xs-12 product-show">
<header class="header-list margin-top hidden-xs">
<div class="section-description">
<div class="clearfix">
<div class="pull-right flex-center">
<span class="cool-font">{{'order-by' | translate}}</span>
<div class="input-group">
<div class="btn-group" uib-dropdown auto-close="true">
<button id="sort-by" type="button" class="btn btn-white" uib-dropdown-toggle ng-disabled="disabled">
<span class="text-label">{{sortBy.selected.label}}</span>
<span class="caret"></span>
</button>
<ul class="pull-right" uib-dropdown-menu role="menu" aria-labelledby="sort-by">
<li ng-repeat="field in sortBy.fields">
<a ng-click="selectFieldOrder(field)">{{field.label}}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="visible-xs margin-top">
<div class="row">
<div ng-repeat="item in products" class="col-md-4 col-sm-6">
<div class="item-mesa clearfix">
<div ng-click="fastAddToRegistry(item)" class="icon-mesa pull-right">
<img src="img/add.png" ng-hide="checkVisible == item.id">
<img src="img/check.png" ng-show="checkVisible == item.id">
</div>
<div class="left">
<div ng-click="addToRegistry(item)" class="text-center product" ng-style="{backgroundImage: item.image ? 'url('+item.image+')' : 'url(img/default-gift.png)'}" ng-disabled="disabled">
</div>
</div>
<div class="right flex-center">
<div class="item-description">
<div ng-bind="item.name | truncate:20:'...'"></div>
<div ng-bind="item.price | currency:'$' : 2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hidden-xs margin-top">
<div class="row">
<div ng-repeat="item in products" class="col-lg-3 col-md-4 col-sm-6">
<div class="item-mesa" ng-mouseleave="animateOverlay($index, true)">
<div class="icon-mesa pull-right" ng-mouseover="animateLabel($index, false)" ng-mouseleave="animateLabel($index, true)">
<div class="plus-container" ng-click="fastAddToRegistry(item)" ng-class="{ check: checkVisible == item.id }">
<div ng-hide="checkVisible == item.id" id="add-{{$index}}" class="add-label">Añadir a mi mesa</div>
<div ng-show="checkVisible == item.id" class="add-label">Añadido a mi mesa</div>
<div class="img-container">
<img src="img/plus-white.png" ng-hide="checkVisible == item.id">
<img src="img/check-white.png" ng-show="checkVisible == item.id">
</div>
</div>
<div class="points-container" ng-click="addToRegistry(item)">
<div ng-click="addToRegistry(item)" class="edit-label">Ver/editar</div>
<div class="img-container">
<img src="img/points-white.png" >
</div>
</div>
</div>
<div ng-click="addToRegistry(item)" class="text-center product" ng-style="{backgroundImage: item.image ? 'url('+item.image+')' : 'url(img/default-gift.png)'}" ng-disabled="disabled">
</div>
<div class="item-description clearfix" ng-mouseover="animateOverlay($index, false)">
<div class="item-name" ng-bind="item.name"></div>
<div class="item-price" ng-bind="item.price | currency:'$' : 2"></div>
<div class="item-store" ng-bind="item.store.name"></div>
</div>
<!-- <div id="overlay-{{$index}}" class="overlay flex-center" ng-mouseleave="animateOverlay($index, true)" ng-click="addToRegistry(item)">
<h4>Ver Detalles</h4>
</div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>