Add new style to slaprunner

MANIFEST.in

@@ -4,3 +4,4 @@ include slapos/builder/script/slapos
 include slapos/builder/script/slapos_firstboot
 recursive-include slapos/onetimeupload/templates *.html
 recursive-include slapos/runner/templates *.html
+recursive-include slapos/runner/static *.css .png

slapos/runner/static/styles.css

+
+*
+{
+margin: 0px;
+padding: 0px;
+}
+
+a:link {
+	color: #4DA0C6;
+}
+
+a:hover {
+	text-decoration: underline;
+	color: #FF0000;
+}
+
+a:visited {
+	color: #4DA0C6;
+}
+
+textarea {
+	width:742px;
+}
+
+body {
+	background: #0271BF;
+	font: 13px Arial, Helvetica, sans-serif;
+	color: #000000;
+}
+
+#page
+{
+	margin: 20px auto;
+	width: 825px;        
+}
+
+#logo{
+	margin-left:60px;
+}
+
+#header{
+    height: 92px;
+    padding-top: 18px;
+    width: 825px;
+    background: url(images/head.png) no-repeat;
+}
+
+.block_header{    
+    text-align: left;
+    padding-left: 25px;
+    height: 30px;
+}
+
+#header .text{
+    font-weight: bold;
+    font-size: 14px;
+    padding-top: 6px;
+    margin-left: 5px;
+    float: left;
+}
+
+#header .info{
+    font-weight: bold;
+    font-size: 14px;
+    padding-top: 6px;
+    float: left;
+    width: 700px;
+    text-align: center;
+}
+
+.wmenu{
+    
+}
+
+.wmenu ul{
+    list-style:none;
+    margin:0;
+    padding:0;
+    margin-left:20px;
+    height: 35px;
+}
+
+.wmenu li{
+    float:left;
+    background: url(images/sep.png) left center no-repeat;
+}
+
+.wmenu li .title{
+    float:left;
+    background: url(images/menu_dropdown.png) left center no-repeat;
+    font-size:14px;
+    font-weight:bold;
+    color:#0271BF;
+    padding:8px;
+    padding-left: 18px;
+    padding-right: 5px;
+    margin-left:4px;
+    height: 20px;
+}
+
+.wmenu ul li a{
+    display:block;    
+    height: 20px;
+    Color:#000;
+    font-size:14px;
+    text-decoration:none;
+    padding:8px;
+    padding-left: 6px;
+}
+
+.wmenu ul li a:focus, .wmenu ul li a:hover, .wmenu ul li a.active{
+    color:#0271BF;
+    background:url(images/menu_hover.png) repeat-x;
+}
+
+#main
+{
+    min-height: 400px;
+    background: url(images/main_bg.png) repeat-y;
+    padding:10px;
+    padding-left: 40px;
+    padding-right: 40px;
+    width: 745px;
+}
+
+#main h2{
+	margin-top:10px;
+	font-size:14px;
+	font-weight:bold;
+	text-decoration: capitalize;
+	color:#0271BF;
+}
+
+#footer{
+    height: 40px;
+    width: 745px;
+    background: url(images/footer.png) no-repeat;
+    padding-left: 40px;
+    padding-right: 40px;
+    padding-top: 25px;
+    text-align: center;
+}
+
+.button {
+	padding: 5px 10px;
+	display: inline;
+	background: #eee;
+	border: none;
+	color: #000;
+	cursor: pointer;
+	font-weight: bold;
+	border:1px solid #000;
+	margin-top:10px;
+}
+.button:hover {
+	background-position: 0 center;
+	background: #666666;
+	color: #fff;
+}
+.button:active {
+	background-position: 0 top;
+	position: relative;
+	top: 1px;
+	padding: 6px 10px 4px;
+}
+
+.flash{		
+	margin-left:20px;
+	color:#FF5500;
+	font-style:italic;
+	font-size:14px;
+}
+
+.flashes{
+	margin-bottom:10px;
+}
+
+.message {
+	color:#FF5500;
+	line-height:21px;
+}
+
+.clear{
+    clear: both;
+}

