Merge branch 'anis' of ssh://git.marbelium.com:10023/Viiciouss/XJC into thierry

src/app/components/home/home.component.html

@@ -111,9 +111,30 @@
           <p class="black-text">Inscrivez vous en quelques secondes et commencez à
             Collectionner vos cartes de parrainage chez vos
             Commerçants affiliés !</p>
-          <div class="col-md-12" id="btnFeature1">
-            <button class="btn btn-light-blue btn-lg wow fadeInDown" pageScroll="#intro" [pageScrollOffset]="0" [pageScrollDuration]="700" [pageScrollInterruptible]="false" href="#intro" (click)="loadRegisterComponent2();">Inscrivez vous !</button>
+          <div class="btn-block d-flex flex-column flex-lg-row flex-md-row justify-content-center align-items-center" id="btnFeature1">
+            <button class="btn btn-blue btn-lg wow fadeInDown" pageScroll="#intro" [pageScrollOffset]="0" [pageScrollDuration]="700" [pageScrollInterruptible]="false" href="#intro" (click)="loadRegisterComponent2();">Inscrivez vous !</button>
+            <button md-ripple type="button" class="btn btn-light-blue btn-lg wow fadeInDown" (click)="basicModal.show()" ripple-radius>Nos commerçants</button>
           </div>
+            <div bsModal #basicModal="bs-modal" [config]="{keyboard: false}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true">
+              <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
+                      <span aria-hidden="true">×</span>
+                    </button>
+                    <h4 class="modal-title w-100" id="myModalLabel">Nos commerçants</h4>
+                  </div>
+                  <div class="modal-body">
+                    <ul class="list-group">
+                      <li class="list-group-item blue-text font-bold" *ngFor="let comm of commList | async ">{{comm.commercialName}}</li>
+                    </ul>
+                  </div>
+                  <div class="modal-footer flex-column">
+                    <button type="button" class="btn btn-secondary ml-auto" aria-label="Close" (click)="basicModal.hide()" ripple-radius>Fermer</button>
+                  </div>
+                </div>
+              </div>
+            </div>
         </div>
       </div>
       <!--Grid row-->
@@ -176,7 +197,7 @@
             Sur notre page Facebook sous 24h.</p>
 
           <div class="col-md-12" id="btnFeature2">
-            <button class="btn btn-light-blue btn-lg wow fadeInDown waves-light" pageScroll="#intro" [pageScrollOffset]="0" [pageScrollDuration]="700" [pageScrollInterruptible]="false" href="#intro" (click)="loadRegisterComponent2();">Inscrivez vous !</button>
+            <button class="btn btn-blue btn-lg wow fadeInDown waves-light" pageScroll="#intro" [pageScrollOffset]="0" [pageScrollDuration]="700" [pageScrollInterruptible]="false" href="#intro" (click)="loadRegisterComponent2();">Inscrivez vous !</button>
           </div>
         </div>
       </div>

src/app/components/home/home.component.scss

@@ -94,13 +94,17 @@ body {
 }
 
 #btnFeature1, #btnFeature2 {
-  height: auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   padding-top: 2%;
 }
 
+
+.modal-body {
+  margin: 5%;
+  overflow-y: auto;
+  height: 35vh
+}
+
+
 @media only screen
 and (min-device-width : 320px)
 and (max-device-width : 568px) {