openmamba/wordpress-theme-openmamba
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

webbuild: responsive div based layout

Browse Source
This commit is contained in:
Silvan Calarco 2015-08-23 16:44:18 +02:00
parent 40decd8435
commit 97136f40a1
4 changed files with 198 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
header-webbuild.php
View File

@ -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;

1
styles/webbuild-post.css
View File

@ -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;
}

200
styles/webbuild.css
View File

@ -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; }

47
webbuild.html.inc
View File

@ -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">
&nbsp;&nbsp;&nbsp;<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 class="webbuildtopright">
<div id="searchbox"></div>
<span id="chatpanel"></span>
</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 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 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>