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 dd5061653dee6cc6679e3d390db7cb65a4c5a4c6..0e6e45998d5aab5f8e0f88946ea1f0e2f3f49d2b 100644 (file)
--- 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 feeb2042e7ef35fb79f5d58cf424a24f632554b5..be63e8ad8816f9ba99bd4b4353ea9b74c3b16690 100644 (file)
--- 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 fc0af6a60221fb6e946d7f0062ce072df0abdd4f..eaccc28bb30d13cc4c225293759a2963e9c3c75f 100644 (file)
--- 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 15ccb9e3ae3c552e05d2ec5e9fde24eeffb23c67..f35a7597fe54fdc31e1491807b00b01f8d4016b7 100644 (file)
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 ec42c2f7c97bac5aa01522400aa567a0bcc5f8c9..1d21f86bd0afba62169299702ad6a874433c9e1b 100644 (file)
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 181a3b73893d10c91a207ee8d024f86aeff50059..4533bab2d20153b96a88220f96837ea5037321a4 100644 (file)
--- 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;
 }