[WIP] improve service traffic table on mobile #1042
Conversation
juanvallejo
force-pushed
the
jvallejo/fix-service-page-mobile
branch
from
5081729
to
3647e34
Compare
| <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 !== ''"> |
There was a problem hiding this comment.
@spadgett The reason why the double border occurs at the top of the table, is because I am "nesting" two ng-repeats using sibling tbody elements. Although the first one is hidden with display: none, it is causing the second one to have a 2px border when it otherwise would not due to it normally being the first tbody element.
There was a problem hiding this comment.
A solution would be to add the 2px top border to tbody > tr + tr instead. That way, we could also keep the ng-repeat in the tr element, and update the pods-table directive and routes.html to do this as well.
cc @jwforres
There was a problem hiding this comment.
I think we have the 2px border on other responsive tables. Can you check? If so, let's open a separate issue to fix them all.
It seems we do have a 2px border on the pods-table as well as the routes table but it appears to come from the table's top border rather than the tbody. In the traffic-table, the table's top border is adding 2px, and an additional 2px are getting added by the first visible tbody due to the hidden tbody right before it.
I can go ahead and open an issue to address this by repeating the tr tag rather than the tbody, and apply this change to the pods and routes table as well.
EDIT: although the above suggestion solves repeating tbody tags, I do not believe it will solve the 4px body whenever a table deals with nested ng loops. We could have a specific rule for that table in _core.less to address this.
| @@ -1209,3 +1209,12 @@ copy-to-clipboard .input-group.limit-width { | |||
| width: 100%; | |||
| } | |||
| } | |||
|
|
|||
| // swaps direction of arrow in table cell | |||
| td[role="presentation"].arrow:after { | |||
There was a problem hiding this comment.
Probably belongs in _tables.less
juanvallejo
force-pushed
the
jvallejo/fix-service-page-mobile
branch
from
3647e34
to
f516119
Compare
|
@spadgett Thanks, review comment addressed.
Because the table cell is a bit wide, they look offset from the rest of the content if I align them center.
|
|
Related PR: #1045 |
|
[merge] |
|
Evaluated for origin web console merge up to f516119 |
|
Origin Web Console Merge Results: SUCCESS (https://ci.openshift.redhat.com/jenkins/job/test_pull_requests_origin_web_console/867/) (Base Commit: a20a694) |
Fixes #1031
todo
<tbody>to<tr>(fixed by Improve accessibility: use ng-repeat on <tr> instead of <tbody> #1045)table top
table bottom
cc @spadgett