Skip to content

Commit da4b76f

Browse files
openshift-merge-robotopenshift-merge-robot
authored
Merge pull request #2344 from spadgett/steve-membership-styles
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.
2 parents f24d4fc + df2e7b9 commit da4b76f

File tree

4 files changed

+150
-157
lines changed

4 files changed

+150
-157
lines changed

‎app/styles/_membership.less

+81-86
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,101 @@
11
.membership {
2-
// TODO: make generic?
3-
h1 {
4-
.learn-more-inline {
5-
white-space: nowrap;
6-
margin-right: 10px;
7-
margin-left: 0px;
8-
display: inline-block;
2+
.action-set {
3+
display: flex;
4+
flex-direction: column;
5+
justify-content: space-between;
6+
width: 100%;
7+
@media(min-width: @screen-sm-min) {
8+
flex-wrap: nowrap;
9+
}
10+
@media(min-width: @screen-md-min) {
11+
flex-direction: row;
912
}
1013
}
1114
.content-pane {
1215
width: 100%;
13-
.col-add-role {
14-
padding: 10px 0;
15-
min-width: 150px;
16-
}
1716
.add-role-to {
1817
margin-left: -1px;
1918
}
20-
.item-row,
19+
.col-add-role {
20+
width: 100%;
21+
@media(min-width: @screen-xs-min) {
22+
min-width: 245px;
23+
width: auto;
24+
}
25+
}
2126
.col-heading {
2227
border-bottom: 1px solid #ededed;
23-
h3 {
28+
display: none;
29+
@media(min-width: @screen-xs-min) {
30+
display: flex;
2431
margin: 0;
2532
}
2633
}
27-
.item-row {
28-
padding: 5px 10px 5px 5px;
29-
margin-bottom: 20px;
30-
}
31-
.col-heading {
32-
margin-bottom: 20px;
33-
.col-add-role {
34-
h3 {
35-
display: none;
34+
.col-name {
35+
@media(min-width: @screen-xs-min) {
36+
max-width: 30%;
37+
.container-pf-nav-pf-vertical.collapsed-nav & {
38+
max-width: 40%;
39+
}
40+
padding: 0 5px 0 0;
41+
input {
42+
max-width: 225px;
3643
}
3744
}
38-
}
39-
.col-name {
4045
&.half-width {
41-
min-width: 50%;
46+
max-width: 50%;
4247
}
4348
.word-break-all;
44-
width: 100%;
45-
padding: 0 0px 10px 0;
46-
input {
47-
max-width: 150px;
48-
}
49+
padding: 0 0px 10px 0;
50+
width: 100%;
4951
.new-project {
5052
margin-top: 2px;
5153
}
5254
}
55+
.col-roles {
56+
display: flex;
57+
flex-wrap: wrap;
58+
padding-bottom: 5px;
59+
@media(min-width: @screen-md-min) {
60+
padding: 0;
61+
}
62+
}
63+
.content-serviceaccount .form-new-role .col-roles {
64+
display: block;
65+
}
5366
.form-new-role {
5467
.col-roles {
5568
display: none;
5669
}
57-
}
58-
.content-serviceaccount {
59-
.form-new-role {
60-
.col-roles {
61-
display: block;
70+
@media(min-width: @screen-md-min) {
71+
.action-set {
72+
flex-direction: column;
73+
.col-add-role {
74+
align-self: flex-end;
75+
}
6276
}
6377
}
6478
}
6579
.input-name {
66-
width: 150px;
6780
margin-bottom: 5px;
6881
}
82+
.item-row {
83+
border-bottom: 1px solid #ededed;
84+
padding: 10px 10px 10px 5px;
85+
@media(min-width: @screen-xs-min) {
86+
&.highlight-hover:hover {
87+
background-color: #fafafa;
88+
}
89+
}
90+
}
91+
.membership-empty {
92+
margin-top: 20px;
93+
}
94+
.show-hidden-roles .action-set {
95+
display: flex;
96+
flex-direction: row;
97+
justify-content: flex-end;
98+
}
6999
.select-project {
70100
width: 150px;
71101
}
@@ -82,68 +112,33 @@
82112
}
83113
}
84114
}
115+
.service-account {
116+
@media(max-width: @screen-sm-max) {
117+
flex-direction: column; // stack inputs because lack of horizontal space
118+
}
119+
.select-role {
120+
padding-bottom: 5px;
121+
width: auto;
122+
@media(min-width: @screen-md-min) {
123+
width: 150px;
124+
}
125+
}
126+
}
85127
// FIXME (bpeterse): to update in layout.attrs & eliminate the workaround here
86128
// fix for collapse of flex items in IE
87129
// https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored
88130
[flex-collapse-fix],
89131
[flex], // fixes ie flex-direction: column collapse issue
90-
.item-row,
132+
.col-add-role,
91133
.col-heading,
92134
.col-name,
93-
.col-roles,
94-
.col-add-role {
135+
.item-row {
95136
flex-shrink: 0;
96137
flex-basis: auto;
97138
}
98139
}
140+
// allow for taller select due to role help text
99141
.ui-select-bootstrap > .ui-select-choices {
100-
// allow for taller select due to role help text
101142
max-height: 300px;
102143
}
103144
}
104-
105-
@media(min-width: @screen-xs-min) {
106-
.membership {
107-
.content-pane {
108-
.col-add-role {
109-
padding: 0;
110-
min-width: 245px;
111-
}
112-
.item-row,
113-
.col-heading {
114-
border-bottom: none;
115-
margin-bottom: none;
116-
}
117-
.item-row.highlight-hover:hover {
118-
background-color: #fafafa;
119-
}
120-
.col-heading {
121-
.col-add-role {
122-
h3 {
123-
display: block;
124-
}
125-
a {
126-
display: block;
127-
padding-left: 10px;
128-
}
129-
}
130-
}
131-
.col-name {
132-
min-width: 225px;
133-
max-width: 30%;
134-
padding: 0 5px 10px 0;
135-
input {
136-
max-width: 175px;
137-
}
138-
}
139-
.form-new-role {
140-
.col-roles {
141-
display: block;
142-
}
143-
}
144-
.select-role {
145-
width: 150px;
146-
}
147-
}
148-
}
149-
}

‎app/views/membership.html

+15-26
Original file line numberDiff line numberDiff line change
@@ -59,22 +59,22 @@ <h1>
5959
ng-class="'content-' + subjectKind.name.toLowerCase()">
6060

6161
<div
62-
class="col-heading item-row"
63-
row mobile="column" flex-collapse-fix>
64-
<div class="col-name" flex conceal="mobile" ng-class="{ 'half-width': !mode.edit }">
62+
class="col-heading"
63+
flex-collapse-fix>
64+
<div class="col-name" flex ng-class="{ 'half-width': !mode.edit }">
6565
<h3>Name</h3>
6666
</div>
67-
<div class="col-roles" flex conceal="mobile">
67+
<div class="col-roles" flex>
6868
<h3>Roles</h3>
6969
</div>
70-
<div ng-if="mode.edit" class="col-add-role" conceal="tablet" flex-collapse-fix>
70+
<div ng-if="mode.edit" class="col-add-role visible-md-block visible-lg-block" flex-collapse-fix>
7171
<h3>
7272
Add Another Role
7373
</h3>
7474
</div>
7575
</div>
7676

77-
<div ng-if="(subjectKind.subjects | hashSize) === 0">
77+
<div ng-if="(subjectKind.subjects | hashSize) === 0" class="membership-empty">
7878
<p>
7979
<em>There are no {{ subjectKind.name | humanizeKind }}s with access to this project.</em>
8080
</p>
@@ -106,12 +106,8 @@ <h3>
106106
</span>
107107
</span>
108108
</div>
109-
<div
110-
class="action-set"
111-
flex row tablet="column" mobile="column">
112-
<div
113-
class="col-roles"
114-
row tablet="column" flex wrap axis="start">
109+
<div class="action-set">
110+
<div class="col-roles">
115111
<action-chip
116112
ng-repeat="role in subject.roles"
117113
key="role.metadata.name"
@@ -163,7 +159,7 @@ <h3>
163159
<div
164160
ng-if="mode.edit"
165161
class="item-row form-new-role" row mobile="column">
166-
<div class="col-name pad-bottom-none" row mobile="column" tablet="column">
162+
<div class="col-name service-account" row mobile="column" tablet="column">
167163
<label
168164
ng-attr-for="newBindingName"
169165
class="sr-only">
@@ -191,7 +187,7 @@ <h3>
191187
theme="bootstrap"
192188
search-enabled="true"
193189
title="Select a project"
194-
class="select-role pad-bottom-sm">
190+
class="select-role">
195191
<ui-select-match
196192
placeholder="Select a project">
197193
<span>{{newBinding.namespace}}</span>
@@ -207,7 +203,7 @@ <h3>
207203

208204
<span
209205
ng-if="newBinding.kind === 'ServiceAccount'"
210-
class="mar-left-md mar-right-md hidden-xs">/</span>
206+
class="mar-left-md mar-right-md hidden-xs hidden-sm">/</span>
211207

212208
<!-- name entry/picker for service accounts -->
213209
<div
@@ -232,10 +228,7 @@ <h3>
232228
</ui-select>
233229
</div>
234230
</div>
235-
<div
236-
class="action-set"
237-
flex row tablet="column" mobile="column">
238-
<div class="col-roles" flex row tablet="column">&nbsp;</div>
231+
<div class="action-set">
239232
<div class="col-add-role">
240233
<div ng-show="mode.edit" row>
241234
<ui-select
@@ -272,13 +265,9 @@ <h3>
272265

273266
<div
274267
ng-if="mode.edit"
275-
row mobile="column">
276-
<div class="col-name hidden-xs">&nbsp;</div>
277-
<div
278-
class="action-set"
279-
flex row tablet="column" mobile="column">
280-
<div class="col-roles hidden-xs" flex>&nbsp;</div>
281-
<div class="col-add-role" row>
268+
class="show-hidden-roles">
269+
<div class="action-set">
270+
<div class="col-add-role">
282271
<div class="checkbox">
283272
<label>
284273
<input

0 commit comments

Comments
 (0)