Repository: ambari Updated Branches: refs/heads/trunk 5c84ff011 -> 83c9237b8
AMBARI-16126. Ambari Admin: table header and body in RBAC popup are misaligned (alexantonenko) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/83c9237b Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/83c9237b Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/83c9237b Branch: refs/heads/trunk Commit: 83c9237b88c75b86c031ea5496e19d7b957562d7 Parents: 5c84ff0 Author: Alex Antonenko <[email protected]> Authored: Thu May 19 21:25:59 2016 +0300 Committer: Alex Antonenko <[email protected]> Committed: Fri May 20 10:30:48 2016 +0300 ---------------------------------------------------------------------- .../resources/ui/admin-web/app/styles/main.css | 66 +++++++++++++++----- .../app/views/modals/RoleDetailsModal.html | 37 ++++++----- 2 files changed, 72 insertions(+), 31 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/83c9237b/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css b/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css index 0ad183c..bbd8a7c 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css +++ b/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css @@ -1592,29 +1592,67 @@ thead.view-permission-header > tr > th { cursor: pointer; } -.role-details-modal table { - table-layout: fixed; +.role-details-modal .table-head-wrapper { + position: relative; +} + +.role-details-modal .table-head { width: 100%; + overflow-x: hidden; + overflow-y: scroll; + border-width: 1px 0; + border-style: solid; + border-color: #ddd; } -.role-details-modal .fixed-header { - font-weight: bold; - margin: 0px; +.role-details-modal .table-body { + height: 500px; + width: 100%; + overflow-y: auto; } -.role-details-modal .first-column{ - width: 28%; +.role-details-modal .table-row-wrapper { + width: 100%; + display: table; + table-layout: fixed; } -.role-details-modal .not-first-column{ - width: 12%; +.role-details-modal .table-row { + display: table-row; } -.role-details-modal .role-detail-content-wrapper { - height: 500px; - overflow-y: auto; - border: 0px; - margin:0px; +.role-details-modal .table-cell { + width: 12.5%; + display: table-cell; + border-color: #ddd; + border-style: solid; + border-width: 0 1px 1px 0; + padding: 8px; + line-height: 1.42857143; + vertical-align: top; +} + +.role-details-modal .table-cell:first-of-type { + width: 25%; + border-left-width: 1px; +} + +.role-details-modal .table-head-wrapper .table-cell { + border-bottom-width: 0; + font-weight: bold; +} + +.role-details-modal .table-head-wrapper > .table-cell:last-of-type { + position: absolute; + right: 0; + top: 1px; + bottom: 1px; + padding-left: 0; + background-color: #fff; +} + +.role-details-modal .table-head .table-cell:last-of-type { + visibility: hidden; } .proxied-field-wrap { http://git-wip-us.apache.org/repos/asf/ambari/blob/83c9237b/ambari-admin/src/main/resources/ui/admin-web/app/views/modals/RoleDetailsModal.html ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/views/modals/RoleDetailsModal.html b/ambari-admin/src/main/resources/ui/admin-web/app/views/modals/RoleDetailsModal.html index 46c65b1..776b33d 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/views/modals/RoleDetailsModal.html +++ b/ambari-admin/src/main/resources/ui/admin-web/app/views/modals/RoleDetailsModal.html @@ -21,25 +21,28 @@ <h4 class="modal-title">{{'common.rbac' | translate}}</h4> </div> <div class="modal-body role-details-modal"> - <table class="table table-hover table-bordered fixed-header"> - <tbody> - <tr> - <td class="first-column"></td> - <td class="not-first-column" ng-repeat="role in roles">{{role.permission_label}}</td> - </tr> - </tbody> - </table> - <div class="role-detail-content-wrapper"> - <table class="table table-hover table-bordered"> - <tr ng-repeat="auth in orderedAuthorizations"> - <td class="first-column">{{authHash[auth]}}</td> - <td class="not-first-column" ng-repeat="role in roles" class="text-center"> + <div class="table-head-wrapper"> + <div class="table-head"> + <div class="table-row-wrapper"> + <div class="table-row"> + <div class="table-cell"></div> + <div class="table-cell" ng-repeat="role in roles">{{role.permission_label}}</div> + </div> + </div> + </div> + <div class="table-cell">{{roles[roles.length - 1].permission_label}}</div> + </div> + <div class="table-body"> + <div class="table-row-wrapper"> + <div class="table-row" ng-repeat="auth in orderedAuthorizations"> + <div class="table-cell">{{authHash[auth]}}</div> + <div class="table-cell text-center" ng-repeat="role in roles"> <i class="glyphicon glyphicon-ok green-icon" ng-show="role.authHash[auth]"></i> - </td> - </tr> - </table> + </div> + </div> + </div> </div> </div> <div class="modal-footer text-center"> - <button class="btn btn-primary" ng-click="ok()">{{'common.controls.close' | translate}}</button> + <button class="btn btn-primary" ng-click="ok()">{{'common.controls.close' | translate}}</button> </div>
