responsive layout design changes

app/common/main-controller.js

@@ -124,9 +124,11 @@
     };
     $rootScope.showArtists = function () {
         $('#left-component').css('display', '');
+        $('#right-component').removeClass('lgcolumn_expandedleft');
     };
     $rootScope.hideArtists = function () {
         $('#left-component').css('display', 'none');
+        $('#right-component').addClass('lgcolumn_expandedleft');
     };
     $scope.toggleArtists = function () {
         if ($('#left-component').css('display') == 'none') {

app/common/player-service.js

@@ -1,4 +1,4 @@
-angular.module('JamStash')
+angular.module('JamStash')
 
 .service('player', ['$rootScope', '$window', 'utils', 'globals', 'model', 'notifications',
     function ($rootScope, $window, utils, globals, model, notifications) {
@@ -212,21 +212,6 @@
 			$rootScope.loadjPlayer(player1, url, suffix, loadonly, position);
 		}
 		
-		if (!loadonly) {
-			// Sway.fm UnityShim
-			var playerState = {
-				playing: true,
-				title: title,
-				artist: artist,
-				favorite: false,
-				albumArt: coverartfull
-			};
-			if ($rootScope.unity) {
-				$rootScope.unity.sendState(playerState);
-			}
-			// End UnityShim
-		}
-		
 		var spechtml = '';
 		var data = $(player1).data().jPlayer;
 		for (var i = 0; i < data.solutions.length; i++) {

app/index.html

@@ -48,7 +48,7 @@
 
             <div class="clear"></div>
         </div><!-- end #content -->
-		<div id="SideBar">
+		<div id="SideBar" ng-if="queue.length > 0">
 			<div class="headeractions">
 				<a class="buttonimg" title="Shuffle Queue" ng-click="queueShuffle()"><img src="images/fork_gd_11x12.png"></a>
 				<a class="buttonimg" id="action_Empty" title="Delete Queue" ng-click="queueEmpty()"><img src="images/trash_fill_gd_12x12.png"></a>
@@ -56,7 +56,7 @@
 			</div>
 			<div class="header">Queue</div>
 			<div id="SideQueue">
-				<ul class="simplelist songlist noselect" ng-if="queue.length > 0">
+				<ul class="simplelist songlist noselect">
 					<div ng-repeat="song in [queue] track by $index" class="songs" ng-include src="'common/songs_lite.html'" sortable></div>
 				</ul>
 				<div class="colspacer"></div>
@@ -109,7 +109,6 @@
                         </table>
                     </div>
                 </div>
-                <div class="playeractionssmall"></div>
                 <div id="playermiddle">
                     <div id="audiocontainer">
                         <div class="audiojs" id="audio_wrapper0">

app/settings/settings.html

@@ -1,7 +1,7 @@
 <div id="settings" class="tabcontent">
     <div class="section fullsection floatleft">
 
-        <form class="form" id="Settings">
+        <form class="form" id="SettingsForm">
             <div class="subsection floatleft">
                 <h3 class="title">Login</h3>
                 <label for="Username">Username <span class="red">*</span></label><br />
@@ -11,12 +11,10 @@
                 <label for="Server">Server <span class="red">*</span> (<a href="" title="Connect to Demo Subsonic Server" ng-click="setupDemo()">Demo</a>)</label><br />
                 <input type="text" id="Server" name="Server" class="xlarge" title="Subsonic Server URL Ex: http://host:port" ng-model="settings.Server" /><br />
                 <!--<a href="#" class="button" id="action_RequestURL" title="Request Permission for Server URL">Enable URL</a><br />-->
-                <label for="SubsonicVersion">Subsonic API: <span class="apiversion" id="SubsonicVersion">{{settings.ApiVersion}}</span></label><br />
-                <label for="SMStats">Audio State: <span id="SMStats"></span></label><br /><br />
                 <br />
-            </div>
-            <div class="subsection floatleft">
                 <h3 class="title">Options</h3>
+                <label for="SubsonicVersion">Subsonic API: <span class="apiversion" id="SubsonicVersion">{{settings.ApiVersion}}</span></label><br />
+                <label for="SMStats">Audio State: <span id="SMStats"></span></label><br />
                 <label for="Theme">Theme</label><br />
                 <select id="Theme" name="Theme" class="large" ng-model="settings.Theme" ng-options="o for o in Themes"></select><br />
                 <!--<label for="AutoFilter">Filter</label><br />
@@ -73,8 +71,6 @@
                         <label for="SaveTrackPosition">Save Progress</label>
                     </fieldset>
                 </div>
-            </div>
-			<div class="subsection floatleft">
                 <div class="checkboxes">
                     <fieldset>
                         <legend class="aligncenter">Jukebox</legend>
@@ -142,17 +138,6 @@
                 <br />Not related to a Subsonic License!</small>
             </div>
         </div>
-        <div class="clear"></div>
-        <div class="subsection floatleft">
-            <h3 class="title">Change Log</h3>
-            <ul id="ChangeLog" class="preferences">
-                <li class="log" ng-repeat="o in changeLog"><span class="version">{{o.date + ' - ' + o.version}}</span>
-                    <span class="changes" ng-repeat="a in o.changes" ng-bind-html="a.text"></span>
-                </li>
-            </ul>
-            <a href="" ng-click="changeLogShowMore()">Show More</a>
-        </div>
-        <div class="clear"></div>
         <div class="subsection floatleft">
             <h3 class="title">Links</h3>
             <ul class="preferences">
@@ -167,6 +152,17 @@
             <li>Audio Library - <a href="http://jplayer.org" target="_blank">http://jplayer.org</a></li>
             </ul>
         </div>
+        <div class="clear"></div>
+        <div class="subsection floatleft">
+            <h3 class="title">Change Log</h3>
+            <ul id="ChangeLog" class="preferences">
+                <li class="log" ng-repeat="o in changeLog"><span class="version">{{o.date + ' - ' + o.version}}</span>
+                    <span class="changes" ng-repeat="a in o.changes" ng-bind-html="a.text"></span>
+                </li>
+            </ul>
+            <a href="" ng-click="changeLogShowMore()">Show More</a>
+        </div>
+        <div class="clear"></div>
     </div>
     <div class="clear"></div>
 </div>

app/styles/Mobile.css

@@ -1,15 +1,15 @@
 /*@media only screen and (max-device-width: 680px) {*/
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 500px) {
 
 	.smcolumn {
-		width: 100%;
+		width: 75%;
+		background: rgba(255, 255, 255, 0.94);
+		border-bottom; none;
+		min-width: 292px;
 	}
 	.lgcolumn {
 		margin-left: 0;
 	}
-	#SideBar {
-		display: none;
-	}
 	ul.songlist li {
     	font-size: 12px;
     	padding: 2px 4px;
@@ -27,12 +27,18 @@
 		width: auto;
 	}
 	ul.songlist .albumgrid .itemactions a {
-		padding: 6px 8px;
+		padding: 6px;
 		background-position: center center;
 	}
 	ul.songlist .albumgrid {
 		padding: 0px 0px 22px 0px;
 	}
+	ul.songlist .albumgrid .albumart img {
+		margin-right: 5px;
+	}
+	ul.songlist .albumgrid .albuminfo {
+		width: 150px;
+	}
 	ul.songlist .album a:hover {
 		background-position: center center;
 	}
@@ -45,4 +51,23 @@
 	#songdetails_controls {
 		display: none;	
 	}
+	.actions {
+		margin-left: 184px;
+	}
+	#globalactions {
+		display: none;
+	}
+	#SettingsForm {
+	}
+}
+@media only screen and (max-width: 1200px) {
+	#SideBar {
+		display: none;
+	}
+	.lgcolumn {
+		margin-right: 0 !important;
+	}
+	ul.songlist .albumgrid {
+		width: 170px;
+	}
 }

