webbuild: responsive div based layout

header-webbuild.php

@@ -60,6 +60,7 @@ print "<script>window.onbeforeunload = function (e) { e = e || window.event;
 # wordpress header code - make sure it includes jquery
 wp_head();
 
+print '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">' . PHP_EOL;
 print '<link rel="shortcut icon" type="image/x-icon" href="' . get_stylesheet_directory_uri() . '/images/webbuild.ico" />' . PHP_EOL;
 # styles needed by jScrollPane
 print '<link type="text/css" href="' . get_stylesheet_directory_uri() . '/scripts/jquery.jscrollpane.css" rel="stylesheet" media="all" >' . PHP_EOL;

styles/webbuild-post.css

@@ -34,7 +34,6 @@ select {
    font-family:liberationsans,freesans,Arial,Verdana,Helvetica,sans-serif;
    padding: 0;
    margin: 1px;
-   height: 1.5em;
    max-width: 98%;
    background-color: buttonface;
 }

styles/webbuild.css

@@ -112,22 +112,23 @@
    font-weight:400;
    padding:0;
 }
-
+.webbuildtopright {
-
+   float:right;
+}
 .searchbox {
-   position:relative;
+   float:left;
-   display:block;
    width:215px;
    align:center;
-   left:660px;
-   top:-25px;
-//   height:21px;
    font-size:8pt;
    border:1px solid #2b6600;
-//   margin:4px;
    padding:2px;
    background-color: #e0f2d0;
 }
+.chatpanel {
+   float:left;
+   width:215px;
+   align:center;
+}
 .webbuild {
    font-size: 8pt;
    font-family: liberationsans, freesans, arial, verdana, sans-serif;
@@ -146,8 +147,110 @@
 .webbuild hr { margin:0; color:white; }
 .webbuild div { margin-bottom:1px; padding-bottom:1px; }
 
+.webbuildcontainer {
+   max-width:920px;
+   height:auto;
+}
+.webbuildwrapleft {
+   float:left;
+   width:100%;
+   margin-right:-210px;
+}
+.webbuildleft {
+   margin-right:210px !important;
+   padding:0;
+   margin:0;
+}
+.webbuildright {
+   float:right;
+   width:202px;
+   margin:0;
+}
+
+@media screen and (min-width: 901px) {
+.webbuildright {
+   width:202px;
+}
+.socialbox {
+   width:200px;
+}
+}
+.operationpanelinfo {
+   margin-top:137px;
+   border:1px solid #2b6600;
+   background-color:#E0F2D0;
+   padding:1px;
+}
+.operationpanelsend {
+   margin-top:5px;
+   border:1px solid #2b6600;
+   background-color:#E0F2D0;
+   padding:1px;
+}
+.operationpanelautodist {
+   margin-top:5px;
+   border:1px solid #2b6600;
+   background-color:#FFFFDE;
+   padding:1px;
+}
+.operationpanelpatches {
+   margin-top:5px;
+   border:1px solid #2b6600;
+   background-color:#E0F2D0;
+   padding:1px;
+}
+.operationpanelupload {
+   margin-top:5px;
+   border:1px solid #2b6600;
+   background-color:#FFFFFF;
+   padding:1px;
+}
+.operationpanelpackageinfo {
+   margin-top:5px;
+   border:1px solid #2b6600;
+   background-color:#A7DEDE;
+   padding:1px;
+}
+.operationpanelgenericinfo {
+   margin-top:5px;
+   border:1px solid #2b6600;
+   background-color:#A7DEDE;
+   padding:1px;
+}
+.operationpanelhost {
+   margin-top:5px;
+   border:1px solid #2b6600;
+   background-color:#FFFFFF;
+   padding:1px;
+}
+.operationpaneloperations {
+   margin-top:5px;
+   border:1px solid #2b6600;
+   background-color:#FFFFDE;
+   padding:1px;
+}
+.operationpaneloperations > textarea {
+   padding:0;
+}
+.webbuildprocesses {
+   font-size:7pt;
+   padding:0px;
+   height:130px;
+   line-height: 130%;
+   margin-bottom: 2px;
+   border:1px solid #2b6600;
+   width:100%;
+   margin:0;
+//   display:table-cell;
+   background-color:#E0F2D0;
+   padding:1px;
+}
+.processes {
+   width:100%;
+}
 .editor {
-   width:690px;
+   float:left;
+   width:100%;
    height:300px;
    border:1px solid #cccccc;
    padding:0px;
@@ -155,30 +258,19 @@
    font-family:monospace;
    font-size:8pt;
 }
-
 .maintainer {
-   width:684px;
+   float:left;
+   width:100%;
    height:300px;
    overflow:auto;
    font-size:7pt;
    border:1px solid #2b6600;
-   padding:0;
+   padding:1px;
    margin:0;
    background-color:white;
    float:left;
 }
 
-
-.processes {
-   float:left;
-   font-size:7pt;
-   padding:0px;
-   height:130px;
-   line-height: 130%;
-   margin-bottom: 2px;
-   border:1px solid #2b6600;
-}
-
 .notes {
    width:680px;
    font-size:7pt;
@@ -190,7 +282,7 @@
 }
 
 .output {
-   width:680px;
+   width:100%;
    height:300px;
    overflow:auto;
    overflow-x:hidden;
@@ -217,6 +309,50 @@
    color:white;
 }
 
+@media screen and (max-width: 900px) {
+.webbuildright,
+.webbuildleft,
+.operationpanelinfo,
+.operationpanelsend,
+.operationpanelautodist {
+   width:100%;
+}
+.socialbox {
+   float: none !important;
+}
+span#socialbox > span > div > div > img,
+span#socialbox > span > div > div:first-child {
+   height:12px !important;
+   width:12px !important;
+}
+span#socialbox > span > div > div:nth-child(2),
+span#socialbox > span > div > div:nth-child(3) {
+   margin-left: 12px !important;
+}
+.operationpanelinfo {
+   margin-top:5px !important;
+}
+.webbuildtopright,
+.webbuildtopleft {
+   margin-top:5px;
+   width:100%;
+}
+.chatpanel {
+   margin-left:10px;
+}
+select,
+input {
+   margin:3px !important;
+}
+
+}
+@media screen and (max-width: 370px) {
+.webbuildright,
+.webbuildleft {
+   width:100%;
+}
+}
+
 .matrix {
    width:100%;
    height:97%;
@@ -257,9 +393,11 @@
 }
 
 .scroll-pane {
+   /* socialbox */
    background-color: #e0f2d0;
    height:130px;
-   width:200px;
+   min-width:200px;
+   width:100%;
    overflow:auto;
    float:right;
 }
