From f51611960a9280700a7b6b906cd250eeaf4a0cd0 Mon Sep 17 00:00:00 2001
From: juanvallejo <jvallejo@redhat.com>
Date: Wed, 14 Dec 2016 17:16:21 -0500
Subject: [PATCH] improve service traffic table on mobile

---
 app/styles/_core.less                   |  2 +-
 app/styles/_tables.less                 |  9 ++++++++
 app/views/browse/service.html           |  8 +++----
 app/views/directives/traffic-table.html | 20 ++++++++++--------
 dist/scripts/templates.js               | 28 ++++++++++++-------------
 dist/styles/main.css                    |  3 +++
 6 files changed, 41 insertions(+), 29 deletions(-)

diff --git a/app/styles/_core.less b/app/styles/_core.less
index 5b49d30180..76fc921cca 100644
--- a/app/styles/_core.less
+++ b/app/styles/_core.less
@@ -1208,4 +1208,4 @@ copy-to-clipboard .input-group.limit-width {
   .col-xxs-12 {
     width: 100%;
   }
-}
+}
\ No newline at end of file
diff --git a/app/styles/_tables.less b/app/styles/_tables.less
index 6453284e91..ca2a438ab3 100644
--- a/app/styles/_tables.less
+++ b/app/styles/_tables.less
@@ -148,6 +148,15 @@
   }
 }
 
