#121 updates

src/views/ADCE.vue

@@ -45,13 +45,13 @@
 
       <div class="row architecture-container">
         <div
-          class="col-xs-12 my-4 mx-auto image-wrapper"
+          class="col-xl-6 my-4 mx-auto image-wrapper d-flex flex-column"
           v-for="(src, index) in lightbox.imgs"
           :key="index"
           @click="() => showImg(index)"
         >
-          <img class="img-fluid" :src="src" alt="" />
-          <div>(click to enlarge)</div>
+          <img class="img-fluid my-auto" :src="src" alt="" />
+          <div class="align-self-end mx-auto mt-auto">(click to enlarge)</div>
         </div>
 
         <vue-easy-lightbox
@@ -95,7 +95,7 @@
               :key="milestone.date"
               class="milestone pl-4 mb-5 position-relative"
             >
-              <div class="bullet"></div>
+              <div class="bullet" :class="{ done: milestone.done }"></div>
               <div class="date font-weight-bold text-uppercase mb-2">
                 {{ milestone.date }}
               </div>
@@ -162,24 +162,25 @@ export default {
         }
       ],
       milestones: [
-        { date: "22 Jun 2020", text: "Gitlab deployed" },
-        { date: "25 Jun 2020", text: "Atlassian Jira deployed" },
+        { done: true, text: "Mattermost" },
+        { done: false, text: "Gitlab deployed" },
+        { done: false, text: "Atlassian Jira deployed" },
         {
-          date: "29 Jun 2020",
+          done: false,
           text: "Alpha ChatBot deployed",
           details: ["Self Service registration"]
         },
         {
-          date: "03 Jul 2020",
+          done: false,
           text: "Minimal Integration Environment available"
         },
-        { date: "06 Jul 2020", text: "Atlassian Confluence deployed" },
+        { done: false, text: "Atlassian Confluence deployed" },
         {
-          date: "10 Jul 2020",
+          done: false,
           text: "Technologies supported",
           details: ["React", "Node.js", "Python", "Golang", "+6 more"]
         },
-        { date: "13 Jul 2020", text: "All Domain Common Environment ready!" }
+        { done: false, text: "All Domain Common Environment ready!" }
       ]
     };
   }
@@ -203,11 +204,11 @@ export default {
     background-position: left;
     background-size: 3px 10px;
     background-repeat: repeat-y;
-    margin-top: 4px;
+    margin-top: 12px;
 
     .bullet {
       border: 1px solid black;
-      background-color: $p1-light-green;
+      background-color: #ffffff;
       border-radius: 50%;
       display: inline-block;
       position: absolute;
@@ -215,6 +216,10 @@ export default {
       top: 3px;
       height: 17px;
       width: 17px;
+
+      &.done {
+        background-color: $p1-light-green;
+      }
     }
 
     .text {
@@ -226,7 +231,7 @@ export default {
       margin-bottom: 0 !important;
     }
     .milestone:first-child {
-      margin-top: -4px;
+      margin-top: -12px;
     }
   }
 
@@ -237,9 +242,6 @@ export default {
   .architecture-container {
     .image-wrapper {
       cursor: pointer;
-      img {
-        max-height: 400px;
-      }
     }
   }
   // lightbox stuff