webbuild: fully div based layout and responsive support

This commit is contained in:
Silvan Calarco 2015-08-23 15:59:13 +02:00
parent 4fba9537b5
commit c3c5a9009e
4 changed files with 203 additions and 71 deletions

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

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;
@ -143,11 +144,113 @@
.webbuild h2 { font-size: 11pt; font-weight: bold; }
.webbuild h3 { font-size: 10pt; font-weight: bold; margin-top: 20px; margin-bottom: 2px; }
.webbuild h4 { margin:5; margin-right: 10; font-size: 9pt; font-weight: normal; }*/
.webbuild hr { margin:0; color:white; border: medium none; }
.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,11 +440,11 @@
.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; }

View File

@ -1,6 +1,7 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="/images/webbuild.ico" />
<!-- styles needed by jScrollPane -->
@ -263,37 +264,30 @@ function ajaxFileUpload(request)
<link rel="stylesheet" type="text/css" href="/styles/webbuild-post.css">
</head><body>
<table width="100%">
<tr><td>
<span class=webbuild>
<div id=container style="position:relative;width:894px;height:auto;top:0;left:0;margin-left:auto;margin-right:auto;">
<div class="webbuildcontainer">
<form id=webbuildform name=webbuild method=post action="javascript:">
<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:100%;">
<div id="searchbox"></div>
<div class="chatpanel"><span id="chatpanel"></span></div>
<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="repositories"></span>
<span id="packages"></span>
<span id="operations"></span>
<br><span id="speccreate"></span>
<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>
<span id="speccreate"></span>
<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 class="webbuildright">
<div class="socialbox"><div class="scroll-pane"><span id="socialbox"></span></div></div>
<span id="operationpanel" style="margin:0;"></span>
<span id="chatpanel"></span>
<span id="operationpanel"></span>
</div>
<div style="clear:both"></div>
<span id="window"></span>
@ -307,6 +301,4 @@ ajax_getvalues_refresh("",user,user_email,encodeURIComponent(secret));
//setInterval("ajax_getvalues_refresh(\"\",user,user_email,encodeURIComponent(secret))",0);
</script>
<br><br><br><br><br><br>
</td></tr>
</table>
</body></html>

View File

