azkaban-memoizeit

Changes

build.xml 5(+4 -1)

src/less/base.less 61(+61 -0)

src/less/bootstrap-azkaban.less 600(+0 -600)

src/less/flow.less 159(+159 -0)

src/less/job.less 25(+25 -0)

src/less/login.less 32(+32 -0)

src/less/navbar.less 103(+103 -0)

src/web/css/bootstrap-fileinput.css 93(+0 -93)

src/web/js/bootstrap-fileinput.js 179(+0 -179)

Details

build.xml 5(+4 -1)

diff --git a/build.xml b/build.xml
index 4b81f6d..c695082 100644
--- a/build.xml
+++ b/build.xml
@@ -293,7 +293,10 @@
 		
 		<!-- Copy compiled less CSS -->
 		<copy todir="${dist.solo.package.dir}/web/css">
-			<fileset dir="${dist.less.dir}" />
+      <fileset dir="${dist.less.dir}">
+        <include name="azkaban.css" />
+        <include name="azkaban-svg.css" />
+      </fileset>
 		</copy>
 		
 		<!-- Copy sql files -->
diff --git a/src/java/azkaban/webapp/servlet/velocity/executingflowpage.vm b/src/java/azkaban/webapp/servlet/velocity/executingflowpage.vm
index 4842f61..efe9050 100644
--- a/src/java/azkaban/webapp/servlet/velocity/executingflowpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/executingflowpage.vm
@@ -53,7 +53,7 @@
 #set ($show_schedule="false")
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
-		<div class="container">
+		<div class="container-full">
 #parse ("azkaban/webapp/servlet/velocity/message.vm")
 #if ($errorMsg)
   #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
@@ -65,7 +65,7 @@
 	## Page header
 
 		<div class="az-page-header">
-			<div class="container" id="flow-status">
+			<div class="container-full" id="flow-status">
         <div class="row">
           <div class="col-lg-7">
             <h1>
@@ -91,7 +91,7 @@
 			</div>
 		</div>
 
-		<div class="container">
+		<div class="container-full">
 
 	## Breadcrumb
 
diff --git a/src/java/azkaban/webapp/servlet/velocity/executionspage.vm b/src/java/azkaban/webapp/servlet/velocity/executionspage.vm
index c13dd91..2fb2080 100644
--- a/src/java/azkaban/webapp/servlet/velocity/executionspage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/executionspage.vm
@@ -35,21 +35,21 @@
 #set ($current_page="executing")
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
-		<div class="container">
+		<div class="container-full">
 #parse ("azkaban/webapp/servlet/velocity/message.vm")
 		</div>
 
 ## Page header.
 
 		<div class="az-page-header">
-			<div class="container">
+			<div class="container-full">
         <h1><a href="${context}/executor">Executing Flows</a></h1>
 			</div>
 		</div>
 
 ## Page Content
 
-		<div class="container">
+		<div class="container-full">
       <ul class="nav nav-tabs" id="header-tabs">
         <li id="currently-running-view-link"><a href="#currently-running">Currently Running</a></li>
         <li id="recently-finished-view-link"><a href="#recently-finished">Recently Finished</a></li>
@@ -151,6 +151,6 @@
 		
 #parse ("azkaban/webapp/servlet/velocity/footer.vm")
 
-		</div><!-- /container -->
+		</div><!-- /container-full -->
 	</body>
 </html>
diff --git a/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm b/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm
index 5954e96..aac3148 100644
--- a/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm
@@ -17,8 +17,8 @@
 
  	## Graph view.
  
-			<div class="row" id="graphView">
-				<div class="col-lg-4">
+			<div class="row row-offcanvas row-offcanvas-left" id="graphView">
+				<div class="col-xs-6 col-sm-3 sidebar-offcanvas">
 					<div class="panel panel-default" id="jobList">
 						<div class="panel-heading">
 							<input id="filter" type="text" placeholder="Job Filter" class="form-control">
@@ -29,7 +29,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="col-lg-8">
+				<div class="col-xs-12 col-sm-9">
 					<div id="svgDiv" class="well well-clear well-sm">
 						<svg id="flow-graph" xmlns="http://www.w3.org/2000/svg" version="1.1" shape-rendering="optimize-speed" text-rendering="optimize-speed">
 						</svg>
diff --git a/src/java/azkaban/webapp/servlet/velocity/flowpage.vm b/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
index 332761d..80efa01 100644
--- a/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
@@ -55,7 +55,7 @@
 #set ($current_page="all")
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
-		<div class="container">
+		<div class="container-full">
 #parse ("azkaban/webapp/servlet/velocity/message.vm")
 #if ($errorMsg)
   #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
@@ -66,7 +66,7 @@
 	## Page header.
 
 		<div class="az-page-header">
-			<div class="container">
+			<div class="container-full">
 				<div class="row">
 					<div class="col-lg-6">
 						<h1><a href="${context}/manager?project=${project.name}&flow=${flowid}">Flow <small>$flowid</small></a></h1>
