cobuild-angular-stack
Version:
Base stack angular sass jade gulp
165 lines (163 loc) • 8.63 kB
HTML
<div id="show-coupleAccount-guest" class="container-fluid">
<div class="row">
<header class="col-sm-12"
ng-style="{backgroundImage:newCover ? 'url('+newCover+')':account.weddingData.coverPhoto?'url('+account.weddingData.coverPhoto+')':null}">
<div class="main-header">
<div class="col-md-offset-1 text-right">
<span>{{account.weddingData.nameP1}}</span>
</div>
<div class="profile-photo">
<div class="photo drop-zone"
ng-style="{backgroundImage:account.weddingData.profilePhoto?'url('+account.weddingData.profilePhoto+')':null}">
</div>
</div>
<div class="text-left editable-container editable-left">
<span>
{{account.weddingData.nameP2}}
</span>
</div>
</div>
<div class="row ">
<h4 class="col-sm-12 text-center">
{{account.weddingData.date|date:'dd MMMM yyyy'}}
</h4>
</div>
</header>
</div>
<div class="row">
<div class="main-wedding col-sm-12 col-sm-offset-0 col-md-6 col-md-offset-3">
<div class="row">
<div class="wellcome-message">
<p class="message">
{{account.weddingData.welcomeMessage}}
</p>
</div>
</div>
<a class="btn btn-default btn-registry" ui-sref="guest.registry({url:account.url})">{{'see-table' | translate}}</a>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-5 col-sm-offset-1 col-lg-5 col-lg-offset-1">
<ui-gmap-google-map
center="map.center"
zoom="map.zoom"
dragging="map.dragging"
bounds="map.bounds"
events="map.events"
options="map.options"
pan="true"
control="map.control"
>
<ui-gmap-markers idkey="map.idkey" models="map.markers" coords="'self'" icon="'icon'"
click="'onClicked'"></ui-gmap-markers>
<ui-gmap-window show="window.show" coords="window.coords" idkey="window.place_id"
templateurl="window.templateurl"
templateparameter="window.templateparameter" options="window.options"
closeClick='window.closeClick()' ng-cloak>
</ui-gmap-window>
</ui-gmap-google-map>
<div class="row map-description">
<div class="col-sm-6 ">
<h4>{{'where' | translate}}</h4>
<div class="map-block">
<i class="fa fa-map-marker"></i>
<div class="text">
<span class="place-name">{{account.weddingData.placeName}}</span>
<p class="" ng-bind-html="account.weddingData.gpsaddress.templateparameter.adr_address">
</p>
</div>
</div>
</div>
<div class="col-sm-6 ">
<h4>{{'when' | translate}}</h4>
<div class="map-block">
<i class="fa fa-clock-o"></i>
<div class="text">
<span class="date">{{account.weddingData.date|date:'MMMM dd yyyy'}}</span>
<br/>
<span class="time">{{account.weddingData.date|date:'hh:mm a'}}</span>
</div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
</div>
<div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-1" style="background: #E8E8E8; padding: 20px 50px; position: relative">
<br/>
<p>{{'confirm-attend' | translate}}</p>
<br/>
<form ng-show="!sendedRSVP" name="rsvpForm" ng-submit="rsvpForm.$valid && sendRsvp()" novalidate>
<div class="form-group"
ng-class="{'has-error': (rsvpForm.$submitted || rsvpForm.name.$touched) && rsvpForm.name.$invalid}">
<div class="help-block"
ng-show="(rsvpForm.$submitted || rsvpForm.name.$touched) && rsvpForm.name.$invalid">
<span>{{'field-required' | translate}}</span>
</div>
<label class="sr-only" for="guest-name">{{'name' | translate}}</label>
<input type="text" ng-model="rsvp.name" name="name" class="form-control" id="guest-name" required
placeholder="{{'name' | translate}}">
</div>
<br/>
<div class="form-group"
ng-class="{'has-error': (rsvpForm.$submitted || rsvpForm.email.$touched) && rsvpForm.email.$invalid}"
>
<div class="help-block"
ng-show="(rsvpForm.$submitted || rsvpForm.email.$touched) && rsvpForm.email.$invalid">
<span ng-show="rsvpForm.email.$error.required">{{'field-required' | translate}}</span>
<span ng-show="rsvpForm.email.$error.email">{{'invalid-email' | translate}}</span>
</div>
<label class="sr-only" for="guest-email">{{'email' | translate}}</label>
<input type="email" ng-model="rsvp.email" required name="{{'email' | translate}}" class="form-control"
id="guest-email"
placeholder="{{'email' | translate}}">
</div>
<div class="form-group">
<div class="col-xs-4">
<div class="radio">
<input type="radio" name="asistencia" ng-model="rsvp.confirm" id="guest-si-asiste" checked
ng-value="true">
<label for="guest-si-asiste">
{{'attend' | translate}}
</label>
</div>
</div>
<div class="col-xs-8">
<div class="radio">
<input type="radio" name="asistencia" ng-model="rsvp.confirm" id="guest-no-asiste"
ng-value="false">
<label for="guest-no-asiste">
{{'not-attend' | translate}}
</label>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<div class="form-group"
ng-class="{'has-error': (rsvpForm.$submitted || rsvpForm.additionals.$touched) && rsvpForm.additionals.$invalid}"
>
<div class="help-block"
ng-show="(rsvpForm.$submitted || rsvpForm.additionals.$touched) && rsvpForm.additionals.$invalid">
<span ng-show="rsvpForm.additionals.$error.min">{{'positive-number' | translate}}</span>
<span ng-show="rsvpForm.additionals.$error.number">{{'field-only-number' | translate}}</span>
</div>
<label class="sr-only" for="guest-adds">{{'additional-people' | translate}}</label>
<input type="number" name="additionals" ng-model="rsvp.additionals" class="form-control"
id="guest-adds" min="0" placeholder="# {{'additional-people' | translate}}">
</div>
<div class="text-center">
<button type="submit" ng-disabled="rsvpForm.$invalid" class="btn btn-info btn-lg">{{'send' | translate}}</button>
</div>
</form>
<div ng-show="sendedRSVP" style="margin: 70px 0 120px">
<p class="text-center" style="font-size: 20px">
<i style="color: lightgreen" class="fa fa-check" aria-hidden="true"></i>
{{'send-confirmation' | translate}}
</p>
</div>
</div>
</div>
</div>