From 92aa850eb44f5211c3df3e726bb66a47786310c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Brugarolas?= <brugarolas.92@gmail.com>
Date: Tue, 16 Apr 2019 00:57:31 +0200
Subject: [PATCH] Design changes #2

---
 src/assets/styles/colors.less             |  6 +-
 src/assets/styles/details.less            | 13 +++-
 src/components/Result.vue                 |  6 +-
 src/components/Search.vue                 |  6 +-
 src/components/common/Selector.vue        |  8 ++-
 src/index.html                            |  2 +-
 src/partials/loading.html                 | 79 ++++++++++++++++++-----
 src/partials/spinners/bouncing-balls.html | 42 +++++++++++-
 src/routes/AlbumDetail.vue                |  2 +-
 src/routes/ArtistDetail.vue               |  2 +-
 src/routes/Playlist.vue                   |  2 +-
 11 files changed, 130 insertions(+), 38 deletions(-)

diff --git a/src/assets/styles/colors.less b/src/assets/styles/colors.less
index 4caf694..3784249 100644
--- a/src/assets/styles/colors.less
+++ b/src/assets/styles/colors.less
@@ -5,8 +5,8 @@
 @color-letter: #495057;
 @color-light-letter: #6d7379; //opacity 0.80
 @color-lighter-letter: lighten(@color-light-letter, 20);
-@color-shadow: rgba(0, 0, 0, 0.05);
-@color-shadow-dark: rgba(0, 0, 0, 0.10);
+@color-shadow: rgba(0, 0, 0, 0.25);
+@color-shadow-dark: rgba(0, 0, 0, 0.40);
 @color-background: #f8f9fa;
 @color-background-dark: #ccc2;
 
@@ -18,3 +18,5 @@
 @color-white: #fff;
 @color-red: #e53935;
 @color-heart: #d90000;
+
+@default-shadow: 0 0 1/4rem 1/8rem @color-shadow;
diff --git a/src/assets/styles/details.less b/src/assets/styles/details.less
index 144c50d..4513b9c 100644
--- a/src/assets/styles/details.less
+++ b/src/assets/styles/details.less
@@ -9,14 +9,20 @@
   padding: 25px 5%;
   background-color: #fff;
   border-radius: 4px;
-  box-shadow: 0 0 1/4rem 1/8rem rgba(0, 0, 0, 0.05);
+  box-shadow: @default-shadow;
 
