Skip to content

Commit

Permalink
Merge pull request #2807 from sg00dwin/membership-fix-3.6
Browse files Browse the repository at this point in the history 
Automatic merge from submit-queue.

Updates to membership page to prevent breaking. This is a back port of an initial fix that went in 3.7.

Original pr #2344

Fixes bug https://bugzilla.redhat.com/show_bug.cgi?id=1545089

![localhost_9000_dev-console_oauth 9](https://user-images.githubusercontent.com/1874151/36327571-fa272b0c-132c-11e8-8f69-c60e73852078.png)
![localhost_9000_dev-console_oauth 8](https://user-images.githubusercontent.com/1874151/36327572-fa373060-132c-11e8-9790-0a5710a032ea.png)
![localhost_9000_dev-console_oauth 7](https://user-images.githubusercontent.com/1874151/36327573-fa4a8ca0-132c-11e8-8787-cf0904b35ac2.png)
![localhost_9000_dev-console_oauth 6](https://user-images.githubusercontent.com/1874151/36327574-fa5e43c6-132c-11e8-8579-c5336f9b1015.png)
![localhost_9000_dev-console_oauth 5](https://user-images.githubusercontent.com/1874151/36327576-fa738cc2-132c-11e8-99aa-45d7fcbaeef3.png)
![localhost_9000_dev-console_oauth 4](https://user-images.githubusercontent.com/1874151/36327577-fa859692-132c-11e8-99a8-fa45a750d731.png)
![localhost_9000_dev-console_oauth 3](https://user-images.githubusercontent.com/1874151/36327578-fa9a3b9c-132c-11e8-9c7c-245c56c2bf8e.png)
![localhost_9000_dev-console_oauth 2](https://user-images.githubusercontent.com/1874151/36327579-fab6910c-132c-11e8-9f12-7669d95c7e8e.png)
![localhost_9000_dev-console_oauth 1](https://user-images.githubusercontent.com/1874151/36327580-facc2274-132c-11e8-873e-2b561005bf71.png)
![localhost_9000_dev-console_oauth](https://user-images.githubusercontent.com/1874151/36327581-fade5732-132c-11e8-9acc-5e977ce5d6d9.png)
  • Loading branch information
@openshift-merge-robot
openshift-merge-robot committed Feb 19, 2018
2 parents 0a2028e + 92573e0 commit ceae162
Show file tree
Hide file tree
Showing 4 changed files with 145 additions and 154 deletions.
165 changes: 80 additions & 85 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;
}
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 @@ -63,22 +63,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 @@ -110,12 +110,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 @@ -167,7 +163,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 @@ -195,7 +191,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 @@ -211,7 +207,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 @@ -236,10 +232,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 @@ -276,13 +269,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 type="checkbox" class="toggle-hidden" ng-click="showAllRoles($event)">
Expand Down

0 comments on commit ceae162

Please sign in to comment.