cobuild-angular-stack
Version:
Base stack angular sass jade gulp
149 lines (148 loc) • 9.74 kB
HTML
<div id="catalog" class="container-fluid">
<div class="row">
<div id="kitchen" class="col-md-2 col-sm-3 col-xs-12" ng-include="'partials/uniko-aside-profile.html'"></div>
<div class="col-md-10 col-sm-9 col-xs-12">
<div class="row margin-top">
<div class="col-md-12 text-center">
<div class="header-gray">{{'gifts-received' | translate}}</div>
</div>
</div>
<div class="row margin-top">
<div class="col-md-12">
<table class="table gifts-received">
<thead>
<tr>
<th class="text-right" colspan="2" style="width: 20%">
<span class="cell-text">{{'date' | translate}}</span>
<div class="sort">
<i class="fa fa-chevron-up" ng-class="{'active': order == '-date'}"
ng-click="setOrder('-date')" aria-hidden="true"></i>
<i class="fa fa-chevron-down" ng-class="{'active': order == '+date'}"
ng-click="setOrder('+date')" aria-hidden="true"></i>
</div>
</th>
<th class="hidden-xs text-center" style="width: 10%">
{{'gift' | translate}}
</th>
<th style="width: 20%"></th>
<th class="text-center" style="width: 17.5%">
<span class="cell-text">{{'total-price' | translate}}</span>
<div class="sort">
<i class="fa fa-chevron-up" ng-class="{'active': order == '-gift.price'}"
ng-click="setOrder('-gift.price')" aria-hidden="true"></i>
<i class="fa fa-chevron-down" ng-class="{'active': order == '+gift.price'}"
ng-click="setOrder('+gift.price')" aria-hidden="true"></i>
</div>
</th>
<th class="hidden-xs text-center" style="width: 12.5%">{{'by' | translate}}</th>
<th class="hidden-xs" style="width: 20%">{{'dedication' | translate}}</th>
<th class="text-center" style="width:10%;">{{'actions' | translate}}</th>
</tr>
</thead>
<tbody uib-dropdown>
<tr ng-repeat-start="(orderId, group) in giftsGroups | orderBy:order"
ng-show="group.gifts.length === 1">
<td></td>
<td class="text-center">
{{group.date | date : 'dd.MM.yy'}}
</td>
<td class="hidden-xs text-center">
<div class="img-gift">
<div ng-show="group.gifts[0].gift.image"
ng-style="{'background-image': 'url('+group.gifts[0].gift.image+')'}"></div>
<div ng-show="!group.gifts[0].gift.image"
style="background-image: url(img/default-gift.png)"></div>
</div>
</td>
<td>
<div>
<div>{{group.gifts[0].gift.name}}</div>
<div ng-show="!group.gifts[0].gift.hidden || group.gifts[0].orderFakeId">N° {{'order'|translate}}: {{group.gifts[0].orderFakeId}}</div>
</div>
</td>
<td class="text-center">{{group.price| currency}}</td>
<td class="hidden-xs text-center" ng-bind-html="group.givers|join:'<br/>'"></td>
<td class="hidden-xs">{{group.message|truncate:50:'...':true}}</td>
<td class="text-center">
<button ng-show="!group.gifts[0].gift.hidden" class="btn btn-inverse" ng-disabled="group.responded"
ng-click="toThank(group.gifts[0], group)">{{'to-thank' | translate}}
</button>
</td>
</tr>
<tr ng-show="group.gifts.length > 1">
<td class="text-center" style="padding: 0">
<a ng-click="group.isVisible = !group.isVisible">
<i class="fa fa-minus display-button" ng-if="group.isVisible" aria-hidden="true"></i>
<i class="fa fa-plus display-button" ng-if="!group.isVisible" aria-hidden="true"></i>
{{ (group.isVisible? 'show-less':'show-more') | translate}}
</a>
</td>
<td class="text-center">
{{group.date | date : 'dd.MM.yy'}}
</td>
<td class="hidden-xs text-center">
<div class="img-gift">
<div ng-show="group.gifts[0].gift.image"
ng-style="{'background-image': 'url('+group.gifts[0].gift.image+')'}"></div>
<div ng-show="!group.gifts[0].gift.image"
style="background-image: url(img/default-gift.png)"></div>
</div>
</td>
<td>
<div>
<div>{{group.gifts[0].gift.name}}</div>
<div ng-show="group.gifts[0].orderFakeId">N° {{'order'|translate}}: {{group.gifts[0].orderFakeId}}</div>
</div>
</td>
<td class="text-center">{{group.price| currency}}</td>
<td class="hidden-xs text-center" ng-bind-html="group.givers|join:'<br/>'"></td>
<td class="hidden-xs">{{group.message|truncate:50:'...':true}}</td>
<td class="text-center">
<button class="btn btn-inverse" ng-disabled="group.responded"
ng-click="toThank(group.gifts[0], group)">{{'to-thank' | translate}}
</button>
</td>
</tr>
<tr ng-repeat-end ng-show="group.gifts.length > 1">
<td colspan="8" style="padding:0">
<div ng-slide-down="group.isVisible" duration="0.5">
<table class="table gift-in-groups">
<tbody>
<tr ng-repeat="gift in group.gifts">
<td width="100%">
<div style="margin-left: 17.5%;width: 9.5%"
class="inline-block vertical-middle hidden-xs text-center">
<div class="img-gift">
<div ng-show="gift.gift.image"
ng-style="{'background-image': 'url('+gift.gift.image+')'}"></div>
<div ng-show="!gift.gift.image"
style="background-image: url(img/default-gift.png)"></div>
</div>
</div>
<div class="inline-block vertical-middle" style="width: 16.5%">
<div>
<div>{{gift.gift.name}}</div>
</div>
</div>
<div class="text-center inline-block vertical-middle"
style="width:15%;">
{{gift.gift.price| currency}}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="6"></td>
<td class="text-right" colspan="2" style="font-size: 17px"><b>{{'accumulated' | translate}}: {{cantReceived|currency:'MXN ':2}}</b></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>