Updated

git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174409 ce508802-f39f-4f6c-b175-0d175dae99d5

ecm/Angular/ProteusECM/trunk/src/app/ecm-breadcrumbs/ecm-breadcrumbs.component.css

@@ -16,9 +16,10 @@
 }
 .ecm-breadcrumbs li:before {
   content: "/";
-  padding-left: 5px;
-  padding-right: 5px;
   color: black;
+  padding-left: 8px;
+  padding-right: 8px;
+  
 }
 .ecm-breadcrumbs li:first-child:before {
   content: "";
@@ -53,7 +54,6 @@
     top: 70px;
     position: relative;
     padding-left: 3rem;
-    margin-top: 5px;
 }
 
 .img-back-32 {
@@ -67,10 +67,12 @@
     height: 20px !important;
     width: 20px !important;
     min-width: 20px !important;
-    box-shadow: 0 0 0 3px rgba(0 ,0 ,0, 0.1), inset 0 0 0px 20px rgba(0 ,0, 0, 0.1);
+    /* box-shadow: 0 0 0 3px rgba(0 ,0 ,0, 0.1), inset 0 0 0px 20px rgba(0 ,0, 0, 0.1); */
+    box-shadow: none;
     cursor: pointer;
-    border-radius: 100%;
+    /*border-radius: 100%;*/
     margin-left: -2rem !important;
+    background: #F2F2F2;
 }
 
 .ecm-section-info {

ecm/Angular/ProteusECM/trunk/src/app/ecm-card/ecm-card.component.css

@@ -6,6 +6,8 @@
 	position: relative;
 	height: 400px;
     width: auto;
+    background-color: #fff;
+    border-radius: 3px;
 }
 .ecm-card-img {
 	border-top-right-radius: 5px;
@@ -15,13 +17,12 @@
 }
 .ecm-card-footer {
 	width: 100%;
-	height: 90px;
+	height: 70px;
 	padding: 10px;
 }
 .ecm-card-info {
-	padding: 10px 5px 10px 5px;
+	padding: 6px 0px 8px 8px;
 	width: calc(100% - 165px);
-	height: 100%;
 	float: left;
 }
 .ecm-card-info-title {
@@ -29,7 +30,7 @@
 	font-weight: 600;
 	color: #444;
 	display: block;
-	line-height: 20px;
+	line-height: 15px;
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow: hidden;
@@ -54,18 +55,18 @@
 }
 .ecm-card-action {
 	width: 90px;
-	height: 35px;
+	height: 42px;
 	line-height: 15px;
 	font-size: 12px;
-	padding: 10px;
+	padding: 15px;
 	text-align: center;
-	border: 1px solid mediumvioletred;
-	border-radius: 2px;
 	float: right;
 	position: relative;
-	top: 15px;
-	color: #333;
-	right: 10px;
+	top: 5px;
+	color: #c71585;
+	right: 5px;
+	box-shadow: none;
+	font-weight: 700;
 }
 .ecm-card-action:HOVER {
 	background-color: mediumvioletred;
@@ -77,7 +78,7 @@
 	top: 15px;
 }
 .share {
-	background-image: url("../../assets/images/share.png");
+	/*background-image: url("../../assets/images/share.png");*/
 	border: none;
 	width: 40px;
 	height: 40px;
@@ -90,17 +91,15 @@
     /* width: 90px; */
     /* height: 35px; */
     /* line-height: 20px; */
-    font-size: 23px;
-    text-align: center;
     /* border-radius: 2px; */
-    padding-right: 10px;
-    padding-top: 23px;
-    padding-bottom: 23px;
-    float: right;
     /* position: relative; */
     /* top: 15px; */
-    color: #333;
     /* right: 10px; */
+    font-size: 20px;
+    text-align: center;
+    padding: 10px;
+    float: right;
+    color: #333;
 }
 
 p {
@@ -121,17 +120,14 @@ p {
 }
 
 .ecm-rupee{
-	color:#888;
+	color: #787878;
+	font-size: 14px;
 }
 
 #ecm-item {
  	cursor: pointer;	
 }
 
-#ecm-item-footer {
-	padding: 5px;
-}
-
 #ecm-item-info {
 	padding: 10px;
 	width: calc(100%-120px);
@@ -139,7 +135,7 @@ p {
 
 #ecm-item-info-title {
 	line-height: 15px;
-	padding-top: 5px;
+	padding-top: 0px;
 }
 
 #ecm-item-info-subhead {