@@ -83,7 +83,7 @@
 
 	## Breadcrumbs and tabs
 
-		<div class="container">
+		<div class="container-full">
       <ol class="breadcrumb">
         <li><a href="${context}/manager?project=${project.name}"><strong>Project</strong> $project.name</a></li>
         <li class="active"><strong>Flow</strong> $flowid</li>
diff --git a/src/java/azkaban/webapp/servlet/velocity/historypage.vm b/src/java/azkaban/webapp/servlet/velocity/historypage.vm
index 8c02855..159eed9 100644
--- a/src/java/azkaban/webapp/servlet/velocity/historypage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/historypage.vm
@@ -37,7 +37,7 @@
 #set ($current_page="history")
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
-		<div class="container">
+		<div class="container-full">
 #parse ("azkaban/webapp/servlet/velocity/message.vm")
 #if ($errorMsg)
   #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
@@ -48,7 +48,7 @@
   ## Page header.
 
 		<div class="az-page-header">
-      <div class="container">
+      <div class="container-full">
         <div class="row">
           <div class="col-lg-6">
             <h1><a href="${context}/history">History</a></h1>
@@ -71,7 +71,7 @@
 			</div>
 		</div>
 
-		<div class="container">
+		<div class="container-full">
 			<div class="row">
 				<div class="col-lg-12">
           <table id="executingJobs" class="table table-striped table-bordered table-hover table-condensed executions-table">
@@ -221,6 +221,6 @@
 #end
 #parse ("azkaban/webapp/servlet/velocity/footer.vm")
 
-		</div><!-- /container -->
+		</div><!-- /container-full -->
 	</body>
 <html>
diff --git a/src/java/azkaban/webapp/servlet/velocity/index.vm b/src/java/azkaban/webapp/servlet/velocity/index.vm
index 424cfbe..a96dfe0 100644
--- a/src/java/azkaban/webapp/servlet/velocity/index.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/index.vm
@@ -36,7 +36,7 @@
 #set ($current_page="all")
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
-		<div class="container">
+		<div class="container-full">
 #parse ("azkaban/webapp/servlet/velocity/message.vm")
 #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
 		</div>
@@ -44,7 +44,7 @@
 ## Page Header and project search form.
 
 		<div class="az-page-header">
-      <div class="container">
+      <div class="container-full">
         <div class="row">
           <div class="col-lg-6">
 #if ($allProjects)
@@ -84,7 +84,7 @@
 
 ## Table of projects.
 
-		<div class="container">
+		<div class="container-full">
 			<div class="row">
 				<div class="col-lg-12">
           <table class="table table-condensed table-striped table-bordered table-hover" id="all-jobs">
diff --git a/src/java/azkaban/webapp/servlet/velocity/jmxpage.vm b/src/java/azkaban/webapp/servlet/velocity/jmxpage.vm
index cbddd02..03159ed 100644
--- a/src/java/azkaban/webapp/servlet/velocity/jmxpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/jmxpage.vm
@@ -36,7 +36,7 @@
 #set ($counter = 0)
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
-		<div class="container">
+		<div class="container-full">
 			
 #if ($errorMsg)
   #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
@@ -45,12 +45,12 @@
 		</div>
 
 		<div class="az-page-header">
-			<div class="container">
+			<div class="container-full">
 				<h1>Admin JMX Http Page</h1>
 			</div>
 		</div>
 
-		<div class="container">
+		<div class="container-full">
 
 ## Web Client JMX 
 
diff --git a/src/java/azkaban/webapp/servlet/velocity/jobdetailspage.vm b/src/java/azkaban/webapp/servlet/velocity/jobdetailspage.vm
index e429314..475da71 100644
--- a/src/java/azkaban/webapp/servlet/velocity/jobdetailspage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/jobdetailspage.vm
@@ -42,7 +42,7 @@
 #set ($current_page="executing")
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
-		<div class="container">
+		<div class="container-full">
 #if ($errorMsg)
   #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #else
@@ -52,7 +52,7 @@
 	## Page header.
 
 		<div class="az-page-header">
-			<div class="container">
+			<div class="container-full">
 				<div class="row">
 					<div class="col-lg-6">
 						<h1><a href="${context}/executor?execid=${execid}&job=${jobid}">Job Execution <small>$jobid</small></a></h1>
@@ -68,7 +68,7 @@
 	
 	## Breadcrumb
 
-		<div class="container">
+		<div class="container-full">
 			<ol class="breadcrumb">
 				<li><a href="${context}/manager?project=${projectName}"><strong>Project</strong> $projectName</a></li>
 				<li><a href="${context}/manager?project=${projectName}&flow=${flowid}"><strong>Flow</strong> $flowid</a></li>
