From 2b3d8a1414ad5b2f5a2d062e8a8d583eb263fe9b Mon Sep 17 00:00:00 2001
From: Julien WITTOUCK <julien.wittouck@gmail.com>
Date: Mon, 19 Aug 2019 20:02:19 +0200
Subject: [PATCH] :recycle: : use bootstrap-vue b-card component

---
 src/main/resources/templates/stacks.html | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/main/resources/templates/stacks.html b/src/main/resources/templates/stacks.html
index 2410a2910..4709b62f1 100644
--- a/src/main/resources/templates/stacks.html
+++ b/src/main/resources/templates/stacks.html
@@ -33,21 +33,20 @@
 
 
 <template id="template">
-    <div class="card-columns">
-        <div class="card" v-for="stack in stacks">
-            <div class="card-body">
-                <h5 class="card-title">{{stack.name}}</h5>
-                <p class="card-text">{{stack.description}}</p>
-                <h4>
+    <b-card-group columns>
+        <b-card v-for="stack in stacks"
+            :title="stack.name"
+            :sub-title="stack.description">
+                <b-card-text>
                     <span class="badge badge-pill badge-success" v-if="stack.state === 'NEW'" data-toggle="tooltip" title="Your stack is new and has not been started yet."><i class="fas fa-star-of-life"></i> new</span>
                     <span class="badge badge-pill badge-primary" v-if="stack.state === 'RUNNING'" data-toggle="tooltip" title="Your stack is up and running !"><i class="far fa-check-square"></i> running</span>
                     <span class="badge badge-pill badge-warning" v-if="stack.state === 'TO_UPDATE'" data-toggle="tooltip" title="Your stack needs an update !"><i class="fas fa-upload"></i> to update</span>
                     <span class="badge badge-pill badge-danger" v-if="stack.state === 'STOPPED'" data-toggle="tooltip" title="Your stack has been stopped."><i class="fas fa-stop-circle"></i> stopped</span>
-                </h4>
+                </b-card-text>
                 <a :href="'/stacks/' + stack.id" data-toggle="tooltip" title="Edit this stack" class="btn btn-primary"><i class="far fa-edit"></i></a>
             </div>
-        </div>
-    </div>
+        </b-card>
+    </b-card-group>
 </template>
 
 <template id="template-navigation">