Updated

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

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

@@ -22,4 +22,20 @@
 }
 .row.row-category {
 	max-width: 72rem;
+}
+
+@media screen and (max-width: 640px){
+  .end {
+    box-shadow: 0 0 0 5px #f2f2f2;
+    background-color: #fff;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .end:first-child {
+    box-shadow: 0 0 0 5px #f2f2f2, 0 -5px 0 5px #f2f2f2;
+  }
+  .end:last-child{
+    box-shadow: 0 0 0 5px #f2f2f2, 0px 5px 0px 5px #f2f2f2;
+  }
 }
\ No newline at end of file

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

@@ -5,16 +5,19 @@
 	padding-top: 70px;
 }
 .ecm-section-info {
-    padding: 0 10px 15px 10px;
-    border-bottom: 1px solid #f2f2f2;
+	padding: 10px;
+	border: 2px solid ghostwhite;
+    border-top: 0px;
+    border-right: 0px;
+    border-bottom: 1px;
 }
 .ecm-section-info-title {
  /*	font-size: 26px;
 	color: #444;
 	display: block; */
-	font-size: 20px;
-    color: black;
-    display: inline;
+	font-size: 18px;
+    color: #441;
+   display: inline;
 }
 .ecm-section-info-subhead {
 	font-size: 16px;
@@ -167,34 +170,72 @@
 	    min-height: 60px;
 	}
 	.ecm-items-details{
-	margin-top: 0px !important;
+	  margin-top: 0px !important;
 	}
 	.ecm-filter-details{
     margin-top: 0px !important;
   }
   .ecm-section-info{
-  border: 2px solid ghostwhite;
+      border: none !important;
+  }
+  .ecm-item-card-detail{
+      border: none !important;
+  }
+}
+
+.product-list-card{
+    display: inline-block;
+} 
+@media screen and (max-width: 640px){
+  .filter-pane{
+      min-height: 60px;
+  }
+  .ecm-items-details{
+    margin-top: 0px !important;
+  }
+  .ecm-filter-details{
+    margin-top: 0px !important;
+  }
+  .ecm-section-info{
+      border: none !important;
   }
   .ecm-item-card-detail{
-     border: 2px solid ghostwhite;
+      border: none !important;
+  }
+  .product-list-card{
+      padding-left: 0px;
+      padding-right: 0px;
+  }
+
+  .item-card {
+    box-shadow: 0 0 0 5px #f2f2f2;
+  } 
+
+  .item-card:first-child {
+    box-shadow: 0 0 0 5px #f2f2f2, 0 -5px 0 5px #f2f2f2;
+  }
+  .item-card:last-child{
+    box-shadow: 0 -5px 0 0 #f2f2f2;
+    /*box-shadow: 0 0 0 5px #f2f2f2, 0 5px 0 5px #f2f2f2;*/
   }
 }
+
 .ecm-total-items{
-	font-size: 14px;
+	font-size: 12px;
     color: dimgray;
+    font-weight: 600;
 }
 .ecm-items-details{
-	/*margin-top: -39px;*/
-    border-left: 1px solid #f2f2f2;
-}
-.ecm-item-card-detail {
+	margin-top: -39px;
+	}
+.ecm-item-card-detail{
+	 border: 2px solid ghostwhite;
 	 display: inline-block;
 	 border-right: 0px;
 	 border-bottom: 0px;
 }	
 .ecm-filter-details{
- /*margin-top: -24px;*/
- 	padding: 0;
+ margin-top: -24px;
 }
 
 .ecm-items-section {

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

@@ -20,7 +20,7 @@
 <div *ngIf="(items | async)?.length > 0">
 	<section class="subcategories-section">
 		<div class="row">
-		<md-card class="ecm-items-section">
+		<md-card class="product-list-card">
 			<div class="small-12 medium-3 large-3 column ecm-filter-details">
 			<div class = "filter-pane">
 				<div class="filter-header">

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

@@ -110,4 +110,20 @@
 	color: mediumvioletred;
     font-size: 20px;
 }
-/* loading section end */    
\ No newline at end of file
+/* loading section end */    
+
+@media screen and (max-width: 640px){
+  .end {
+    box-shadow: 0 0 0 5px #f2f2f2;
+    background-color: #fff;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .end:first-child {
+    box-shadow: 0 0 0 5px #f2f2f2, 0 -5px 0 5px #f2f2f2;
+  }
+  .end:last-child{
+    box-shadow: 0 0 0 5px #f2f2f2, 0px 5px 0px 5px #f2f2f2;
+  }
+}
\ No newline at end of file