made separate css file, added more browser compatibility

bbirman · Jun 19, 2012 · 150122b · 150122b
1 parent 63660c5
commit 150122b
Show file tree

Hide file tree

Showing 3 changed files with 135 additions and 110 deletions.
diff --git a/src/main/resources/web/quality-foundry.css b/src/main/resources/web/quality-foundry.css
@@ -0,0 +1,87 @@
+.qf-page-background {
+	background-repeat:no-repeat; 
+	background-attachment:fixed;
+
+	background-image: -ms-linear-gradient(top, #FFFFFF 0%, #aaccdd 100%); /* IE10 Consumer Preview */ 
+	background-image: -moz-linear-gradient(top, #FFFFFF 0%, #aaccdd 100%); /* Mozilla Firefox */ 
+	background-image: -o-linear-gradient(top, #FFFFFF 0%, #aaccdd 100%); /* Opera */
+	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #aaccdd)); /* Webkit (Safari/Chrome 10) */ 
+	background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #aaccdd 100%); /* Webkit (Chrome 11+) */ 
+	background-image: linear-gradient(to bottom, #FFFFFF 0%, #aaccdd 100%); /* W3C Markup, IE10 Release Preview */ 
+}
+
+.qf-header {
+	height:80px;
+
+	padding-left:20px; 
+	margin-bottom:20px; 
+	margin-left:20px; 
+	margin-right:20px; 
+
+	-moz-border-radius: 15px;
+	border-radius: 15px;
+}
+
+.qf-logo{
+	margin-left:20px; 
+	margin-bottom:0px;
+}
+
+.qf-search{
+	float:right; 
+	padding-top:2%;
+}
+
+.qf-container {
+	/*size of stripes*/
+	background-size: 2px 2px; 	
+	-webkit-background-size: 2px 2px;
+	-moz-background-size: 2px 2px;
+
+	/* background color and stripes*/
+	background-color: rgba(209, 209, 209, .6);
+	background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
+	background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
+	background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
+	background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
+
+	margin-left:15px; 
+	margin-right:15px; 
+	margin-bottom:40px; 
+	padding-left:0px; 
+	padding-top:0px; 
+	padding-right:0px;
+
+	-moz-border-radius: 15px;
+	border-radius:15px; 
+
+	-moz-box-shadow: 0px 1px 5px 5px #888;
+	-webkit-box-shadow: 0px 1px 5px 5px #888;
+	box-shadow: 0px 1px 5px 5px #888;
+}
+
+.qf-content{
+	background-color:white; 
+	padding:15px; 
+	margin-right:0px; 
+	border-top-right-radius:15px; 
+	border-bottom-right-radius:15px; 
+	box-shadow: inset 3px 0px 3px #888;
+}
+
+.qf-sidebar {
+	background-color:transparent; 
+
+	margin-top:0px; 
+	margin-bottom:0px;
+
+	padding-bottom:20px;
+	padding-top:20px; 
+	padding-left:20px; 
+	padding-right:0px; 	
+}
+
+.qf-accordion-item {
+	outline: 0 none; 
+	-moz-outline: 0 none;
+}
diff --git a/src/main/resources/web/test-result.html b/src/main/resources/web/test-result.html
@@ -6,6 +6,7 @@
 	<title> ${test.runName} ${test.name} </title>
 
 	<link rel="stylesheet" href="scripts/bootstrap/css/bootstrap.css"/>
+	<link rel="stylesheet" href="quality-foundry.css" type="text/css"/>
 
 	<!-- For Accordion -->
 	<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script> 
@@ -46,49 +47,35 @@
 	</script>
 </head>
 
-<body style="background-image:-webkit-linear-gradient(top, #FFFFFF 0%, #aaccdd 100%); background-repeat: no-repeat; background-attachment: fixed">
-	<div style="background-color:whiteZ; 
-				padding-left:20px; 
-				margin-bottom:20px; margin-left:20px; margin-right:20px; 
-				-moz-border-radius: 15px;
-				height:80px">
+<body class="qf-page-background">
+	<div class="qf-header">
 
-		<img src="imgs/logo.png" height="80" width="140" style="margin-left:20px; margin-bottom:0px"/>
+		<img src="imgs/logo.png" class="qf-logo" height="80" width="140"/>
 
-		<form class="form-search" style="float:right; padding-top:2%">
+		<form class="form-search qf-search">
 	  		<input type="text" id="global-search" data-provide="typeahead" class="search-query" placeholder="Search all">
 	  		<button type="submit" class="btn"><i class="icon-search"></i> Search</button>
 		</form>
 	</div>
 	<!--   #aaccdd -->
-	<div class="container-fluid"
-		style="background-color: rgba(209, 209, 209, .6);
-				background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
-				background-size: 2px 2px;
-				margin-left:15px; margin-right:15px; margin-bottom:40px; 
-				padding-left:0px; padding-top:0px; padding-right:0px;
-				border-radius:15px; 		
-				-moz-box-shadow: 10px 10px 5px #615A5A;
-				-webkit-box-shadow: 10px 10px 5px #615A5A;
-				box-shadow: 0px 1px 5px 5px #888">
+	<div class="container-fluid qf-container">
 
 		<div class="row-fluid">
 
-			<div class="span2" id="accordion2" style="background-color:transparent; margin-top:0px; margin-bottom:0px; padding-bottom:50px;
-				padding-bottom: 20px; padding-top: 20px; padding-left: 20px; padding-right:0px; 
-				border-bottom-left-radius: 15px; 
-				border-top-left-radius: 15px;
-				border-top-right-radius: 0px;
-				border-bottom-right-radius: 0px">
-      			<!--Sidebar content-->
+			<div class="span2 qf-sidebar">
+      			<!--Sidebar content
+				style="background-color:transparent; margin-top:0px; margin-bottom:0px; padding-bottom:50px;
+					padding-bottom: 20px; padding-top: 20px; padding-left: 20px; padding-right:0px;"
+
+-->
 
 				<h3> <a href="#">Test Inventory</a> </h3> 
 				<div id="accordion">
 
 				<!-- <#assign runs = ${runs}> 
 					<#list runs as run> 
 				
-					<h3><a href="#">${run.name}</a> 
+					<h3 class="qf-accordion-item"><a href="#">${run.name}</a> 
 						<#if run.status == "running"> <img src="loading-snake.gif" alt="loading icon" style="padding-bottom: 6px; vertical-align:middle"/> </#if> 
 					</h3>
 					<div>
@@ -112,62 +99,46 @@ <h3><a href="#">${run.name}</a>
 						</#if>				
 					</div> -->
 					<!-- BEGIN: To delete once data is available-->
-					 <h3> Run 2</h3> 
+					<h3 class="qf-accordion-item"> Run 1</h3> 
+					<div>
+						&nbsp;&nbsp;<strong>Start Time</strong> 10:30 21-03-2012 <br/>
+						&nbsp;&nbsp;<strong>End Time</strong> 20:30 21-03-2012 <br/>
+					</div> 
+					<h3 class="qf-accordion-item"> Run 2</h3> 
 					<div>
 						&nbsp;&nbsp;<strong>Start Time</strong> 10:30 21-03-2012 <br/>
 						&nbsp;&nbsp;<strong>End Time</strong> 20:30 21-03-2012 <br/>
-						<br/>
-						&nbsp;&nbsp;<i class="icon-chevron-right"></i> <a href="#">Build Output</a> <br/>
-						&nbsp;&nbsp; <span class="badge">6</span> <a href="#">Test Results</a>   <br/>
-						&nbsp;&nbsp; <span class="badge">6</span> <a href="#">Code Coverage</a> <br/>
 					</div>
-					<h3>Run 3 <img src="loading-snake.gif" alt="loading icon" style="padding-bottom: 6px; vertical-align:middle"/> </h3>
+					<h3 class="qf-accordion-item">Run 3 <img src="loading-snake.gif" alt="loading icon" style="padding-bottom: 6px; vertical-align:middle"/> </h3>
 					<div>
 						&nbsp;&nbsp;<strong>Start Time</strong> 10:30 21-03-2012 <br/>
-						&nbsp;&nbsp;<em>Generating Results...</em><br/>
-
+						&nbsp;&nbsp;<em>Generating Results...</em><br/>		
 					</div>
-					<h3>Run 4</h3>
+					<h3 class="qf-accordion-item">Run 4</h3>
 					<div>
 						&nbsp;&nbsp;<strong>Start Time</strong> 10:30 21-03-2012 <br/>
 						&nbsp;&nbsp;<strong>End Time</strong> 20:30 21-03-2012 <br/>
-
-						&nbsp;&nbsp;<i class="icon-chevron-right"></i> <a href="#">Build Output</a> <br/>
-						&nbsp;&nbsp;<i class="icon-chevron-right"></i> <a href="#">Test Results</a> <span class="badge badge-important">6</span><br/>
-						&nbsp;&nbsp;<i class="icon-chevron-right"></i> <a href="#">Code Coverage</a> <span class="badge badge-success">91%</span><br/>
 					</div>
-					<h3>Run 4</h3>
+					<h3 class="qf-accordion-item">Run 5</h3>
 					<div>
 						&nbsp;&nbsp;<strong>Start</strong> 10:30 21-03-2012 <br/>
 						&nbsp;&nbsp;<strong>End</strong> 20:30 21-03-2012 <br/>
-
-						&nbsp;&nbsp;<a href="#">Build Output</a> <br/>
-						&nbsp;&nbsp;<a href="#">Test Results</a> <span class="badge badge-important">6</span><br/>
-						&nbsp;&nbsp;<a href="#">Code Coverage</a> <span class="badge badge-success">91%</span><br/>
 					</div>
-					<h3>Run 4</h3>
+					<h3 class="qf-accordion-item">Run 6</h3>
 					<div>
 						&nbsp;&nbsp;<strong>Start Time</strong> 10:30 21-03-2012 <br/>
 						&nbsp;&nbsp;<strong>End Time</strong> 20:30 21-03-2012 <br/>
-
-						&nbsp;&nbsp;<i class="icon-chevron-right"></i> <a href="#">Build Output</a> <br/>
-						&nbsp;&nbsp;<i class="icon-chevron-right"></i> <a href="#">Test Results</a> <span class="badge badge-important">6</span><br/>
-						&nbsp;&nbsp;<i class="icon-chevron-right"></i> <a href="#">Code Coverage</a> <span class="badge badge-success">91%</span><br/>
 					</div>
-					<h3>Run 4</h3>
+					<h3 class="qf-accordion-item">Run 7</h3>
 					<div>
 						&nbsp;&nbsp;<strong>Start Time</strong> 10:30 21-03-2012 <br/>
 						&nbsp;&nbsp;<strong>End Time</strong> 20:30 21-03-2012 <br/>
-
-						&nbsp;&nbsp;<i class="icon-chevron-right"></i> <a href="#">Build Output</a> <br/>
-						&nbsp;&nbsp;<i class="icon-chevron-right"></i> <a href="#">Test Results</a> <span class="badge badge-important">6</span><br/>
-						&nbsp;&nbsp;<i class="icon-chevron-right"></i> <a href="#">Code Coverage</a> <span class="badge badge-success">91%</span><br/>
 					</div>
 					<!-- END: To delete once data is available-->
 				</div>
     		</div>
 
-    		<div class="span10" style="background-color:white; padding: 15px; margin-right:0px; border-top-right-radius:15px; border-bottom-right-radius:15px; box-shadow: inset 3px 0px 3px #888; " id="content">
+    		<div class="span10 qf-content" id="content">
 				<!--Body content-->
 
 				<ul class="breadcrumb">

diff --git a/src/main/resources/web/tests-summary.html b/src/main/resources/web/tests-summary.html
@@ -6,6 +6,7 @@
 	<title>Test Results</title>
 
 	<link rel="stylesheet" href="scripts/bootstrap/css/bootstrap.css"/>
+	<link rel="stylesheet" href="quality-foundry.css" type="text/css"/>
 
 	<!-- For Accordion -->
 	<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script> 
@@ -19,7 +20,6 @@
 			});
 		});
 	</script>
