1 files changed, 110 insertions, 78 deletions

diff --git a/web/src/css/flowtable.less b/web/src/css/flowtable.less
index 9988f1a8..3533983c 100644
--- a/web/src/css/flowtable.less
+++ b/web/src/css/flowtable.less
@@ -1,95 +1,127 @@
-.flow-table {
-  width: 100%;
-  overflow: auto;
+//TODO: move into utils
+.user-select (@val) {
+    -webkit-touch-callout: @val;
+    -webkit-user-select: @val;
+    -khtml-user-select: @val;
+    -moz-user-select: @val;
+    -ms-user-select: @val;
+    user-select: @val;
+}
 
-  table {
+.flow-table {
     width: 100%;
-    table-layout: fixed;
-  }
+    overflow: auto;
 
-  thead {
-    background-color: #F2F2F2;
-    line-height: 23px;
-  }
+    table {
+        width: 100%;
+        table-layout: fixed;
+    }
 
-  th {
-    font-weight: normal;
-    box-shadow: 0 1px 0 #a6a6a6;
-  }
+    thead {
+        background-color: #F2F2F2;
+        line-height: 23px;
+    }
 
-  tr {
-    cursor: pointer;
+    th {
+        font-weight: normal;
+        box-shadow: 0 1px 0 #a6a6a6;
+        position: relative !important;
+        padding-left: 1px;
+        .user-select(none);
+
+        &.sort-asc, &.sort-desc {
+            background-color: lighten(#F2F2F2, 3%);
+        }
+        &.sort-asc:after, &.sort-desc:after {
+            font: normal normal normal 14px/1 FontAwesome;
+            position: absolute;
+            right: 3px;
+            top: 3px;
+            padding: 2px;
+            background-color: fadeout(lighten(#F2F2F2, 3%), 20%);
+        }
+        &.sort-asc:after {
+            content: "\f0de";
+        }
+        &.sort-desc:after {
+            content: "\f0dd";
+        }
 
-    &:nth-child(even) {
-      background-color: rgba(0, 0, 0, 0.05);
-    }
-    &.selected {
-      background-color: hsla(209, 52%, 84%, 0.5) !important;
-    }
-    &.highlighted {
-      background-color: hsla(48, 100%, 50%, 0.4);
     }
-    &.highlighted:nth-child(even) {
-      background-color: hsla(48, 100%, 50%, 0.5);
+
+    tr {
+        cursor: pointer;
+
+        &:nth-child(even) {
+            background-color: rgba(0, 0, 0, 0.05);
+        }
+        &.selected {
+            background-color: hsla(209, 52%, 84%, 0.5) !important;
+        }
+        &.highlighted {
+            background-color: hsla(48, 100%, 50%, 0.4);
+        }
+        &.highlighted:nth-child(even) {
+            background-color: hsla(48, 100%, 50%, 0.5);
+        }
     }
-  }
 
-  td {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
+    td {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
 
-  @interceptorange: hsl(30, 100%, 50%);
+    @interceptorange: hsl(30, 100%, 50%);
 
-  tr.intercepted:not(.has-response) {
-    .col-path, .col-method {
-      color: @interceptorange;
+    tr.intercepted:not(.has-response) {
+        .col-path, .col-method {
+            color: @interceptorange;
+        }
     }
-  }
-  tr.intercepted.has-response {
-    .col-status, .col-size, .col-time {
-      color: @interceptorange;
+    tr.intercepted.has-response {
+        .col-status, .col-size, .col-time {
+            color: @interceptorange;
+        }
     }
-  }
 
-  .fa {
-    line-height: inherit;
-    &.pull-right {
-      margin-left: 0;
+    .fa {
+        line-height: inherit;
+        &.pull-right {
+            margin-left: 0;
+        }
     }
-  }
 
-  .col-tls {
-    width: 10px;
-  }
-  .col-tls-https {
-    background-color: rgba(0, 185, 0, 0.5);
-  }
-  .col-icon {
-    width: 32px;
-  }
-  .col-path {
-    .fa-repeat {
-      color: green;
-    }
-    .fa-pause {
-      color: @interceptorange;
-    }
-  }
-  .col-method {
-    width: 60px;
-  }
-  .col-status {
-    width: 50px;
-  }
-  .col-size {
-    width: 70px;
-  }
-  .col-time {
-    width: 50px;
-  }
-  td.col-time, td.col-size {
-    text-align: right;
-  }
+    .col-tls {
+        width: 10px;
+    }
+    .col-tls-https {
+        background-color: rgba(0, 185, 0, 0.5);
+    }
+    .col-icon {
+        width: 32px;
+    }
+    .col-path {
+        .fa-repeat {
+            color: green;
+        }
+        .fa-pause {
+            color: @interceptorange;
+        }
+    }
+    .col-method {
+        width: 60px;
+    }
+    .col-status {
+        width: 50px;
+    }
+    .col-size {
+        width: 70px;
+    }
+    .col-time {
+        width: 50px;
+    }
+    td.col-time, td.col-size {
+        text-align: right;
+    }
 }
\ No newline at end of file