more updates

src/views/ADCE.vue

@@ -43,7 +43,7 @@
         </p>
       </div>
 
-      <div class="row architecture-container">
+      <!-- <div class="row architecture-container">
         <div
           class="col-xl-6 my-4 mx-auto image-wrapper d-flex flex-column"
           v-for="(src, index) in lightbox.imgs"
@@ -62,7 +62,7 @@
           :index="lightbox.index"
           @hide="handleHide"
         ></vue-easy-lightbox>
-      </div>
+      </div> -->
 
       <div class="row">
         <div
@@ -92,14 +92,20 @@
           <div class="milestones-wrapper text-left">
             <div
               v-for="milestone in milestones"
-              :key="milestone.date"
+              :key="milestone.text"
               class="milestone pl-4 mb-5 position-relative"
             >
               <div class="bullet" :class="{ done: milestone.done }"></div>
-              <div class="date font-weight-bold text-uppercase mb-2">
-                {{ milestone.date }}
+              <div class="text d-flex align-items-center">
+                <div class="img-container mr-2 d-flex justify-content-center">
+                  <img
+                    v-if="milestone.logo"
+                    :src="getImageUrl(milestone.logo)"
+                    class="tool-logo"
+                  />
+                </div>
+                {{ milestone.text }}
               </div>
-              <div class="text">{{ milestone.text }}</div>
               <div v-if="milestone.details">
                 <div
                   v-for="detail in milestone.details"
@@ -129,11 +135,11 @@
 <script>
 import PageHeader from "@/components/PageHeader";
 import BottomWave from "@/components/BottomWave";
-import VueEasyLightbox from "vue-easy-lightbox";
+// import VueEasyLightbox from "vue-easy-lightbox";
 
 export default {
   name: "ADCE",
-  components: { PageHeader, BottomWave, VueEasyLightbox },
+  components: { PageHeader, BottomWave /*VueEasyLightbox*/ },
   methods: {
     showImg(index) {
       this.lightbox.index = index;
@@ -141,6 +147,9 @@ export default {
     },
     handleHide() {
       this.lightbox.visible = false;
+    },
+    getImageUrl(filename) {
+      return require(`@/assets/images/tool-logos/${filename}`);
     }
   },
   data: function() {
@@ -162,25 +171,35 @@ export default {
         }
       ],
       milestones: [
-        { done: true, text: "Mattermost" },
-        { done: false, text: "Gitlab deployed" },
-        { done: false, text: "Atlassian Jira deployed" },
+        {
+          done: true,
+          text: "Mattermost",
+          logo: "mattermost-logomark-blue.png"
+        },
+        {
+          done: false,
+          text: "Gitlab",
+          logo: "gitlab-icon-rgb.png"
+        },
         {
           done: false,
-          text: "Alpha ChatBot deployed",
-          details: ["Self Service registration"]
+          text: "Atlassian (Jira & Confluence)",
+          logo: "Atlassian-icon-blue-onecolor@2x.png"
         },
         {
           done: false,
-          text: "Minimal Integration Environment available"
+          text: "SonarQube",
+          logo: "sonarqube.jpg"
         },
-        { done: false, text: "Atlassian Confluence deployed" },
         {
           done: false,
-          text: "Technologies supported",
-          details: ["React", "Node.js", "Python", "Golang", "+6 more"]
+          text: "Fortify",
+          logo: "F_logo_modern_2018_02-blue.png"
         },
-        { done: false, text: "All Domain Common Environment ready!" }
+        { done: false, text: "Anchore", logo: "anchore-mark.png" },
+        { done: false, text: "Twistlock", logo: "icon_twistlock@2x.png" },
+        { done: false, text: "Cypress", logo: "cypress.png" },
+        { done: false, text: "Mission App Production Clusters" }
       ]
     };
   }
@@ -222,6 +241,15 @@ export default {
       }
     }
 
+    .img-container {
+      width: 24px;
+
+      .tool-logo {
+        max-width: 24px;
+        max-height: 24px;
+      }
+    }
+
     .text {
       font-weight: 600;
     }