app/styles/Style.css

@@ -221,7 +221,6 @@ span.apiversion
 }
 .smcolumn 
 {
-	min-height: 100%;
     height: 100%;
     overflow-y: auto;
     outline: none;
@@ -237,6 +236,10 @@ span.apiversion
 	margin-bottom: -40px;
     background: #fff;
 }
+.smcolumn .leftactions {
+    margin: 0 5px 0 0;
+    float: right;
+}
 .lgcolumn 
 {
     height: 100%;
@@ -244,11 +247,16 @@ span.apiversion
     outline: none;
 	margin-left: 312px;
 	margin-right: 350px;
+    min-width: 400px;
 }
 .lgcolumn_expanded
 {
     margin-right: 0 !important;
 }
+.lgcolumn_expandedleft
+{
+    margin-left: 0 !important;
+}
 .colspacer {
 	height: 100px;
 	width: 100%;
@@ -307,7 +315,7 @@ span.apiversion
 }
 .fullsection
 {
-    min-width: 450px;
+    min-width: 300px;
     overflow: auto;
     background: #fff;
     border-top: 1px solid #cbcbcb;
@@ -797,7 +805,7 @@ ul.songlist .albumgrid .albumart img {
     width: 160px;
     height: 160px;
     background: url(../images/albumdefault_160.jpg) no-repeat;
-    margin: 3px 18px 0 18px;
+    margin: 3px 0 0 18px;
     padding: 0px;
     -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(80%, transparent), to(rgba(255,255,255,0.2)));
 }
@@ -1005,7 +1013,7 @@ ul.songlist li:hover
 }
 #AZIndex
 {
-    float: right;
+    float: left;
     margin: 0 5px 0 0;
 }
 #AZIndex a
