ADCE.vue

<template>
  <div class="adce">
    <PageHeader
      title="ABMS-ADCE"
      subtext="Advanced Battle Management System - All Domain Common Environment"
      description="The environment and services you need to develop and deploy your software applications"
    />
    <div class="container">
      <div class="row text-left">
        <div class="col-lg-5">
          <h2 class="mx-0">ABMS-ADCE</h2>
          <p>
            ABMS-ADCE will help you build a strong foundation so you can focus
            on developing and deploying your applications. Our continuous
            authority to operate (CATO) pipeline will ensure your application is
            safe, secure, and approved for deployment.
          </p>
          <p>
            We move fast, but we move smart. The ADCE team will be measuring
            twice and cutting once. We believe the sooner we can get you squared
            away on our level of standards (which is high, why else would we
            invite you to join our elite team of products and services), the
            sooner you can serve the users and warfighters within DoD that need
            your product or solution yesterday.
          </p>
        </div>
        <div
          class="col-lg-5 offset-lg-2 d-flex flex-column justify-content-center"
        >
          <img
            class="img-fluid shadow"
            src="@/assets/images/ADCE-bg-large.jpg"
          />
        </div>
      </div>
      <div class="my-5">
        <h2>WHERE WE ARE TODAY</h2>
        <p class="text-center">
          We are working hard, but don't quite have all of our capabilities
          operational.
          <br />
          Check back for updates!
        </p>
      </div>

      <!-- <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"
          :key="index"
          @click="() => showImg(index)"
        >
          <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
          escDisabled
          moveDisabled
          :visible="lightbox.visible"
          :imgs="lightbox.imgs"
          :index="lightbox.index"
          @hide="handleHide"
        ></vue-easy-lightbox>
      </div> -->

      <div class="row">
        <div
          class="d-flex flex-column justify-content-around col-lg-6 text-left"
        >
          <h2 class="mx-0 my-4">
            We believe in transparency!
            <br />
            Our goal is to have the entire environment deployed by July 13th!
          </h2>
          <div class="my-4 pr-5">
            <img class="mm-logo mb-2" src="@/assets/images/Logo_MM.png" />
            <p class="pr-5">
              A solution for team collaboration and chatting.<br />
              Take full advantage of this capability by signing up for a Single
              Sign On (SSO) account.
            </p>
            <a href="https://login.dsop.io" target="_blank">
              <button class="btn btn-primary mt-3">
                GET SSO ACCOUNT
              </button>
            </a>
          </div>
        </div>
        <div class="d-flex flex-column col-lg-5 offset-lg-1 my-4">
          <h4 class="mb-4">ABMS-ADCE MILESTONES</h4>
          <div class="milestones-wrapper text-left">
            <div
              v-for="milestone in milestones"
              :key="milestone.text"
              class="milestone pl-4 mb-5 position-relative"
            >
              <div class="bullet" :class="{ done: milestone.done }"></div>
              <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 v-if="milestone.details">
                <div
                  v-for="detail in milestone.details"
                  :key="detail"
                  class="milestone-detail font-italic"
                >
                  {{ detail }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <BottomWave class="release-notes mt-5">
      <h2 class="text-light">RELEASE NOTES</h2>
      <div
        v-for="note in releaseNotes"
        :key="note.date"
        class="note text-light"
      >
        {{ note.date }} - {{ note.text }}
      </div>
    </BottomWave>
  </div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
import BottomWave from "@/components/BottomWave";
// import VueEasyLightbox from "vue-easy-lightbox";

export default {
  name: "ADCE",
  components: { PageHeader, BottomWave /*VueEasyLightbox*/ },
  methods: {
    showImg(index) {
      this.lightbox.index = index;
      this.lightbox.visible = true;
    },
    handleHide() {
      this.lightbox.visible = false;
    },
    getImageUrl(filename) {
      return require(`@/assets/images/tool-logos/${filename}`);
    }
  },
  data: function() {
    return {
      // lightbox state
      lightbox: {
        visible: false,
        index: 0, // default: 0
        imgs: [
          require("@/assets/images/CI_CD_infographic_PNG_8_web.png"),
          require("@/assets/images/P1 - Tool Chain_revised.png")
        ]
      },

      releaseNotes: [
        {
          date: "01 Jun 2020",
          text: "Mattermost"
        }
      ],
      milestones: [
        {
          done: true,
          text: "Mattermost",
          logo: "mattermost-logomark-blue.png"
        },
        {
          done: false,
          text: "Gitlab",
          logo: "gitlab-icon-rgb.png"
        },
        {
          done: false,
          text: "Atlassian (Jira & Confluence)",
          logo: "Atlassian-icon-blue-onecolor@2x.png"
        },
        {
          done: false,
          text: "SonarQube",
          logo: "sonarqube.jpg"
        },
        {
          done: false,
          text: "Fortify",
          logo: "F_logo_modern_2018_02-blue.png"
        },
        { 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" }
      ]
    };
  }
};
</script>
<style lang="scss">
.adce-page {
  // hide the default nav
  #app #navbar-toggle-collapse,
  #app button.navbar-toggler {
    display: none !important;
  }
}

.adce {
  .mm-logo {
    width: 250px;
  }
  .milestones-wrapper {
    background-image: linear-gradient(black 33%, rgba(255, 255, 255, 0) 0%);
    background-position: left;
    background-size: 3px 10px;
    background-repeat: repeat-y;
    margin-top: 12px;

    .bullet {
      border: 1px solid black;
      background-color: #ffffff;
      border-radius: 50%;
      display: inline-block;
      position: absolute;
      left: -7px;
      top: 3px;
      height: 17px;
      width: 17px;

      &.done {
        background-color: $p1-light-green;
      }
    }

    .img-container {
      width: 24px;

      .tool-logo {
        max-width: 24px;
        max-height: 24px;
      }
    }

    .text {
      font-weight: 600;
    }

    .milestone:last-child {
      background-color: #ffffff;
      margin-bottom: 0 !important;
    }
    .milestone:first-child {
      margin-top: -12px;
    }
  }

  .release-notes {
    padding-bottom: 7rem;
  }

  .architecture-container {
    .image-wrapper {
      cursor: pointer;
    }
  }
  // lightbox stuff
  .vel-modal {
    .vel-img {
      background-color: #ffffff;
    }
    .vel-toolbar {
      .toobar-btn.toolbar-btn__rotate {
        display: none;
      }
    }
  }
}
</style>