Skip to content

Commit

Permalink
Merge pull request #2344 from spadgett/steve-membership-styles
Browse files Browse the repository at this point in the history 
Automatic merge from submit-queue.

Membership updates to correct broken layouts when multiple roles assigned

Overall code cleanup
Fixes #1219

@sg00dwin is the commit author.
  • Loading branch information
@openshift-merge-robot
openshift-merge-robot committed Oct 23, 2017
2 parents f24d4fc + df2e7b9 commit da4b76f
Show file tree
Hide file tree
Showing 4 changed files with 150 additions and 157 deletions.
167 changes: 81 additions & 86 deletions app/styles/_membership.less
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,101 @@
.membership {
// TODO: make generic?
h1 {
.learn-more-inline {
white-space: nowrap;
margin-right: 10px;
margin-left: 0px;
display: inline-block;
.action-set {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
@media(min-width: @screen-sm-min) {
flex-wrap: nowrap;
}
@media(min-width: @screen-md-min) {
flex-direction: row;
}
}
.content-pane {
width: 100%;
.col-add-role {
padding: 10px 0;
min-width: 150px;
}
.add-role-to {
margin-left: -1px;
}
.item-row,
.col-add-role {
width: 100%;
@media(min-width: @screen-xs-min) {
min-width: 245px;
width: auto;
}
}
.col-heading {
border-bottom: 1px solid #ededed;
h3 {
display: none;
@media(min-width: @screen-xs-min) {
display: flex;
margin: 0;
}
}
.item-row {
padding: 5px 10px 5px 5px;
margin-bottom: 20px;
}
.col-heading {
margin-bottom: 20px;
.col-add-role {
h3 {
display: none;
.col-name {
@media(min-width: @screen-xs-min) {
max-width: 30%;
.container-pf-nav-pf-vertical.collapsed-nav & {
max-width: 40%;
}
padding: 0 5px 0 0;
input {
max-width: 225px;
}
}
}
.col-name {
&.half-width {
min-width: 50%;
max-width: 50%;
}
.word-break-all;
width: 100%;
padding: 0 0px 10px 0;
input {
max-width: 150px;
}
padding: 0 0px 10px 0;
width: 100%;
.new-project {
margin-top: 2px;
}
}
.col-roles {
display: flex;
flex-wrap: wrap;
padding-bottom: 5px;
@media(min-width: @screen-md-min) {
padding: 0;
}
}
.content-serviceaccount .form-new-role .col-roles {
display: block;
}
.form-new-role {
.col-roles {
display: none;
}
}
.content-serviceaccount {
.form-new-role {
.col-roles {
display: block;
@media(min-width: @screen-md-min) {
.action-set {
flex-direction: column;
.col-add-role {
align-self: flex-end;
}
}
}
}
.input-name {
width: 150px;
margin-bottom: 5px;
}
.item-row {
border-bottom: 1px solid #ededed;
padding: 10px 10px 10px 5px;
@media(min-width: @screen-xs-min) {
&.highlight-hover:hover {
background-color: #fafafa;
}
}
}
.membership-empty {
margin-top: 20px;
}
.show-hidden-roles .action-set {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.select-project {
width: 150px;
}
Expand All @@ -82,68 +112,33 @@
}
}
}
.service-account {
@media(max-width: @screen-sm-max) {
flex-direction: column; // stack inputs because lack of horizontal space
}
.select-role {
padding-bottom: 5px;
width: auto;
@media(min-width: @screen-md-min) {
width: 150px;
}
}
}
// FIXME (bpeterse): to update in layout.attrs & eliminate the workaround here
// fix for collapse of flex items in IE
// https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored
[flex-collapse-fix],
[flex], // fixes ie flex-direction: column collapse issue
.item-row,
.col-add-role,
.col-heading,
.col-name,
.col-roles,
.col-add-role {
.item-row {
flex-shrink: 0;
flex-basis: auto;
}
}
// allow for taller select due to role help text
.ui-select-bootstrap > .ui-select-choices {
// allow for taller select due to role help text
max-height: 300px;
}
}

@media(min-width: @screen-xs-min) {
.membership {
.content-pane {
.col-add-role {
padding: 0;
min-width: 245px;
}
.item-row,
.col-heading {
border-bottom: none;
margin-bottom: none;
}
.item-row.highlight-hover:hover {
background-color: #fafafa;
}
.col-heading {
.col-add-role {
h3 {
display: block;
}
a {
display: block;
padding-left: 10px;
}
}
}
.col-name {
min-width: 225px;
max-width: 30%;
padding: 0 5px 10px 0;
input {
max-width: 175px;
}
}
.form-new-role {
.col-roles {
display: block;
}
}
.select-role {
width: 150px;
}
}
}
}
41 changes: 15 additions & 26 deletions app/views/membership.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,22 +59,22 @@ <h1>
ng-class="'content-' + subjectKind.name.toLowerCase()">

<div
class="col-heading item-row"
row mobile="column" flex-collapse-fix>
<div class="col-name" flex conceal="mobile" ng-class="{ 'half-width': !mode.edit }">
class="col-heading"
flex-collapse-fix>
<div class="col-name" flex ng-class="{ 'half-width': !mode.edit }">
<h3>Name</h3>
</div>
<div class="col-roles" flex conceal="mobile">
<div class="col-roles" flex>
<h3>Roles</h3>
</div>
<div ng-if="mode.edit" class="col-add-role" conceal="tablet" flex-collapse-fix>
<div ng-if="mode.edit" class="col-add-role visible-md-block visible-lg-block" flex-collapse-fix>
<h3>
Add Another Role
</h3>
</div>
</div>

<div ng-if="(subjectKind.subjects | hashSize) === 0">
<div ng-if="(subjectKind.subjects | hashSize) === 0" class="membership-empty">
<p>
<em>There are no {{ subjectKind.name | humanizeKind }}s with access to this project.</em>
</p>
Expand Down Expand Up @@ -106,12 +106,8 @@ <h3>
</span>
</span>
</div>
<div
class="action-set"
flex row tablet="column" mobile="column">
<div
class="col-roles"
row tablet="column" flex wrap axis="start">
<div class="action-set">
<div class="col-roles">
<action-chip
ng-repeat="role in subject.roles"
key="role.metadata.name"
Expand Down Expand Up @@ -163,7 +159,7 @@ <h3>
<div
ng-if="mode.edit"
class="item-row form-new-role" row mobile="column">
<div class="col-name pad-bottom-none" row mobile="column" tablet="column">
<div class="col-name service-account" row mobile="column" tablet="column">
<label
ng-attr-for="newBindingName"
class="sr-only">
Expand Down Expand Up @@ -191,7 +187,7 @@ <h3>
theme="bootstrap"
search-enabled="true"
title="Select a project"
class="select-role pad-bottom-sm">
class="select-role">
<ui-select-match
placeholder="Select a project">
<span>{{newBinding.namespace}}</span>
Expand All @@ -207,7 +203,7 @@ <h3>

<span
ng-if="newBinding.kind === 'ServiceAccount'"
class="mar-left-md mar-right-md hidden-xs">/</span>
class="mar-left-md mar-right-md hidden-xs hidden-sm">/</span>

<!-- name entry/picker for service accounts -->
<div
Expand All @@ -232,10 +228,7 @@ <h3>
</ui-select>
</div>
</div>
<div
class="action-set"
flex row tablet="column" mobile="column">
<div class="col-roles" flex row tablet="column">&nbsp;</div>
<div class="action-set">
<div class="col-add-role">
<div ng-show="mode.edit" row>
<ui-select
Expand Down Expand Up @@ -272,13 +265,9 @@ <h3>

<div
ng-if="mode.edit"
row mobile="column">
<div class="col-name hidden-xs">&nbsp;</div>
<div
class="action-set"
flex row tablet="column" mobile="column">
<div class="col-roles hidden-xs" flex>&nbsp;</div>
<div class="col-add-role" row>
class="show-hidden-roles">
<div class="action-set">
<div class="col-add-role">
<div class="checkbox">
<label>
<input
Expand Down

0 comments on commit da4b76f

Please sign in to comment.