-
 	<!-- DataTables -->
 	<link rel="stylesheet" type="text/css" href="scripts/DataTables-1.9.1/DT_bootstrap.css"/>
 	<script type="text/javascript" src="scripts/DataTables-1.9.1/media/js/jquery.dataTables.js"></script>
@@ -37,7 +37,6 @@
 			$('#allTests').dataTable( {"bPaginate": false});
 		} );
 	</script>
-
 	<!-- Typeahead -->
 	<script type="text/javascript" src="scripts/bootstrap/bootstrap-typeahead.js"></script>
 	<script type="text/javascript">
@@ -48,40 +47,22 @@
 	</script>
 </head>
 
-<body style="background-image:-webkit-linear-gradient(top, #FFFFFF 0%, #aaccdd 100%); background-repeat: no-repeat; background-attachment: fixed">
-	<div style="background-color:whiteZ; 
-				padding-left:20px; 
-				margin-bottom:20px; margin-left:20px; margin-right:20px; 
-				-moz-border-radius: 15px;
-				height:80px">
+<body class="qf-page-background">
+	<div class="qf-header">
 
-		<img src="imgs/logo.png" height="80" width="140" style="margin-left:20px; margin-bottom:0px"/>
+		<img src="imgs/logo.png" class="qf-logo" height="80" width="140"/>
 
