Design changes #3

chewtoys · Apr 18, 2019 · ae303eb · ae303eb
1 parent 92aa850
commit ae303eb
Show file tree

Hide file tree

Showing 27 changed files with 246 additions and 187 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/package.json b/package.json
@@ -11,6 +11,8 @@
     "gh-pages": "cross-env NODE_ENV=production PUBLIC_PATH=bruga-music webpack -p --progress --hide-modules"
   },
   "dependencies": {
+    "core-js": "^3.0.1",
+    "@babel/runtime-corejs3": "^7.4.3",
     "vue": "^2.6.10",
     "vue-router": "^3.0.3",
     "vuex": "^3.1.0",
@@ -34,7 +36,7 @@
     "@babel/cli": "^7.4.3",
     "@babel/core": "^7.4.3",
     "@babel/preset-env": "^7.4.3",
-    "@babel/polyfill": "^7.4.3",
+    "@babel/plugin-transform-runtime": "^7.4.3",
     "babel-preset-minify": "^0.5.0",
     "less": "^3.9.0",
     "cross-env": "^5.2.0",
@@ -46,8 +48,8 @@
     "vue-template-compiler": "^2.6.10",
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.6.0",
-    "html-webpack-include-assets-plugin": "^1.0.7",
     "remote-file-webpack-plugin": "^1.0.2",
+    "html-webpack-include-assets-plugin": "^1.0.10",
     "webpack": "^4.29.6",
     "webpack-dev-server": "^3.3.1",
     "webpack-cli": "^3.3.0",

diff --git a/src/App.vue b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <Header />
-    <main class="main">
+    <main class="main loading-scale">
       <transition :name="transitionName" :mode="transitionMode">
         <keep-alive :max="5">
           <router-view />

diff --git a/src/api/lastfm/adapt.js b/src/api/lastfm/adapt.js
@@ -5,11 +5,11 @@ const findImage = (imageArray, size) => {
   return selected['#text'];
 };
 
-const getNameFromArtist = (track) => {
-  if (typeof track.artist === 'string') {
-    return track.artist;
+const getNameFromArtist = (artist) => {
+  if (typeof artist === 'string') {
+    return artist;
   }
-  return track.artist.name;
+  return artist.name;
 };
 
 /* Adapt funcs */
@@ -57,7 +57,7 @@ const artistDetail = (artist) => {
 const albumsArray = (albums) => {
   return albums.map(album => ({
     name: album.name,
-    artist: album.artist.name,
+    artist: getNameFromArtist(album.artist),
     image: findImage(album.image, 'large')
   }));
 };
@@ -93,7 +93,7 @@ const albumDetail = (album) => {
 const tracksArray = (tracks, image) => {
   return tracks.map(track => ({
     mbid: track.mbid,
-    artist: getNameFromArtist(track),
+    artist: getNameFromArtist(track.artist),
     name: track.name,
     image: image || findImage(track.image, 'medium')
   }));

diff --git a/src/api/youtube/widget.js b/src/api/youtube/widget.js
@@ -7,7 +7,7 @@
 /* Own Player Loader */
 const youtubeApiPromise = new Promise((resolve, reject) => {
   window.onYouTubeIframeAPIReady = function () {
-    var player = new window.YT.Player('ytPlayer', {
+    const player = new window.YT.Player('ytPlayer', {
       // videoId: 'M7lc1UVf-VE',
       host: 'https://www.youtube.com',
       height: '360',
@@ -61,7 +61,9 @@ const getCurrentNonce = () => {
 const loadScript = (attributes) => {
   let newScript = document.createElement('script');
   for (let attribute in attributes) {
-    if (attributes[attribute]) newScript[attribute] = attributes[attribute];
+    if (attributes[attribute]) {
+      newScript[attribute] = attributes[attribute];
+    }
   }
 
   let firstScript = document.getElementsByTagName('script')[0];
@@ -73,25 +75,29 @@ window.YT = window.YT || { loading: 0, loaded: 0 };
 window.YTConfig = window.YTConfig || { 'host': 'https://www.youtube.com' };
 
 const loadYouTubeWidgetPlayer = () => {
-  let asyncFunctionality = [ () => { window.YT.Loaded = 1; } ];
-  window.YT.ready = deferExecution(() => window.YT.Loaded, asyncFunctionality);
+  let asyncFunctionality = [ () => { window.YT.loaded = 1; } ];
+  window.YT.ready = deferExecution(() => window.YT.loaded, asyncFunctionality);
   window.onYTReady = executeFunctions(asyncFunctionality);
 
   window.YT.setConfig = createConfigurator(window.YTConfig);
 
   loadScript({
     type: 'text/javascript',
     id: 'www-widgetapi-script',
-    src: 'https://s.ytimg.com/yts/jsbin/www-widgetapi-vflkA4wlR/www-widgetapi.js',
+    src: 'https://s.ytimg.com/yts/jsbin/www-widgetapi-vflVx0w83/www-widgetapi.js',
     async: true,
     nonce: getCurrentNonce()
   });
 };
 
-if (!window.YT.loading) {
-  window.YT.loading = 1;
-  loadYouTubeWidgetPlayer();
-}
+const initYouTubeAPI = () => {
+  if (!window.YT.loading) {
+    window.YT.loading = 1;
+    loadYouTubeWidgetPlayer();
+  }
+};
+
+initYouTubeAPI();
 
 // Exports
 export default youtubeApiPromise;
diff --git a/src/assets/styles/colors.less b/src/assets/styles/colors.less
@@ -2,21 +2,25 @@
 @main-dark-color: darken(@main-color, 20%);
 @main-light-color: lighten(@main-color, 25%);
 
-@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.25);
-@color-shadow-dark: rgba(0, 0, 0, 0.40);
-@color-background: #f8f9fa;
-@color-background-dark: #ccc2;
+@color-header-background: #191a28;
+@color-card-background: #2a2a2e;
+@color-card-transparent: fade(@color-header-background, 32%);
+@color-background-transparent: #ccc2;
 
-@color-gray: #ccc;
+@color-letter: #fff;
+@color-light-letter: #eee;
+
+@color-gray: #495057;
 @color-light-gray: lighten(@color-gray, 20%);
+@color-lighter-gray: lighten(@color-gray, 40%);
 @color-dark-gray: darken(@color-gray, 40%);
 
 @color-music: #1565c0;
 @color-white: #fff;
-@color-red: #e53935;
+@color-red: #c83430;
 @color-heart: #d90000;
 
+@color-shadow-light: rgba(0, 0, 0, 0.10);
+@color-shadow: rgba(0, 0, 0, 0.20);
 @default-shadow: 0 0 1/4rem 1/8rem @color-shadow;
+@background-shadow: 0 1/4rem 1/8rem 0 @color-shadow;
diff --git a/src/assets/styles/details.less b/src/assets/styles/details.less
@@ -7,7 +7,7 @@
   width: 80%;
   margin: 25px 10%;
   padding: 25px 5%;
-  background-color: #fff;
+  background-color: @color-card-background;
   border-radius: 4px;
   box-shadow: @default-shadow;
 
@@ -21,7 +21,11 @@
   &__big {
     width: 96%;
     margin: 25px 2%;
-    padding: 2%;
+    padding: 25px;
+  }
+
+  &__transparent {
+    background-color: @color-card-transparent;
   }
 }
 
@@ -39,7 +43,6 @@
     border-radius: 50%;
     cursor: inherit;
     float: left;
-    background-color: #ccc;
     box-sizing: border-box;
   }
 
@@ -165,7 +168,7 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    justify-content: space-evenly;
+    justify-content: space-around;
     max-width: 100%;
     padding-left: 0;
 

diff --git a/src/assets/styles/loading.less b/src/assets/styles/loading.less
@@ -0,0 +1,23 @@
+.loading-translate {
+  transition: transform .55s ease-in-out;
+  transform: none;
+  transform-origin: top center;
+}
+
+.loading-scale {
+  transition: transform .55s ease-in-out, opacity .55s ease-in-out;
+  opacity: 1;
+  transform: none;
+  transform-origin: bottom center;
+}
+
+:root:not(.loading):not(.loaded) {
+  .loading-translate {
+    transform: translate3d(0, -80px, 0);
+  }
+
+  .loading-scale {
+    opacity: 0.25;
+    transform: scale3d(0.95, 0.95, 1);
+  }
+}
diff --git a/src/assets/styles/main.less b/src/assets/styles/main.less
@@ -10,14 +10,12 @@
 body {
   padding: 0;
   margin: 0;
-  color: @color-letter;
-  background-color: @color-background;
 }
 .main {
   font-family: 'Roboto', 'Avenir', Helvetica, Arial, sans-serif;
   text-align: center;
   .fontFixes();
-  color: #2c3e50;
+  color: @color-white;
   margin-top: 68px;
   padding-top: 30px;
   padding-bottom: 100px;
@@ -37,18 +35,9 @@ li {
   margin: 0 10px;
 }
 a {
-  color: @main-color;
+  color: @color-white;
   text-decoration: none;
 }
-img {
-  cursor: pointer;
-  display: inline-block;
-  transition: all .3s ease-in-out;
-
-  &:hover {
-    transform: scale(1.1);
-  }
-}
 
 .footer {
   font-family: 'Open Sans', sans-serif;
@@ -63,3 +52,4 @@ img {
 }
 
 @import (less) "./details.less";
+@import (less) "./loading.less";
diff --git a/src/components/Album.vue b/src/components/Album.vue
@@ -1,8 +1,10 @@
 <template>
-  <router-link :to="{ name: 'Album', params: { name: album.artist, album: album.name } }" :class="'album'">
-    <h2 class="album-name">{{ title }}</h2>
-    <img :src="album.image" class="album-image">
-  </router-link>
+  <component :is="tagName" class="album-wrapper" :class="[extraClass]">
+    <router-link :to="{ name: 'Album', params: { name: album.artist, album: album.name } }" :class="'album'">
+      <img :src="album.image" class="album-image">
+      <h2 class="album-name">{{ title }}</h2>
+    </router-link>
+  </component>
 </template>
 
 <script>
@@ -16,6 +18,14 @@ export default {
     ignoreArtist: {
       type: Boolean,
       default: false
+    },
+    tagName: {
+      type: String,
+      default: 'li'
+    },
+    extraClass: {
+      type: String,
+      default: undefined
     }
   },
   computed: {
@@ -27,40 +37,50 @@ export default {
 </script>
 
 <style lang="less">
-  .album-list {
-    text-align: center;
-  }
+@import (reference, less) "../assets/styles/colors.less";
+
+@album-width: 180px;
+@image-size: 156px;
+@border-radius: 4px;
+
+.album-wrapper {
+  margin: 12px;
+}
 
-  .album {
-    width: 200px;
-    padding: 5px;
-    margin: 10px 0 5px 0;
+.album {
+  width: @album-width;
+  padding: 5px;
+  margin: 10px 0 5px 0;
+  display: inline-block;
+  box-sizing: border-box;
+  text-align: center;
+  transition: transform 0.3s ease-in-out;
+  overflow: hidden;
+
+  .album-image {
     display: inline-block;
-    box-sizing: border-box;
-    background-color: #ccc0;
-    transition: all 0.3s ease-in-out;
+    width: @image-size;
+    height: @image-size;
+    margin: 0 auto;
+    border-radius: @border-radius;
+    object-fit: cover;
 
-    .album-name {
-      display: block;
-      text-align: center;
-      width: 100%;
-      font-size: 20px;
-      max-height: 50px;
-      overflow: hidden;
+    &[src=""] {
+      background-color: @color-background-transparent;
     }
+  }
 
-    .album-image {
-      display: inline-block;
-      border-radius: 4px;
-      width: 156px;
-      height: 156px;
-      margin: 0 22px;
-      background-color: #ccc;
-      object-fit: cover;
-    }
+  .album-name {
+    display: block;
+    width: @image-size;
+    font-size: 16px;
+    max-height: 40px;
+    overflow: hidden;
+    margin: 0 auto;
+  }
 
-    &:hover {
-      background-color: #ccc2;
-    }
+  &:hover {
+    transform: scale3d(1.05, 1.05, 1);
   }
+}
 </style>