slapos/runner/templates/index.html

@@ -3,4 +3,6 @@
 Welcome!<br>
 
 This is SlapOS buildout web based runner.
+
+SlapOS runner is web based development tool which uses slapgrid to install and instantiate the software.
 {% endblock %}

slapos/runner/templates/instanceInspect.html

 {% extends "layout.html" %}
 {% block body %}
-Instance inspection<br>
-Supervisor:<br>
-<textarea cols=100 rows=10 readonly>{{ supervisor }}</textarea><br>
-SLAP:<br>
+<h2>Instance inspection</h2><br/>
+<h2>Supervisor:</h2>
+<textarea cols=103 rows=10 readonly>{{ supervisor }}</textarea><br>
+<h2>SLAP:</h2>
 {% for item in slap_status %}
 <b>{{ item[0 ]}}</b><br>
-<textarea cols=100 rows=5 readonly>{{ item[1] }}</textarea><br>
+<textarea cols=103 rows=5 readonly>{{ item[1] }}</textarea><br>
 {% endfor %}
-File content:<br>
-<textarea cols=100 rows=40 readonly>{{ file_content }}</textarea><br>
+<h2>File content:</h2>
+<textarea cols=103 rows=40 readonly>{{ file_content }}</textarea><br>
 {% endblock %}

slapos/runner/templates/layout.html

 <!doctype html>
-<title>Buildout runner</title>
-<div class=menu>
-<a href="{{ url_for('home') }}">Home</a> |
-Software:
-<a href="{{ url_for('editSoftwareProfile') }}">Edit</a>
-<a href="{{ url_for('runSoftwareProfile') }}">Run</a>
-<a href="{{ url_for('viewSoftwareLog') }}">Build log</a>
-<a href="{{ url_for('inspectSoftware') }}">Inspect</a>
-<a href="{{ url_for('removeSoftware') }}">Remove</a>
-|
-Instance
-<a href="{{ url_for('editInstanceProfile') }}">Edit</a>
-<a href="{{ url_for('runInstanceProfile') }}">Run</a>
-<a href="{{ url_for('viewInstanceLog') }}">Build log</a>
-<a href="{{ url_for('inspectInstance') }}">Inspect</a>
-<a href="{{ url_for('stopAllPartition') }}">Stop all</a>
-<a href="{{ url_for('removeInstance') }}">Remove</a>
-</div>
-{% with messages = get_flashed_messages() %}
+
+<html>
+
+    <head>
+
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+
+        <title>Buildout runner</title>
+
+        <meta name="keywords" content="" />
+
+        <meta name="description" content="" />
+
+        <link href="{{ url_for('static', filename='styles.css') }}" rel="stylesheet" type="text/css" media="screen" />
+
+    </head>
+<body>
+        <div id="page">
+	    <div id="logo">
+		<a href="{{ url_for('home') }}"><img src="{{ url_for('static', filename='images/logo.png') }}" alt="" /></a>
+	    </div>
+            <div id="header">
+                <div class="block_header">
+                    <a href="{{ url_for('home') }}" style="float:left"><img alt="" src="{{ url_for('static', filename='images/home.png') }}" /></a>
+                    <h2 class="text"> Home</h2>
+                    <h2 class="info"></h2>
+                </div>
+                <div class="wmenu">
+                    <ul>
+                        <li><span class="title">Software</span></li>
+			<li><a href="{{ url_for('editSoftwareProfile') }}">Edit</a></li>
+			<li><a href="{{ url_for('runSoftwareProfile') }}">Run</a></li>
+			<li><a href="{{ url_for('viewSoftwareLog') }}">Build log</a></li>
+			<li><a href="{{ url_for('inspectSoftware') }}">Inspect</a></li>
+			<li><a href="{{ url_for('removeSoftware') }}">Remove</a></li>
+
+                        <li><span class="title">Instance</span></li>
+			<li><a href="{{ url_for('editInstanceProfile') }}">Edit</a></li>
+			<li><a href="{{ url_for('runInstanceProfile') }}">Run</a></li>
+			<li><a href="{{ url_for('viewInstanceLog') }}">Build log</a></li>
+			<li><a href="{{ url_for('inspectInstance') }}">Inspect</a></li>
+			<li><a href="{{ url_for('stopAllPartition') }}">Stop all</a></li>
+			<li><a href="{{ url_for('removeInstance') }}">Remove</a></li>
+                    </ul>
+                </div>
+                <div class="clear"></div>
+            </div>
+            <div id="main">
+                <div class="flash">
+			{% with messages = get_flashed_messages() %}
 			  {% if messages %}
 			    <ul class=flashes>
 			    {% for message in messages %}