@@ -288,4 +284,10 @@ p {
 .ecm-thumpsdown-icon:hover, .ecm-thumpsup-icon:hover {
     color: mediumvioletred;
     opacity: 1;
-}
+}
\ No newline at end of file
+
+.ecm-item-footer {
+	width: 100%;
+	border-top: 1px solid #f3f3f3;
+	padding: 10px;
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-card/ecm-card.component.html

@@ -41,16 +41,18 @@
 
 <div *ngIf="itemData" class="ecm-card" id="ecm-item" (click)="viewItem()">
 	<ecm-image [isThumbnail]="true" [refId]='itemData.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true" ></ecm-image>	
-	<div class="ecm-card-footer" id="ecm-item-footer">
+	<div class="ecm-item-footer">
 		<div class="ecm-card-info" id="ecm-item-info">
-			<span id="ecm-item-info-title" class="ecm-card-info-title">{{itemData.descr}}</span> 		
+			<span id="ecm-item-info-title" class="ecm-card-info-title">{{itemData.descr}}</span> 
+			<!-- 		
 			<span *ngIf="itemData.cat_sh_descr && itemData.scat_sh_descr" class="ecm-card-info-subhead" id="ecm-item-info-subhead">{{itemData.cat_sh_descr}} - {{itemData.scat_sh_descr}}</span>
 			<span *ngIf="extraParam && !itemData.cat_sh_descr && !itemData.scat_sh_descr" class="ecm-card-info-subhead" id="ecm-item-info-subhead">{{extraParam.catShDesc}} - {{extraParam.scatDesc}}</span>
+			 -->
 			<span class="ecm-ratings">
 			   <span *ngFor="let a of createRatings(itemData.rating);">&#x2605;</span>
 	        </span>
 	    </div>
-		<div class="ecm-card-price"><span class="ecm-rupee">₹</span>{{itemData.costRate}}</div>
+		<div class="ecm-card-price"><span class="ecm-rupee">Rs. </span>{{itemData.costRate}}</div>
 	</div>
 </div>
 

ecm/Angular/ProteusECM/trunk/src/app/ecm-carousel/ecm-carousel.component.css

@@ -87,8 +87,8 @@
 
 .flickity-page-dots .dot {
     display: inline-block;
-    width: 16px;
-    height: 16px;
+    width: 10px;
+    height: 10px;
     margin: 0 10px;
     border-radius: 100%;
     cursor: pointer;

ecm/Angular/ProteusECM/trunk/src/app/ecm-carousel/ecm-carousel.component.ts

-import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit, Input, ViewEncapsulation, OnChanges } from '@angular/core';
 
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/fromEvent';
@@ -14,7 +14,7 @@ declare var reinitFlickity: any;
     styleUrls: ['./ecm-carousel.component.css'],
     encapsulation: ViewEncapsulation.None
 })
