Updated nav and fixed cross origin bug

resources/assets/scripts/app/controllers/artist.coffee

@@ -30,6 +30,8 @@ module.exports = angular.module('ponyfm').controller "artist", [
 
                     tempImg = document.createElement('img')
                     tempImg.setAttribute 'src', artistResponse.artist.avatars.small
+                    tempImg.setAttribute 'crossOrigin', ''
+                    tempImg.crossOrigin = 'Anonymous'
                     tempImg.addEventListener 'load', ->
                         colorThief = new ColorThief();
                         palette = colorThief.getPalette(tempImg, 2)

resources/assets/styles/content.less

@@ -644,7 +644,7 @@ html {
   top: 64px;
   right: -410px;
   width: 400px;
-  height: ~"calc(100% - 64px)";
+  height: ~"calc(100% - 128px)";
   z-index: 500;
   background: #eee;
   box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

resources/assets/styles/mobile.less

@@ -42,6 +42,13 @@
 
     .burger-wrapper {
       display: block;
+      top: 15px;
+      left: 15px;
+
+      i {
+        font-size: 32px;
+        color: #fff;
+      }
     }
 
     .logo {
@@ -101,7 +108,11 @@
     top: 0;
     left: 60px;
     color: #fff;
-    padding: 16px 7px;
+    padding: 13px 7px 18px;
+
+    i {
+      font-size: 30px;
+    }
 
     &:hover, &:focus, &:active {
       color: #fff;
@@ -115,6 +126,7 @@
   }
 
   input.search-input {
+    background: lighten(@pfm-logo-purple, 10%);
     border-radius: 0;
   }
 
@@ -335,9 +347,7 @@
 
   .notification-pullout {
     left: 0;
-    top: 108px;
     width: 100%;
-    height: ~"calc(100% - 172px)";
     transform: translateY(-120%) translateZ(0);
 
     &.active {
@@ -352,13 +362,13 @@
   .notification-menu {
     position: fixed;
     top: 0;
-    right: 53px !important;
+    right: 60px !important;
     font-size: 22px;
     margin-right: 0 !important;
-    margin-top: 16px !important;
+    margin-top: 12px !important;
 
     a {
-      padding: 17px 7px;
+      padding: 13px 7px 22px;
     }
 
     a, a:active, a:hover, a:focus {
@@ -447,14 +457,10 @@
     display: block;
   }
 
-  .burger-wrapper {
-    top: 23px;
-    left: 15px;
-  }
-
   .notification-menu {
     top: 0;
-    right: 54px;
+    right: 55px !important;
+    margin-top: 14px !important;
   }
 
   .top-bar .logo {
@@ -471,11 +477,12 @@
   .search-button {
     right: 90px;
     left: initial;
+    padding: 15px 7px !important;
   }
 
   .top-bar .burger-wrapper {
-    top: 22px;
-    left: 16px;
+    top: 17px;
+    left: 11px;
   }
 
   .albums-listing, .playlists-listing, .users-listing {

resources/views/shared/_app_layout.blade.php

@@ -44,11 +44,7 @@
     <header>
         <div class="top-bar">
             <div class="burger-wrapper" ng-click="menuToggle()">
-                <div class="burger">
-                    <div class="bun-top"></div>
-                    <div class="meat"></div>
-                    <div class="bun-bottom"></div>
-                </div>
+                <i class="material-icons">menu</i>
             </div>
             <a href="/" class="logo"><img class="default-logo" src="/images/ponyfm-logo-white.svg"><img class="small-logo" src="/images/ponyfm-logo-white-nodisc.svg"></a>
             <pfm-search></pfm-search>