@@ -1089,7 +1097,7 @@ ul.songlist li:hover
 }
 #search
 {
-    margin: 6px 0 0 0;
+    margin: 5px;
     float: left;
 }
 .submenu 
@@ -1732,8 +1740,7 @@ input.chat
 input#Search
 {
     border: 1px solid #DCDCDC;
-    width: 200px;
+    width: 140px;
-    margin: 0 0 0 5px;
 }
 select
 {
@@ -1756,8 +1763,9 @@ select#SearchType
 }
 select.folders
 {
-    width: 75%;
+    width: 152px;
     margin: 5px;
+    float: left;
 }
 .submit
 {

app/subsonic/subsonic-service.js

@@ -200,12 +200,6 @@ angular.module('jamstash.subsonic.service', ['jamstash.settings', 'jamstash.util
                             if (SelectedAlbumSort.id != "default") {
                                 sortSubsonicAlbums(SelectedAlbumSort.id);
                             }
-                            /* Find a better way to show/hide left
-                            var left = $('#left-component');
-                            if (left.css('display') != 'none') {
-                                $rootScope.hideArtists();
-                            }
-                            */
                         } else {
                             notifications.updateMessage('No Albums Returned :(', true);
                         }

app/subsonic/subsonic.html

@@ -5,11 +5,6 @@
             <a href="" class="button" id="action_RefreshArtists" title="Refresh List" ng-click="refreshArtists()"><img class="pad" src="images/reload_9x11.png" /></a>
             <a href="" class="button" id="action_RescanLibrary" title="Rescan Library" ng-click="rescanLibrary()"><img class="pad" src="images/loop_alt1_gd_12x9.png" /></a>
         </div>
-        <div id="search">
-            <input type="text" id="Search" name="Search" class="medium" title="Wildcards (*) supported" placeholder="Search..." ng-enter="search()"/>
-            <select id="SearchType" name="SearchType" ng-model="SearchType.id" ng-options="o.id as o.name for o in SearchTypes"></select>
-            <a href="" class="button" id="action_Search" title="Search" ng-click="search()"><img class="pad" src="images/magnifying_glass_alt_12x12.png" /></a>
-        </div>
         <div class="subactions">
             <div class="floatleft" ng-show="selectedPlaylist">
                 <label>Playlist Actions</label>
@@ -38,7 +33,7 @@
                         </form>
                         <div id="BreadCrumb">
                             <div id="BreadCrumbs" class="floatleft">
-                                <div class="crumb"><a ng-click="toggleArtists()">Artists</a> &gt;</div>
+                                <div class="crumb"><a ng-click="toggleArtists()" title="Toggle Artists">Artists</a> &gt;</div>
                                 <div class="crumb" ng-repeat="o in BreadCrumbs | filter:{type:'artist'}"><a ng-click="getAlbums(o.id, o.name)">{{o.name}}</a> &gt;</div>
                                 <div class="crumb" ng-repeat="o in BreadCrumbs | filter:{type:'album'}"><a ng-click="getSongs(o.id, '')">{{o.name}}</a> &gt;</div>
                             </div>
@@ -83,12 +78,21 @@
 				<li class="" ng-click="togglePlaylist()"><a href="">Playlists</a></li>
 				<li class="" ng-click="togglePodcast()"><a href="">Podcasts</a></li>
 			</ul>
+			<div class="leftactions">
+				<a href="" class="button" id="action_ToggleArtists" ng-click="toggleArtists()" title="Toggle Artists"><img src="images/arrow_right_gl_8x8.png" /></a>
+			</div>
 			<div class="clear"></div>
 			<div id="IndexContainer" class="leftsubsection" ng-show="showIndex">
 				<select id="MusicFolders" class="folders" ng-model="$root.SelectedMusicFolder" ng-options="o.name for o in MusicFolders"></select>
 				<div id="AZIndex" ng-show="!settings.HideAZ" class="subactionsfixed">
 					<a href="" ng-click="toggleAZ()" stop-event="click">A-Z</a>
 				</div>
+				<div id="search">
+		            <input type="text" id="Search" name="Search" class="medium" title="Wildcards (*) supported" placeholder="Search..." ng-enter="search()"/>
+		            <select id="SearchType" name="SearchType" ng-model="SearchType.id" ng-options="o.id as o.name for o in SearchTypes"></select>
+		            <a href="" class="button" id="action_Search" title="Search" ng-click="search()"><img class="pad" src="images/magnifying_glass_alt_12x12.png" /></a>
+		        </div>
+		        <div class="clear"></div>
 				<ul id="AutoAlbumContainer" class="simplelist mainlist noselect">
 					<li class="index" id="auto">Auto Albums</li>
 					<li class="item" ng-repeat="o in AutoAlbums" id="{{o.id}}" ng-click="getAlbumListBy(o.id)" ng-class="{'selected': selectedAutoAlbum == o.id }">