webbuild: responsive div based layout
This commit is contained in:
parent
40decd8435
commit
97136f40a1
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -112,22 +112,23 @@
|
||||
font-weight:400;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
|
||||
.webbuildtopright {
|
||||
float:right;
|
||||
}
|
||||
.searchbox {
|
||||
position:relative;
|
||||
display:block;
|
||||
float:left;
|
||||
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;
|
||||
padding:0px;
|
||||
//border:0;
|
||||
//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; }
|
||||
|
||||
@ -1,36 +1,37 @@
|
||||
<span id="status" class="webbuild">Caricamento in corso, attendere...</span>
|
||||
<span id=webbuild>
|
||||
<div class=webbuild id=container style="position:relative;width:894px;padding:0;margin:0;height:auto;top:0;left:0;">
|
||||
<form id=webbuildform name=webbuild method=post onkeypress="return event.keyCode != 13;">
|
||||
|
||||
<span class=webbuild>
|
||||
<form id=webbuildform name=webbuild method=post action="javascript:">
|
||||
<div class="webbuildcontainer">
|
||||
<img src="/images/webbuild.png" alt="build automatici">
|
||||
<b>- Webbuild - Interfaccia Web per lo sviluppo di openmamba</b>
|
||||
|
||||
<span id="searchbox"></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 style="position:relative;float:left;width:686px;padding:0;margin:1px;">
|
||||
<div class="processes"><div class="scroll-pane3"><span id="processes"></span></div></div><br>
|
||||
<div><span id="editor"></span></div>
|
||||
<span id="editcontrols"></span>
|
||||
<span id="showlogcontrols"></span>
|
||||
<span id="output"></span>
|
||||
<div class="webbuildtopright">
|
||||
<div id="searchbox"></div>
|
||||
<span id="chatpanel"></span>
|
||||
</div>
|
||||
<div style="position:relative;float:right;width:200px;padding:0;margin:1px;">
|
||||
<div class="webbuildtopleft">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<span id="window"></span>
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
</span>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user