<template>
   <the-header @start-sound-test="startSoundTest"></the-header>
   <the-main ref="theMain"></the-main>
</template>

<script>
import TheHeader from "./components/layout/TheHeader.vue";
import TheMain from "./components/layout/TheMain.vue";

export default {
   components: {
      TheHeader,
      TheMain,
   },
   data() {
      return {
         screenWidth: 1000,
      };
   },
   computed: {
      displayWhenDesktop() {
         if (this.screenWidth > 600) {
            return true;
         } else {
            return false;
         }
      },
   },
   methods: {
      startSoundTest() {
         this.$refs.theMain.startSoundTest();
      },
   },
   mounted() {
      this.screenWidth = window.innerWidth;
      window.addEventListener("resize", () => (this.screenWidth = window.innerWidth));
   },
};
</script>

<style>
* {
   margin: 0;
   padding: 0;
   font-family: Helvetica;
}

button {
   background: rgb(54, 54, 54);
   border-radius: 10px;
   border-color: #ff9c00;
   color: #ff9c00;
   font-size: 1em;
   padding: 10px;
   outline: none;
}

.app {
   display: flex;
   height: 100vh;
}

body {
   background-color: #555;
}

/* Global modal stuff */

.modalAni-enter-from,
.modalAni-leave-to {
   opacity: 0;
   transform: translateY(-20px);
}
.modalAni-enter-to,
.modalAni-leave-from {
   opacity: 1;
}
.modalAni-enter-active,
.modalAni-leave-active {
   transition: all 0.25s ease-out;
}

.modal {
   position: fixed; /* Stay in place */
   z-index: 10; /* Sit on top */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: hidden;
   background-color: rgb(0, 0, 0); /* Fallback color */
   background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */
}
.modalContainer {
   background-color: #eeeeee;
   margin: 10% auto; /* 15% from the top and centered */
   border: 1px solid #888;
   width: 50%; /* Could be more or less, depending on screen size */
}
.modalWrapper {
   display: flex;
   position: relative;
   flex-wrap: wrap;
   padding: 10px 40px;
}

.modalWrapper:last-child {
   margin-bottom: 50px;
}

.closeModalImg {
   position: absolute;
   right: 8px;
   top: 8px;
   cursor: pointer;
   opacity: 70%;
}
.modal h1 {
   color: black;
   margin-left: auto;
   margin-right: auto;
   padding-top: 10px;
   font-size: 1.9rem;
}
.modal p {
   color: black;
}

@media only screen and (max-width: 1000px) {
   .modalContainer {
      margin: 10% auto; /* 15% from the top and centered */
      width: 93%; /* Could be more or less, depending on screen size */
   }
   .modalWrapper {
      padding: 10px 10px;
   }

   .modalWrapper:last-child {
      margin-bottom: 10px;
   }

   .modal h1 {
      padding-top: 10px;
      font-size: 1.6rem;
   }
}
</style>