-		<form class="form-search" style="float:right; padding-top:2%">
+		<form class="form-search qf-search">
 	  		<input type="text" id="global-search" data-provide="typeahead" class="search-query" placeholder="Search all">
 	  		<button type="submit" class="btn"> <i class="icon-search"></i> Search</button>
 		</form>
 	</div>
-	<!--   #aaccdd -->
-	<div class="container-fluid"
-		style="background-color: rgba(209, 209, 209, .6);
-				background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
-				background-size: 2px 2px;
-				margin-left:15px; margin-right:15px; margin-bottom:40px; 
-				padding-left:0px; padding-top:0px; padding-right:0px;
-				border-radius:15px; 		
-				-moz-box-shadow: 10px 10px 5px #615A5A;
-				-webkit-box-shadow: 10px 10px 5px #615A5A;
-				box-shadow: 0px 1px 5px 5px #888">
+	<!--   #aaccdd  #888 #615A5A-->
+	<div class="container-fluid qf-container">
 
 		<div class="row-fluid">
 
-			<div class="span2" id="accordion2" style="background-color:transparent; margin-top:0px; margin-bottom:0px; padding-bottom:50px;
-				padding-bottom: 20px; padding-top: 20px; padding-left: 20px; padding-right:0px; 
-				border-bottom-left-radius: 15px; 
-				border-top-left-radius: 15px;
-				border-top-right-radius: 0px;
-				border-bottom-right-radius: 0px">
+			<div class="span2 qf-sidebar">
       			<!--Sidebar content-->
 
 				<h3> <a href="#">Test Inventory</a> </h3> 
