Version stable presentation 21/09/2017

src/app/components/opCommercial/envoyer-carte/envoyer-carte.component.html

@@ -13,20 +13,25 @@
 <div class="card">
   <div class="well">
     <p class="h5 text-center mb-4">Envoyer Carte</p>
-    <div class="col-md-12 card-image mb-1 subCard1 card" id="subCard1">
+    <div class="col-md-12 subCard1 card" id="subCard1">
       <img src="{{cartePar.carteTemplate.downloadURL}}" id="image1" class="mx-auto d-block flex-center card-img-overlay" alt="Responsive image">
       <div class="view">
         <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 cardPart1"><label>{{commercant.commercialName}}</label></div>
           <div class="col-md-6 flex-center card-block card-image mb-1 cardPart2 image2" [ngStyle]="{ 'background-image': 'url(' + commercant.image.downloadURL + ')'}">
 
           </div>
         </div>
         <div class="row secondRow">
-          <div class="col-md-6 flex-center cardPart3"><p>{{cartePar.name}}</p></div>
-          <div class="col-md-6 flex-center cardPart4"><p>{{cartePar.uid}}</p></div>
-          <div class="col-md-6 flex-center cardPart5"><p>Valable jusqu'au: {{cartePar.dateFin | date:'dd/MM/yyyy'}}</p></div>
+          <div class="col-md-6 flex-center cardPart3 flex-column">
+            <label>{{cartePar.name}}</label>
+          </div>
+          <div class="col-md-6 flex-center cardPart4"><label>{{cartePar.uid}}</label></div>
+        </div>
+        <div class="col-md-12 text-center" id="dateFin">
+          <label>Valable jusqu'au: {{cartePar.dateFin | date:'dd/MM/yyyy'}}</label>
         </div>
+
       </div>
     </div>
     <p class="text-center mb-4" style="padding-top: 2%;">Choisissez quelle type de parrain à qui envoyer la carte</p>

src/app/components/opCommercial/envoyer-carte/envoyer-carte.component.scss

@@ -5,10 +5,37 @@
 .cardPart2 {
   //background-color: orange;
   background-repeat: no-repeat;
-  background-size:50% auto;
+  background-size:25% auto;
   background-position : center;
 }
 
-.subCard1{
-  height: 50%;
+
+.subCard1 {
+  height: 15rem;
+  padding: 1%;
+  background-color: white;
+  align-items: center;
+  margin: auto;
+  width: 85%;
+  // background-repeat: no-repeat;
+  // background-size:20% auto;
+  // background-position : center;
+}
+
+.view {
+  height:102%;
+  width: 103%;
+}
+
+.firstRow {
+  height: 45%;
+}
+
+.secondRow {
+  height: 45%;
+}
+
+#dateFin {
+  height: 10%;
+ font-size: 0.9rem;
 }

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

@@ -19,7 +19,7 @@
   <div class="list-group">
     <div class="card mainCard" *ngFor="let op of opCommData | async">
       <div class="row" id="testt">
-        <div class="col-md-6 card-image mb-1 subCard1" id="subCard1">
+        <div class="col-md-6 mb-1 subCard1" id="subCard1">
           <img src="{{op.carteTemplate.downloadURL}}" id="image1" class="mx-auto d-block flex-center card-img-overlay" alt="Responsive image">
           <div class="view">
             <div class="row firstRow">
@@ -34,18 +34,23 @@
             </div>
           </div>
         </div>
-        <div class="col-md-6 subCard2">
-          <div class="row">
-            <div class="col-md-8" style="padding-top: 5%;">
-              <label>Operation Commerciale: {{op.name}}</label>
-              <p>Avantage parrain:</p>
-              <p>Avantage filleul:</p>
-              <p>Carte(s) envoyée(s):</p>
-              <p>Carte(s) scannée(s):</p>
-              <p>Carte(s) débitée(s):</p>
-              <h100>Du {{op.dateDebut | date:'dd/MM/yyyy'}} au {{op.dateFin | date:'dd/MM/yyyy'}}</h100>
+        <div class="col-md-6 card subCard2">
+          <div class="card-block row">
+            <div class="col-md-8" id="subCard2Part1">
+              <div id="opTitle">
+                <label>Operation Commerciale: {{op.name}}</label>
+              </div>
+              <div id="opAvantages">
+                <label>Avantage parrain:</label>
+                <label>Avantage filleul:</label>
+              </div>
+              <div id="opLogs">
+                <label>Carte(s) envoyée(s):</label>
+                <label>Carte(s) scannée(s):</label>
+                <label>Carte(s) débitée(s):</label>
+              </div>
             </div>
-            <div class="col-md-2" style="padding-top: 5%;">
+            <div class="col-md-2" id="subCard2Part2">
               <button class="btn btn-outline-primary btn-rounded" (click)="goToEnCart(op.uid)">Envoyer</button>
               <button class="btn btn-outline-default btn-rounded" (click)="goToScanCart(op.uid)">Scanner</button>
               <button class="btn btn-outline-info btn-rounded" (click)="goToDebiterCart(op.uid)">Débiter</button>
@@ -53,6 +58,9 @@
               <!--<button class="btn btn-outline-info btn-rounded" (click)="sectionToImage(op.carteTemplate.downloadURL, commercant.image.downloadURL)">screenShot</button>-->
             </div>
           </div>
+          <div class="card-block col-md-12" id="subCard2Part3">
+            <h100 class="float-right">Du {{op.dateDebut | date:'dd/MM/yyyy'}} au {{op.dateFin | date:'dd/MM/yyyy'}}</h100>
+          </div>
         </div>
       </div>
     </div>

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

@@ -10,7 +10,7 @@
 
 
 .subCard1 {
-  height: 15rem;
+  height: auto;
   background-color: white;
   // background-repeat: no-repeat;
   // background-size:20% auto;
@@ -45,3 +45,39 @@
 .cardPart4 {
   //background-color: yellow;
 }
+
+#subCard2Part1 {
+  padding-top: 5%;
+  display: flex;
+  flex-direction: column
+}
+
+#subCard2Part2 {
+  padding-top: 5%;
+}
+
+#subCard2Part3 {
+  padding-right: 5%;
+  padding-top: 0%;
+  padding-bottom: 1%;
+}
+
+#opTitle {
+  display: flex;
+  flex-direction: column
+}
+
+#opAvantages {
+  display: flex;
+  flex-direction: column;
+  padding-top: 2%;
+}
+
+#opLogs {
+  display: flex;
+  flex-direction: column;
+  padding-top: 5%;
+}
+
+
+