cobuild-angular-stack
Version:
Base stack angular sass jade gulp
207 lines (198 loc) • 13.5 kB
HTML
<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"> </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>