-export class EcmCarouselComponent implements OnInit {
+export class EcmCarouselComponent implements OnInit, OnChanges {
 
     @Input() cardItems: any;
     cardsPerSlide: string = '{ "groupCells": 3 }';
@@ -88,4 +88,8 @@ export class EcmCarouselComponent implements OnInit {
     viewAll() {
         alert("View All Treding Items");
     }
+    
+    ngOnChanges(){
+        console.log("ngOnChanges of Carousel");
+    }
 }

ecm/Angular/ProteusECM/trunk/src/app/ecm-content/ecm-content.component.css

@@ -3,5 +3,4 @@
 	height: auto;
 	padding-bottom: 100px;
 	padding-bottom: 50px;	
-	background-color: #FFF;
 }
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-image/ecm-image.component.css

@@ -2,8 +2,7 @@
 	border-top-right-radius: 5px;
 	border-top-left-radius: 5px;
 	width: 100%;
-	
-	height: calc( 100% - 90px);
+	height: calc( 100% - 70px);
 }
 
 .ecm-image-icon {
@@ -11,6 +10,8 @@
 	/*background-color: mediumvioletred;*/
 	border: none;
 	border-radius: 100%;
+	height: 47px;
+	width: 51px;
 }
 
 .img-loading {

ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-product-review.component.css

 
 .ecm-tab {
-    padding-left: 15px;
 }
 
 .ecm-result-header{
@@ -165,8 +164,6 @@
 }
 
 .ecm-review-header {
-	height: 250px;
-    padding-top: 40px;	
 }
 
 .ecm-write-review {
@@ -198,16 +195,20 @@
 }
 
 .write-review-button {
+	padding: 15px;
 	display: block;
     vertical-align: middle;
     height: 50px;
-    width: 170px;
+    width: 190px;
+    max-width: 190px;
     text-align: center;
     line-height: 50px;
     color: mediumvioletred;
     cursor: pointer;
     float: right;
-    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+    box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
+    line-height: 15px;
+    font-size: 15px;
 }
 
 .ecm-review-card {
@@ -215,10 +216,11 @@
     /* width: calc(100% - 380px); */
     margin-top: 20px;
     top: 70px;
+    padding: 0;
 }
 
 .write-review-text {
-	font-size: 13px;
+	font-size: 14px;
     font-weight: bold;
 }
 
@@ -232,13 +234,20 @@ hr {
 }
 
 .header-title {
+	/*
 	text-align: center;
 	display: block;
 	height: 40px;
     width: 160px;
     line-height: 40px;
     margin: 0px;
-    border-bottom: thin solid mediumvioletred
+    border-bottom: thin solid mediumvioletred;
+    */
+    
+    padding-bottom: 22px;
+	border-bottom: 2px solid #c71585;
+	font-size: 16px;
+	margin-left: 17px;
 }
 
 .header-content {
@@ -270,6 +279,11 @@ hr {
 	}
 }
 
+.review-title {
+	border-bottom: 1px solid #f3f3f3;
+	padding: 20px;
+}
+
 @media screen and (max-width: 640px) {
   md-card {
 	margin: 15px;
@@ -280,4 +294,12 @@ hr {
 	padding-right: 10px;
 }
 
+.ratings-section {
+	padding: 30px;
+}
+
 
+md-card {
+	border-radius: 3px !important;
+	box-shadow: 0 0px 16px -3px rgba(0,0,0,.1) !important;
+}
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-product-review.component.html

@@ -2,10 +2,11 @@
 <div class="medium-8 large-8 columns ecm-review-section">
 <md-card class="ecm-review-card">
 	<div class="ecm-review-header">  
-	   <div>
+	   <div class="review-title">
 	      <span class="header-title"> Ratings & Reviews </span>
 	   </div>
-	   <hr>
+ 
+	  <div class="ratings-section"> 
 	    <div class="row header-content">
 		<div class="medium-5 medium-4 columns ecm-total-reviews">
 			<span class="ecm-avg-rating"> {{itemAvgRating}} </span>
@@ -22,10 +23,10 @@
 		</div>
 		
 		<div class="medium-5 medium-4 columns ecm-write-review">
-			<span class="write-review-button">
+			<button md-button class="write-review-button">
 				<i class="material-icons edit">&#xE254;</i> 
-				<span class="write-review-text"> Write a Review </span>
-			</span>
+				<span md-button class="write-review-text"> Write a Review </span>
+			</button>
 		</div>
 		</div>
 	
@@ -40,6 +41,7 @@
             </md-option>
         </md-select>
 	    
+	   <div> 
 	    <div *ngIf="numFound==0" class="ecm-null-data-descr">
 	      No Reviews Found
 	    </div>
@@ -57,7 +59,7 @@
          
              <!--   <span class="next-button" [ngClass]="{disabled:currentPage === reviews.length}" (click)="nextPage()"> Next </span>  -->
          </div> 
-	     
+	   </div>  
 	  </md-tab>
 	
 	  <md-tab label="Most Helpful">
@@ -67,7 +69,7 @@
                  {{type.viewValue}}
             </md-option>
         </md-select>
-	    
+	  <div> 
 	    <div *ngIf="numFound==0" class="ecm-null-data-descr">
 	      No Reviews Found
 	    </div>
@@ -85,11 +87,12 @@
          
              <!--   <span class="next-button" [ngClass]="{disabled:currentPage === reviews.length}" (click)="nextPage()"> Next </span>  -->
          </div> 
-
+      </div>
 	  </md-tab>
 	  	
 	</md-tab-group>
 
+ </div>
 </md-card>
 </div>
 </div>

ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-handicraft.component.css

@@ -19,9 +19,8 @@
 .Add_to_cart {
     background: #fff;
     color: mediumvioletred;
-    border: 1px solid lightgray;
-    max-width: 220px;
-    height: 54px;
+    max-width: 190px;
+    height: 50px;
     font-size: 15px;
     line-height: 15px;
     text-align: center;
@@ -29,29 +28,33 @@
     position: relative;
     /* float: left; */
     width: calc(50% - 40px);
+    font-weight: 700;
+    box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
+    border-radius: 3px;
 }
 
 .Buy_now {
     background: mediumvioletred;
     color: #fff;
-    max-width: 220px;
-    height: 54px;
+    max-width: 190px;
+    height: 50px;
     font-size: 15px;
     line-height: 15px;
     text-align: center;
-    /* border-radius: 2px; */
     position: relative;
-    /* float: right; */
     width: calc(50% - 40px);
     margin-left: 10px;
     margin-right: 10px;
+    font-weight: bold;
+    box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
+    border-radius: 3px;
 }
 
 .link_button {
 	color: mediumvioletred;
 	font-weight: bold;
-	padding-left: 15px;
-    padding-right: 15px;
+	padding-left: 10px;
+    padding-right: 10px;
 }
 
 ul {
@@ -111,16 +114,18 @@ li::before {
 }
 
 .ecm-payments {
-    font-size: 15px;
-    color: dimgrey;
-    padding: 15px 0px 15px 0px;
+    font-size: 13px;
+    color: #787878;
+    padding: 20px 0px 36px 5px;
 }
 
 .ecm-share {
 	float: right;
 	cursor: pointer;
 	font-weight: bold;
-	font-size: 15px
+	font-size: 14px;
+	padding-right: 25px;
+	padding-top: 25px;
 }
 
 .share {
@@ -136,8 +141,8 @@ li::before {
 
 /*  new */
 .ecm-other-title {
-	font-size: 18px;
-	padding-bottom: 15px;
+	font-size: 16px;
+	padding-bottom: 6px;
 	display: block;
     font-weight: bold;	
 }
@@ -162,18 +167,21 @@ li::before {
 }
 
 .ecm-itemDeatils {
-	padding-bottom: 8px;
-	border-bottom: solid mediumvioletred;
-	border-bottom-width: 2px;
-	font-size: 14px;
+	padding-bottom: 21px;
+	border-bottom: 2px solid #c71585;
+	font-size: 16px;
+	margin-left: 17px;
 }
 
 .ecm-returnsPolicy {
 	padding-top: 30px;
+	font-size: 16px;
 }
 
 .ecm-termsCondition {
 	padding-top: 30px;
+    padding-bottom: 30px;
+    font-size: 16px;
 }
 
 td {
@@ -184,11 +192,11 @@ td {
 }
 
 .image {
-	padding-top: 16px;
 }
 
 .head {
-	margin-top: 16px;
+    padding-left: 25px;
+    border-left: 1px solid #f3f3f3;
 }
 
 .link_changebutton {
@@ -210,12 +218,6 @@ td {
 	}
 }
 
-.ecm-itemDeatils {
-	padding-bottom: 8px;
-	border-bottom: solid mediumvioletred;
-	border-bottom-width: 2px;
-	font-size: 14px;
-}
 
 .ecm-returnsPolicy {
 	padding-top: 30px;
@@ -233,8 +235,8 @@ td {
 }
 
 .attraction {
-	font-size: 18px;
-	padding-bottom: 15px;
+	font-size: 16px;
+	padding-bottom: 6px;
 	display: block;
     font-weight: bold;
 }
@@ -255,8 +257,12 @@ td {
 }
 
 .product-detail-card {
-	margin-top: 15px;	
-	padding: 10px;
+	margin-top: 5px;	
+	padding: 0;
+}
+
+.ecm-product-details {
+	padding-right: 10px;
 }
 
 .ecm-recent-view {
@@ -280,13 +286,15 @@ hr {
 .attribute-button{
    color: black;
    background-color: #efecec;
-   width: 40px;
-   height: 40px;
+   width: 36px;
+   height: 36px;
    min-width: 40px;
    padding: 0;
    margin: 0;
-   line-height: 40px;
+   line-height: 36px;
    border-radius: 100%;
+   box-shadow: none;
+   font-size: 15px;
    
 }
 .attribute-button .mat-button-ripple {
@@ -297,6 +305,7 @@ hr {
 	color: white;
     background-color: mediumvioletred;
     cursor: auto;
+    font-weight: bold;
 }
 
 .selected {
@@ -305,8 +314,8 @@ hr {
 }
 
 .color-title  {
-	color: #444;
-	font-size: 1rem;
+	color: #787878;
+	font-size: 14px;
 	position: relative;
 	display: inline-block;
 	height: 60px;
@@ -314,11 +323,12 @@ hr {
 	float: left;
 	margin: 0;
 	padding: 0;
-    font-weight: bold;
+	font-weight: 700;
+    padding-right: 30px;
 }
 
 .size-title  {
-	color: #444;
+	color: #787878;
 	font-size: 1rem;
 	position: relative;
 	display: inline-block;
@@ -327,16 +337,18 @@ hr {
 	float: left;
 	margin: 0;
 	padding: 0;
+	font-weight: 700;
+    padding-right: 30px;
 }
 
 .size-variant {
-	margin-left: 15px;
+    margin-right: 14px;
 	cursor: pointer;
 	display: inline-block;
 }
 
 .color-variant {
-	margin-left: 15px;
+    margin-right: 14px;
 	padding: 0;
 	height: 60px;
 	width: 60px;
@@ -355,8 +367,8 @@ hr {
 }
 
 .offers-section {
-	padding-bottom: 20px;
-	font-size: 15px;
+	padding-bottom: 14px;
+	font-size: 14px;
 }
 
 .seller-name {
@@ -371,50 +383,53 @@ hr {
 
 .sold-by-title {
 	display: inline;
-	color: #444;
+	color: #787878;
 	font-size: 15px;
-	font-weight: bold;
+	font-weight: 700;
 }
 
 .item-descr {
-	display: block; 
-	font-size: 20px;
-	font-weight:700;
+    display: block;
+    font-size: 18px;
+    font-weight: 600;
     padding-right: 120px;
-    line-height: 25px
+    line-height: 24px;
+    color: black;
 }
 
 .item-shdescr {
 	display: block;
 	color: mediumvioletred;
-	font-size: 16px;
+	font-size: 14px;
 	font-weight: bold;
-    padding-bottom: 12px;
+    padding-bottom: 8px;
+    padding-top: 28px;
     cursor: pointer;
 }
 
 .item-descount-rate {
 	font-size: 25px;
 	font-weight:bold;
+	line-height: 1;
 }
 
 .item-cost-rate {
-	font-size: 15px;
+	font-size: 14px;
 	color: gray;
 	font-weight: 100;
 }
 
 .details-title {
-	font-size: 15px;
-	color: #444;
+	font-size: 14px;
+	color: #787878;
     width: 55px;
     display: inline-block;
     vertical-align: top;
-    font-weight: bold;
+    font-weight: 700;
 }
 
 .Available {
-	font-size: 15px;
+	font-size: 14px;
 	color: #444;
 	padding-left: initial;
 }
@@ -426,20 +441,20 @@ hr {
 }
 
 .service-title {
-	font-size: 15px;
+	font-size: 14px;
 	color: #444;
 	padding-left: initial; 
 }
 
 .buy-cart-button {
-	padding-top: 20px;
+	padding-top: 8px;
 }
 
 .item-discount {
 	padding-left: 10px;
 	color: forestgreen;
 	font-weight:bold;
-	font-size: 15px;
+	font-size: 14px;
 }
 
 .reviews-no {
@@ -448,23 +463,77 @@ hr {
 
 .share-icon {
 	color: dimgray;
+	font-size: 20px;
 }
 
 .item-descount-rate-section {
-	padding-top: 8px;
+	padding-top: 14px;
 }
 
 .item-detail-1{
-	font-size: 15px;
+	font-size: 14px;
     display: inline-block;
+    color: #444;
+    padding-left: 45px;
+    line-height: 1.5;
 }
 
 .service-detail {
-	font-size: 15px;
+	font-size: 14px;
 }
 
 .review-msg-title {
-	color: #444;
-	font-size: 16px;
+	color: black;
+	font-size: 14px;
+}
+
+.discount-validity {
+	color: black;
+}
+
+.secure-icon {
+	font-size: 20px;
+}
+
+.details-list {
+	color: black;
+	line-height: 1.5;
+}
+
+.item-details-title {
+	border-bottom: 1px solid #f3f3f3;
+	padding: 20px;
+}
+
+.extra-details-card {
+	padding: 0;
+}
+
+.extra-details-section {
+	padding: 30px;	
+}
+
+.extra-detail-font{
+	
+}
+
+.Attraction {
+	padding-top: 30px;
+}
+
+li::BEFORE {
+	padding-right: 3px !important;
+}
+
+.product-image {
+	max-height: 600px;
+	position: relative;
+	display: block;
+	height: 600px;
+	width: 100%;
 }
 
+md-card {
+	border-radius: 3px !important;
+	box-shadow: 0 0px 16px -3px rgba(0,0,0,.1) !important;
+}
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-handicraft.component.html

@@ -5,7 +5,7 @@
     <!-- ------------------------HANDICRAFT-IMAGE START HERE-------------------------------- -->
     <div class="small-12 medium-6 large-6 columns image">
             <div class="md-card-image">
-               <ecm-image [refId]='itemDetail.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true" ></ecm-image>
+               <ecm-image [refId]='itemDetail.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true" class="product-image"></ecm-image>
             </div>
    	</div>
 	    
@@ -50,7 +50,7 @@
            </span>  
          </div>  
      	 <div class="offers-section">
-     	   <span>{{itemDetail.itemDetail1.validity}}</span>
+     	   <span class="discount-validity">{{itemDetail.itemDetail1.validity}}</span>
     	   <button type="button" onclick="()" class="md-button link_button">
     	     More Offers
      	     <i class="material-icons arrow ">&#xE313;</i>
@@ -60,7 +60,7 @@
                <div class="short-detail">
                  <div class="details-title">Details</div>
                  <div class="item-detail-1">
-                   <ul>
+                   <ul class="details-list">
                      <li>Material: {{itemDetail.itemDetail1.shortDetails.material}}</li>
                      <li>Crafted By: {{itemDetail.itemDetail1.shortDetails.craftedBy}}</li>
                      <li>Pattern: {{itemDetail.itemDetail1.shortDetails.pattern}}</li>
@@ -103,15 +103,15 @@
           <div *ngIf="itemVariant.variant">
           	<div *ngIf="itemVariant.attribCode == 'SIZE' ">
 	             <span class = "size-title">Select Size </span>
-	             <div *ngFor="let variant of itemVariant.variants" class="size-variant">
-	                <a [ngClass]="{highlight:variant.itemCode == itemDetail.itemCode}" md-raised-button class="attribute-button" (click)="viewItem(variant.itemCode)"> {{variant.value}} </a>
+	               <div *ngFor="let variant of itemVariant.variants" class="size-variant">
+	                  <a [ngClass]="{highlight:variant.itemCode == itemDetail.itemCode}" md-button class="attribute-button" (click)="viewItem(variant.itemCode)"> {{variant.value}} </a>
 	             </div>
 			 </div>
 	         <div *ngIf="itemVariant.attribCode == 'COLOR' ">
 	             <span class = "color-title">Select Color </span>
-	             <div *ngFor="let variant of itemVariant.variants" class="color-variant" [ngClass]="{selected:variant.itemCode == itemDetail.itemCode}" (click)="viewItem(variant.itemCode)">
-	               <ecm-image [isThumbnail]="true" [refId]='variant.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true" ></ecm-image>
-	             </div>
+	               <div *ngFor="let variant of itemVariant.variants" class="color-variant" [ngClass]="{selected:variant.itemCode == itemDetail.itemCode}" (click)="viewItem(variant.itemCode)">
+	                 <ecm-image [isThumbnail]="true" [refId]='variant.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true" ></ecm-image>
+	              </div>
 	        </div>
           </div>
        </div> 
@@ -120,14 +120,14 @@
   
 
     <div class="buy-cart-button">
-      <button md-raised-button class="button medium-btn Add_to_cart" 
+      <button md-button class="button medium-btn Add_to_cart" 
          (click)="doActivity.emit({activity:'ADD_CART', data: itemDetail.itemCode });">Add to cart</button>
-      <button md-raised-button class="button medium-btn Buy_now" 
+      <button md-button class="button medium-btn Buy_now" 
          (click)="doActivity.emit({activity:'BUY_NOW', data: itemDetail.itemCode });">Buy Now</button>
 	</div> 
 
 	  <div _ngcontent-c30="" class="medium-12 columns ecm-payments">
-		<i class="material-icons"> &#xE8E8;</i>
+		<i class="material-icons secure-icon"> &#xE8E8;</i>
 		<span _ngcontent-c30="" class="ecm-Info">Safe and Secure Payments. 100% Authentic products</span>	
 	 </div>
   </div>
@@ -137,9 +137,9 @@
 
 <div class="row ecm-card" #itemDetails>
   <div class="medium-8 large-8 columns ecm-product-details">
-	<md-card> 
-	 <div> <span class="ecm-itemDeatils">Items Details</span> </div>
-	 <hr>
+	<md-card class="extra-details-card"> 
+	 <div class="item-details-title"> <span class="ecm-itemDeatils">Items Details</span> </div>
+	<div class="extra-details-section"> 
 	 <div class="ecm-Overview">
     	<span class="ecm-other-title">Overview</span>
 	    <span class="ecm-other-detail">
@@ -147,7 +147,7 @@
 	    </span>
 	 </div>
 	
-	<div class="Attraction" style="padding-top: 24px;">
+	<div class="Attraction">
 	 <span class="attraction">Description</span>
 	 <table style="width: 100%">
 	    <tr class="extra-details" *ngIf="itemDetail.itemDetail2.productDetails.brand">
@@ -192,13 +192,13 @@
       <div class="ecm-returnsPolicy">
 		<span class="ecm-other-title">Return Policy</span>
 		<span class="ecm-other-detail">{{itemDetail.itemDetail2.returnPolicy}}</span>
-	</div>
+	  </div>
 
-<div class="ecm-termsCondition">
-	<span class="ecm-other-title">Terms and Conditions</span>
-	<span class="ecm-other-detail">{{itemDetail.itemDetail2.termsAndCondition}}</span>
-</div>
-				
+	  <div class="ecm-termsCondition">
+		<span class="ecm-other-title">Terms and Conditions</span>
+		<span class="ecm-other-detail">{{itemDetail.itemDetail2.termsAndCondition}}</span>
+	  </div>
+ </div>	
 	</md-card>
   </div>
 			

ecm/Angular/ProteusECM/trunk/src/app/ecm-product-details/ecm-template/ecm-template.component.ts

-import { Component, AfterViewInit, ComponentFactoryResolver, Input, Output, ViewChild, Type, Directive, ViewContainerRef, EventEmitter } from '@angular/core';
+import { Component, ComponentFactoryResolver, Input, Output, ViewChild, Type, Directive, ViewContainerRef, EventEmitter, OnChanges } from '@angular/core';
 import { ItemDetail } from '../../ecm-model/product-detail-model';
 
 @Directive({
@@ -29,21 +29,18 @@ export interface EcmTemplateInterface {
   templateUrl: './ecm-template.component.html',
   styleUrls: ['./ecm-template.component.css']
 })
-export class EcmTemplateComponent implements AfterViewInit {
+export class EcmTemplateComponent implements OnChanges {
     
     @Output() scrollToReviews = new EventEmitter();
     @Output() doActivity = new EventEmitter();
     
-    @Input() ecmTemplate: EcmTemplateItem;
+    @Input('ecmTemplate') ecmTemplate: EcmTemplateItem;
+    @Input('itemDetail') itemDetail:ItemDetail;
+    
     @ViewChild(EcmTemplateDirective) ecmTemplateDir: EcmTemplateDirective;
    
     constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
-
-    ngAfterViewInit() {
-      console.log("AfterViewNit of Ecm-Template Called");
-      this.loadComponent(this.ecmTemplate);
-    }
-
+    
     loadComponent(ecmTemplate){
         console.log("Ecm-Template Loader Called");
     
@@ -56,8 +53,14 @@ export class EcmTemplateComponent implements AfterViewInit {
         viewContainerRef.clear();
 
         let componentRef = viewContainerRef.createComponent(componentFactory);
+        console.log("ecmTemplateItem.itemDetail in template"+ecmTemplateItem.itemDetail);
         (<EcmTemplateInterface>componentRef.instance).itemDetail = ecmTemplateItem.itemDetail;
         (<EcmTemplateInterface>componentRef.instance).scrollToReviews = this.scrollToReviews;
         (<EcmTemplateInterface>componentRef.instance).doActivity = this.doActivity;  
     }
+    
+    ngOnChanges(){
+        console.log("OnChanges of Ecm-Template Called");
+        this.loadComponent(this.ecmTemplate);
+    }
 }

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-cart/ecm-cart.component.css

@@ -18,8 +18,6 @@
     padding-right: 13px;
 }
 
-
-
 .itemdescription
 {
 	font-size: 12px;

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-category/ecm-category.component.css

@@ -3,7 +3,7 @@
 	margin: 0;
 	padding-top: 100px;
 	padding-top: 70px;
-	background-color: #FFF;
+	background-color: #f2f2f2 !important;
 }
 .ecm-section-info {
 	padding: 10px;
@@ -14,13 +14,13 @@
 	display: block;
 }
 .ecm-section-info-subhead {
-	font-size: 16px;
+	font-size: 14px;
 	color: #888;
 	display: block;
 }
 .end {
 	padding-top: 15px;
-	padding-bottom: 50px;
+	padding-bottom: 15px;
 }
 .row.row-category {
 	max-width: 72rem;

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-checkout/ecm-checkout.component.css

@@ -216,7 +216,7 @@
 }
 
 .item-cost{
-	width: 30%;
+	width: 40%;
 }
 
 md-error{

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-product/ecm-product.component.css

@@ -3,7 +3,6 @@
 	margin: 0;
 	padding-top: 100px;
 	padding-top: 70px;
-	background-color: #FFF;
 }
 .ecm-section-info {
 	padding: 10px;
@@ -20,7 +19,7 @@
 }
 .end {
 	padding-top: 15px;
-	padding-bottom: 50px;
+	padding-bottom: 15px;
 }
 .row.row-subcategory {
 	max-width: 72rem;

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-recent-view/ecm-recent-view.component.css

@@ -16,12 +16,9 @@ hr {
 }
 
 .recent-view-title {
-    text-align: center;
-    display: block;
-    height: 40px;
-    /* width: 160px; */
-    line-height: 40px;
-    border-bottom: thin solid mediumvioletred;
+    padding-bottom: 22px;
+	border-bottom: 2px solid #c71585;
+	font-size: 16px;
 }
 
 .ecm-recent-view-card {
@@ -32,13 +29,14 @@ hr {
 .item-descr {
 	display: block;
     color: #444;
-    font-size: 15px;
+    font-size: 14px;
+    padding-top: 8px;
 }
 
 .item-cost {
 	display: block;
     padding-top: 10px;
-    font-size: 15px;
+    font-size: 14px;
     font-weight: bold;    
 }
 
@@ -55,7 +53,7 @@ hr {
 }
 
 .recentView-section {
-	margin-top: 70px;
+	/*margin-top: 70px;*/
 	height: 600px;
 	background-color: #F2F2F2;
 }
@@ -84,8 +82,28 @@ hr {
 	padding-bottom: 50px;
 }
 
-md-card{
-   	margin: 15px;	
+.recent-view-header {
+	border-bottom: 1px solid #f3f3f3;
+	padding: 20px;
+	text-align: center;
+}
+
+.recent-view-card {
+	padding: 0;
+	padding-bottom: 14px;
 }
 
+.recent-view-items {
+	padding: 30px;
+}
 
+@media screen and (max-width: 640px) {
+  md-card {
+	margin: 15px;
+  }	
+}
+
+md-card {
+	border-radius: 3px !important;
+	box-shadow: 0 0px 16px -3px rgba(0,0,0,.1) !important;
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-recent-view/ecm-recent-view.component.html

-<md-card *ngIf="recentViewItems && recentViewItems.length "id='recentViewCard'>
-    <div>
+<md-card *ngIf="recentViewItems && recentViewItems.length " class="recent-view-card" id='recentViewCard'>
+    <div class="recent-view-header">
       <span class="recent-view-title"> Recently Viewed </span>
     </div>
-    <hr>
+   <div class="recent-view-items"> 
     <div *ngFor="let item of recentViewItems | slice:0:show; let i=index" class="ecm-recent-view-card" (click)="viewItem(item.itemCode)">
     	<div class="media-object-section product-image">
 		  <ecm-image [refId]='item.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true"></ecm-image>		
 	    </div>
 	    <div class="media-object-section">
 	      <span class="item-descr">{{item.descr}}</span>
-          <span class="item-cost"> ₹ {{item.costRate}}</span>		
+          <span class="item-cost">Rs. {{item.costRate}}</span>		
 	    </div>
 	</div>
     <div class="view-all-section" *ngIf="recentViewItems.length > 3 && show == 3" (click)="show = recentViewItems.length">
 	  <span class="view-all-button">View All {{recentViewItems.length}} Items </span>
 	</div>
+  </div>	
  </md-card>
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-related-items/ecm-related-items.component.html

@@ -4,7 +4,7 @@
 			<div class="ecm-section-info">
 				<span class="ecm-section-info-title">Related Items</span>
 			</div>
-			<ecm-carousel #ecmCarouselComp [cardItems]="relatedItems" ></ecm-carousel>
+			<ecm-carousel [cardItems]="relatedItems" ></ecm-carousel>
 		</div>
 	</section>
 </div>
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-related-items/ecm-related-items.component.ts

-import { Component, OnInit, Input, ViewChild } from '@angular/core';
+import { Component, Input, ViewChild, OnChanges } from '@angular/core';
 
 import { ItemDetail } from '../../ecm-model/product-detail-model';
 import {EcmRelatedItemService} from './ecm-related-item.service';
@@ -13,20 +13,15 @@ declare var reinitFlickity: any;
   styleUrls: ['./ecm-related-items.component.css'],
   providers: [EcmRelatedItemService]
 })
-export class EcmRelatedItemsComponent implements OnInit {
+export class EcmRelatedItemsComponent implements OnChanges {
   
   @Input() scatCode;
-  @ViewChild('ecmCarouselComp') ecmCarouselComp: EcmCarouselComponent;
   
   relatedItems: Item[];
   errorMessage: string;
     
   constructor(private relatedItemService:EcmRelatedItemService) { }
-
-  ngOnInit() {
-      this.getRelatedItems(this.scatCode);
-  }
-    
+ 
   getRelatedItems(scatCode: string) {
       
       this.relatedItemService.getRelatedItems(scatCode).subscribe(
@@ -34,8 +29,6 @@ export class EcmRelatedItemsComponent implements OnInit {
           this.relatedItems = relatedItems;
           reinitFlickity();
           
-          this.ecmCarouselComp.ngOnInit();
-          
           console.log('comp relatedItems[' +  JSON.stringify( relatedItems ) + '] \n this.relatedItems[' +  JSON.stringify( this.relatedItems ) + ']');
         },
         error =>  {
@@ -43,5 +36,10 @@ export class EcmRelatedItemsComponent implements OnInit {
           console.log('comp errorMessage[' + this.errorMessage + ']');
         });
   }
+  
+  ngOnChanges(){
+      console.log("OnChanges of ecm-related-items called");
+      this.getRelatedItems(this.scatCode);
+  }
 
 }

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-sub-category/ecm-sub-category.component.css

@@ -3,7 +3,6 @@
 	margin: 0;
 	padding-top: 100px;
 	padding-top: 70px;
-	background-color: #FFF;
 }
 .ecm-section-info {
 	padding: 10px;
@@ -20,7 +19,7 @@
 }
 .end {
 	padding-top: 15px;
-	padding-bottom: 50px;
+	padding-bottom: 15px;
 }
 .row.row-subcategory {
 	max-width: 72rem;