From ed16f571aa1fcc2a37878f88580d51c5407f4938 Mon Sep 17 00:00:00 2001
From: Josef Citrine <josefcitrine@googlemail.com>
Date: Fri, 20 May 2016 15:15:10 +0100
Subject: [PATCH] Fixing layout and colour bugs

---
 public/templates/account/playlists.html       |  4 ++--
 public/templates/albums/show.html             |  2 +-
 public/templates/directives/image-upload.html |  2 +-
 public/templates/directives/track-editor.html | 16 ++++++++--------
 public/templates/tracks/edit.html             |  2 +-
 .../scripts/base/ui-bootstrap-tpls-0.4.0.js   |  4 ++--
 .../styles/account-content-selectors.less     |  4 ++--
 resources/assets/styles/mobile.less           | 19 +++++++++++++++++++
 8 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/public/templates/account/playlists.html b/public/templates/account/playlists.html
index de4b2485..4f50eec7 100644
--- a/public/templates/account/playlists.html
+++ b/public/templates/account/playlists.html
@@ -1,10 +1,10 @@
 <ul class="playlists stretch-to-bottom">
     <li ng-repeat="playlist in playlists track by playlist.id">
         <div class="btn-group">
-            <a href="#" pfm-eat-click class="btn btn-sm" ng-click="togglePlaylistPin(playlist)" ng-class="{active: playlist.is_pinned, 'btn-primary': playlist.is_pinned}">
+            <a href="#" pfm-eat-click class="btn btn-default btn-sm" ng-click="togglePlaylistPin(playlist)" ng-class="{active: playlist.is_pinned, 'btn-primary': playlist.is_pinned}">
                 <i class="icon-pushpin"></i>
             </a>
-            <a href="#" pfm-eat-click class="btn btn-sm" ng-click="editPlaylist(playlist)">Edit</a>
+            <a href="#" pfm-eat-click class="btn btn-default btn-sm" ng-click="editPlaylist(playlist)">Edit</a>
             <a href="#" pfm-eat-click class="btn btn-sm btn-danger" ng-click="deletePlaylist(playlist)">Delete</a>
         </div>
         <a href="{{playlist.url}}" class="main">
diff --git a/public/templates/albums/show.html b/public/templates/albums/show.html
index 5c2cdaa6..0dde7a60 100644
--- a/public/templates/albums/show.html
+++ b/public/templates/albums/show.html
@@ -21,7 +21,7 @@
         </li>
         <li><a href="#" class="btn btn-default" pfm-eat-click ng-click="share()">Share</a></li>
         <li><pfm-favourite-button resource="::album" type="album"></pfm-favourite-button></li>
-        <li ng-if="::album.permissions.edit"><a class="btn btn-sm" ui-sref="content.artist.account.albums.edit(::{slug: album.user.slug, album_id: album.id})">Edit</a></li>
+        <li ng-if="::album.permissions.edit"><a class="btn btn-default btn-sm" ui-sref="content.artist.account.albums.edit(::{slug: album.user.slug, album_id: album.id})">Edit</a></li>
     </ul>
 
     <header>
diff --git a/public/templates/directives/image-upload.html b/public/templates/directives/image-upload.html
index deef87a9..d4af0849 100644
--- a/public/templates/directives/image-upload.html
+++ b/public/templates/directives/image-upload.html
@@ -5,7 +5,7 @@
         <input type="file" onchange="angular.element(this).scope().setImageFile(this)" />
     </p>
     <div class="btn-group">
-        <a href="#" pfm-popup="image-selector" pfm-popup-close-on-click class="btn btn-sm"><i class="icon-picture"></i> Gallery</a>
+        <a href="#" pfm-popup="image-selector" pfm-popup-close-on-click class="btn btn-default btn-sm"><i class="icon-picture"></i> Gallery</a>
         <a href="#" pfm-eat-click ng-click="uploadImage()" class="btn btn-info btn-sm"><i class="icon-upload"></i> Upload</a>
         <a href="#" pfm-eat-click ng-click="clearImage()" class="btn btn-danger btn-sm" ng-show="isImageLoaded"><i class="icon-remove"></i></a>
     </div>
