CC-3174 : showbuilder

making the library a separate scrollable from playlist

airtime_mvc/application/controllers/LibraryController.php

@@ -56,6 +56,7 @@ class LibraryController extends Zend_Controller_Action
         $this->view->headScript()->appendFile($baseUrl.'/js/datatables/plugin/dataTables.TableTools.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
 
         $this->view->headScript()->appendFile($baseUrl.'/js/airtime/buttons/buttons.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
+        $this->view->headScript()->appendFile($baseUrl.'/js/airtime/utilities/utilities.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'/js/airtime/library/library.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'/js/airtime/library/main_library.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
 

airtime_mvc/application/layouts/scripts/library.phtml

@@ -23,7 +23,7 @@
 <div class="wrapper">
     <!--Set to z-index 254 to make it lower than the top-panel and the ZFDebug info bar, but higher than the side-playlist-->
 	<div id="library_content" class="ui-widget ui-widget-content block-shadow alpha-block padded" style="z-index:254"><?php echo $this->layout()->library ?></div>
-	<div id="side_playlist" class="ui-widget ui-widget-content block-shadow omega-block"><?php echo $this->layout()->spl ?></div>
+	<div id="side_playlist" class="ui-widget ui-widget-content block-shadow omega-block padded"><?php echo $this->layout()->spl ?></div>
 </div>
 </body>
 </html>

airtime_mvc/public/css/media_library.css

@@ -1,7 +1,7 @@
 #library_content {
 	float: left;
 	width: 50%;
-	min-height: 475px;
+	overflow: auto;
 }
 
 #library_display {
@@ -10,7 +10,7 @@
 }
 
 #library_display th {
-        text-align: left;
+    text-align: left;
 }
 
 #library_content #library_display {
@@ -80,7 +80,9 @@
     text-align: center;
 }
 
-.library_sr,
-.library_bitrate {
-	text-align: right;
-}
+td.library_track,
+td.library_sr,
+td.library_bitrate {
+    text-align: right;
+    padding-right: 1em !important;
+}

airtime_mvc/public/css/playlist_builder.css

@@ -1,9 +1,7 @@
 #side_playlist {
 	width: 40%;
-	min-height: 475px;
-	padding: 8px;
-	padding-bottom: 0px;
 	font-size: 16px;
+	overflow: auto;
 }
 
 #side_playlist, 

airtime_mvc/public/css/styles.css

@@ -9,7 +9,7 @@ body {
     padding: 0;
 }
 html, body {
-height: 100%;
+    height: 100%;
 }
 
 #login-page {

airtime_mvc/public/js/airtime/library/library.js

@@ -58,7 +58,7 @@ var AIRTIME = (function(AIRTIME){
 	          /* Length */        {"sTitle": "Length", "mDataProp": "length", "sClass": "library_length", "sWidth": "80px"},
 	          /* Upload Time */   {"sTitle": "Uploaded", "mDataProp": "utime", "sClass": "library_upload_time"},
 	          /* Last Modified */ {"sTitle": "Last Modified", "mDataProp": "mtime", "bVisible": false, "sClass": "library_modified_time"},
-	          /* Track Number */  {"sTitle": "Track", "mDataProp": "track_number", "bSearchable": false, "bVisible": false, "sClass": "library_track"},
+	          /* Track Number */  {"sTitle": "Track", "mDataProp": "track_number", "bSearchable": false, "bVisible": false, "sClass": "library_track", "sWidth": "65px"},
 	          /* Mood */  		  {"sTitle": "Mood", "mDataProp": "mood", "bSearchable": false, "bVisible": false, "sClass": "library_mood"},
 	          /* BPM */  {"sTitle": "BPM", "mDataProp": "bpm", "bSearchable": false, "bVisible": false, "sClass": "library_bpm"},
 	          /* Composer */  {"sTitle": "Composer", "mDataProp": "composer", "bSearchable": false, "bVisible": false, "sClass": "library_composer"},

airtime_mvc/public/js/airtime/library/main_library.js

@@ -1 +1,16 @@
-$(document).ready(AIRTIME.library.libraryInit);
+$(document).ready(function() {
+	var viewport = AIRTIME.utilities.findViewportDimensions(),
+		lib = $("#library_content"),
+		pl = $("#side_playlist"),
+		widgetHeight = viewport.height - 185,
+		width = Math.floor(viewport.width - 110);
+	
+		lib.height(widgetHeight)
+			.width(Math.floor(width * 0.55));
+			
+		pl.height(widgetHeight)
+			.width(Math.floor(width * 0.45));
+	
+	AIRTIME.library.libraryInit();
+		
+});

airtime_mvc/public/js/airtime/utilities/utilities.js

@@ -0,0 +1,40 @@
+var AIRTIME = (function(AIRTIME){
+	var mod;
+	
+	if (AIRTIME.utilities === undefined) {
+		AIRTIME.utilities = {};
+	}
+	mod = AIRTIME.utilities;
+	
+	mod.findViewportDimensions = function() {
+		var viewportwidth,
+			viewportheight;
+		
+		// the more standards compliant browsers (mozilla/netscape/opera/IE7) use
+		// window.innerWidth and window.innerHeight
+		if (typeof window.innerWidth != 'undefined') {
+			viewportwidth = window.innerWidth, viewportheight = window.innerHeight;
+		}
+		// IE6 in standards compliant mode (i.e. with a valid doctype as the first
+		// line in the document)
+		else if (typeof document.documentElement != 'undefined'
+				&& typeof document.documentElement.clientWidth != 'undefined'
+				&& document.documentElement.clientWidth != 0) {
+			viewportwidth = document.documentElement.clientWidth;
+			viewportheight = document.documentElement.clientHeight;
+		}
+		// older versions of IE
+		else {
+			viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
+			viewportheight = document.getElementsByTagName('body')[0].clientHeight;
+		}
+		
+		return {
+			width: viewportwidth,
+			height: viewportheight
+		};
+	};
+	
+return AIRTIME;
+	
+}(AIRTIME || {}));