@@ -25,7 +56,15 @@ Instance
 			    {% endfor %}
 			    </ul>
 			  {% endif %}
-{% endwith %}
-<div class=page>
+			{% endwith %}					
+		</div>
+		<div class="content">
 			{% block body %}{% endblock %}
-</div>
+		</div>
+            </div>
+            <div id="footer">
+                &copy; Vifib SARL 2011 - All right reserved - Creative Commons Shared Alike Non Commercial
+            </div>
+        </div>
+    </body>
+</html>

slapos/runner/templates/runResult.html

 {% extends "layout.html" %}
 {% block body %}
-Result for {{ type }}<br>
-<textarea cols=100 rows=40 readonly>{{ result }}</textarea>
+<h2>Result for {{ type }}</h2>
+<textarea cols=103 rows=40 readonly>{{ result }}</textarea>
 {% endblock %}

slapos/runner/templates/updateInstanceProfile.html

@@ -2,9 +2,9 @@
 {% block body %}
 <form action="{{ url_for('updateInstanceProfile') }}" method=post class=add-entry>
       <dl>
-        <dt>Instance Profile:
-        <dd><textarea name=content rows=20 cols=100>{{ profile }}</textarea>
-        <dd><input type=submit value="Save">
+        <dt><h2>Instance Profile:</h2>
+        <dd><textarea name=content rows=20 cols=103>{{ profile }}</textarea>
+        <dd><input type=submit value= Update class="button">
       </dl>
     </form>
 {% endblock %}

slapos/runner/templates/updateSoftwareProfile.html

@@ -2,10 +2,10 @@
 {% block body %}
 <form action="{{ url_for('updateSoftwareProfile') }}" method=post class=add-entry>
       <dl>
-        <dt>Note: Url of instance.cfg is <tt>{{ instance_url }}</tt>
-        <dt>Software Profile:
-        <dd><textarea name=content rows=20 cols=100>{{ profile }}</textarea>
-        <dd><input type=submit value="Save">
+        <dt><strong>Note:</strong> Url of instance.cfg is <tt>{{ instance_url }}</tt>
+        <dt><h2>Software Profile:</h2>
+        <dd><textarea name=content rows=20 cols=103>{{ profile }}</textarea>
+        <dd><input type=submit value=Update class="button">
       </dl>
     </form>
 {% endblock %}

slapos/runner/templates/viewLog.html

 {% extends "layout.html" %}
 {% block body %}
-Currently running: {{ running }}<br>
-Notre: You can refresh this page from time to time to have updates.<br>
-Result for {{ type }}<br>
-<textarea cols=100 rows=40 readonly>{{ result }}</textarea>
+Currently running: <span class="message">{{ running }}</span><br>
+<strong>Note:</strong> You can refresh this page from time to time to have updates.<br>
+<h2>Result for {{ type }}</h2>
+<textarea cols=103 rows=40 readonly>{{ result }}</textarea>
 {% endblock %}