update splash rocket

src/InitialLoadingApp.vue

 <template>
   <v-app id="initial-loading-app">
     <div class="fade-container" :class="{ fade: fading }">
-      <v-img
-        contain
+      <img
         src="@/assets/images/logos/LB-Logo_Horizontal_White-PNG.png"
         class="logo"
+        alt="Launchboard"
       />
 
       <div
@@ -21,12 +21,7 @@
             <li></li>
             <li></li>
           </ul>
-          <div class="rocket-body">
-            <div class="body"></div>
-            <div class="fin fin-left"></div>
-            <div class="fin fin-right"></div>
-            <div class="window"></div>
-          </div>
+          <RocketLogo class="rocket-body" />
           <div class="exhaust-flame"></div>
           <ul class="exhaust-fumes">
             <li></li>
@@ -82,7 +77,11 @@
 </template>
 
 <script>
+import RocketLogo from "@/assets/images/logos/LB-rocket-logo.svg";
 export default {
+  components: {
+    RocketLogo
+  },
   data: () => ({
     launching: false,
     fading: false,
@@ -153,8 +152,9 @@ export default {
 
   .logo {
     width: 300px;
+    margin-top: 15px;
+    margin-bottom: 15px;
     align-self: center;
-    margin-top: -20rem;
   }
 
   .v-card {
@@ -166,7 +166,6 @@ export default {
   .rocket-container {
     position: relative;
     flex-grow: 1;
-    margin-top: -15rem;
 
     &.launch {
       .rocket {
@@ -196,77 +195,25 @@ export default {
 
     .rocket {
       position: absolute;
-      top: 20%;
-      width: 80px;
+      @media only screen and (min-height: 400px) {
+        top: 20%;
+      }
+      top: 0px;
       left: calc(50% - 40px);
       .rocket-body {
-        width: 80px;
-        left: calc(50% - 50px);
+        position: relative;
+        width: 220px;
+        left: calc(50% - 180px);
         transform: translate3d(0px, 0px, 0);
         animation: bounce 0.5s infinite;
-
-        .body {
-          background-color: $lightgrey;
-          height: 180px;
-          left: calc(50% - 50px);
-          border-top-right-radius: 100%;
-          border-top-left-radius: 100%;
-          border-bottom-left-radius: 50%;
-          border-bottom-right-radius: 50%;
-          border-top: 5px solid $white;
-        }
-        &:before {
-          content: "";
-          position: absolute;
-          left: calc(50% - 24px);
-          width: 48px;
-          height: 13px;
-          background-color: $darkgrey;
-          bottom: -13px;
-          border-bottom-right-radius: 60%;
-          border-bottom-left-radius: 60%;
-        }
-      }
-      .window {
-        position: absolute;
-        width: 40px;
-        height: 40px;
-        border-radius: 100%;
-        background-color: rgba(178, 213, 238, 0.5);
-        background-image: url("~@/assets/images/logos/yoda_head_unite_logo.png");
-        background-position-x: center;
-        background-position-y: 12px;
-        background-size: 130%;
-        left: calc(50% - 20px);
-        top: 40px;
-        border: 5px solid $midgrey;
-      }
-      .fin {
-        position: absolute;
-        z-index: -100;
-        height: 55px;
-        width: 50px;
-        background-color: $darkred;
-      }
-      .fin-left {
-        left: -30px;
-        top: calc(100% - 55px);
-        border-top-left-radius: 80%;
-        border-bottom-left-radius: 20%;
-      }
-      .fin-right {
-        right: -30px;
-        top: calc(100% - 55px);
-        border-top-right-radius: 80%;
-        border-bottom-right-radius: 20%;
       }
       .exhaust-flame {
         position: absolute;
-        bottom: -145px;
+        bottom: -100px;
         width: 28px;
         background: linear-gradient(to bottom, transparent 10%, $white 100%);
         height: 150px;
-        left: calc(50% - 14px);
+        left: calc(50% - 83px);
         animation: exhaust 0.2s infinite;
       }
       .exhaust-fumes li {
@@ -450,7 +397,7 @@ export default {
         transform: translate3d(0px, 0px, 0);
       }
       to {
-        transform: translate3d(0px, 70vh, 0) rotate(-90deg);
+        transform: translate3d(0px, 90vh, 0) rotate(-90deg);
       }
     }
 

src/main.js

@@ -31,13 +31,14 @@ const startTime = new Date();
 createLoadingApp();
 
 // fetch global data
+const minWaitTime = 1000;
 Promise.all([UserService.getUser(), UserPreferenceService.getUserPreferences()])
   .then(async results => {
-    // wait at least 1s so the splash screen doesn't disappear too fast
+    // wait at least minWaitTime so the splash screen doesn't disappear too fast
     const timeDiff = new Date() - startTime;
-    if (timeDiff < 1000) {
+    if (timeDiff < minWaitTime) {
       await new Promise(resolve => {
-        setTimeout(resolve, 1000 - timeDiff);
+        setTimeout(resolve, minWaitTime - timeDiff);
       });
     }
 

src/scss/custom.scss

@@ -382,4 +382,10 @@ body {
       flex: 1;
     }
   }
+
+  // fix for https://github.com/vuetifyjs/vuetify/issues/9130
+  .v-card__text,
+  .v-card__title {
+    word-break: normal;
+  }
 }