From 8e9aa304e3eeae129c994e0c89530e6761b996c7 Mon Sep 17 00:00:00 2001
From: Nathan Booth <nath.booth@gmail.com>
Date: Thu, 22 Dec 2011 12:51:43 +0000
Subject: [PATCH] Updated style with white rounded content boxes and re
 organised site edit page

Signed-off-by: Nathan Booth <nath.booth@gmail.com>
---
 public/styles/normal.css                 |  32 +++-
 source/webui/templates/admin.tpl         |  14 +-
 source/webui/templates/admin/service.tpl |  22 +--
 source/webui/templates/admin/site.tpl    | 191 ++++++++++++++---------
 source/webui/templates/home.tpl          |   8 +
 source/webui/templates/status.tpl        |  10 +-
 6 files changed, 174 insertions(+), 103 deletions(-)

diff --git a/public/styles/normal.css b/public/styles/normal.css
index 80fcc4d..80c401d 100644
--- a/public/styles/normal.css
+++ b/public/styles/normal.css
@@ -11,6 +11,7 @@ body {
     padding-top: 40px;
     padding: 0em;
     font-family: verdana, helvetica, sans-serif;
+    background: #F7F7F7;
 }
 
 a {
@@ -109,8 +110,14 @@ div.incident {
     margin-left: 2em;
 }
 
+table{
+   background:#fff;
+}
+
 table th, table td {
     text-align: center;
+    line-height: 10px;
+	vertical-align: middle;
 }
 
 th.service {
@@ -123,7 +130,6 @@ th.service {
 }
 
 div.page-header{
-background:#f5f5f5;
 margin:10px -5px 20px;
 padding:10px 10px 0 10px;
 -moz-border-radius:5px 5px 0 0;
@@ -136,7 +142,25 @@ border-bottom: 0px;
 margin: 0 0 0px;
 }
 
-table th, table td {
-line-height: 10px;
-vertical-align: middle;
+
+#my-tab-content{
+ background:#fff;
+ margin:-20px -5px 20px;
+ Padding-top:20px;
+ padding-left:20px;
+ -moz-border-radius:5px 5px 0 0;
+-webkit-border-radius:5px;
+ border-left: 1px solid #DDD;
+ border-right: 1px solid #DDD;
+ border-bottom: 1px solid #DDD;
+ }
+ .rounded_content{
+ background:#fff;
+ margin:0 -5px 20px;
+ Padding-top:20px;
+ padding-left:20px;
+ -moz-border-radius:5px 5px 0 0;
+-webkit-border-radius:5px;
+ border: 1px solid #DDD;
+
 }
diff --git a/source/webui/templates/admin.tpl b/source/webui/templates/admin.tpl
index 0999824..1f7e028 100644
--- a/source/webui/templates/admin.tpl
+++ b/source/webui/templates/admin.tpl
@@ -23,7 +23,7 @@
         		<h3>Current Services</h3>
         		<p>Click on a Service to edit its properties, or access any of the sites defined under it.</p>
         	</div>
-            <div class="span12 column">
+            <div class="span11 column">
                 {if $services}
                     <table class="bordered-table"><!--Services table -->
                         <thead>
@@ -41,8 +41,8 @@
                                     {$service->description|escape:html}
                                 </td>
                                 <td>
-                                    <button class='btn primary' onclick="document.location.href='{$base_uri}admin/service/id/{$service->id}/';return false;">Edit Service</button>
-                                    <button class='btn danger' onclick="sb.admin.deleteItem('{$base_uri}admin/tab/services/do/delete-service/id/{$service->id}/');">Delete</button>
+                                    <button class='btn small primary' onclick="document.location.href='{$base_uri}admin/service/id/{$service->id}/';return false;">Edit Service</button>
+                                    <button class='btn small danger' onclick="sb.admin.deleteItem('{$base_uri}admin/tab/services/do/delete-service/id/{$service->id}/');">Delete</button>
                                 </td>
                             </tr>
                         {/foreach}
@@ -71,20 +71,20 @@
             <h3>Add New Service</h3>
             <p>Use this form to define a new service</p>
         </div><!--/New Service description-->
-		<div class="span12 column"><!--Add New Service -->
+		<div class="span11 column"><!--Add New Service -->
         <form id="admin_addservice" method="post" action="{$base_uri}admin/tab/services/do/add-service/">
             <fieldset>
                 <div class="clearfix">
-                    <label for="admin_service_add_name" style="width:87px">Name</label>
+                    <label for="admin_service_add_name" style="width:85px">Name</label>
                     <div class="text">
                         <input class="xlarge span5" id="admin_service_add_name" name="name" type="text" value="" />
                     </div><!-- /text -->
                 </div><!-- /clearfix -->
                 
                 <div class="clearfix">
-                    <label for="admin_service_add_description" style="width:87px">Description</label>
+                    <label for="admin_service_add_description" style="width:85px">Description</label>
                     <div class="text">
-                    <textarea class="xxlarge" id="admin_service_add_description" rows="3"  name="description"></textarea>
+                    <textarea class="xlarge" id="admin_service_add_description" rows="3"  name="description"></textarea>
                     </div><!-- /text -->
                 </div><!-- /clearfix -->
     
diff --git a/source/webui/templates/admin/service.tpl b/source/webui/templates/admin/service.tpl
index b629c93..ca47cad 100644
--- a/source/webui/templates/admin/service.tpl
+++ b/source/webui/templates/admin/service.tpl
@@ -9,12 +9,13 @@
             <h1>Service {$service->name|escape:html}</h1>
         </div>
     </div>
+    <div class="rounded_content">
     <div class="row">
         <div class="span4 column"><!--New description-->
             <h3>Edit Service</h3>
             <p>Use this form to update the existing Service</p>
         </div><!--/New Service description-->
-        <div class="span12 column"><!--Add New Service -->
+        <div class="span11 column"><!--Add New Service -->
             <form id="admin_service_edit" method="post" action="{$base_uri}admin/service/id/{$service->id}/do/edit/">
                 <fieldset>
                     <div class="clearfix">
@@ -27,13 +28,13 @@
                     <div class="clearfix">
                         <label for="admin_service_edit_description" style="width:87px">Description</label>
                         <div class="text">
-                        <textarea class="xxlarge" name="textarea" id="admin_service_add_description" rows="3"  name="description" >{$service->description|escape:html}</textarea>
+                        <textarea class="xlarge" name="textarea" id="admin_service_add_description" rows="3"  name="description" >{$service->description|escape:html}</textarea>
                         </div><!-- /text -->
                     </div><!-- /clearfix -->
         
                     <div class="clearfix">
                         <div class="input">
-                            <input type="submit" class="btn primary" value="Edit Service">&nbsp;<button type="reset" class="btn">Cancel</button>
+                            <input type="submit" class="btn small primary" value="Edit Service">&nbsp;<button class="btn small" type="reset" class="btn">Cancel</button>
                         </div><!-- /text -->
                     </div><!-- /clearfix -->
                 </fieldset>
@@ -46,7 +47,7 @@
     		<h3>Existing Sites</h3>
     		<p>Currently the following sites that are defined for the service {$service->name|escape:html}, Edit the site or delete it from the service here, to add a new one use the form below</p>
     	</div>
-        <div class="span12 column">
+        <div class="span11 column">
             {if $sites}
     			<table class="bordered-table" name="sites_list_table"><!--Services table -->
 				    <thead>
@@ -64,8 +65,8 @@
                                     {$site->description|escape:html}
                                 </td>
                                 <td>
-                                    <button class='btn primary' onclick="document.location.href='{$base_uri}admin/site/service/{$service->id}/id/{$site->id}/';return false;">Edit Site</button>
-                                    <button style="margin-left:10px" class='btn danger' onclick="sb.admin.deleteItem('{$base_uri}admin/service/do/delete-site/id/{$service->id}/site/{$site->id}/');">Delete Site</button>
+                                    <button class='btn small primary' onclick="document.location.href='{$base_uri}admin/site/service/{$service->id}/id/{$site->id}/';return false;">Edit Site</button>
+                                    <button style="margin-left:10px" class='btn small danger' onclick="sb.admin.deleteItem('{$base_uri}admin/service/do/delete-site/id/{$service->id}/site/{$site->id}/');">Delete Site</button>
                                 </td>
                             </tr>
                         {/foreach}
@@ -95,20 +96,20 @@
             <h3>Add Site</h3>
             <p>Use this form to define a new site to the service {$service->name|escape:html}</p>
         </div><!--/New Service description-->
-        <div class="span12 column">
+        <div class="span11 column">
             <form id="admin_addsite" method="post" action="{$base_uri}admin/service/id/{$service->id}/do/add-site/">
                 <fieldset>
                     <div class="clearfix">
-                        <label for="admin_site_add_name" style="width:87px">Name</label>
+                        <label for="admin_site_add_name" style="width:85px">Name</label>
                         <div class="text">
                             <input class="xlarge span5" id="admin_site_add_name" name="name" type="text" />
                         </div><!-- /text -->
                     </div><!-- /clearfix -->
                     
                     <div class="clearfix">
-                        <label for="admin_site_edit_description" style="width:87px">Description</label>
+                        <label for="admin_site_edit_description" style="width:85px">Description</label>
                         <div class="text">
-                            <textarea class="xxlarge" id="admin_site_add_description" rows="3"  name="description" ></textarea>
+                            <textarea class="xlarge" id="admin_site_add_description" rows="3"  name="description" ></textarea>
                         </div><!-- /text -->
                     </div><!-- /clearfix -->
         
@@ -121,6 +122,7 @@
             </form>
         </div>
     </div><!--/Row for New Service-->  
+</div>
 </div><!-- /container -->
           
 <script type="text/javascript">
diff --git a/source/webui/templates/admin/site.tpl b/source/webui/templates/admin/site.tpl
index a264d12..7797d6e 100644
--- a/source/webui/templates/admin/site.tpl
+++ b/source/webui/templates/admin/site.tpl
@@ -4,15 +4,21 @@
   <li class="active"><a href="#">Site {$site->name|escape:html}</a></li>
 </ul>
 
-<h1>Site {$site->name|escape:html}</h1>
-
 <div class="container">
     <div class="row">
         <div class="span16">
+        	<h2>Site: {$site->name|escape:html} - Service: {$service->name|escape:html}</h2>
+        </div>
+    </div>
+	<div class="rounded_content">
+    <div class="row">
+        <div class="span4 column"><!--New description-->
+            <h3>Edit Service</h3>
+            <p>Use this form to update the existing Service</p>
+        </div>
+        <div class="span11 column">
             <form id="admin_site_edit" method="post" action="{$base_uri}admin/site/service/{$service->id}/id/{$site->id}/do/edit/">
                 <fieldset>
-                    <legend>Edit Site</legend>
-                    
                     <div class="clearfix">
                         <label for="admin_site_edit_name">Name</label>
                         <div class="text">
@@ -23,7 +29,7 @@
                     <div class="clearfix">
                         <label for="admin_site_edit_description">Description</label>
                         <div class="text">
-                            <textarea class="span12" id="admin_site_edit_description" name="description">{$site->description|escape:html}</textarea>
+                            <textarea class="xlarge" id="admin_site_edit_description" name="description">{$site->description|escape:html}</textarea>
                         </div>
                     </div><!-- /clearfix -->
 
@@ -34,77 +40,106 @@
                     </div>
                 </fieldset>
             </form>
-        </div><!-- /span16 -->   
-    </div><!-- /row -->
-</div><!-- /container -->
-
-<h1>Open Incidents</h1>
-
-{if $open_incidents}
-    <dl>
-        {foreach from=$open_incidents item=incident}
-            <dt>
-                <a href="{$base_uri}admin/incident/service/{$service->id}/site/{$site->id}/id/{$incident->id}/" title="Edit Incident {$incident->reference|escape:html}">{$incident->reference|escape:html}</a>
-                ({StatusBoard_Status::name($incident->currentStatus())})
-            </dt>
-            <dd>
-               {$incident->description|truncate|escape:html}
-            </dd> 
-        {/foreach}
-    </dl>
-{else}
-    There are no open incidents for this site . If you need to open one, use the form below.
-{/if}
-
-<form id="admin_addsite" method="post" action="{$base_uri}admin/site/service/{$service->id}/id/{$site->id}/do/add-incident/">
-    <fieldset>
-        <legend>Add Incident</legend>
-            
-        <div class="clearfix">
-            <label for="admin_incident_add_reference">Reference</label>
-            <div class="text">
-                <input class="xlarge span5" id="admin_incident_add_reference" name="reference" type="text" value="" />
-            </div>
-        </div><!-- /clearfix -->
-        
-        <div class="clearfix">
-            <label for="admin_incident_add_description">Description</label>
-            <div class="text">
-                <textarea class="span12" id="admin_incident_add_description" name="description"></textarea>
-            </div>
-        </div><!-- /clearfix -->
-        
-        <div class="clearfix">
-            <label for="admin_incident_add_status">Initial Classification</label>
-            <div class="select">
-                <select class="xlarge span5" id="admin_incident_add_status" name="status">
-                    {foreach from=StatusBoard_Status::available() item=status}
-                        {if $status != StatusBoard_Status::STATUS_Resolved}
-                            <option value="{$status}">{StatusBoard_Status::name($status)}</option>
-                        {/if}
-                    {/foreach}
-                </select>
-            </div>
-        </div><!-- /clearfix -->
-        
-        <div class="clearfix">
-            <label for="admin_incident_add_starttime">Start Time</label>
-            <div class="text">
-                <input class="xlarge span5" id="admin_incident_add_starttime" name="starttime" type="text" value="Now" />
-            </div>
-        </div><!-- /clearfix -->
-        
-        <div class="clearfix">
-            <label for="admin_incident_add_estimatedendtime">Estimated End Time</label>
-            <div class="text">
-                <input class="xlarge span5" id="admin_incident_add_estimatedendtime" name="estimatedendtime" type="text" value="+4 hours" />
-            </div>
-        </div><!-- /clearfix -->
-                    
-        <div class="clearfix">
-            <div class="input">
-                <input type="submit" class="btn primary" name="addincident" value="Add Incident" />
-            </div>
         </div>
-    </fieldset>
-</form>
+    </div> 
+  
+    <div class="row">
+    	<div class="span4 column">
+			<h3>Open Incidents</h3>
+		</div><!--/New Service description-->
+        <div class="span11 column">
+		{if $open_incidents}
+		<table class="bordered-table" name="sites_list_table"><!--Services table -->
+				    <thead>
+				        <th>Reference</th>
+    				    <th>Description</th>
+				        <th>Status</th>
+				        <th>Action</th>
+			        </thead>
+				    <tbody>
+                        {foreach from=$sites item=site}
+                            <tr>
+                                <td>
+                                    <a href="{$base_uri}admin/incident/service/{$service->id}/site/{$site->id}/id/{$incident->id}/" title="Edit Incident {$incident->reference|escape:htmll}">{$incident->reference|escape:html}</a>
+                                </td>
+                                <td>
+                                    {$site->description|escape:html}
+                                </td>
+                                <td>
+                                {StatusBoard_Status::name($incident->currentStatus())}
+                                </td>
+                                <td>
+                                    <button class='btn small primary' onclick="document.location.href='{$base_uri}admin/site/service/{$service->id}/id/{$site->id}/';return false;">Edit Site</button>
+                                    <button style="margin-left:10px" class='btn small danger' onclick="sb.admin.deleteItem('{$base_uri}admin/service/do/delete-site/id/{$service->id}/site/{$site->id}/');">Delete Site</button>
+                                </td>
+                            </tr>
+                        {/foreach}
+                    </tbody>
+                </table><!--/name table -->
+		{else}
+             <p style="padding-top:10px;">There are no open incidents for this site . If you need to open one, use the form below.</p>
+        {/if}
+        </div>
+    </div><!--/Row for Existing Service-->
+
+<div class="row">
+		<div class="span4 column">
+            <h3>Add Incident</h3>
+            <p>Use this form to add a new incident</p>
+        </div><!--/New Service description-->
+        <div class="span11 column">
+		
+		<form id="admin_addsite" method="post" action="{$base_uri}admin/site/service/{$service->id}/id/{$site->id}/do/add-incident/">
+		    <fieldset>
+		        <div class="clearfix">
+		            <label for="admin_incident_add_reference">Reference</label>
+		            <div class="text">
+		                <input class="xlarge span5" id="admin_incident_add_reference" name="reference" type="text" value="" />
+		            </div>
+		        </div><!-- /clearfix -->
+		        
+		        <div class="clearfix">
+		            <label for="admin_incident_add_description">Description</label>
+		            <div class="text">
+		                <textarea class="xlarge" id="admin_incident_add_description" name="description"></textarea>
+		            </div>
+		        </div><!-- /clearfix -->
+		        
+		        <div class="clearfix">
+		            <label for="admin_incident_add_status">Initial Classification</label>
+		            <div class="select">
+		                <select class="xlarge span5" id="admin_incident_add_status" name="status">
+		                    {foreach from=StatusBoard_Status::available() item=status}
+		                        {if $status != StatusBoard_Status::STATUS_Resolved}
+		                            <option value="{$status}">{StatusBoard_Status::name($status)}</option>
+		                        {/if}
+		                    {/foreach}
+		                </select>
+		            </div>
+		        </div><!-- /clearfix -->
+		        
+		        <div class="clearfix">
+		            <label for="admin_incident_add_starttime">Start Time</label>
+		            <div class="text">
+		                <input class="xlarge span5" id="admin_incident_add_starttime" name="starttime" type="text" value="Now" />
+		            </div>
+		        </div><!-- /clearfix -->
+		        
+		        <div class="clearfix">
+		            <label for="admin_incident_add_estimatedendtime">Estimated End Time</label>
+		            <div class="text">
+		                <input class="xlarge span5" id="admin_incident_add_estimatedendtime" name="estimatedendtime" type="text" value="+4 hours" />
+		            </div>
+		        </div><!-- /clearfix -->
+		                    
+		        <div class="clearfix">
+		            <div class="input">
+		                <input type="submit" class="btn primary" name="addincident" value="Add Incident" />
+		            </div>
+		        </div>
+    		</fieldset>
+		</form>
+
+ 		</div><!--/Row for New Service-->  
+	</div>
+</div><!-- /container -->
\ No newline at end of file
diff --git a/source/webui/templates/home.tpl b/source/webui/templates/home.tpl
index 67867b1..61fafe5 100644
--- a/source/webui/templates/home.tpl
+++ b/source/webui/templates/home.tpl
@@ -1,4 +1,12 @@
 <div id="statusboard">
+<div class="row">
+<div class="span14">
+<h2>Atos UK Networks Shared Services Status</h2>
+</div>
+<div class="span2">
+<a href="#" class="btn small">Add Incident</a>
+</div>
+</div>
     <table class="bordered-table">
         <thead>
             <tr>
diff --git a/source/webui/templates/status.tpl b/source/webui/templates/status.tpl
index d28f328..1e868f8 100644
--- a/source/webui/templates/status.tpl
+++ b/source/webui/templates/status.tpl
@@ -2,7 +2,8 @@
 	<div class="row">
 		<div class="span16"><!--name content container -->   
 			<h1>Site Status History: {$service->name|escape:html} - {$site->name|escape:html}</h1>
-			<p>This page details the incident history for a site</p>
+			<div class="rounded_content">
+			<p>This page details the incident history for a site:</p>
 			{if $start && $end}
                 {$incidentsDuring=$site->openIncidentsDuring($start, $end)}
                 {$incidentCount=count($incidentsDuring)}
@@ -18,7 +19,7 @@
                                 <p>Estimated End Time: {$time_difference|fuzzyTime}</p>
                             {/if}
                         </div>
-                        <div class="span12 column">
+                        <div class="span11 column">
                             <table class="bordered-table">
                                 <thead>
                                     <th>Status</th>
@@ -51,7 +52,7 @@
     	                	<h3 class="status">{if $day == 0}Today {/if}{$start|date_format:"d M Y"}</h3>
     	                    <p>{$incidentCount} {StatusBoard_Formatting::pluralise('incident','incidents',$incidentCount)}</p>
     	                </div>
-    		            <div class="span12 column">
+    		            <div class="span11 column">
     		            	{if $incidentsDuring}
     							<table class="bordered-table"><!--Services table -->
     								<thead>
@@ -85,7 +86,8 @@
     		       		</div>
     				</div>
     			{/foreach}
-            {/if}      	
+            {/if}   
+            </div> 	
 		</div>
 	</div>
 </div>
\ No newline at end of file