diff --git a/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm b/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm
index 36f9359..a8131ab 100644
--- a/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm
@@ -60,7 +60,7 @@
 #set ($current_page="all")
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
-		<div class="container">
+		<div class="container-full">
 #parse ("azkaban/webapp/servlet/velocity/message.vm")
 #if ($errorMsg)
   #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
@@ -71,12 +71,12 @@
 	## Page header
 
 		<div class="az-page-header">
-			<div class="container">
+			<div class="container-full">
         <h1><a href="${context}/manager?project=${projectName}&job=${jobid}&history">Job History <small>$jobid</small></a></h1>
 			</div>
 		</div>
 
-		<div class="container">
+		<div class="container-full">
 	
   ## Breadcrumb
 
diff --git a/src/java/azkaban/webapp/servlet/velocity/jobpage.vm b/src/java/azkaban/webapp/servlet/velocity/jobpage.vm
index b2da81d..46bf33a 100644
--- a/src/java/azkaban/webapp/servlet/velocity/jobpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/jobpage.vm
@@ -38,7 +38,7 @@
 #set ($current_page="all")
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
-		<div class="container">
+		<div class="container-full">
 #parse ("azkaban/webapp/servlet/velocity/message.vm")
 #if ($errorMsg)
   #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
@@ -49,7 +49,7 @@
 	## Page header
 
 		<div class="az-page-header">
-			<div class="container">
+			<div class="container-full">
         <div class="row">
           <div class="col-lg-6">
             <h1><a href="${context}/manager?project=${project.name}&flow=${flowid}&job=${jobid}">Job <small>$jobid</small></a></h1>
@@ -64,7 +64,7 @@
 			</div>
 		</div>
 
-		<div class="container">
+		<div class="container-full">
 	
   ## Breadcrumb
 
@@ -74,8 +74,8 @@
         <li class="active"><strong>Job</strong> $jobid</li>
       </ol>
 
-			<div class="row">
-				<div class="col-lg-8">
+			<div class="row row-offcanvas row-offcanvas-right">
+				<div class="col-xs-12 col-sm-9">
 	
 	## Job details table
 
@@ -105,7 +105,7 @@
 						</table>
 					</div>
 				</div><!-- /col-lg-8 -->
-				<div class="col-lg-4">
+				<div class="col-xs-6 col-sm-3 sidebar-offcanvas">
 					<div class="well" id="job-summary">
 						<h3>Job <small>$jobid</small></h3>
 						<p><strong>Job Type</strong> $jobtype</p>
@@ -209,6 +209,6 @@
 #end
 
 #parse ("azkaban/webapp/servlet/velocity/footer.vm")
-		</div><!-- /container -->
+		</div><!-- /container-full -->
 	</body>
 </html>
diff --git a/src/java/azkaban/webapp/servlet/velocity/login.vm b/src/java/azkaban/webapp/servlet/velocity/login.vm
index 698581f..8feba70 100644
--- a/src/java/azkaban/webapp/servlet/velocity/login.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/login.vm
@@ -32,7 +32,7 @@
 #set ($navbar_disabled = 1)
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
-		<div class="container">
+		<div class="container-full">
       <div class="login">
         <div class="alert alert-danger" id="error-msg"></div>
         <div class="well">
diff --git a/src/java/azkaban/webapp/servlet/velocity/nav.vm b/src/java/azkaban/webapp/servlet/velocity/nav.vm
index b0b89ac..5c4f4eb 100644
--- a/src/java/azkaban/webapp/servlet/velocity/nav.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/nav.vm
@@ -15,7 +15,7 @@
 *#
 
     <div class="navbar navbar-inverse navbar-static-top">
-      <div class="container">
+      <div class="container-full">
         <div class="navbar-header">
 #if ($navbar_disabled != 1)
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
diff --git a/src/java/azkaban/webapp/servlet/velocity/permissionspage.vm b/src/java/azkaban/webapp/servlet/velocity/permissionspage.vm
index e477244..fd687c5 100644
--- a/src/java/azkaban/webapp/servlet/velocity/permissionspage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/permissionspage.vm
@@ -38,7 +38,7 @@
 #set ($current_page = "all")
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
-	<div class="container">
+	<div class="container-full">
 #parse ("azkaban/webapp/servlet/velocity/message.vm")
 #if ($errorMsg)
   #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
@@ -52,9 +52,9 @@
 
   ## Page content.
 
-		<div class="container">
-			<div class="row">
-				<div class="col-lg-8">
+		<div class="container-full">
+			<div class="row row-offcanvas row-offcanvas-right">
+				<div class="col-xs-12 col-sm-9">
 	
 	#set ($project_page = "permissions")
 	#parse ("azkaban/webapp/servlet/velocity/projectnav.vm")
@@ -234,7 +234,7 @@
           </div>
 	
 				</div><!-- /col-lg-8 -->
-				<div class="col-lg-4">
+				<div class="col-xs-6 col-sm-3 sidebar-offcanvas">
 	#parse ("azkaban/webapp/servlet/velocity/projectsidebar.vm")
 				</div><!-- /col-lg-4 -->
 			</div><!-- /row -->