diff --git a/public/templates/directives/track-editor.html b/public/templates/directives/track-editor.html
index 972bacc8..8247a234 100644
--- a/public/templates/directives/track-editor.html
+++ b/public/templates/directives/track-editor.html
@@ -19,7 +19,7 @@
             <input ng-disabled="isSaving" ng-change="touchModel()" placeholder="Track Title" type="text" id="title" ng-model="track.title" />
             <div class="error">{{errors.title}}</div>
         </div>
-        <div class="row-fluid">
+        <div class="row">
             <div class="col-md-6 form-row" ng-class="{'has-error': errors.description != null}">
                 <label for="description" class="strong">Description:</label>
                 <textarea ng-disabled="isSaving" ng-change="touchModel()" placeholder="Description (optional)" id="description" ng-model="track.description"></textarea>
@@ -31,7 +31,7 @@
                 <div class="error">{{errors.lyrics}}</div>
             </div>
         </div>
-        <div class="row-fluid">
+        <div class="row">
             <div class="form-row col-md-6" ng-class="{'has-error': errors.genre_id != null}">
                 <label for="genre" class="strong">Genre:</label>
                 <select ng-disabled="isSaving" id="genre" ng-change="touchModel()" ng-model="track.genre_id" ng-options="genre.id as genre.name for genre in taxonomies.genres">
@@ -47,9 +47,9 @@
                 <div class="error">{{errors.track_type_id}}</div>
             </div>
         </div>
-        <div class="row-fluid">
+        <div class="row">
             <div class="form-row album-selector col-md-6" ng-class="{'has-error': errors.album_id != null}">
-                <a pfm-popup="album-selector" pfm-popup-close-on-click href="#" class="btn btn-sm">
+                <a pfm-popup="album-selector" pfm-popup-close-on-click href="#" class="btn btn-default">
                     Album:
                     <strong ng-show="selectedAlbum">{{selectedAlbum.title}}</strong>
                     <strong ng-hide="selectedAlbum">None</strong>
@@ -67,7 +67,7 @@
                 <div class="error">{{errors.album_id}}</div>
             </div>
             <div class="form-row show-songs-selector col-md-6" ng-show="track.track_type_id == 2" ng-class="{'has-error': errors.show_song_ids != null}">
-                <a pfm-popup="song-selector" pfm-popup-close-on-click href="#" class="btn btn-sm">Show Songs: <strong>{{selectedSongsTitle}}</strong></a>
+                <a pfm-popup="song-selector" pfm-popup-close-on-click href="#" class="btn btn-default">Show Songs: <strong>{{selectedSongsTitle}}</strong></a>
                 <div id="song-selector" class="pfm-popup">
                     <ul>
                         <li ng-repeat="song in taxonomies.showSongs track by song.id" ng-class="{selected: selectedSongs[song.id]}">
@@ -78,7 +78,7 @@
                 <div class="error">{{errors.show_song_ids}}</div>
             </div>
         </div>
-        <div class="row-fluid">
+        <div class="row">
             <div class="form-row col-md-6" ng-class="{'has-error': errors.cover != null}">
                 <label class="strong">Track Cover: </label>
                 <pfm-image-upload set-image="setCover" image="track.cover_url" user-id="track.user_id"></pfm-image-upload>
@@ -96,7 +96,7 @@
                 <div class="error">{{errors.released_at}}</div>
             </div>
         </div>
-        <div class="row-fluid">
+        <div class="row">
             <div class="col-md-4 form-row">
                 <label for="is_explicit"><input ng-disabled="isSaving" ng-change="touchModel()" id="is_explicit" type="checkbox" ng-model="track.is_explicit" /> Contains Explicit Content</label>
             </div>
@@ -107,7 +107,7 @@
                 <label for="is_listed"><input ng-disabled="isSaving" ng-change="touchModel()" id="is_listed" type="checkbox" ng-model="track.is_listed" /> Is Listed</label>
             </div>
         </div>
