UNPKG

cobuild-angular-stack

Version:

Base stack angular sass jade gulp

179 lines (177 loc) 10.5 kB
<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>