envoyer carte v4

src/app/components/opCommercial/op-commercial/op-commercial.component.html

@@ -11,34 +11,35 @@
 <button (click)="goToCreaOpCom()">Nouvelle opération Commercial</button>
 <button (click)="goToProfil()">Back</button>
 -->
-      <h4 class="h5 text-center mb-4">Liste de vos operations commercials</h4>
-      <div class="btn-group">
-        <button (click)="goToCreaOpCom()">Nouvelle opération Commercial</button>
-        <button (click)="goToProfil()">Profil</button>
-        <button (click)="goToEnCart()">Envoyer carte</button>
-      </div>
-      <div class="list-group">
-        <div class="card mainCard" *ngFor="let op of opCommData | async">
-          <div class="row">
-            <div class="col-md-6 card card-image mb-3 subCard1" style="background-image: url(https://mdbootstrap.com/img/Photos/Avatars/img%20%2831%29.jpg);">
-              <div class="row firstRow">
-                <div class="col-md-6 flex-center card-block cardPart1">{{commercant.commercialName}}</div>
-                <div class="col-md-6 flex-center card-block cardPart2">
-                  <img src="{{commercant.image.downloadURL}}" class="img-fluid" alt="Responsive image">
-                  test2
-                </div>
-              </div>
-              <div class="row secondRow">
-                <div class="col-md-6 flex-center cardPart3">{{op.name}}</div>
-                <div class="col-md-6 flex-center cardPart4">{{op.uid}}</div>
+  <h4 class="h5 text-center mb-4">Liste de vos operations commercials</h4>
+  <div class="btn-group">
+    <button (click)="goToCreaOpCom()">Nouvelle opération Commercial</button>
+    <button (click)="goToProfil()">Profil</button>
+    <button (click)="goToEnCart()">Envoyer carte</button>
+  </div>
+  <div class="list-group">
+    <div class="card mainCard" *ngFor="let op of opCommData | async">
+      <div class="row">
+        <div class="col-md-6 card-image mb-1 subCard1" [ngStyle]="{ 'background-image': 'url(' + op.carteTemplate.downloadURL + ')'}">
+          <div class="view mask-light pattern-1">
+            <div class="row firstRow">
+              <div class="col-md-6 flex-center card-block cardPart1">{{commercant.commercialName}}</div>
+              <div class="col-md-6 flex-center card-block card-image mb-1 cardPart2" [ngStyle]="{ 'background-image': 'url(' + commercant.image.downloadURL + ')'}">
+                <p>test2</p>
               </div>
             </div>
-            <div class="col-md-6 card subCard2">
-              <label>Operation Commerciale: {{op.name}}</label>
+            <div class="row secondRow">
+              <div class="col-md-6 flex-center cardPart3"><p>{{op.name}}</p></div>
+              <div class="col-md-6 flex-center cardPart4"><p>{{op.uid}}</p></div>
             </div>
           </div>
         </div>
+        <div class="col-md-6 card subCard2">
+          <label>Operation Commerciale: {{op.name}}</label>
+        </div>
       </div>
+    </div>
+  </div>
 
 
 </div>

src/app/components/opCommercial/op-commercial/op-commercial.component.scss

@@ -3,8 +3,17 @@
   width: 100%;
 }
 
+.view {
+  height:102%;
+  width: 103%;
+}
+
+
 .subCard1 {
   height: 15rem;
+  background-repeat: no-repeat;
+  background-size:20% auto;
+  background-position : center;
 }
 
 .firstRow {
@@ -22,8 +31,12 @@
 
 .cardPart2 {
   //background-color: orange;
+  background-repeat: no-repeat;
+  background-size:50% auto;
+  background-position : center;
 }
 
+
 .cardPart3 {
   //background-color: green;
 }