@ -664,7 +664,7 @@ echo -n "ajax_getvalues(\"ENVIRONMENT=$ENVIRONMENT&REPOSITORY=$REPOSITORY&PACKAG
echo -n "REQUEST=rpmmanager\");>"
# expert mode checkbox
[ "$STATE_ADVANCEDCONTROLS" ] && CHECKED="checked=checked" || CHECKED=
echo -n " <span style=\"white-space:nowrap\">Autodist:<input type=checkbox id=\"advancedcontrols\" "
echo -n " <span>Autodist:<input type=checkbox id=\"advancedcontrols\" "
echo -n "onclick=ajax_getvalues(\""
echo -n "ENVIRONMENT=$ENVIRONMENT&REPOSITORY=$REPOSITORY&PACKAGE=$PACKAGEENCODED&"
echo -n "MAINTAINERMODE=\"+getElementById('maintain').checked+\"&"
@ -953,7 +953,7 @@ if [ "$MAINTAINERMODE" = "true" -o ! "${AUTOPORT_UPDATE[$ENVIRONMENT]}" ]; then
# SPECFILE creation
if [ ! "${AUTOPORT_UPDATE[$ENVIRONMENT]}" -a "$MAINTAINERMODE" != "true" ]; then
echo -n "<speccreate><![CDATA[<div style=\"white-space:nowrap;\">"
echo -n "<speccreate><![CDATA[<div class=\"speccreate\">"
echo -n " Start from URL:<input onChange=\"suggestSpecName()\" type=text id=speccreateurl value=\"\" style=\"width:32%\">"
echo -n " name:<input type=text id=speccreatename disabled value=\"\" style=\"width:10%\">"
echo -n " type:<select id=speccreatetype disabled>"
@ -1246,7 +1246,7 @@ fi
# operation panel
if [ "$MAINTAINERMODE" != "true" ]; then
echo -n "<operationpanel><![CDATA["
echo -n "<div style=\"margin-top:140px;background-color:#E0F2D0;border:1px;\">"
echo -n "<div class=\"operationpanelinfo\">"
if [ "$PACKAGE" ]; then
echo -n "Package: <b>$PACKAGE</b><br>Version: "
[ "${SPECVAR_Epoch[0]}" ] && echo -n "${SPECVAR_Epoch[0]}:"
@ -1254,7 +1254,8 @@ if [ "$MAINTAINERMODE" != "true" ]; then
fi
showEnvironmentPanel
echo -n "</div>"
echo -n "<br><b>Build/Send options:</b><br>Arch:<select id=rpmbuildarch>"
echo -n "<div class=\"operationpanelsend\">"
echo -n "<b>Build/Send options:</b><br>Arch:<select id=rpmbuildarch>"
for f in i586 arm x86_64 ppc; do
SELECTED=
if [ "$f" = "$RPMBUILDARCH" ]; then
@ -1291,8 +1292,8 @@ if [ "$MAINTAINERMODE" != "true" ]; then
fi
echo -n "<option value=\"$repname\" $SELECTED>$repname</option>"
done
echo -n "</select><br>"
[ "${AUTOPORT_UPDATE[$ENVIRONMENT]}" -o "$STATE_ADVANCEDCONTROLS" ] && echo -n "<br><div style=\"background-color:#FFFFDE\"><b>Autodist batch builds:</b><br>"
echo -n "</select></div>"
[ "${AUTOPORT_UPDATE[$ENVIRONMENT]}" -o "$STATE_ADVANCEDCONTROLS" ] && echo -n "<div class=\"operationpanelautodist\"><b>Autodist batch builds:</b><br>"
if [ "$PACKAGE" ]; then
if [ "${AUTOPORT_UPDATE[$ENVIRONMENT]}" ]; then
echo -n "Patch for $PACKAGE:<br>"
@ -1467,8 +1468,9 @@ if [ "$MAINTAINERMODE" != "true" ]; then
echo -n "ajax_getvalues(\"ENVIRONMENT=$ENVIRONMENT&REPOSITORY=$REPOSITORY&PACKAGE=$PACKAGEENCODED&REQUEST=autoportlog\");>"
fi
fi
[ "${AUTOPORT_UPDATE[$ENVIRONMENT]}" -o "$STATE_ADVANCEDCONTROLS" ] && echo -n "</div>"
if [ "$PACKAGE" ]; then
echo -n "<hr><div style=\"background-color:#E0F2D0\">"
echo -n "<div class=\"operationpanelpatches\">"
## check for updates
#echo -n "<input type=button value=\"check for updates\" onclick="
#echo -n "ajax_getvalues(\"ENVIRONMENT=$ENVIRONMENT&REPOSITORY=$REPOSITORY&PACKAGE=$PACKAGEENCODED&REQUEST=autospecupdatescheck&"
@ -1491,8 +1493,9 @@ if [ "$MAINTAINERMODE" != "true" ]; then
echo -n "<br><div style=\"white-space:nowrap;font-size:9px;width:100%;overflow:hidden\"><span style=\"float:left;margin-top:6px;\">$PACKAGE-${SPECVAR_Version}-</span>"
echo -n "<span style=\"display:block;float:right;margin-top:6px;\">.patch</span>"
echo -n "<span style=\"display:block;overflow:hidden;padding-right:5px;\"><input type=text id=addpatchname value=\"\" style=\"width:100%\"></span></div>"
echo -n "</div>"
# upload sources
echo -n "<hr><b>Upload source:</b>"
echo -n "<div class=\"operationpanelupload\"><b>Upload source:</b>"
echo -n "<form name=\"form\" action=\"javascript:\" method=\"POST\" enctype=\"multipart/form-data\">"
echo -n "<input id=\"fileToUpload\" type=\"file\" size=\"10\" name=\"fileToUpload\" class=\"input\">"
echo -n "<button class=\"button\" id=\"buttonUpload\" onclick=ajaxFileUpload(\""
@ -1502,7 +1505,7 @@ if [ "$MAINTAINERMODE" != "true" ]; then
echo -n "</form>"
echo -n "</div>"
# info from package sources
echo -n "<hr><div style=\"background-color:#A7DEDE\">"
echo -n "<div class=\"operationpanelpackageinfo\">"
echo -n "<b>Info from package in the works:</b><br>"
# show sources
echo -n "<select id=sourcefile style=\"width:98%\" onchange="
@ -1557,9 +1560,10 @@ if [ "$MAINTAINERMODE" != "true" ]; then
echo -n "<span style=\"display:block;overflow:hidden;padding-right:5px;\">"
echo -n "<input type=text id=pkgnote value=\"\" style=\"width:100%\">"
echo -n "</span>"
echo -n "</div>"
# generic info
echo -n "<hr><b>Generic info:</b><br>"
echo -n "<div class=\"operationpanelgenericinfo\"><b>Generic info:</b><br>"
# allowed groups
echo -n "<input type=button value=\"allowed groups\" onclick="
echo -n "ajax_getvalues(\"ENVIRONMENT=$ENVIRONMENT&REPOSITORY=$REPOSITORY&PACKAGE=$PACKAGEENCODED&REQUEST=allowedgroups\");>"
@ -1588,9 +1592,8 @@ if [ "$MAINTAINERMODE" != "true" ]; then
done
echo -n "</select></div>"
echo -n "</div>"
fi
echo -n "<hr><b>Host maintainance:</b><br>"
echo -n "<div class=\"operationpanelhost\"><b>Host maintainance:</b><br>"
## run ldconfig
#echo -n "<input type=button id=runldconfig value=\"run ldconfig\" onclick="
#echo -n "ajax_getvalues(\"ENVIRONMENT=$ENVIRONMENT&REPOSITORY=$REPOSITORY&PACKAGE=$PACKAGEENCODED&"
@ -1608,13 +1611,13 @@ if [ "$MAINTAINERMODE" != "true" ]; then
echo -n "ajax_getvalues(\"ENVIRONMENT=$ENVIRONMENT&REPOSITORY=$REPOSITORY&PACKAGE=$PACKAGEENCODED&"
echo -n "REQUEST=smartupgrade\""
echo -n ",\"`cgi_encodevar "Upgrade current environment to latest updates now?"`\"); class=redbutton>"
echo -n "</div>"
echo -n "]]></operationpanel>"
fi
echo -n "<chatpanel><![CDATA["
# broadcast message
echo -n "<div style=\"position:absolute;width:220px;\">"
echo -n "<div class=\"chatpanel\">"
echo -n "<textarea id=broadcastmessage style=\"font-family:sans;height:36px;width:80%;float:left;font-size:8pt;resize:none;\" "
echo -n "onfocus=\"if(this.value==this.defaultValue)this.value='';\">Chat with online developers...</textarea>"
echo -n "<input type=button style=\"float:right\" onclick=ajax_getvalues(\""
@ -2134,13 +2137,13 @@ fi
if [ "$MAINTAINERMODE" = "true" ]; then
echo -n "<packages> </packages>"
echo -n "<operationpanel><![CDATA["
echo -n "<div style=\"margin-top:140px;background-color:#E0F2D0;border:1px;\">"
echo -n "<div class=\"operationpanelinfo\">"
echo "Repository: <b>$REPOSITORY</b><br>"
showEnvironmentPanel
echo -n "</div><br>"
echo -n "</div>"
if [ "$REPOSITORY" ]; then
# send options
echo -n "<b>Send options:</b>"
echo -n "<div class=\"operationpanelsend\"><b>Send options:</b>"
# destination repository
echo -n "<br>Destination: "
echo -n "<select id=repositoryimportto>"
@ -2167,9 +2170,9 @@ if [ "$MAINTAINERMODE" = "true" ]; then
# force checkbox
echo -n "<label style=\"background-color:red;padding:1px;\"><input type=checkbox id=\"repositoryforce\" value=\"force\">force</label>"
# simulate checkbox
echo -n "<label><input type=checkbox id=\"repositorysimulate\" value=\"simulate\">simulate</label>"
echo -n "<label><input type=checkbox id=\"repositorysimulate\" value=\"simulate\">simulate</label></div>"
# operations box
echo -n "<br><br><div style=\"background-color:#FFFFDE\">"
echo -n "<div class=\"operationpaneloperations\">"
echo -n "<b>Operations on selected packages:</b><br>"
# echo -n "<select multiple size=8 id=package onchange="
# echo -n "i=getElementById('repository').selectedIndex;ajax_getvalues(\"REQUEST=edit&"
@ -2293,7 +2296,7 @@ if [ "$MAINTAINERMODE" = "true" ]; then
# autodist update buildrequirements
echo -n "Add build requirement(s):<br>"
echo -n "<textarea id=massrebuildbuildreq style=\"width:98%;font-size:8pt;resize:none;\" rows=2></textarea>"
echo -n "<br><br></div>"
echo -n "</div>"
fi
echo -n "]]></operationpanel>"
fi