From 1edff695712d55c14dfbc6b456c7e5c7d3402e43 Mon Sep 17 00:00:00 2001
From: Josef Citrine <josefcitrine@googlemail.com>
Date: Sun, 17 Jul 2016 02:26:38 +0100
Subject: [PATCH] Updated nav and fixed cross origin bug

---
 .../scripts/app/controllers/artist.coffee     |  2 ++
 resources/assets/styles/content.less          |  2 +-
 resources/assets/styles/mobile.less           | 35 +++++++++++--------
 resources/views/shared/_app_layout.blade.php  |  6 +---
 4 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/resources/assets/scripts/app/controllers/artist.coffee b/resources/assets/scripts/app/controllers/artist.coffee
index 517b5555..eb4332f5 100644
--- a/resources/assets/scripts/app/controllers/artist.coffee
+++ b/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)
diff --git a/resources/assets/styles/content.less b/resources/assets/styles/content.less
index cae210e4..34447b75 100644
--- a/resources/assets/styles/content.less
+++ b/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);
diff --git a/resources/assets/styles/mobile.less b/resources/assets/styles/mobile.less
index bc59cf4e..3b419964 100644
--- a/resources/assets/styles/mobile.less
+++ b/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 {
diff --git a/resources/views/shared/_app_layout.blade.php b/resources/views/shared/_app_layout.blade.php
index 3f871271..a83777ff 100644
--- a/resources/views/shared/_app_layout.blade.php
+++ b/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>