-        <div class="row-fluid" ng-show="isAdmin">
+        <div class="row" ng-show="isAdmin">
             <div class="col-md-6 form-row" ng-class="{'has-error': errors.username != null}">
                 <label for="title" class="strong">User:</label>
                 <input ng-disabled="isSaving" ng-change="touchModel()" placeholder="Username" type="text" id="username" ng-model="track.username" />
diff --git a/public/templates/tracks/edit.html b/public/templates/tracks/edit.html
index a3a5d526..436aa508 100644
--- a/public/templates/tracks/edit.html
+++ b/public/templates/tracks/edit.html
@@ -1,3 +1,3 @@
-<p><a ng-href="{{::track.url}}" class="btn btn-sm">Return to the track page</a></p>
+<p><a ng-href="{{::track.url}}" class="btn btn-sm btn-default">Return to the track page</a></p>
 
 <pfm-track-editor track-id="trackId"></pfm-track-editor>
diff --git a/resources/assets/scripts/base/ui-bootstrap-tpls-0.4.0.js b/resources/assets/scripts/base/ui-bootstrap-tpls-0.4.0.js
index e9ba51eb..575b4987 100644
--- a/resources/assets/scripts/base/ui-bootstrap-tpls-0.4.0.js
+++ b/resources/assets/scripts/base/ui-bootstrap-tpls-0.4.0.js
@@ -2264,10 +2264,10 @@ function TabsetCtrl($scope, $element) {
 <example module="ui.bootstrap">
   <file name="index.html">
     <div ng-controller="TabsDemoCtrl">
-      <button class="btn btn-sm" ng-click="items[0].active = true">
+      <button class="btn btn-default btn-sm" ng-click="items[0].active = true">
         Select item 1, using active binding
       </button>
-      <button class="btn btn-sm" ng-click="items[1].disabled = !items[1].disabled">
+      <button class="btn btn-default btn-sm" ng-click="items[1].disabled = !items[1].disabled">
         Enable/disable item 2, using disabled binding
       </button>
       <br />
diff --git a/resources/assets/styles/account-content-selectors.less b/resources/assets/styles/account-content-selectors.less
index 876d3454..ed50bdd9 100644
--- a/resources/assets/styles/account-content-selectors.less
+++ b/resources/assets/styles/account-content-selectors.less
@@ -67,12 +67,12 @@
 
         &.selected {
           a {
-            #gradient> .vertical(@brand-success, darken(@brand-success, 5%));
+            #gradient> .vertical(@pfm-purple, darken(@pfm-purple, 5%));
             color: #fff;
             font-weight: bold;
 
             &:hover {
-              #gradient> .vertical(fadeout(@brand-success, 20%), fadeout(darken(@brand-success, 5%), 20%));
+              #gradient> .vertical(fadeout(@pfm-purple, 20%), fadeout(darken(@pfm-purple, 5%), 20%));
             }
           }
         }
diff --git a/resources/assets/styles/mobile.less b/resources/assets/styles/mobile.less
index 93037dc4..e0d0495c 100644
--- a/resources/assets/styles/mobile.less
+++ b/resources/assets/styles/mobile.less
@@ -10,6 +10,7 @@
   .site-content {
     margin-left: 0px;
     overflow: scroll;
+    padding: 5px;
   }
 
   .now-playing {
@@ -130,6 +131,16 @@
   }
 
   .artist-details {
+    margin: -5px;
+    padding-bottom: 10px;
+
+    > .stretch-to-bottom {
+      padding: 0 10px;
+      .col-md-6 {
+        padding: 0px;
+      }
+    }
+
     > header {
       > img {
         float: none !important;
@@ -180,4 +191,12 @@
       }
     }
   }
+
+  .two-pane-view.closed .account-tracks-listing li, .two-pane-view.closed .account-albums-listing li {
+    width: 50% !important;
+  }
+
+  .site-content > .ui-view.loading {
+    margin: 0px -5px;
+  }
 }