From: Marcin Haba <marcin.haba@bacula.pl>
Date: Sun, 8 Feb 2015 13:50:46 +0000 (+0100)
Subject: baculum: Adjust main window size to full browser width
X-Git-Tag: Release-7.2.0~83
X-Git-Url: https://git.sur5r.net/?a=commitdiff_plain;h=6a91a61211c1d914e478328a053ede9331234c13;p=bacula%2Fbacula

baculum: Adjust main window size to full browser width
---

diff --git a/gui/baculum/protected/JavaScript/slide-window.js b/gui/baculum/protected/JavaScript/slide-window.js
index dd5061653d..0e6e45998d 100644
--- a/gui/baculum/protected/JavaScript/slide-window.js
+++ b/gui/baculum/protected/JavaScript/slide-window.js
@@ -15,14 +15,16 @@ var SlideWindowClass = Class.create({
 	gridEl: null,
 	checked: [],
 	objects: {},
+	windowSize: null,
 
 	size: {
-		widthNormal : '437px',
+		widthNormal : '53%',
 		heightNormal : '325px',
-		widthHalf : '437px',
+		widthHalf : '53%',
 		heightHalf : '586px',
-		widthFull : '899px',
-		heightFull : '586px'
+		widthFull : '100%',
+		heightFull : '586px',
+		menuWidth: '75px'
 	},
 
 	elements : {
@@ -47,7 +49,7 @@ var SlideWindowClass = Class.create({
 		this.window = $(this.windowId + this.elements.containerSuffix);
 		this.tools = $(this.windowId + this.elements.toolsButtonSuffix);
 		this.options = $(this.windowId + this.elements.optionsButtonSuffix);
-		
+
 		if(data.hasOwnProperty('showId')) {
 				this.showEl = $(data.showId);
 		} else {
@@ -158,27 +160,30 @@ var SlideWindowClass = Class.create({
 	},
 
 	isNormalSize: function() {
-		return (this.window.getWidth()  + 'px' == this.size.widthNormal && this.window.getHeight()  + 'px' == this.size.heightNormal);
+		return (this.windowSize == this.size.widthNormal && this.window.getHeight()  + 'px' == this.size.heightNormal);
 	},
 
 	isHalfSize: function() {
-		return (this.window.getWidth()  + 'px' == this.size.widthHalf && this.window.getHeight()  + 'px' == this.size.heightHalf);
+		return (this.windowSize == this.size.widthHalf && this.window.getHeight()  + 'px' == this.size.heightHalf);
 	},
 
 	isFullSize: function() {
-		return (this.window.getWidth()  + 'px' == this.size.widthFull && this.window.getHeight()  + 'px' == this.size.heightFull);
+		return (this.windowSize  == this.size.widthFull && this.window.getHeight()  + 'px' == this.size.heightFull);
 	},
 
 	normalSizeWindow: function() {
 			new Effect.Morph(this.window, {style : 'width: ' + this.size.widthNormal + '; height: ' + this.size.heightNormal + ';', duration : 0.4});
+			this.windowSize = this.size.widthNormal;
 	},
 	
 	halfSizeWindow: function() {
 			new Effect.Morph(this.window, {style : 'width: ' + this.size.widthHalf + '; height: ' + this.size.heightHalf + ';', duration : 0.4});
+			this.windowSize = this.size.widthHalf;
 	},
 	
 	fullSizeWindow: function() {
 			new Effect.Morph(this.window, {style : 'width: ' + this.size.widthFull + '; height: ' + this.size.heightFull + ';', duration : 0.4});
+			this.windowSize = this.size.widthFull;
 	},
 
 	hideOtherWindows: function() {
@@ -437,3 +442,17 @@ document.observe("dom:loaded", function() {
 		});
 	}
 });
+
+function setContentWidth() {
+	var content_width = $('container').getWidth() - $('menu-left').getWidth() - 1;
+	$('content').setStyle({'width': content_width + 'px'});
+}
+
+
+Event.observe(window, 'resize', function() {
+	setContentWidth();
+});
+
+document.observe("dom:loaded", function() {
+	setContentWidth();
+});
diff --git a/gui/baculum/protected/Pages/Home.page b/gui/baculum/protected/Pages/Home.page
index feeb2042e7..be63e8ad88 100644
--- a/gui/baculum/protected/Pages/Home.page
+++ b/gui/baculum/protected/Pages/Home.page
@@ -62,9 +62,9 @@
 			<%[ Date To: ]%> <com:TDatePicker ID="DateTo" DateFormat="yyyy-MM-dd" Width="80px" />
 		</span>
 		<span><%[ Client: ]%></span>
-		<com:TActiveDropDownList ID="Clients" CssClass="textbox" AutoPostBack="false" Width="160px" />
+		<com:TActiveDropDownList ID="Clients" CssClass="textbox" AutoPostBack="false" Width="160px" Style="display: inline" />
 		<span><%[ Job name: ]%></span>
-		<com:TActiveDropDownList ID="Jobs" CssClass="textbox" AutoPostBack="false" Width="160px" />
+		<com:TActiveDropDownList ID="Jobs" CssClass="textbox" AutoPostBack="false" Width="160px" Style="display: inline" />
 		<p><%[ Legend: ]%></p>
 		<div id="legend"></div>
 		<div id="graphs_content">
diff --git a/gui/baculum/protected/Portlets/Console.tpl b/gui/baculum/protected/Portlets/Console.tpl
index fc0af6a602..eaccc28bb3 100644
--- a/gui/baculum/protected/Portlets/Console.tpl
+++ b/gui/baculum/protected/Portlets/Console.tpl
@@ -10,7 +10,7 @@
 </script>
 <com:TActivePanel ID="ConsoleContainer" DefaultButton="Enter" Style="text-align: left; display: none;">
 	<com:TActiveTextBox ID="OutputListing" TextMode="MultiLine" CssClass="console" ReadOnly="true" />
-	<com:TActiveTextBox ID="CommandLine" TextMode="SingleLine" CssClass="textbox" Width="760px" Style="margin: 3px 5px; float: left" />
+	<com:TActiveTextBox ID="CommandLine" TextMode="SingleLine" CssClass="textbox" Width="760px" Style="margin: 3px 7px; float: left" />
 	<com:TActiveButton ID="Enter" Text="<%[ Enter ]%>" OnCallback="sendCommand">
 		<prop:ClientSide.OnLoading>
 			$('<%=$this->CommandLine->ClientID%>').disabled = true;
diff --git a/gui/baculum/themes/Baculum-v1/bls_bottom.png b/gui/baculum/themes/Baculum-v1/bls_bottom.png
index 15ccb9e3ae..f35a7597fe 100644
Binary files a/gui/baculum/themes/Baculum-v1/bls_bottom.png and b/gui/baculum/themes/Baculum-v1/bls_bottom.png differ
diff --git a/gui/baculum/themes/Baculum-v1/bls_top.png b/gui/baculum/themes/Baculum-v1/bls_top.png
index ec42c2f7c9..1d21f86bd0 100644
Binary files a/gui/baculum/themes/Baculum-v1/bls_top.png and b/gui/baculum/themes/Baculum-v1/bls_top.png differ
diff --git a/gui/baculum/themes/Baculum-v1/style.css b/gui/baculum/themes/Baculum-v1/style.css
index 181a3b7389..4533bab2d2 100644
--- a/gui/baculum/themes/Baculum-v1/style.css
+++ b/gui/baculum/themes/Baculum-v1/style.css
@@ -45,7 +45,6 @@ input.textbox-short, select.textbox-short {
 }
 
 input.textbox-auto, select.textbox-auto, textarea.textbox-auto {
-	width: 100%;
 	border: 1px solid black;
 	font-size: 14px;
 	display: table-cell;
@@ -53,7 +52,7 @@ input.textbox-auto, select.textbox-auto, textarea.textbox-auto {
 
 textarea.textbox-auto {
 	resize: vertical;
-	width: 406px;
+	width: 100%;
 	font-size: 11px;
 }
 
@@ -69,15 +68,23 @@ a:hover {
 }
 #container {
 	margin: 0 auto;
-	width: 975px;
+	min-width: 975px;
+	max-width: 100%;
+	border-right: 1px solid black;
+	background-color: #585758;
 }
 
 #top {
 	margin: 0 auto;
-	width: 975px;
+	min-width: 975px;
+	max-width: 100%;
 	height: 51px;
 	background-image: url('bls_top.png');
-	background-repeat: no-repeat;
+	background-repeat: repeat-x;
+	border-left: 1px solid black;
+	border-right: 1px solid black;
+	border-top-left-radius: 7px;
+	border-top-right-radius: 7px;
 	clear: both;
 }
 
@@ -87,21 +94,23 @@ a:hover {
 }
 
 #menu-left {
-	float: left;
+	position: absolute;
 	width: 74px;
-	/*height: 498px;*/
 	height: 600px;
 	background-color: #546e83;
 	border-left: 1px solid black;
+	z-index: 200;
+	/* Workaround for FF and switch Graphs and Workspace areas */
+	bottom: auto !important;
 }
 
 #content {
-	float: left;
-	width: 899px;
-	/*height: 498px;*/
+	position: relative;
+	top: 0;
+	left: 75px;
+	width: 100%;
 	height: 600px;
-	background-color: #585758;
-	border-right: 1px solid black;
+	z-index: 100;
 }
 
 #directors, #panel_switcher {
@@ -121,14 +130,10 @@ a:hover {
 }
 
 div.configuration {
-	width: 443px;
-	/*height: 473px;*/
+	width: 45%;
 	height: 575px;
-	margin: 12px 0;
-	z-index: 5;
-	position: relative;
-	left: 446px;
-	top: 0px;
+	margin: 12px;
+	float: right;
 	background-color: #898889;
 	-webkit-border-radius: 10px;
 	-moz-border-radius: 10px;
@@ -138,6 +143,7 @@ div.configuration {
 
 #configuration {
 	position: absolute;
+	width: 100%;
 }
 
 #configuration div.field select {
@@ -150,12 +156,12 @@ div.configuration {
 
 div.configuration-progress {
 	background: rgba(182,182,182,0.7) url('progress.gif') no-repeat center center;
-	width: 443px;
+	width: 45%;
 	height: 575px;
 	z-index: 10;
 	position: absolute;
 	top: 12px;
-	left: 446px;
+	right: 12px;
 	display: none;
 	border-radius: 10px;
 }
@@ -173,7 +179,8 @@ div.slide-window-progress {
 
 #console {
 	clear: left;
-	width: 973px;
+	min-width: 973px;
+	max-width: 100%;
 	min-height: 20px;
 	margin: 0 auto;
 	padding: 5px 0;
@@ -208,10 +215,15 @@ div.slide-window-progress {
 }
 
 #bottom {
-	width: 975px;
+	max-width: 100%;
+	min-width: 975px;
 	height: 11px;
 	margin: 0 auto;
-	background: transparent url('bls_bottom.png') no-repeat top left;
+	background: transparent url('bls_bottom.png') repeat-x top left;
+	border-left: 1px solid black;
+	border-right: 1px solid black;
+	border-bottom-left-radius: 7px;
+	border-bottom-right-radius: 7px;
 }
 
 #message-box {
@@ -332,6 +344,7 @@ div.slide-window-progress {
 .field-full {
 	display: block;
 	min-height: 200px;
+	width: 98%;
 }
 
 .validator, .validate {
@@ -385,7 +398,7 @@ div.slide-window-content {
 
 div.slide-window-element, div.slide-window-element:hover {
 	float: left;
-	width: 210px;
+	width: 224px;
 	color: white;
 }
 
@@ -395,7 +408,7 @@ div.slide-window-element:hover {
 
 div.slide-window-element:hover, div.slide-window-element-detail:hover {
 	float: left;
-	width: 210px;
+	width: 224px;
 	background-color: #686A6C;
 	cursor: pointer;
 }
@@ -554,7 +567,8 @@ div.slide-window-actions table {
 }
 
 div.configuration-window-content {
-	padding: 10px 12px;;
+	padding: 10px 12px;
+	width: 96%;
 }
 
 div.slide-window-options {
@@ -726,7 +740,7 @@ span.validation-error-summary {
 }
 
 textarea.console {
-	width: 952px;
+	width: 98%;
 	height: 200px;
 	display: block;
 	margin: 5px auto;
@@ -807,7 +821,8 @@ div.small {
 
 #graphs {
 	height: 600px;
-	width: 954px;
+	min-width: 954px;
+	max-width: 100%;
 	padding: 10px;
 	margin: 0 auto;
 	font-size: 11px;
@@ -831,7 +846,7 @@ div.small {
 
 #graphs_content {
 	margin: 0 auto;
-	width: 906px;
+	width: 98%;
 	height: 425px;
 }