@@ -344,6 +344,6 @@
 	#parse ("azkaban/webapp/servlet/velocity/invalidsessionmodal.vm")
 #end
 #parse ("azkaban/webapp/servlet/velocity/footer.vm")
-		</div><!-- /container -->
+		</div><!-- /container-full -->
 	</body>
 </html>
diff --git a/src/java/azkaban/webapp/servlet/velocity/projectlogpage.vm b/src/java/azkaban/webapp/servlet/velocity/projectlogpage.vm
index ebdf2dc..cf106a0 100644
--- a/src/java/azkaban/webapp/servlet/velocity/projectlogpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/projectlogpage.vm
@@ -41,7 +41,7 @@
 #set ($current_page="all")
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
-		<div class="container">
+		<div class="container-full">
 #if ($errorMsg)
   #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #else
@@ -54,9 +54,9 @@
 
 	## Page content.
 
-		<div class="container">
-			<div class="row">
-				<div class="col-lg-8">
+		<div class="container-full">
+			<div class="row row-offcanvas row-offcanvas-right">
+				<div class="col-xs-12 col-sm-9">
 	
 	#set ($project_page = "logs")
 	#parse ("azkaban/webapp/servlet/velocity/projectnav.vm")
@@ -82,7 +82,7 @@
 						</table>
 					</div>
 				</div>
-				<div class="col-lg-4">
+				<div class="col-xs-6 col-sm-3 sidebar-offcanvas">
 	#parse ("azkaban/webapp/servlet/velocity/projectsidebar.vm")
 				</div>
 			</div>
@@ -92,6 +92,6 @@
 
 #parse ("azkaban/webapp/servlet/velocity/footer.vm")
 
-		</div><!-- /container -->
+		</div><!-- /container-full -->
 	</body>
 </html>
diff --git a/src/java/azkaban/webapp/servlet/velocity/projectpage.vm b/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
index e2d0b5a..4be989d 100644
--- a/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
@@ -45,7 +45,7 @@
 #set ($current_page="all")
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
-		<div class="container">
+		<div class="container-full">
 #parse ("azkaban/webapp/servlet/velocity/message.vm")
 #if ($errorMsg)
   #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
@@ -59,9 +59,9 @@
 
 	## Page content.
 
-    <div class="container">
-			<div class="row">
-				<div class="col-lg-8" id="flow-tabs">
+    <div class="container-full">
+			<div class="row row-offcanvas row-offcanvas-right">
+				<div class="col-xs-12 col-sm-9" id="flow-tabs">
 					
 	#set ($project_page = "flows")
 	#parse ("azkaban/webapp/servlet/velocity/projectnav.vm")
@@ -95,7 +95,7 @@
           </div><!-- /#flow-tabs -->
 				</div><!-- /col-lg-8 -->
 
-				<div class="col-lg-4">
+				<div class="col-xs-6 col-sm-3 sidebar-offcanvas">
 	#parse ("azkaban/webapp/servlet/velocity/projectsidebar.vm")
 				</div><!-- /col-lg-4 -->
 			</div><!-- /row -->
diff --git a/src/java/azkaban/webapp/servlet/velocity/projectpageheader.vm b/src/java/azkaban/webapp/servlet/velocity/projectpageheader.vm
index 4eddc0f..0936995 100644
--- a/src/java/azkaban/webapp/servlet/velocity/projectpageheader.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/projectpageheader.vm
@@ -15,7 +15,7 @@
 *#
 
 		<div class="az-page-header">
-			<div class="container">
+			<div class="container-full">
         <div class="row">
           <div class="col-lg-6" id="project-page-header">
             <h1><a href="${context}/manager?project=${project.name}">Project <small>$project.name</small></a></h1>
diff --git a/src/java/azkaban/webapp/servlet/velocity/propertypage.vm b/src/java/azkaban/webapp/servlet/velocity/propertypage.vm
index 08c40bf..07b0cfa 100644
--- a/src/java/azkaban/webapp/servlet/velocity/propertypage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/propertypage.vm
@@ -36,7 +36,7 @@
 #set($current_page="all")
 #parse("azkaban/webapp/servlet/velocity/nav.vm")
 		
-		<div class="container">
+		<div class="container-full">
 #if ($errorMsg)
   #parse("azkaban/webapp/servlet/velocity/errormsg.vm")
 #else
@@ -46,14 +46,14 @@
 	## Page header
 
 		<div class="az-page-header">
-			<div class="container">
+			<div class="container-full">
         <h1><a href="${context}/manager?project=${project.name}&flow=${flowid}&job=${jobid}&prop=${property}">Properties <small>$property</small></a></h1>
 			</div>
 		</div>
 
