Layout fix with grids & shadows

src/api/static/js/dashboard.js

@@ -331,9 +331,10 @@ monitor.sandbox.init = function () {
 monitor.sandbox.render = function (logs) {
 	months = { 1: 'Jan', 2: 'Feb', 3: 'Mar', 4: 'Apr', 5: 'May', 6: 'Jun', 7: 'Jul', 8: 'Aug', 9: 'Sep', 10: 'Oct', 11: 'Nov', 12: 'Dec' }
 	
-	var d = ([logs[0].day, '-', months[logs[0].month], '-', logs[0].year, ' ', logs[0].hour, ':', logs[0].minute]).join('')
+	var d = ([logs[0].day, '-', MONTHS[logs[0].month], '-', logs[0].year, ' ', logs[0].hour, ':', logs[0].minute]).join('')
 	jx.dom.set.value('sandbox_date', d)
-	var options = { width: $('#sandbox_status').width(), height: 'auto' }
+	
+	var options = { width: $('#sandbox_status').width()-8, height: 'auto' }
 	options.data = jx.utils.patterns.visitor(logs, function (item) { 
 		if (item.value == 100) {
 			item.status = '<i class="fa fa-check" style="color:green"></i>'

src/api/templates/dashboard.html

@@ -36,22 +36,23 @@
 		 <div id="menu" class="menu"></div>
 	</div>
 	
-	<div class="left info">
-		
-		<div class="" style="height:28px; ">
-			<div class="left bold">Monitoring 
-			<span id="latest_processes_label" class="default bold"></span>
+	<div class="left info ">
+		<div class="shadow border-right" style="; margin:4px; margin-top:2%">
+			<div class="" style="height:28px; ">
+				<div class="left bold">Monitoring 
+				<span id="latest_processes_label" class="default bold"></span>
+				</div>
+				
 			</div>
 			
+			<div class = "" style="padding:2px; margin:4px; height:170px">	
+				<div id="latest_processes" class="grid" ></div>
+			</div>
+			<div style="height:22px; padding:2px" class="small">
+				<div id="latest_process_pager" align="center"></div>
+			</div>
 		</div>
-		
-		<div class = "shadow border-right" style="padding:2px; margin:4px; height:170px">	
-			<div id="latest_processes" class="grid" ></div>
-		</div>
-		<div style="height:22px; padding:2px" class="small">
-			<div id="latest_process_pager" align="center"></div>
-		</div>
-		<div id="process_summary" class="simple-gradient shadow grid border-right" style="margin:4px">
+		<div id="process_summary" class="simple-gradient shadow grid border-right" style="margin:4px; margin-top:2%">
 			<div style="margin:4px; padding:2px; margin-bottom:4px; height:28px">
 				<div class="bold" style="color:#4682B4">Application Summary By Status</div>
 				<div  class="small">Latest Lookup <span id="app-summary-date"></span></div>
@@ -83,14 +84,16 @@
 		</div>
 	</div>	
 	<div class="left info">
-		<div class="" style="height:28px">
-			<div class="small bold">CPU & Memory Usage Trend for <i class="fa fa-quote-left"></i> <span id="trend_info" class="default bold"></span> <i class="fa fa-quote-right"></i></div>
-			<div class="smal" style="float:none"><div id="has_anomaly" class="small"><i class="fa fa-warning" ></i> Anomaly Detected</div></div>
+		<div class="shadow simple-gradient" style="padding:4px; margin-top:2%">
+			<div class="" style="height:28px">
+				<div class="small bold">CPU & Memory Usage Trend for <i class="fa fa-quote-left"></i> <span id="trend_info" class="default bold"></span> <i class="fa fa-quote-right"></i></div>
+				<div class="smal" style="float:none"><div id="has_anomaly" class="small"><i class="fa fa-warning" ></i> Anomaly Detected</div></div>
 
-		</div>
-		
-		<div class="shadow simple-gradient" style="height:270px; margin-top:4px">
-			<div id="trends_chart" class="small grid" style="height:250px"></div>
+			</div>
+			
+			<div  style="height:270px; margin-top:4px">
+				<div id="trends_chart" class="small grid" style="height:250px"></div>
+			</div>
 		</div>
 		<div id="sandbox" class="border-top" style="padding:4px; margin-top:10px">
 			<div style="height:28px">
@@ -106,22 +109,24 @@
 				<div id="sandbox_pager"></div>
 			</div>
 		</div>
-		<div style="margin-top:10px">
-			<div id="folder_summary">
+		<div style="margin-top:2%">
+			<div id="folder_summary" class="shadow">
 				<div style="height:28px">
 					
 					<div class="bold">Folder Analysis/Monitoring</div>
 					<div class="small">Powered By Machine Learning</div>
 				</div>
-				<div class="shadow">
+				<div class="">
 					<div class=" border-top" style="margin-top:4px; padding:2px; height:34px">
 						<i class="fa fa-search left" style="margin:4px; padding:4px; ; color:gray;"></i> 
 						<input id="folder_search" type="text" class="small left" placeholder="hostname" style="width:87%; padding-left:4px;" onkeyup="monitor.folders.search.init()"/>
 						<i class="fa fa-trash right action right" style="margin:4px; padding:4px; color:maroon" onclick="monitor.folders.search.reset()"></i>
 					</div>
 					<div id="gfolderframe" style="margin-top:10px; height:170px; width:100%">
-						<div id="gridfolders" style=""></div>
-						<div id="folderspager" class="small" style="height:22px"></div>
+						<div style="height:130px">
+							<div id="gridfolders" style=""></div>
+						</div>
+						<div id="folderspager" class="small" style="height:22px; margin:4px;"></div>
 					</div>
 				</div>
 			</div>