-  &.small {
+  &__small {
     width: 50%;
     margin-left: 25%;
     margin-right: 25%;
     padding: 1%;
   }
+
+  &__big {
+    width: 96%;
+    margin: 25px 2%;
+    padding: 2%;
+  }
 }
 
 .main-info {
@@ -134,6 +140,9 @@
 .margin-top-xl {
   margin-top: 40px;
 }
+.margin-top-xxl {
+  margin-top: 55px;
+}
 
 .float-box::after {
   content: '';
diff --git a/src/components/Result.vue b/src/components/Result.vue
index f49ca00..ca247b0 100644
--- a/src/components/Result.vue
+++ b/src/components/Result.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="results-wrapper">
+  <div class="card card__big margin-top-xxl">
     <Spinner v-if="loading" />
 
     <h2 v-if="showDefaultSearch" class="search-title default">Showing top {{ type }}s in <Countries @change="changeCountry" /></h2>
@@ -95,10 +95,6 @@ export default {
     line-height: 90%;
   }
 }
-.results-wrapper {
-  display: block;
-  position: relative;
-}
 .track-wrapper {
   display: block;
   margin: 0;
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 5268cca..73c2f03 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -1,5 +1,5 @@
 <template>
-  <form class="search-wrapper" @submit.prevent="onSubmit">
+  <form class="search-wrapper card" @submit.prevent="onSubmit">
     <InputText name="search" placeholder="Search tracks or artists…" @change="setSearch" @reset="reset" />
 
     <Selector extra-class="type-wrapper" :elements="types" :initial="startingType" @change="changeType" />
@@ -72,10 +72,8 @@ export default {
 @import (reference, less) "../assets/styles/colors.less";
 
 .search-wrapper {
-  display: block;
-  position: relative;
+  margin-top: 5px;
   padding: 10px 20px;
-  font-family: 'Roboto', 'Avenir', Helvetica, Arial, sans-serif;
 
   .type-wrapper {
     display: inline-block;
diff --git a/src/components/common/Selector.vue b/src/components/common/Selector.vue
index fcb1362..4513df1 100644
--- a/src/components/common/Selector.vue
+++ b/src/components/common/Selector.vue
@@ -51,13 +51,14 @@ export default {
   display: inline-block;
   cursor: pointer;
   background-color: @color-white;
+  border: 1px solid fade(@main-light-color, 20%);
   border-bottom: 2px solid @main-light-color;
   transition: all .3s ease-in-out;
   border-radius: 4px;
 
   .selector {
     display: inline-block;
-    padding: 4px 24px 5px 12px;
+    padding: 4px 24px 4px 12px;
     cursor: pointer;
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -73,8 +74,8 @@ export default {
   }
   .selector-icon {
     position: absolute;
-    font-size: 20px;
-    top: 4px;
+    font-size: 21px;
+    top: 5px;
     right: 8px;
     color: @main-light-color;
     transition: all .3s ease-in-out;
@@ -82,6 +83,7 @@ export default {
   }
 
   &:hover {
+    border-color: fade(@main-color, 20%);
     border-bottom-color: @main-color;
 
     .selector-icon {
diff --git a/src/index.html b/src/index.html
index 394eb7a..60ee4f6 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,7 +5,7 @@
     <title>Bruga Music</title>
   </head>
   <body>
-    <div id="loading" class="visible">${ require('./partials/loading.html') }</div>
+    <div id="background" class="visible">${ require('./partials/loading.html') }</div>
 
     <div id="app"></div>
   </body>
diff --git a/src/partials/loading.html b/src/partials/loading.html
index 288c586..ea7252e 100644
--- a/src/partials/loading.html
+++ b/src/partials/loading.html
@@ -1,8 +1,8 @@
 <style type="text/css">
-  :root {
+  :root:not(.loaded) {
     overflow: hidden;
   }
-  #loading {
+  #background {
     position: fixed;
     top: 0;
     left: 0;
@@ -11,11 +11,27 @@
     margin: 0;
     padding: 0;
     overflow: hidden;
-    z-index: 9;
+    z-index: 1;
+    transition: opacity .55s ease-in-out;
+    opacity: 1;
+  }
+  #background.pushed {
+    z-index: 0;
+    opacity: 0.9;
+  }
+  #app {
+    z-index: 1;
     transition: opacity .55s ease-in-out;
     opacity: 0;
   }
-  #loading.visible {
+  #app.visible {
+    opacity: 1;
+  }
+  #loader-spinner {
+    transition: opacity .55s ease-in-out;
+    opacity: 0;
+  }
+  #loader-spinner.visible {
     opacity: 1;
   }
   #svg-gradient {
@@ -58,31 +74,60 @@
   </g>
 </svg>
 
-<div id="loader-spinner">${ require('./spinners/bouncing-balls.html') }</div>
+<div id="loader-spinner" class="visible">${ require('./spinners/bouncing-balls.html') }</div>
 
 <script type="text/javascript">
 const reqAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.setTimeout;
 
-window.stopLoading = () => {
-  const loadingWrapper = document.getElementById('loading');
+window.addClassAnimationFrame = (element, clasz) => {
+  reqAnimationFrame(() => {
+    element.classList.add(clasz);
+  });
+};
 
-  if (!loadingWrapper) {
+window.stopSpinner = (spinner) => {
+  if (window.removeSpinner) {
+    return window.removeSpinner(spinner);
+  }
+
+  reqAnimationFrame(() => {
+    spinner.classList.remove('visible');
+  });
+  return Promise.resolve();
+};
+
+window.transformLoadingIntoBackground = () => {
+  const root = document.querySelector(':root');
+  if (root.classList.contains('loaded')) {
     return;
   }
 
-  const stopLoading = () => { loadingWrapper.remove(); };
-  const fadeLoading = () => {
-    loadingWrapper.className = undefined;
+  const spinner = document.getElementById('loader-spinner');
+  const background = document.getElementById('background');
+  const appWrapper = document.getElementById('app');
 
-    setTimeout(() => {
-      reqAnimationFrame(stopLoading);
-    }, 560);
+  const pushBackground = () => {
+    background.classList.add('pushed');
+    appWrapper.classList.add('visible');
+    root.classList.add('loading');
   };
 
-  reqAnimationFrame(fadeLoading);
+  const finishLoading = () => {
+    root.classList.add('loaded');
+    root.classList.remove('loading');
+    spinner.remove();
+  };
+
+  window.stopSpinner(spinner).then(() => {
+    reqAnimationFrame(pushBackground);
+
+    setTimeout(() => {
+      reqAnimationFrame(finishLoading);
+    }, 560);
+  });
 };
 
-window.stopLoadingWithDelay = (delay = 200) => {
-  setTimeout(window.stopLoading, delay);
+window.stopLoadingWithDelay = (delay = 100) => {
+  setTimeout(window.transformLoadingIntoBackground, delay);
 };
 </script>
diff --git a/src/partials/spinners/bouncing-balls.html b/src/partials/spinners/bouncing-balls.html
index 0e8bbf2..485289a 100644
--- a/src/partials/spinners/bouncing-balls.html
+++ b/src/partials/spinners/bouncing-balls.html
@@ -8,14 +8,18 @@
     font-size: 50px;
     text-align: center;
     color: #aaa;
+    opacity: 1;
     mix-blend-mode: soft-light;
-    transition: top 0.7s ease-in-out;
+    transition: top 0.7s ease-in-out, opacity 0.55s ease-in-out;
     font-family: Helvetica, Verdana, Arial, sans-serif;
     font-variant: small-caps;
     font-weight: 600;
     letter-spacing: 4px;
     text-shadow: 2px 2px 2px #2224;
   }
+  .loader-title.hidden {
+    opacity: 0;
+  }
   @media (max-width: 720px) {
     .loader-title {
       top: 6%;
@@ -61,6 +65,10 @@
     animation-delay: 0;
   }
 
+  .bouncing-balls .ball.hidden {
+    visibility: hidden;
+  }
+
   @-webkit-keyframes bounceDelay {
     0%, 80%, 100% {
       -webkit-transform: scale(0);
@@ -93,3 +101,35 @@
 </div>
 
 <div class="loader-title">Bruga Music</div>
+
+<script type="text/javascript">
+window.removeSpinner = (spinnerWrapper) => {
+  spinnerWrapper = spinnerWrapper || document.getElementById('loader-spinner');
+  const balls = spinnerWrapper.querySelectorAll('.ball');
+  const title = spinnerWrapper.querySelector('.loader-title');
+
+  let animatedBalls = balls.length;
+  let resolveTask;
+  const task = new Promise(function (resolve, reject) {
+    resolveTask = resolve;
+  });
+
+  const hideAnimationOnEnd = (animationIteration) => {
+    const element = animationIteration.target;
+    window.addClassAnimationFrame(element, 'hidden');
+    element.removeEventListener('animationiteration', hideAnimationOnEnd, false);
+
+    animatedBalls--;
+    if (animatedBalls <= 0) {
+      resolveTask();
+    }
+  };
+
+  balls.forEach(ball => {
+    ball.addEventListener('animationiteration', hideAnimationOnEnd, false);
+  });
+  window.addClassAnimationFrame(title, 'hidden');
+
+  return task;
+};
+</script>
diff --git a/src/routes/AlbumDetail.vue b/src/routes/AlbumDetail.vue
index 549bdfd..10c5e0b 100644
--- a/src/routes/AlbumDetail.vue
+++ b/src/routes/AlbumDetail.vue
@@ -96,7 +96,7 @@ export default {
         this.loading = false;
         this.initialized = true;
 
-        window.stopLoadingWithDelay(100);
+        window.stopLoadingWithDelay();
       });
     }
   }
diff --git a/src/routes/ArtistDetail.vue b/src/routes/ArtistDetail.vue
index 377e3ca..48b5546 100644
--- a/src/routes/ArtistDetail.vue
+++ b/src/routes/ArtistDetail.vue
@@ -98,7 +98,7 @@ export default {
         this.loading = false;
         this.initialized = true;
 
-        window.stopLoadingWithDelay(100);
+        window.stopLoadingWithDelay();
       });
     }
   }
diff --git a/src/routes/Playlist.vue b/src/routes/Playlist.vue
index 654f6f9..6c03db6 100644
--- a/src/routes/Playlist.vue
+++ b/src/routes/Playlist.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="card small">
+  <section class="card card__small">
     <CloseButton :click="close" />
     <h2 class="track-list-header"><AnimatedEllipsis :play="true" text="Playing" /></h2>