From a5cd1b5c8625fcbacdc86c053cc7b08ff1644ab5 Mon Sep 17 00:00:00 2001
From: nelsonlaquet <nelsonlaquet@gmail.com>
Date: Tue, 3 Sep 2013 04:42:03 -0500
Subject: [PATCH] some visual things

---
 app/views/shared/_app_layout.blade.php           | 16 ++++++++--------
 .../scripts/app/directives/share-buttons.coffee  |  2 +-
 public/styles/content.less                       |  9 +++++++++
 public/styles/layout.less                        | 11 ++++++-----
 public/styles/player.less                        | 12 ++++++++----
 5 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/app/views/shared/_app_layout.blade.php b/app/views/shared/_app_layout.blade.php
index 1cab25e0..f69d8609 100644
--- a/app/views/shared/_app_layout.blade.php
+++ b/app/views/shared/_app_layout.blade.php
@@ -45,24 +45,24 @@
 	<div class="site-body">
 		<ul class="sidebar" ng-controller="sidebar">
 			@if (Auth::check())
-				<li ng-class="{selected: stateIncludes('home')}"><a href="/">Dashboard <i class="icon-home"></i></a></li>
+				<li ng-class="{selected: stateIncludes('home')}"><a href="/">Dashboard</a></li>
 			@else
-				<li ng-class="{selected: stateIncludes('home')}"><a href="/">Home <i class="icon-home"></i></a></li>
+				<li ng-class="{selected: stateIncludes('home')}"><a href="/">Home</a></li>
 			@endif
 			<li ng-class="{selected: (stateIncludes('content') && !isPinnedPlaylistSelected)}">
-				<a href="/tracks">Discover <i class="icon-music"></i></a>
+				<a href="/tracks">Discover</a>
 			</li>
 
 			@if (Auth::check())
-				<li ng-class="{selected: stateIncludes('favourites')}"><a href="/account/favourites/tracks">Favourites <i class="icon-star"></i></a></li>
-				<li ng-class="{selected: stateIncludes('account')}"><a href="/account/tracks">Account <i class="icon-user"></i></a></li>
+				<li ng-class="{selected: stateIncludes('favourites')}"><a href="/account/favourites/tracks">Favourites</a></li>
+				<li ng-class="{selected: stateIncludes('account')}"><a href="/account/tracks">Account</a></li>
 			@endif
 
-			<li ng-class="{selected: isActive('/about')}"><a href="/about">About <i class="icon-info"></i></a></li>
+			<li ng-class="{selected: isActive('/about')}"><a href="/about">About</a></li>
 
 			@if (Auth::check())
 				<li class="uploader" ng-class="{selected: stateIncludes('uploader')}">
-					<a href="/account/uploader">Upload Music <i class="icon-upload-alt"></i></a>
+					<a href="/account/uploader">Upload Music</a>
 				</li>
 				<li>
 					<h3>
@@ -75,7 +75,7 @@
 					<a href="{{Helpers::angular('playlist.url')}}" ng-bind="playlist.title"></a>
 				</li>
 			@else
-			<li><a href="/login" target="_self">Login <i class="icon-user"></i></a></li>
+			<li><a href="/login" target="_self">Login</a></li>
 			@endif
 		</ul>
 		<ui-view class="site-content">
diff --git a/public/scripts/app/directives/share-buttons.coffee b/public/scripts/app/directives/share-buttons.coffee
index 43958f07..9a756ff0 100644
--- a/public/scripts/app/directives/share-buttons.coffee
+++ b/public/scripts/app/directives/share-buttons.coffee
@@ -2,5 +2,5 @@ angular.module('ponyfm').directive 'pfmShareButtons', () ->
 	(scope, element) ->
 		window.setTimeout((->
 			Tumblr.activate_share_on_tumblr_buttons()
-			FB.XFBML.parse()
+			FB.XFBML.parse(null, -> element.addClass('loaded'))
 		), 0)
\ No newline at end of file
diff --git a/public/styles/content.less b/public/styles/content.less
index ec387d00..b48b8d67 100644
--- a/public/styles/content.less
+++ b/public/styles/content.less
@@ -145,7 +145,16 @@
   }
 
   .share-buttons {
+	.transition(opacity 250ms ease-out);
 	margin-top: 5px;
+	opacity: 0;
+	overflow: hidden;
+	height: 28px;
+
+	&.loaded {
+	  opacity: 1;
+	  overflow: visible;
+	}
 
 	.facebook, .twitter {
 	  margin-top: 3px;
diff --git a/public/styles/layout.less b/public/styles/layout.less
index 9e640ec4..9c3ef1d2 100644
--- a/public/styles/layout.less
+++ b/public/styles/layout.less
@@ -19,7 +19,7 @@ header {
 	width: (@pfm-sidebar-size - 25);
 	height: 64px;
 	line-height: 52px;
-	background: @pfm-purple;
+	background: #84528A;
 	color: #fff;
 	font-size: 24pt;
 	padding-left: 25px;
@@ -29,7 +29,7 @@ header {
 	font-family: 'Josefin Sans', sans-serif;
 
 	&:hover {
-	  background: darken(@pfm-purple, 25%);
+	  background: darken(#84528A, 25%);
 	  color: #fff;
 	  text-decoration: none;
 	}
@@ -83,13 +83,14 @@ header {
 .now-playing {
   margin-left: @pfm-sidebar-size;
   height: 64px;
-  background: #eee;
+  background: #fff;
   position: relative;
   z-index: 500;
+  border-bottom: 1px solid #bcbcbc;
 }
 
 .sidebar {
-  background: @pfm-light-grey;
+  background: #515151;
   width: @pfm-sidebar-size;
   height: 100%;
   float: left;
@@ -119,7 +120,7 @@ header {
 	  margin: 0px;
 	  font-size: 10pt;
 	  color: #eee;
-	  background: darken(@pfm-light-grey, 10%);
+	  background: darken(#515151, 5%);
 	  line-height: normal;
 
 	  a {
diff --git a/public/styles/player.less b/public/styles/player.less
index 46b344d9..566776e4 100644
--- a/public/styles/player.less
+++ b/public/styles/player.less
@@ -19,13 +19,13 @@ body.is-logged {
 	padding: 1px;
 
 	img {
-	  .img-polaroid();
 	  .box-shadow(none);
 
 	  display: block;
 	  width: 40px;
 	  height: 40px;
-	  padding: 1px;
+	  padding: 0px;
+	  border: 1px solid #bcbcbc;
 	}
 
 	.loader {
@@ -77,15 +77,17 @@ body.is-logged {
   }
 
   .transport {
+	.border-radius(4px);
+
 	background: #aaa;
-	height: 8px;
+	height: 5px;
 	position: relative;
 	cursor: pointer;
 	margin-top: 4px;
 
 	.bar {
 	  z-index: 500;
-	  background: @pfm-purple;
+	  background: #84528A;
 	}
 
 	.loader-bar {
@@ -94,6 +96,8 @@ body.is-logged {
 	}
 
 	.bar, .loader-bar {
+	  .border-radius(4px);
+
 	  position: absolute;
 	  top: 0px;
 	  left: 0px;