+// swaps direction of arrow in table cell
+td[role="presentation"].arrow:after {
+  content: "\2193";
+
+  @media (min-width: @screen-sm-min) {
+    content: "\2192";
+  }
+}
+
 .table-filter-wrapper {
   .flex-display(@display: flex);
   padding: 10px 10px 5px 10px;
diff --git a/app/views/browse/service.html b/app/views/browse/service.html
index a6ba3cfade..a5f49b28b9 100644
--- a/app/views/browse/service.html
+++ b/app/views/browse/service.html
@@ -91,17 +91,15 @@ <h1>
                         </span>
                       </dd>
                     </dl>
-                    <h3>
-                      Traffic
-                    </h3>
-                    <div class="table-responsive">
+                    <h3>Traffic</h3>
+                    <div>
                       <traffic-table ports-by-route="portsByRoute" routes="routesForService" services="services" show-node-ports="showNodePorts" custom-name-header="'Route'"></traffic-table>
                     </div>
                     <div style="margin:-10px 0 10px 0;">
                       Learn more about <a ng-href="{{'route-types' | helpLink}}" target="_blank">routes</a> and <a ng-href="{{'services' | helpLink}}" target="_blank">services</a>
                     </div>
                     <h3>Pods</h3>
-                    <div class="table-responsive">
+                    <div>
                       <pods-table pods="podsForService" active-pods="podsWithEndpoints" custom-name-header="'Pod'" pod-failure-reasons="podFailureReasons"></pods-table>
                     </div>
                     <annotations annotations="service.metadata.annotations"></annotations>
diff --git a/app/views/directives/traffic-table.html b/app/views/directives/traffic-table.html
index b89702d2e3..ee0622a140 100644
--- a/app/views/directives/traffic-table.html
+++ b/app/views/directives/traffic-table.html
@@ -14,9 +14,9 @@
   <tbody ng-if="(portsByRoute | hashSize) == 0">
     <tr><td colspan="7"><em>{{emptyMessage || 'No routes or ports to show'}}</em></td></tr>
   </tbody>
-  <tbody ng-if="(portsByRoute | hashSize) > 0">
-    <tr ng-repeat-start="(routeName,ports) in portsByRoute" style="display:none;"></tr>
-    <tr ng-repeat="port in ports" ng-if="routeName !== ''">
+  <tbody ng-if="(portsByRoute | hashSize) > 0" ng-repeat-start="(routeName,ports) in portsByRoute" style="display:none;"></tbody>
+  <tbody ng-repeat="port in ports" ng-if="routeName !== ''">
+    <tr>
       <td data-title="{{customNameHeader || 'Route'}}{{ showNodePorts ? ' / Node Port' : '' }}">
         <a href="{{routes[routeName] | navigateResourceURL}}">{{routes[routeName].metadata.name}}</a>
         <route-warnings ng-if="routes[routeName].spec.to.kind !== 'Service' || services"
@@ -27,12 +27,12 @@
           <span ng-if="port.nodePort"> / {{port.nodePort}}</span>
         </span>
       </td>
-      <td role="presentation" class="text-muted">&#8594;</td>
+      <td role="presentation" class="text-muted arrow"></td>
       <td data-title="Service Port">
         {{port.port}}/{{port.protocol}}
         <span ng-if="port.name">({{port.name}})</span>
       </td>
-      <td role="presentation" class="text-muted">&#8594;</td>
+      <td role="presentation" class="text-muted arrow"></td>
       <td data-title="Target Port">
         {{port.targetPort}}
       </td>
@@ -54,18 +54,20 @@
         <span ng-if="!routes[routeName].spec.tls.termination">&nbsp;</span>
       </td>
     </tr>
-    <tr ng-repeat-end style="display:none;"></tr>
-    <tr ng-repeat="port in portsByRoute['']">
+  </tbody>
+  <tbody ng-repeat-end style="display:none;"></tbody>
+  <tbody ng-repeat="port in portsByRoute['']">
+    <tr>
       <td data-title="{{customNameHeader || 'Route'}}{{ showNodePorts ? ' / Node Port' : '' }}">
         <span ng-if="!port.nodePort" class="text-muted">none</span>
         <span ng-if="port.nodePort">{{port.nodePort}}</span>
       </td>
-      <td role="presentation" class="text-muted">&#8594;</td>
+      <td role="presentation" class="text-muted arrow"></td>
       <td data-title="Service Port">
         {{port.port}}/{{port.protocol}}
         <span ng-if="port.name">({{port.name}})</span>
       </td>
-      <td role="presentation" class="text-muted">&#8594;</td>
+      <td role="presentation" class="text-muted arrow"></td>
       <td data-title="Target Port">
         {{port.targetPort}}
       </td>
diff --git a/dist/scripts/templates.js b/dist/scripts/templates.js
index 4636160fc8..25dbd4b877 100644
--- a/dist/scripts/templates.js
+++ b/dist/scripts/templates.js
@@ -3948,17 +3948,15 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</span>\n" +
     "</dd>\n" +
     "</dl>\n" +
-    "<h3>\n" +
-    "Traffic\n" +
-    "</h3>\n" +
-    "<div class=\"table-responsive\">\n" +
+    "<h3>Traffic</h3>\n" +
+    "<div>\n" +
     "<traffic-table ports-by-route=\"portsByRoute\" routes=\"routesForService\" services=\"services\" show-node-ports=\"showNodePorts\" custom-name-header=\"'Route'\"></traffic-table>\n" +
     "</div>\n" +
     "<div style=\"margin:-10px 0 10px 0\">\n" +
     "Learn more about <a ng-href=\"{{'route-types' | helpLink}}\" target=\"_blank\">routes</a> and <a ng-href=\"{{'services' | helpLink}}\" target=\"_blank\">services</a>\n" +
     "</div>\n" +
     "<h3>Pods</h3>\n" +
-    "<div class=\"table-responsive\">\n" +
+    "<div>\n" +
     "<pods-table pods=\"podsForService\" active-pods=\"podsWithEndpoints\" custom-name-header=\"'Pod'\" pod-failure-reasons=\"podFailureReasons\"></pods-table>\n" +
     "</div>\n" +
     "<annotations annotations=\"service.metadata.annotations\"></annotations>\n" +
@@ -8242,9 +8240,9 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<tbody ng-if=\"(portsByRoute | hashSize) == 0\">\n" +
     "<tr><td colspan=\"7\"><em>{{emptyMessage || 'No routes or ports to show'}}</em></td></tr>\n" +
     "</tbody>\n" +
-    "<tbody ng-if=\"(portsByRoute | hashSize) > 0\">\n" +
-    "<tr ng-repeat-start=\"(routeName,ports) in portsByRoute\" style=\"display:none\"></tr>\n" +
-    "<tr ng-repeat=\"port in ports\" ng-if=\"routeName !== ''\">\n" +
+    "<tbody ng-if=\"(portsByRoute | hashSize) > 0\" ng-repeat-start=\"(routeName,ports) in portsByRoute\" style=\"display:none\"></tbody>\n" +
+    "<tbody ng-repeat=\"port in ports\" ng-if=\"routeName !== ''\">\n" +
+    "<tr>\n" +
     "<td data-title=\"{{customNameHeader || 'Route'}}{{ showNodePorts ? ' / Node Port' : '' }}\">\n" +
     "<a href=\"{{routes[routeName] | navigateResourceURL}}\">{{routes[routeName].metadata.name}}</a>\n" +
     "<route-warnings ng-if=\"routes[routeName].spec.to.kind !== 'Service' || services\" route=\"routes[routeName]\" service=\"services[routes[routeName].spec.to.name]\">\n" +
@@ -8253,12 +8251,12 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<span ng-if=\"port.nodePort\"> / {{port.nodePort}}</span>\n" +
     "</span>\n" +
     "</td>\n" +
-    "<td role=\"presentation\" class=\"text-muted\">&#8594;</td>\n" +
+    "<td role=\"presentation\" class=\"text-muted arrow\"></td>\n" +
     "<td data-title=\"Service Port\">\n" +
     "{{port.port}}/{{port.protocol}}\n" +
     "<span ng-if=\"port.name\">({{port.name}})</span>\n" +
     "</td>\n" +
-    "<td role=\"presentation\" class=\"text-muted\">&#8594;</td>\n" +
+    "<td role=\"presentation\" class=\"text-muted arrow\"></td>\n" +
     "<td data-title=\"Target Port\">\n" +
     "{{port.targetPort}}\n" +
     "</td>\n" +
@@ -8280,18 +8278,20 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<span ng-if=\"!routes[routeName].spec.tls.termination\">&nbsp;</span>\n" +
     "</td>\n" +
     "</tr>\n" +
-    "<tr ng-repeat-end style=\"display:none\"></tr>\n" +
-    "<tr ng-repeat=\"port in portsByRoute['']\">\n" +
+    "</tbody>\n" +
+    "<tbody ng-repeat-end style=\"display:none\"></tbody>\n" +
+    "<tbody ng-repeat=\"port in portsByRoute['']\">\n" +
+    "<tr>\n" +
     "<td data-title=\"{{customNameHeader || 'Route'}}{{ showNodePorts ? ' / Node Port' : '' }}\">\n" +
     "<span ng-if=\"!port.nodePort\" class=\"text-muted\">none</span>\n" +
     "<span ng-if=\"port.nodePort\">{{port.nodePort}}</span>\n" +
     "</td>\n" +
-    "<td role=\"presentation\" class=\"text-muted\">&#8594;</td>\n" +
+    "<td role=\"presentation\" class=\"text-muted arrow\"></td>\n" +
     "<td data-title=\"Service Port\">\n" +
     "{{port.port}}/{{port.protocol}}\n" +
     "<span ng-if=\"port.name\">({{port.name}})</span>\n" +
     "</td>\n" +
-    "<td role=\"presentation\" class=\"text-muted\">&#8594;</td>\n" +
+    "<td role=\"presentation\" class=\"text-muted arrow\"></td>\n" +
     "<td data-title=\"Target Port\">\n" +
     "{{port.targetPort}}\n" +
     "</td>\n" +
diff --git a/dist/styles/main.css b/dist/styles/main.css
index bff63c361a..51d064df61 100644
--- a/dist/styles/main.css
+++ b/dist/styles/main.css
@@ -4940,6 +4940,9 @@ body,html{margin:0;padding:0}
 .table-mobile>tbody>tr>td:last-child{border-bottom:none}
 .table-mobile>tbody>tr>td:before{content:attr(data-title);position:absolute;top:8px;left:6px;width:35%;padding-right:10px;white-space:nowrap}
 }
+td[role=presentation].arrow:after{content:"\2193"}
+@media (min-width:768px){td[role=presentation].arrow:after{content:"\2192"}
+}
 .table-filter-wrapper{display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-ms-flex;display:flex;padding:10px 10px 5px;border-top:1px solid #d1d1d1;border-left:1px solid #d1d1d1;border-right:1px solid #d1d1d1;background-color:#f9f9f9}
 .events-table{table-layout:fixed}
 .events-table th#time{width:90px}