scanner-carte html list des scans

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

@@ -7,8 +7,9 @@
 </ul>-->
 
 <app-nav-commercant></app-nav-commercant>
-<div class="container" style="padding-top:10%">
-<div class="card">
+<div class="container">
+  <div class="col-md-12" id="scanPart1">
+    <div class="card">
       <div class="card-block">
         <p class="h5 text-center mb-4">Scanner Carte</p>
         <!--<p class="text-center mb-4" style="padding-top: 2%;">Choisissez quelle type de fieulle voulez-vous scanner la carte</p>
@@ -110,6 +111,44 @@
         </div>
         <!-- Fin Si cest un filleul existant -->
       </div>
+    </div>
+  </div>
 
-</div>
+  <hr>
+
+  <div class="card col-md-12" id="scanPart2">
+    <h4 class="h5 text-center mb-4">Liste de vos scans</h4>
+    <div class="row">
+      <!--Grid column-->
+      <!--*ngFor="let scan of scanList | async"-->
+      <div class="col-lg-4 col-md-6">
+
+        <!--Card-->
+        <div class="card card-cascade wider">
+
+          <!--Card image-->
+          <div class="view gradient-card-header blue-gradient">
+            <h2 class="h3-responsive mb-2">Title of the news</h2>
+            <p class=""><i class="fa fa-calendar"></i> 26.07.2017</p>
+
+          </div>
+          <!--/Card image-->
+
+          <!--Card content-->
+          <div class="card-body text-center">
+
+            <p class="card-text mr-2 ml-2">espace text 1</p>
+            <p class="card-text mr-2 ml-2">espace text 2</p>
+            <p class="card-text mr-2 ml-2">espace text 2</p>
+
+          </div>
+          <!--/.Card content-->
+
+        </div>
+        <!--/.Card-->
+
+      </div>
+    </div>
+
+  </div>
 </div>

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

@@ -1,3 +1,16 @@
+.container {
+  padding-top: 10%;
+}
 .card {
   padding: 5%;
 }
+
+#scanPart1 {
+  padding-bottom: 5%;
+  height: 50%;
+}
+
+#scanPart2 {
+  margin-top: 5%;
+  height: 50%;
+}