-		<div class="container">
-			<div class="row">
-				<div class="col-lg-8">
+		<div class="container-full">
+			<div class="row row-offcanvas row-offcanvas-right">
+				<div class="col-xs-12 col-sm-9">
 
 	## Breadcrumb
 
@@ -87,7 +87,7 @@
 						</table>
 					</div>
 				</div><!-- /col-lg-8 -->
-				<div class="col-lg-4">
+				<div class="col-xs-6 col-sm-3 sidebar-offcanvas">
 					<div class="well" id="job-summary">
 						<h4>Properties <small>$property</small></h4>
 						<p><strong>Job</strong> $jobid</p>
@@ -124,6 +124,6 @@
 #end
 #parse ("azkaban/webapp/servlet/velocity/footer.vm")
 
-		</div><!-- /container -->
+		</div><!-- /container-full -->
 	</body>
 </html>
diff --git a/src/java/azkaban/webapp/servlet/velocity/scheduledflowcalendarpage.vm b/src/java/azkaban/webapp/servlet/velocity/scheduledflowcalendarpage.vm
index 18ad3f7..3f8fc52 100644
--- a/src/java/azkaban/webapp/servlet/velocity/scheduledflowcalendarpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/scheduledflowcalendarpage.vm
@@ -46,7 +46,7 @@
 #set ($current_page="schedule")
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
-    <div class="container">
+    <div class="container-full">
 #parse ("azkaban/webapp/servlet/velocity/message.vm")
 #if ($errorMsg)
   #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
@@ -56,12 +56,12 @@
 		</div>
 
     <div class="az-page-header">
-      <div class="container">
+      <div class="container-full">
         <h1>Scheduled Flows</h1>
       </div>
     </div>
 
-    <div class="container">
+    <div class="container-full">
       <div class="row">
         <div class="col-lg-12">
           <div class="pull-right">
diff --git a/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm b/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
index 3036890..a1a9b64 100644
--- a/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
@@ -40,7 +40,7 @@
 #set ($current_page="schedule")
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
-		<div class="container">
+		<div class="container-full">
 #parse ("azkaban/webapp/servlet/velocity/message.vm")
 #if ($errorMsg)
   #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
@@ -51,14 +51,14 @@
 	## Page header.
 
 		<div class="az-page-header">
-			<div class="container">
+			<div class="container-full">
         <h1><a href="${context}/schedule">Scheduled Flows</a></h1>
 			</div>
 		</div>
 
 	## Page content.
 
-		<div class="container">
+		<div class="container-full">
 			<div class="row">
 				<div class="col-lg-12">
           <table id="scheduledFlowsTbl" class="table table-striped table-condensed table-bordered table-hover">
diff --git a/src/java/azkaban/webapp/servlet/velocity/style.vm b/src/java/azkaban/webapp/servlet/velocity/style.vm
index 73df059..1cebf28 100644
--- a/src/java/azkaban/webapp/servlet/velocity/style.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/style.vm
@@ -20,8 +20,7 @@
 		<link rel="shortcut icon" href="${context}/favicon.ico" />
     <!-- Bootstrap core CSS -->
     <link href="/css/bootstrap.css" rel="stylesheet">
