Neues Initialrelease mit IonicMaterial
This commit is contained in:
Carsten Hilmer
@@ -0,0 +1,176 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Product Detail-->
|
||||
<!--Controller name : productDetailCtrl-->
|
||||
<!--Controller path : www/templates/share-application-content/social-share/js/controllers.js-->
|
||||
<!--State name : app.productDetail-->
|
||||
<!--URL : #app/productDetail-->
|
||||
|
||||
<ion-view view-title="{{product.title}}">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back"></i>
|
||||
</a>
|
||||
</ion-nav-buttons> <!--end left button on navigation bar-->
|
||||
|
||||
<!--product detail section-->
|
||||
<ion-content id="product-detail-content" class="fade-in">
|
||||
<md-content>
|
||||
<!--product tabs section-->
|
||||
<md-tabs md-border-bottom md-selected="0" id="product-detail-tabs" class="no-border">
|
||||
<!--product tab detail section-->
|
||||
<md-tab label="Detail">
|
||||
<md-content id="product-detail-tab-detail">
|
||||
<div class="toolbar-image-cover product" style="background-image: url('{{product.img}}');">
|
||||
</div>
|
||||
<a class="md-button md-accent md-fab fab-toolbar-medium"
|
||||
ng-click="sharedProduct($event,product)"
|
||||
aria-label="showListBottomSheet">
|
||||
<i class="ion-android-share-alt"></i>
|
||||
</a>
|
||||
|
||||
<div class="detail-form">
|
||||
<div class="header">
|
||||
<h1>{{product.title}}</h1>
|
||||
|
||||
<p>{{product.fullDetail}}</p>
|
||||
</div>
|
||||
<!--product tab detail price section-->
|
||||
<div class="product-detail-price">
|
||||
<div class="left">
|
||||
$<span class="font-sale">{{product.price | number : 2}}</span>
|
||||
<br/><span
|
||||
class="font-hot-sale"> ${{product.promotionPrice | number : 2}} </span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<a class="md-raised md-warn md-button md-default-theme" ng-click="addToCart()">
|
||||
ADD TO CART
|
||||
</a>
|
||||
</div>
|
||||
</div><!--end product tab detail price section-->
|
||||
|
||||
<!--product tab detail review section-->
|
||||
<div class="product-detail-review">
|
||||
<p>Best Seller :
|
||||
<span>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div><!--end product tab detail review section-->
|
||||
|
||||
<!--product tab detail shipping section-->
|
||||
<div class="product-detail-shipping row">
|
||||
<div class="col-67">
|
||||
<p>Item : MT098541A</p>
|
||||
|
||||
<p>Coupon : PR34221</p>
|
||||
|
||||
<p>Shipping : Free</p>
|
||||
|
||||
<p>Money Back : 30 Day</p>
|
||||
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<p>In Stock</p>
|
||||
|
||||
<p><i class="fa fa-cube"></i></p>
|
||||
</div>
|
||||
</div><!--end product tab detail shipping section-->
|
||||
<!--product tab detail note section-->
|
||||
<div class="product-detail-note">
|
||||
|
||||
<p>Sharing this get discount on top 20%</p>
|
||||
</div> <!--end product tab detail note section-->
|
||||
</div>
|
||||
</md-content>
|
||||
</md-tab><!--end product tab detail section-->
|
||||
|
||||
<!--product tab product section-->
|
||||
<md-tab label="Product">
|
||||
<md-content class="md-padding">
|
||||
<div id="product-detail-tab-product">
|
||||
<div>
|
||||
<h1>{{product.title}}</h1>
|
||||
|
||||
<p>{{product.fullDetail}}</p>
|
||||
</div>
|
||||
<!--pin section-->
|
||||
<div class="pin">
|
||||
<img ng-src="{{product.img}}"/>
|
||||
|
||||
<p>
|
||||
{{product.detail}}
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
$<span class="pin-footer text-left font-sale">{{product.price}}</span>
|
||||
<span class="pin-footer text-left font-hot-sale">${{product.promotionPrice}}</span>
|
||||
</div>
|
||||
<a class="md-raised md-warn md-button md-default-theme"
|
||||
ng-click="addToCart()">
|
||||
ADD TO CART
|
||||
</a>
|
||||
</div> <!--end pin section-->
|
||||
|
||||
</div>
|
||||
</md-content>
|
||||
</md-tab> <!--product tab product section-->
|
||||
</md-tabs><!--end product tabs section-->
|
||||
</md-content>
|
||||
</ion-content>
|
||||
<!--end product detail section-->
|
||||
|
||||
<!--loading progress-->
|
||||
<div id="product-detail-loading-progress" class="loading-progress fade-in">
|
||||
<ion-spinner ng-if="!isAndroid" class="progress-circular"></ion-spinner>
|
||||
<md-progress-circular ng-if="isAndroid" md-mode="indeterminate"></md-progress-circular>
|
||||
</div> <!--end loading progress-->
|
||||
|
||||
<!--canvas for save image to local devise-->
|
||||
<canvas id="imgCanvas" class="display-none"></canvas>
|
||||
|
||||
<!--angular template section-->
|
||||
<script type="text/ng-template" id="bottom-sheet-shared.html">
|
||||
<md-bottom-sheet class="md-grid">
|
||||
<!--list section-->
|
||||
<md-list id="bottom-sheet-grid-md-list">
|
||||
<md-list-item>
|
||||
<a class="md-grid-item-content" ng-click="sharedFacebook()">
|
||||
<md-icon md-svg-src="facebook"></md-icon>
|
||||
<div class="md-grid-text"> Facebook</div>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a class="md-grid-item-content" ng-click="sharedTwitter()">
|
||||
<md-icon md-svg-src="twitter"></md-icon>
|
||||
<div class="md-grid-text"> Twitter</div>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a class="md-grid-item-content" ng-click="sharedMail()">
|
||||
<md-icon md-svg-src="mail"></md-icon>
|
||||
<div class="md-grid-text"> Mail</div>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a class="md-grid-item-content" ng-click="saveImage()">
|
||||
<i class="ion-android-image"></i>
|
||||
|
||||
<div class="md-grid-text"> Save Image</div>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a class="md-grid-item-content" ng-click="sharedMore()">
|
||||
<md-icon md-svg-src="share-arrow"></md-icon>
|
||||
<div class="md-grid-text"> More</div>
|
||||
</a>
|
||||
</md-list-item>
|
||||
</md-list> <!--end list section-->
|
||||
</md-bottom-sheet>
|
||||
</script>
|
||||
<!--end angular template section-->
|
||||
</ion-view>
|
||||
Reference in New Issue
Block a user