openstack/horizon
Code Issues Proposed changes

ID Panels with long roles names should fit

Browse Source 
See this screen shot: http://pasteboard.co/14TpE09S.png
The longer role names or having multiple roles is not working well beyond the
most basic _member_ admin type roles. It was also noticed while in the CSS
for the member roles list, that portions of the CSS could benefit from some
very simple refactoring to take advantage of the recent CSS Theme reorg.

Change-Id: Ibf0be2850669fbc8f6d963f70eb9b6c91281de68
Closes-Bug: #1463181
This commit is contained in:
Diana Whitten 2015-06-15 18:22:18 -07:00
parent a8c1133df1
commit fd8fb3912a
4 changed files with 44 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
horizon/static/horizon/js/horizon.membership.js
View File

@ -179,10 +179,6 @@ horizon.membership = {
var $roles_display = $dropdown.children('.dropdown-toggle').children('.roles_display');
var roles_to_display = [];
for (var i = 0; i < role_ids.length; i++) {
if (i === 2) {
roles_to_display.push('...');
break;
}
roles_to_display.push(horizon.membership.roles[step_slug][role_ids[i]]);
}
var text = roles_to_display.join(', ');

2
horizon/templates/horizon/client_side/_membership.html
View File

@ -12,7 +12,7 @@
<li class="dropdown role_options">
<a class="dropdown-toggle btn btn-default" data-toggle="dropdown" href="#">
<span class="roles_display">[[roles_label]]</span>
<span class="caret"></span>
<span class="fa fa-caret-down"></span>
</a>
<ul class="dropdown-menu role_dropdown clearfix">
[[#roles]]

12
openstack_dashboard/static/dashboard/scss/_variables.scss
View File

@ -15,7 +15,7 @@ $body-min-width: 900px !default;
$sidebar-background-color: #f9f9f9 !default;
$sidebar-width: 220px !default;
$border-color: #dddddd !default;
$table-bg-odd: #f9f9f9 !default;
$table-bg-odd: $table-bg-accent !default;
$content-body-padding: 15px !default;
@ -203,3 +203,13 @@ $magic-search-border-color: #cccccc !default;
$magic-search-margin-bottom: 0 !default;
$magic-search-border-radius: 3px !default;
$magic-search-margin-padding: 2px !default;
/* Member lists */
$members-list-padding: 3px !default;
$members-list-border: 1px solid $gray-light !default;
// TODO: These values are hardcoded lengths but they are actually
// very dependant on the modal size set in the theme. We need
// to eventually readdress these and calculate them dynamically
$members-list-item-width: 130px !default;
$members-list-item-max-width: 327px !default;
$members-list-roles-width: 125px !default;

41
openstack_dashboard/static/dashboard/scss/horizon.scss
View File

@ -1346,32 +1346,55 @@ label.log-length {
display: block;
}
ul.btn-group {
margin-left:0px;
padding: 3px;
margin-bottom: 0px;
border: 1px solid $gray-light;
margin-left:0;
padding: $members-list-padding;
margin-bottom: 0;
border: $members-list-border;
border-bottom: none;
&.last_stripe {
border-bottom: 1px solid $table-border-color;
}
&.light_stripe {
background-color: white;
background-color: $table-bg;
}
&.dark_stripe {
background-color: $table-bg-odd;
background-color: $table-bg-accent;
}
&:hover {
background-color: $border-color;
}
li.member {
padding: 6px 10px 5px 10px;
}
li.active {
float: right;
a:hover {
background-color: $link-hover-color;
}
}
.member,
.role_options .roles_display {
overflow: hidden;
text-overflow: ellipsis;
}
.member {
padding: $nav-link-padding;
padding-right: 0;
padding-left: $padding-base-vertical;
max-width: $members-list-item-width;
}
.role_options {
margin-left: 0;
& > a {
padding: nth($nav-link-padding, 1) $padding-small-horizontal;
.roles_display {
display: inline-block;
max-width: $members-list-roles-width;
line-height: 1;
padding-right: $padding-base-vertical;
}
}
.role_dropdown > li {
word-break: break-all;
}
}
}
}