@@ -90,7 +71,7 @@ <h3> <a href="#">Test Inventory</a> </h3>
 				<!-- <#assign runs = ${runs}> 
 					<#list runs as run> 
 				
-					<h3 style="outline: 0 none; -moz-outline: 0 none"><a href="#">${run.name}</a> 
+					<h3 class="qf-accordion-item"><a href="#">${run.name}</a> 
 						<#if run.status == "running"> <img src="loading-snake.gif" alt="loading icon" style="padding-bottom: 6px; vertical-align:middle"/> </#if> 
 					</h3>
 					<div>
@@ -114,62 +95,48 @@ <h3 style="outline: 0 none; -moz-outline: 0 none"><a href="#">${run.name}</a>
 						</#if>				
 					</div> -->
 					<!-- BEGIN: To delete once data is available-->
-					 <h3 style="outline: 0 none; -moz-outline: 0 none"> Run 2</h3> 
+					<h3 class="qf-accordion-item"> Run 1</h3> 
+					<div>
+						&nbsp;&nbsp;<strong>Start Time</strong> 10:30 21-03-2012 <br/>
+						&nbsp;&nbsp;<strong>End Time</strong> 20:30 21-03-2012 <br/>
+					</div> 
+					<h3 class="qf-accordion-item"> Run 2</h3> 
 					<div>
 						&nbsp;&nbsp;<strong>Start Time</strong> 10:30 21-03-2012 <br/>
 						&nbsp;&nbsp;<strong>End Time</strong> 20:30 21-03-2012 <br/>
-						<br/>
-						&nbsp;&nbsp;<i class="icon-chevron-right"></i> <a href="#">Build Output</a> <br/>
-						&nbsp;&nbsp; <span class="badge">6</span> <a href="#">Test Results</a>   <br/>
-						&nbsp;&nbsp; <span class="badge">6</span> <a href="#">Code Coverage</a> <br/>
+
 					</div>
