UNPKG

cobuild-angular-stack

Version:

Base stack angular sass jade gulp

207 lines (198 loc) 13.5 kB
<div id="kitchen"> <form id="new-product" name="productForm" ng-submit="loginModal()" class="container-fluid" novalidate> <div class="row sidebar-container"> <div class="col-md-2 col-sm-3 col-xs-12" ng-if="!updateForm && !product.id" ng-include="'partials/uniko-aside.html'"></div> <div class="new-product-container" ng-class="{'col-md-10 col-sm-9': !updateForm && !product.id}"> <header> <h2 ng-if="!updateForm && !product.id" class="header-grey text-center">{{'create-gift' | translate | uppercase}}</h2> <div ng-if="!updateForm && product.id" class="margin-top">&nbsp;</div> <h3 ng-if="!updateForm && !product.id">¡Personaliza tu mesa con lo que quieras! ¡Desde unas margaritas en la playa o una aportación para su departamento! Agrega una linda foto y descripción original.</h3> </header> <!-- Visible XS --> <div class="visible-xs new-product-container-xs"> <div class="main-image-xs dropzone flex-center" ng-style="{backgroundImage:'url('+product.image+')'}" ng-if="!updateForm"> <img ng-show="!product.image" class="camera" src="img/camara-big.png"> <h3 ng-if="!product.image && isAdmin">{{ product.imagesList.length ? 'uploading-photo' : 'drag-photo' | translate }}</h3> <h3 ng-if="!product.image && !isAdmin">{{ 'drag-photo' | translate }}</h3> </div> <div class="main-image" ng-style="{backgroundImage:'url('+product.image+')'}" ng-if="updateForm"></div> <div class="product-store product-form"> <div class="form-group label-floating" ng-class="{'has-error':productForm.name.$invalid && productForm.$submitted}"> <label class="control-label"> {{'product-name' | translate}} </label> <input class="form-control" disabled name="name" required type="text" ng-model="product.name"> <div ng-show="productForm.name.$invalid && productForm.$submitted"> <span class="help-block" ng-show="productForm.name.$error.required">{{'gift-name-required' | translate}}</span> </div> </div> <div class="form-group label-floating" ng-class="{'has-error':productForm.price.$invalid && productForm.$submitted}"> <label class="control-label"> {{'price' | translate}} </label> <input class="form-control" disabled name="price" required ng-pattern="validNumber" type="text" ng-model="product.price"> <div ng-show="productForm.price.$invalid && productForm.$submitted"> <span class="help-block" ng-show="productForm.price.$error.required">{{'gift-price-required' | translate}}</span> <span class="help-block" ng-show="productForm.price.$error.pattern">{{'field-only-number' | translate}}</span> </div> </div> <div class="form-group label-floating" ng-class="{'has-error':productForm.description.$invalid && productForm.$submitted}"> <label class="control-label"> {{'description' | translate}} </label> <textarea class="form-control" name="description" disabled type="text" ng-model="product.description" required></textarea> <div ng-show="productForm.description.$invalid && productForm.$submitted"> <span class="help-block" ng-show="productForm.description.$error.required">{{'gift-description-required' | translate}}</span> </div> </div> </div> <div class="carousel-container" ng-if="isAdmin"> <div class="carousel"> <a type='button' class='btn-prev'> <img src="img/prev.png" alt=""> </a> <a type='button' class='btn-next'> <img src="img/next.png" alt=""> </a> <slick ng-if="product && product.$resolved && !newPhoto" infinite="true" slides-to-show="4" slides-to-scroll="2" prev-arrow=".btn-prev" next-arrow=".btn-next" settings="slickConfig"> <div class="carousel-item" ng-repeat="image in product.imagesList"> <div class="child uploader" ng-if="!image"> <i class="fa fa-refresh spin" aria-hidden="true"></i> </div> <img ng-click="setImageAsDefault(image)" ng-if="image" ng-src="{{image}}" class="child"/> </div> </slick> </div> </div> <div class="form-group label-floating"> <div class="product-store select-catalogo"> <ui-select ng-disabled="true" ng-model="product.storeId"> <ui-select-match placeholder="{{'store' | translate}}">{{$select.selected.name}} </ui-select-match> <ui-select-choices repeat="s.id as s in stores | filter: $select.search track by s.name"> <div ng-bind-html="s.name | highlight: $select.search"></div> </ui-select-choices> </ui-select> </div> </div> <div class="text-center margin-bottom actions"> <button type="button" ui-sref="products_public" class="btn btn-lp btn-dark">{{'back' | translate}} </button> <button type="submit" class="btn btn-inverse btn-lp"> {{'add-to-table' | translate}} </button> </div> </div> <!-- Hidden XS --> <div class="hidden-xs margin-top-2"> <div class="col-md-6"> <div class="main-image dropzone flex-center" ng-style="{backgroundImage:'url('+product.image+')'}" ng-if="!updateForm"> <img ng-show="!product.image" class="camera" src="img/camara-big.png"> <h3 ng-if="!product.image && isAdmin">{{ product.imagesList.length ? 'uploading-photo' : 'drag-photo' | translate }}</h3> <h3 ng-if="!product.image && !isAdmin">{{ 'drag-photo' | translate }}</h3> </div> <div class="main-image" ng-style="{backgroundImage:'url('+product.image+')'}" ng-if="updateForm"></div> <div class="carousel-container margin-top-2" ng-if="product.imagesList.length"> <div class="carousel"> <div class="btn-prev"> <img src="img/prev.png" alt=""> </div> <a type='button' class='btn-next'> <img src="img/next.png" alt=""> </a> <slick ng-if="product && product.$resolved && !newPhoto" infinite="true" slides-to-show="4" slides-to-scroll="2" prev-arrow=".btn-prev" next-arrow=".btn-next" settings="slickConfig"> <div class="carousel-item" ng-repeat="image in product.imagesList"> <div class="child uploader" ng-if="!image"> <i class="fa fa-refresh spin" aria-hidden="true"></i> </div> <img ng-click="setImageAsDefault(image)" ng-if="image" ng-src="{{image}}" class="child"/> </div> </slick> </div> </div> </div> <!-- End Carousel --> <div class="col-md-6 create-form"> <div class="form-group label-floating" ng-class="{'has-error':productForm.name.$invalid && productForm.$submitted}"> <label class="control-label"> {{'product-name' | translate}} </label> <input class="form-control" disabled name="name" required type="text" ng-model="product.name"> <div ng-show="productForm.name.$invalid && productForm.$submitted"> <span class="help-block" ng-show="productForm.name.$error.required">{{'gift-name-required' | translate}}</span> </div> </div> <div class="form-group label-floating" ng-class="{'has-error':productForm.price.$invalid && productForm.$submitted}"> <label class="control-label"> {{'price' | translate}} </label> <input class="form-control" disabled name="price" required ng-pattern="validNumber" type="text" ng-model="product.price"> <div ng-show="productForm.price.$invalid && productForm.$submitted"> <span class="help-block" ng-show="productForm.price.$error.required">{{'gift-price-required' | translate}}</span> <span class="help-block" ng-show="productForm.price.$error.pattern">{{'field-only-number' | translate}}</span> </div> </div> <div class="form-group label-floating" ng-class="{'has-error':productForm.description.$invalid && productForm.$submitted}"> <label class="control-label"> {{'description' | translate}} </label> <textarea class="form-control" name="description" disabled type="text" ng-model="product.description" required></textarea> <div ng-show="productForm.description.$invalid && productForm.$submitted"> <span class="help-block" ng-show="productForm.description.$error.required">{{'gift-description-required' | translate}}</span> </div> </div> <div class="row"> <div class="form-group label-floating col-sm-6"> <div class="product-store select-catalogo"> <select class="form-control" disabled ng-options="s.id as s.name for s in stores" ng-model="product.storeId"> <option value="" selected="selected" disabled>{{'store' | translate}}</option> </select> </div> </div> </div> <div class="actions text-center"> <!-- <a ui-sref="products" ui-sref="products" class="btn btn-dark">{{'discard' | translate}}</a> --> <button type="button" ui-sref="products_public" class="btn btn-lp btn-dark"> {{'back' | translate}} </button> <button type="submit" class="btn btn-inverse btn-lp"> {{'add-to-table' | translate}} </button> </div> </div> </div> </div> </div> </form> </div>