web: detailpane impl

6 files changed, 94 insertions, 18 deletions

diff --git a/web/src/css/app.less b/web/src/css/app.less
index cc65cfdd..26f22572 100644
--- a/web/src/css/app.less
+++ b/web/src/css/app.less
@@ -9,7 +9,9 @@ html {
 
 @import (less) "sprites.less";
 @import (less) "layout.less";
+@import (less) "tabs.less";
 @import (less) "header.less";
 @import (less) "flowtable.less";
+@import (less) "flowdetail.less";
 @import (less) "eventlog.less";
 @import (less) "footer.less";
\ No newline at end of file
diff --git a/web/src/css/flowdetail.less b/web/src/css/flowdetail.less
new file mode 100644
index 00000000..19eeecc0
--- /dev/null
+++ b/web/src/css/flowdetail.less
@@ -0,0 +1,7 @@
+.flow-detail {
+    overflow: auto;
+    
+    nav {
+        background-color: #F2F2F2;
+    }
+}
\ No newline at end of file
diff --git a/web/src/css/flowtable.less b/web/src/css/flowtable.less
index d78fe31c..2a9c318b 100644
--- a/web/src/css/flowtable.less
+++ b/web/src/css/flowtable.less
@@ -1,9 +1,24 @@
 .flow-table {
 	width: 100%;
-	table-layout: fixed;
+	overflow: auto;
+
+	table {
+		width: 100%;
+		table-layout: fixed;
+	}
 
 	thead {
-		background-color: #dadada;  
+		background-color: #F2F2F2;
+		line-height: 23px;
+	}
+
+	th {
+		font-weight: normal;
+		box-shadow: 0 1px 0 #a6a6a6;
+	}
+
+	tbody {
+		outline: 0;
 	}
 
 	tr {
@@ -19,9 +34,7 @@
 		text-overflow: ellipsis;
 	}
 
-	//tr:nth-child(odd) { background-color : white; }
 	tr:nth-child(even) { background-color : rgba(0,0,0,0.05); }
-	//tr:hover { background-color : hsla(209, 52%, 84%, 0.5); }
 
 	.col-tls {
 		width: 10px;
@@ -39,6 +52,9 @@
 		width: 50px;
 	}
 	.col-time {
-		width: 120px;
+		width: 50px;
+	}
+	td.col-time {
+		text-align: right;
 	}
 }
\ No newline at end of file
diff --git a/web/src/css/header.less b/web/src/css/header.less
index 2a3c9765..66e8ac8a 100644
--- a/web/src/css/header.less
+++ b/web/src/css/header.less
@@ -7,7 +7,7 @@ header {
     }
 
     @separator-color: lighten(grey, 15%);
-
+/*
     nav {
         border-bottom: solid @separator-color 1px;
 
@@ -20,16 +20,10 @@ header {
             //font-family: Lato;
 
             &.active {
-            border-color: @separator-color;
-            border-bottom-color: white;
+                border-color: @separator-color;
+                border-bottom-color: white;
             }
-            &:hover {
-                /*
-                @preview: lightgrey;
-                border-top-color: @preview;
-                border-left-color: @preview;
-                border-right-color: @preview;
-                */
+            &.active, &:hover {
                 text-decoration: none;
             }
             &.special {
@@ -43,7 +37,7 @@ header {
             }
         }
     }
-
+*/
     .menu {
         padding: 10px;
         border-bottom: solid @separator-color 1px;
diff --git a/web/src/css/layout.less b/web/src/css/layout.less
index 320baee8..6e4abd24 100644
--- a/web/src/css/layout.less
+++ b/web/src/css/layout.less
@@ -13,7 +13,19 @@ html, body, #container {
     }
 }
 
-main {
+.main-view {
     flex: 1 1 auto;
-    overflow: auto;
+   
+    display: flex;
+    flex-direction: row;
+
+    &.vertical {
+        flex-direction: column;
+    }
+
+    .flow-detail, .flow-table {
+        flex: 1 1 auto;
+        flex-basis: 50%;
+    }
+
 }
\ No newline at end of file
diff --git a/web/src/css/tabs.less b/web/src/css/tabs.less
new file mode 100644
index 00000000..36bc5b68
--- /dev/null
+++ b/web/src/css/tabs.less
@@ -0,0 +1,45 @@
+.nav-tabs {
+
+    @separator-color: lighten(grey, 15%);
+
+    border-bottom: solid @separator-color 1px;
+
+    a {
+        display: inline-block;
+        border: solid transparent 1px;
+        text-decoration: none;
+        //text-transform: uppercase;
+        //font-family: Lato;
+
+        &.active {
+            background-color: white;
+            border-color: @separator-color;
+            border-bottom-color: white;
+        }
+        &.special {
+            @special-color: #396cad;
+            color: white;
+            background-color: @special-color;
+            border-bottom-color: @special-color;
+            &:hover {
+                background-color: lighten(@special-color, 10%);
+            }
+        }
+    }
+
+}
+
+.nav-tabs-lg {
+    a {
+        padding: 3px 14px;
+        margin: 0 2px -1px;
+    }
+}
+
+.nav-tabs-sm {
+    a {
+        padding: 0px 7px;
+        margin: 2px 2px -1px;
+
+    }
+}
\ No newline at end of file