envoie carte apercu fini

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

@@ -12,11 +12,11 @@
 
 <div class="container">
   <div class="card">
-    <div class="well">
+    <div class="well d-flex flex-column justify-content-center">
       <h5 class="mb-5 mt-1 font-bold wow fadeInDown text-center">Envoyer Carte</h5>
 
       <p class="text-center mb-4" style="padding-top: 2%;">Souhaitez-vous envoyer la carte à :</p>
-      <form class="form-inline flex-center">
+      <div class="form-inline d-flex flex-row justify-content-center">
         <div class="md-form" style="padding-left: 2%;">
           <input name="group2" type="radio" class="with-gap" id="Newparrain" value="Newparrain"  (click)="initParSelect()" [(ngModel)]="radioParrain">
           <label for="Newparrain">Nouveau Parrain</label>
@@ -30,9 +30,11 @@
           <input name="group2" type="radio" class="with-gap" id="ParrainAffi" value ="ParrainAffi" (click)="initParSelect()" [(ngModel)]="radioParrain">
           <label for="ParrainAffi">Parrain Affilier</label>
         </div>-->
-      </form>
+      </div>
       <!-- Si cest un nouveau parrain -->
-      <div *ngIf="radioParrain === 'Newparrain'">
+      <!--<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>-->
+
+      <div class="newParrain" *ngIf="radioParrain === 'Newparrain'">
 
         <div class="md-form">
           <i class="fa fa-user prefix grey-text"></i>
@@ -84,9 +86,9 @@
             <div class="operation-data flex-center"><p class="white-text info-text font-bold">{{cartePar.name}}</p></div>
             <div class="operation-id flex-center"><p class="white-text info-text font-bold">{{cartePar.parrainCarte.familyname}} {{cartePar.parrainCarte.firstname}}</p></div>
           </div>
-          <!--<div class="col-md-12 text-center" id="dateFin">
+          <div class="text-center" id="dateFin">
             <label class="white-text info-text font-bold">Valable jusqu'au: {{cartePar.dateFin | date:'dd/MM/yyyy'}}</label>
-          </div>-->
+          </div>
         </div>
         <div class="card-footer" style="margin-top:5%">
           <div *ngIf="carteEnvoieEncours">
@@ -119,7 +121,7 @@
       <!-- Fin Si cest un nouveau parrain -->
 
       <!-- Si cest un parrain existant -->
-      <div *ngIf="radioParrain === 'ParrainExist'">
+      <div class="parrainExit" *ngIf="radioParrain === 'ParrainExist'">
 
         <!--
         <div class="dropdown" dropdown>
@@ -149,7 +151,7 @@
         </div>
 
 
-        <div class="md-form" style="padding-top:2%;">
+        <div class="md-form">
           <i class="fa fa-birthday-cake prefix grey-text"></i>
           <input type="date" id="orangeForm-Birthday" [(ngModel)]="birthdayTemp" placeholder="Date de naissance" name="birthday" #birthday="ngModel">
           <div *ngIf="(birthdayTemp !== parrain.birthday) && (birthday.dirty || birthday.touched)"  class="alert alert-danger">
@@ -175,7 +177,7 @@
             <div class="operation-data flex-center"><p class="white-text info-text font-bold">{{cartePar.name}}</p></div>
             <div class="operation-id flex-center"><p class="white-text info-text font-bold">{{cartePar.parrainCarte.familyname}} {{cartePar.parrainCarte.firstname}}</p></div>
           </div>
-          <div class="col-md-12 text-center" id="dateFin">
+          <div class="text-center" id="dateFin">
             <label class="white-text info-text font-bold">Valable jusqu'au: {{cartePar.dateFin | date:'dd/MM/yyyy'}}</label>
           </div>
         </div>

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

@@ -4,11 +4,14 @@
 
 .card {
   padding: 5%;
+  margin-bottom: 10vh;
 }
 
 #subCard1 {
-  display: flex;
-  justify-content: center;
+  height: 25vh;
+  margin-top: 2vh;
+  margin-right: auto;
+  margin-left: auto;
 }
 
 .subCard1-row {
@@ -59,7 +62,11 @@
 
 #dateFin {
   height: 10%;
- font-size: 0.9rem;
+  font-size: 0.9rem;
+  z-index: 2;
+}
+
+.parrainExit, .newParrain {
 }
 
 @media screen and (max-width: 720px) {

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

@@ -47,7 +47,7 @@
   </div>
   <div class="list-group wow fadeInUpBig">
     <div *ngFor="let op of opCommData | async">
-      <div class="card mainCard" *ngIf="(op.status == statutAffiche) || (statutAffiche == 'Toutes')" style="height: 100%">
+      <div class="card mainCard" *ngIf="(op.status == statutAffiche) || (statutAffiche == 'Toutes')">
         <div class="row no-margin" id="testt">
           <div class="col-md-6 d-flex flex-column " id="subCard1">
             <img src="{{op.carteTemplate.downloadURL}}" id="image1" class="img-fluid mx-auto d-block flex-center card-img-overlay" alt="Responsive image">

src/styles.scss

@@ -1 +1,4 @@
-/* You can add global styles to this file, and also import other style files */
+/* You can add global styles to this file, and also import other style files */
+.hidden {
+  visibility: hidden;
+}