-    <link href="/css/bootstrap-fileinput.css" rel="stylesheet">
-		<link href="/css/bootstrap-azkaban.css" rel="stylesheet">
+		<link href="/css/azkaban.css" rel="stylesheet">
 		<style type="text/css">
 			.navbar-enviro .navbar-enviro-name {
 				color: ${azkaban_color};
diff --git a/src/java/azkaban/webapp/servlet/velocity/triggerspage.vm b/src/java/azkaban/webapp/servlet/velocity/triggerspage.vm
index e2bb94e..914c37c 100644
--- a/src/java/azkaban/webapp/servlet/velocity/triggerspage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/triggerspage.vm
@@ -42,7 +42,7 @@
 #set ($current_page="triggers")
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
-    <div class="container">
+    <div class="container-full">
 #parse ("azkaban/webapp/servlet/velocity/message.vm")
 #if ($errorMsg)
   #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
@@ -52,12 +52,12 @@
 		</div>
 
     <div class="az-page-header">
-      <div class="container">
+      <div class="container-full">
         <h1>All Triggers</h1>
       </div>
     </div>
 			
-    <div class="container">
+    <div class="container-full">
 			<div class="row">
         <div class="col-lg-12">
           <table id="triggersTbl" class="table table-striped table-bordered table-condensed table-hover">
diff --git a/src/java/azkaban/webapp/servlet/velocity/viewer.vm b/src/java/azkaban/webapp/servlet/velocity/viewer.vm
index 3ff5761..e5a8f68 100644
--- a/src/java/azkaban/webapp/servlet/velocity/viewer.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/viewer.vm
@@ -41,7 +41,7 @@
 #set ($current_page="viewer")
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
-    <div class="container">
+    <div class="container-full">
 #if ($errorMsg)
   #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #else
diff --git a/src/less/azkaban.less b/src/less/azkaban.less
new file mode 100644
index 0000000..deed07a
--- /dev/null
+++ b/src/less/azkaban.less
@@ -0,0 +1,13 @@
+@import "base.less";
+@import "offcanvas.less";
+
+@import "navbar.less";
+@import "header.less";
+
+@import "contextmenu.less";
+@import "tables.less";
+
+@import "login.less";
+@import "project.less";
+@import "flow.less";
+@import "job.less";

src/less/base.less 61(+61 -0)

diff --git a/src/less/base.less b/src/less/base.less
new file mode 100644
index 0000000..4893de6
--- /dev/null
+++ b/src/less/base.less
@@ -0,0 +1,61 @@
+.container-full {
+  padding: 0 105px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+// Wide modal used for certain panels such as executing flow panel.
+.modal-wide .modal-dialog {
+  width: 80%;
+}
+
+// Hide messaging alert by default.
+.alert-messaging {
+  display: none;
+}
+
+// Add additional space under navs.
+.nav-tabs, .nav-pills {
+  margin-bottom: 15px;
+}
+
+.panel-list {
+  border: 0;
+}
+
+.list-group-collapse {
+  margin: 0;
+  .list-group-item {
+    border-radius: 0;
+    border-left: 0;
+    border-right: 0;
+    
+    &:first-child {
+      border-top: 0;
+    }
+    
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    button {
+      margin-left: 3px;
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  .form-horizontal .control-label-center {
+    text-align: center;
+  }
+}
+
+.well-clear {
+  background-color: transparent;
+}
+
+.nav {
+	.nav-button {
+		margin-left: 5px;
+	}
+}
diff --git a/src/less/contextmenu.less b/src/less/contextmenu.less
new file mode 100644
index 0000000..e0e8761
--- /dev/null
+++ b/src/less/contextmenu.less
@@ -0,0 +1,43 @@
+.contextMenu {
+  position: absolute;
+  background-color: #FFF;
+  border: 1px solid #DDD;
+  -moz-box-shadow: 2px 2px 5px #888;
+  -webkit-box-shadow: 2px 2px 5px #888;
+  box-shadow: 2px 2px 5px #888;
+  z-index: 2010;
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    &.menuitem {
+      background-color: #FFF;
+      padding: 3px 20px;
+      min-width: 50px;
+      font-size: 10pt;
+      cursor: pointer;
+    
+      .expandSymbol {
+        background-image: url("../css/images/ui-icons_cccccc_256x240.png");
+        background-position: -32px -16px;
+        height: 16px;
+        width: 16px;
+        float:right;
+      }
+      
+      &:hover {
+        background-color: #555;
+        color: #FFF;
+      }
+    }
+
+    &.break {
+      border-bottom: 1px solid #BBB;
+      margin: 2px 5px;
+    }
+  }
+}

src/less/flow.less 159(+159 -0)

diff --git a/src/less/flow.less b/src/less/flow.less
new file mode 100644
index 0000000..6a52d73
--- /dev/null
+++ b/src/less/flow.less
@@ -0,0 +1,159 @@
+#flow-graph {
+  width: 100%;
+  height: 500px;
+}
+
+#flow-executing-graph {
+  width: 100%;
+  height: 500px;
+}
+
+.flow-progress {
+	width: 280px;
+	margin: 4px;
+  background-color: #f5f5f5;
+  height: 24px;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.flow-progress-bar {
+	height: 100%;
+  background-color: #ccc;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: width 0.6s ease;
+          transition: width 0.6s ease;
+
+  &.attempt {
+    opacity: 0.70;
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  &.SUCCEEDED {
+    background-color: #5cb85c;
+  }
+
+  &.FAILED {
+    background-color: #d9534f;
+  }
+
+  &.RUNNING {
+    background-color: #3398cc;	
+    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
+    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-size: 40px 40px;
+    -webkit-animation: progress-bar-stripes 2s linear infinite;
+            animation: progress-bar-stripes 2s linear infinite;
+  }
+
+  &.QUEUED {
+    background-color: #009fc9;
+  }
+}
+
+td {
+  .status {
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+
+    padding: 2px 2px;
+    color: #FFF;
+    text-align: center;
+    margin-top: 2px;
+    
+    &.SUCCEEDED {
+      background-color: #5cb85c;
+    }
+
+    &.FAILED {
+      background-color: #d9534f;
+    }
+
+    &.PAUSED {
+      background-color: #c82123;
+    }
+
+    &.READY {
+      background-color: #ccc;
+    }
+
+    &.RUNNING {
+      background-color: #3398cc;	
+    }
+
+    &.FAILED_FINISHING {
+      background-color: #f19153;	
+    }
+
+    &.DISABLED {
+      background-color: #aaa;	
+    }
+
+    &.SKIPPED {
+      background-color: #aaa;	
+    }
+
+    &.KILLED {
+      background-color: #d9534f;
+    }
+
+    &.UNKNOWN {
+      background-color: #ccc;
+    }
+  }
+}
+
+// TODO: Rename this as #job-list
+#list {
+  a {
+    &.nodedisabled,
+    &.DISABLED {
+      opacity: 0.3;
+    }
+
+    &.DISABLED .icon {
+      background-position: 16px 0px;
+    }
+
+    &.READY .icon {
+      background-position: 16px 0px;
+    }
+
+    &.QUEUED .icon {
+      opacity: 0.5;
+      background-position: 32px 0px;
+    }
+
+    &.RUNNING .icon {
+      background-position: 32px 0px;
+    }
+
+    &.SUCCEEDED .icon {
+      background-position: 48px 0px;
+    }
+
+    &.FAILED .icon {
+      background-position: 0px 0px;
+    }
+
+    &.KILLED .icon {
+      background-position: 0px 0px;
+    }
+
+    .icon {
+      float: left;
+      width: 16px;
+      height: 16px;
+      margin: 2px 4px 0px -5px;
+      background-image: url("./images/dot-icon.png");
+      background-position: 16px 0px;
+    }
+  }
+}
diff --git a/src/less/header.less b/src/less/header.less
new file mode 100644
index 0000000..c03ecbf
--- /dev/null
+++ b/src/less/header.less
@@ -0,0 +1,34 @@
+.az-page-header {
+  padding: 5px 0 10px;
+  margin: 0 0 30px;
+  border-bottom: 1px solid #dddddd;
+  background-color: #f4f4f4;
+
+  h1 {
+    font-size: 32px;
+    margin-bottom: 5px;
+  }
+  
+  .az-page-header-form {
+    margin-top: 20px;
+  }
+
+  .az-exflow-stats {
+    margin-top: 10px;
+  }
+
+  .editable {
+    margin: 0px;
+    cursor: pointer;
+    &:hover {
+      background-color: #fcfcfc;
+    }
+    &.editable-placeholder {
+      color: #a0a0a0;
+    }
+  }
+
+  .editable-form {
+    display: none;
+  }
+}

src/less/job.less 25(+25 -0)

diff --git a/src/less/job.less b/src/less/job.less
new file mode 100644
index 0000000..4b71783
--- /dev/null
+++ b/src/less/job.less
@@ -0,0 +1,25 @@
+.log-viewer {
+  padding: 0;
+  background-color: #fcfcfc;
+
+  pre {
+    margin: 0;
+    border: 0;
+    height: 500px;
+    font-size: 12px;
+    background-color: transparent;
+    overflow: auto;
+    width: auto;
+    word-wrap: normal;
+    white-space: pre;
+  }
+}
+
+.panel-body-stats {
+  padding: 0;
+  overflow: auto;
+
+  table {
+    margin-bottom: 0;
+  }
+}

src/less/login.less 32(+32 -0)

diff --git a/src/less/login.less b/src/less/login.less
new file mode 100644
index 0000000..80dc4af
--- /dev/null
+++ b/src/less/login.less
@@ -0,0 +1,32 @@
+// Since the azkaban navbar no longer has the 20px bottom margin so that the
+// page header sits flush below the navbar, add a 20px top margin to the login
+// form.
+.login {
+  max-width: 360px;
+  margin: 20px auto;
+  .form-control {
+    position: relative;
+    font-size: 16px;
+    height: auto;
+    padding: 10px;
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+            box-sizing: border-box;
+
+    &:focus {
+      z-index: 2;
+    }
+  }
+
+  input[type="text"] {
+    margin-bottom: -1px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  input[type="password"] {
+    margin-bottom: 20px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}

src/less/navbar.less 103(+103 -0)

diff --git a/src/less/navbar.less b/src/less/navbar.less
new file mode 100644
index 0000000..71d9124
--- /dev/null
+++ b/src/less/navbar.less
@@ -0,0 +1,103 @@
+.navbar-logo {
+  float: left;
+  padding: 15px 15px;
+  font-size: 18px;
+  line-height: 20px;
+
+  a {
+    &:hover,
+    &:focus {
+      text-decoration: none;
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  .navbar > .container .navbar-logo {
+    margin-left: -15px;
+  }
+}
+
+@media (min-width: 768px) {
+  .navbar-enviro {
+    width: auto;
+  }
+}
+
+.navbar-enviro {
+  margin: 25px 20px 0px 10px;
+     
+  .navbar-enviro-name {
+    color: #ff3601;
+    font-family: Helvetica, Arial, Sans-Serif;
+    font-size: 118.75%;
+    font-weight: bold;
+  }
+       
+  .navbar-enviro-server {
+    color: #999;
+    font-family: Helvetica, Arial, Sans-Serif;
+    font-size: 75%;
+  }
+}
+
+// Restyle navbar-inverse for Azkaban navbar.
+.navbar-inverse {
+  background-color: #383838;
+  border-top: 5px solid #ff3601;
+  margin-bottom: 0;
+
+  .navbar-logo {
+    background: url('../../images/logo.png') top left no-repeat;
+    color: #ffffff;
+    font-size: 156.25%;
+    font-weight: bold;
+    margin: 15px 0.6% 15px 4.75%;
+    padding: 12px 0 11px 42px;
+
+    a {
+      color: #ffffff;
+      &:hover,
+      &:focus {
+        color: #ffffff;
+        background-color: transparent;
+      }
+    }
+  }
+
+  .navbar-nav {
+    font-family: Arial;
+    font-size: 81.25%;
+
+    > li {
+      padding: 25px 12px 25px 12px;
+      cursor: pointer;
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+    }
+
+    > li > a {
+      padding: 0px;
+      color: #ccc;
+    }
+
+    > .active {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+
+    > .active > a {
+      color: #fff;
+      font-weight: bold;
+      background-color: transparent;
+      border-bottom: 1px solid #ff3601;
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    > .active > .open {
+      background-color: transparent;
+    }
+  }
+}
diff --git a/src/less/offcanvas.less b/src/less/offcanvas.less
new file mode 100644
index 0000000..541b3a3
--- /dev/null
+++ b/src/less/offcanvas.less
@@ -0,0 +1,32 @@
+@media screen and (max-width: 767px) {
+  .row-offcanvas {
+    position: relative;
+    -webkit-transition: all 0.25s ease-out;
+    -moz-transition: all 0.25s ease-out;
+    transition: all 0.25s ease-out;
+  }
+
+  .row-offcanvas-right {
+    &.active {
+      right: 50%; /* 6 columns */
+    }
+    .sidebar-offcanvas {
+      right: -50%; /* 6 columns */
+    }
+  }
+
+  .row-offcanvas-left {
+    &.active {
+      left: 50%; /* 6 columns */
+    }
+    .sidebar-offcanvas {
+      left: -50%; /* 6 columns */
+    }
+  }
+
+  .sidebar-offcanvas {
+    position: absolute;
+    top: 0;
+    width: 50%; /* 6 columns */
+  }
+}
diff --git a/src/less/project.less b/src/less/project.less
new file mode 100644
index 0000000..df01264
--- /dev/null
+++ b/src/less/project.less
@@ -0,0 +1,48 @@
+.az-project-row {
+	cursor: pointer;
+}
+
+// Flow panel heading.
+.flow-expander {
+  cursor: pointer;
+}
+
+// Permissions page table.
+.permission-table {
+  .tb-perm {
+    width: 41px;
+    margin: 0px;
+  }
+
+  .tb-admin {
+    width: 41px;
+    margin: 0px;
+  }
+
+  .tb-read {
+    width: 33px;
+    margin: 0px;
+  }
+
+  .tb-write {
+    width: 34px;
+    margin: 0px;
+  }
+
+  .tb-execute {
+    width: 51px;
+    margin: 0px;
+  }
+
+  .tb-schedule {
+    margin: 0px;
+    width: 60px;
+  }
+
+  .tb-action {
+    margin: 0px;
+    width: 70px;
+    min-width: 70px;
+    max-width: 70px;
+  }
+}
diff --git a/src/less/tables.less b/src/less/tables.less
new file mode 100644
index 0000000..6e69260
--- /dev/null
+++ b/src/less/tables.less
@@ -0,0 +1,93 @@
+table.table-properties {
+  table-layout: fixed;
+  word-wrap: break-word;
+}
+
+// Flow summary.
+td.property-key {
+  width: 25%;
+  font-weight: bold;
+}
+
+td.property-value-half {
+  width: 25%;
+}
+
+// Job table.
+#all-jobs {
+  .tb-name {
+    width: 70%;
+    border-bottom-width: 0;
+    border-bottom-style: none;
+  }
+
+  .tb-up-date {
+    width: 140px;
+    min-width: 130px;
+  }
+
+  .tb-owner {
+    width: 10%;
+    min-width: 95px;
+  }
+}
+
+// Properties table.
+.properties-table {
+  .all-jobs .tb-pname {
+  }
+
+  .all-jobs .tb-pvalue {
+  }
+}
+
+// Table of executions.
+.executions-table {
+  th {
+    &.date {
+      width: 140px;
+    }
+
+    &.execid {
+      width: 100px;
+    }
+
+    &.project {
+      width: 200px;
+    }
+
+    &.user {
+      width: 60px;
+    }
+
+    &.elapse {
+      width: 90px;
+    }
+
+    &.status {
+      width: 100px;
+    }
+
+    &.details {
+      width: 10px;
+    }
+
+    &.action {
+      width: 20px;
+    }
+  }
+
+  td {
+    &.timeline {
+      width: 280px;
+      padding: 0px;
+      height: 100%;
+      vertical-align: bottom;
+      margin: 0px;
+    }
+
+    &.execId {
+      font-weight: bold;
+    }
+  }
+}