@@ -278,11 +416,11 @@
 }
 
 .scroll-pane3 {
+   /* processes */
    background-color: #e0f2d0;
    height:130px;
-   width:685px;
+   width:auto;
    overflow:auto;
-   float:right;
 }
 
 .scroll-pane3-h {
@@ -302,13 +440,13 @@
 .socialbox {
    float:right;
    font-size:8pt;
-   border:0px;
+   //border:0;
-   padding:0px;
+   //margin:0;
+   //padding:0;
    height:130px;
    line-height: 100%;
-   margin: 0px;
    border:1px solid #2b6600;
 }
 .socialbox div { margin-bottom:1px; }
-.socialbox hr { margin: 0; }
+.socialbox hr { margin:0; color:#FFF; }
 .downloadbox table { font-size: 9pt; border:1px solid #2b6600; margin: 4px; padding:4; background-color: #e0f2d0; }

webbuild.html.inc

@@ -1,36 +1,37 @@
-<span id="status" class="webbuild">Caricamento in corso, attendere...</span>
+<span class=webbuild>
-<span id=webbuild>
+<form id=webbuildform name=webbuild method=post action="javascript:">
-<div class=webbuild id=container style="position:relative;width:894px;padding:0;margin:0;height:auto;top:0;left:0;">
+<div class="webbuildcontainer">
-<form id=webbuildform name=webbuild method=post onkeypress="return event.keyCode != 13;">
-
 <img src="/images/webbuild.png" alt="build automatici">
 &nbsp;&nbsp;&nbsp;<b>- Webbuild - Interfaccia Web per lo sviluppo di openmamba</b>
-
+ <div class="webbuildtopright">
-<span id="searchbox"></span>
+  <div id="searchbox"></div>
-
+  <span id="chatpanel"></span>
-<div style="position:relative;top:-30px;left:0;width:100%;height:50px;">
- <div id="noajax_msg"><p>Il supporto per AJAX non è abilitato nel tuo browser. L'aggiornamento live non sarà disponibile, premi Ricarica per aggiornare la pagina.</p></div>
- <div style="position:absolute;float:left;">
-  <span id="topcontrols"></span>
-  <span id="environments"></span><span id="specedit"></span>
-  <br><span id="repositories"></span><span id="packages"></span><span id="operations"></span>
-  <br><span id="speccreate"></span>
- </div><div style="float:right;width:220px;margin-top:10px;margin-right:15px;"><span id="chatpanel"></span></div>
  </div>
-
+ <div class="webbuildtopleft">
- <div style="position:relative;float:left;width:686px;padding:0;margin:1px;">
+  <div id="noajax_msg"><p>Il supporto per AJAX non è abilitato nel tuo browser. L'aggiornamento live non sarà disponibile, premi Ricarica per aggiornare la pagina.</p></div>
-  <div class="processes"><div class="scroll-pane3"><span id="processes"></span></div></div><br>
+  <span id="status">Caricamento in corso, attendere...</span>
+  <span id="topcontrols"></span><span id="environments"></span><span id="specedit"></span>
+  <br><span id="repositories"></span>
+  <span id="packages"></span>
+  <span id="operations"></span>
+  <br><span id="speccreate"></span>
+ </div>
+ <div class="webbuildwrapleft">
+  <div class="webbuildleft">
+   <div class="webbuildprocesses"><div class="scroll-pane3"><span id="processes"></span></div></div>
    <div><span id="editor"></span></div>
    <span id="editcontrols"></span>
    <span id="showlogcontrols"></span>
    <span id="output"></span>
   </div>
- <div style="position:relative;float:right;width:200px;padding:0;margin:1px;">
+ </div>
+ <div class="webbuildright">
   <div class="socialbox"><div class="scroll-pane"><span id="socialbox"></span></div></div>
-  <span id="operationpanel" style="margin:0;"></span>
+  <span id="operationpanel"></span>
  </div>
  <div style="clear:both"></div>
-  <span id="window"></span>
-</form>
  </div>
+  <span id="window"></span>
+</div>
+</form>
 </span>