Updated nav and fixed cross origin bug

This commit is contained in:
Josef Citrine 2016-07-17 02:26:38 +01:00
parent b98a776db7
commit 1edff69571
4 changed files with 25 additions and 20 deletions

View file

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

View file

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

View file

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

View file

@ -44,11 +44,7 @@
<header> <header>
<div class="top-bar"> <div class="top-bar">
<div class="burger-wrapper" ng-click="menuToggle()"> <div class="burger-wrapper" ng-click="menuToggle()">
<div class="burger"> <i class="material-icons">menu</i>
<div class="bun-top"></div>
<div class="meat"></div>
<div class="bun-bottom"></div>
</div>
</div> </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> <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> <pfm-search></pfm-search>