-					<h3 style="outline: 0">Run 3 <img src="loading-snake.gif" alt="loading icon" style="padding-bottom: 6px; vertical-align:middle"/> </h3>
+					<h3 class="qf-accordion-item">Run 3 <img src="loading-snake.gif" alt="loading icon" style="padding-bottom: 6px; vertical-align:middle"/> </h3>
 					<div>
 						&nbsp;&nbsp;<strong>Start Time</strong> 10:30 21-03-2012 <br/>
 						&nbsp;&nbsp;<em>Generating Results...</em><br/>
 
 					</div>
-					<h3 style="outline: 0">Run 4</h3>
+					<h3 class="qf-accordion-item">Run 4</h3>
 					<div>
 						&nbsp;&nbsp;<strong>Start Time</strong> 10:30 21-03-2012 <br/>
 						&nbsp;&nbsp;<strong>End Time</strong> 20:30 21-03-2012 <br/>
-
-						&nbsp;&nbsp;<i class="icon-chevron-right"></i> <a href="#">Build Output</a> <br/>
-						&nbsp;&nbsp;<i class="icon-chevron-right"></i> <a href="#">Test Results</a> <span class="badge badge-important">6</span><br/>
-						&nbsp;&nbsp;<i class="icon-chevron-right"></i> <a href="#">Code Coverage</a> <span class="badge badge-success">91%</span><br/>
 					</div>
-					<h3 style="outline: 0">Run 5</h3>
+					<h3 class="qf-accordion-item">Run 5</h3>
 					<div>
 						&nbsp;&nbsp;<strong>Start</strong> 10:30 21-03-2012 <br/>
 						&nbsp;&nbsp;<strong>End</strong> 20:30 21-03-2012 <br/>
-
-						&nbsp;&nbsp;<a href="#">Build Output</a> <br/>
-						&nbsp;&nbsp;<a href="#">Test Results</a> <span class="badge badge-important">6</span><br/>
-						&nbsp;&nbsp;<a href="#">Code Coverage</a> <span class="badge badge-success">91%</span><br/>
 					</div>
-					<h3 style="outline: 0">Run 6</h3>
+					<h3 class="qf-accordion-item">Run 6</h3>
 					<div>
 						&nbsp;&nbsp;<strong>Start Time</strong> 10:30 21-03-2012 <br/>
 						&nbsp;&nbsp;<strong>End Time</strong> 20:30 21-03-2012 <br/>
-
-						&nbsp;&nbsp;<i class="icon-chevron-right"></i> <a href="#">Build Output</a> <br/>
-						&nbsp;&nbsp;<i class="icon-chevron-right"></i> <a href="#">Test Results</a> <span class="badge badge-important">6</span><br/>
-						&nbsp;&nbsp;<i class="icon-chevron-right"></i> <a href="#">Code Coverage</a> <span class="badge badge-success">91%</span><br/>
 					</div>
-					<h3 style="outline: 0">Run 7</h3>
+					<h3 class="qf-accordion-item">Run 7</h3>
 					<div>
 						&nbsp;&nbsp;<strong>Start Time</strong> 10:30 21-03-2012 <br/>
 						&nbsp;&nbsp;<strong>End Time</strong> 20:30 21-03-2012 <br/>
-
-						&nbsp;&nbsp;<i class="icon-chevron-right"></i> <a href="#">Build Output</a> <br/>
-						&nbsp;&nbsp;<i class="icon-chevron-right"></i> <a href="#">Test Results</a> <span class="badge badge-important">6</span><br/>
-						&nbsp;&nbsp;<i class="icon-chevron-right"></i> <a href="#">Code Coverage</a> <span class="badge badge-success">91%</span><br/>
 					</div>
 					<!-- END: To delete once data is available-->
 				</div>
     		</div>
 
-    		<div class="span10" style="background-color:white; padding: 15px; margin-right:0px; border-top-right-radius:15px; border-bottom-right-radius:15px; box-shadow: inset 3px 0px 3px #888; " id="content">
+    		<div class="span10 qf-content" id="content">
 				<!--Body content-->
 
 				<ul class="breadcrumb">