cobuild-angular-stack/modules/coupleAccount/views/auth.wedding.banner.add.html

Base stack angular sass jade gulp

<div class="modal-header">
    <button type="button" class="close outside" ng-click="bye()" aria-label="Close">
      <span aria-hidden="true"><img src="img/close@2x.png" alt=""></span>
    </button>
    <h3 class="header-pink text-center">{{'add-cover-photo' | translate | uppercase}}</h3>
    <p class="text-muted text-center">Escoge una foto que refleje su historia o un lindo recuerdo de su relación</p>
</div>
<div id="wedding-banner-add" class="modal-body">
    <form class="form-horizontal">
        <div class="form-group">
            <div class="profile-photo">
                    <div ng-show="!cropablePhoto" class="photo drop-zone" ng-style="{backgroundImage:(originalPhoto||coverPhoto)?'url('+(originalPhoto||coverPhoto)+')':null}" ngf-drop="uploadPhotoProfile($file, $invalidFiles)" ngf-pattern="'image/*'" ngf-min-height="100" ngf-max-size="'10MB'">
                        <div class="placeholder" ng-class="{'filled':(originalPhoto||coverPhoto)}">
                            <img class="img-responsive" ng-src="{{(originalPhoto || profilePhoto) ? '/img/camara.png' :'/img/camara-big.png'}}">
                            {{'drag-photo' | translate}}...
                        </div>
                    </div>
                    <div ng-show="cropablePhoto" class="cropArea">
                      <img-crop image="cropablePhoto" area-type="rectangle" aspect-ratio="2.25" result-image="coverPhoto" result-image-size='{w:900, h: 400}' init-max-area="true"></img-crop>
                    </div>
                    <div class="text-center">
                        <button ngf-select="uploadPhotoProfile($file, $invalidFiles)" accept="image/*" ngf-min-height="100" style="margin-top: 10px" class="btn  btn-default">
                            + {{'upload-a-photo' | translate | uppercase}}
                        </button>
                    </div>
            </div>
            
        </div>
    </form>

    <div class="row">
      <div class="col-md-12" ng-show="slickConfig.enabled">
        <h3 class="header-pink">GALERIA DE FOTOS</h3>
        <div class="carousel slide" id="cover-photos-carousel">
          
                    
          <div class="carousel-inner">

            <a class="btn-prev"><i class="fa fa-chevron-left"></i></a>
            <slick settings="slickConfig" slides-to-show="3" slides-to-scroll="1" style="width:90%;text-align:center;margin:auto">
              <div class="item" ng-repeat="banner in banners" ng-class="{active: $index === 0}">
                
                  <a ng-click="selectPredefined(banner.url)">
                    <img ng-src="{{banner.url}}" class="img-responsive">
                  </a>
                
              </div>
            </slick>
            <a class="btn-next"><i class="fa fa-chevron-right"></i></a>
          </div>
          
          
          
        </div>
   
      </div>
    </div>
    
</div>
<div class="modal-footer-centered">
    
    <button class="btn btn-dark btn-action btn-lg" ng-disabled="disabled" type="button" ng-click="bye()">{{'cancel' | translate | uppercase}}</button>
    <button class="btn btn-inverse btn-action btn-lg" ng-disabled="disabled" type="button" ng-click="save()">{{'save' | translate | uppercase}}</button>
</div>