Skip to content

Commit dd7f1a0

Browse files
openshift-merge-robotopenshift-merge-robot
authored
Merge pull request #2860 from rhamilto/remove-layout.attrs
Automatic merge from submit-queue. Removing layout.attrs to reduce dependencies Also fixes #2614 by eliminating the three column layout for desktop resolutions ![screen shot 2018-02-28 at 10 24 44 am](https://user-images.githubusercontent.com/895728/36795665-a1f95ba0-1c71-11e8-97b6-7f81c3e20583.PNG) And updates volume-claim-template heading to the new style Before: ![screen shot 2018-02-28 at 9 45 29 am](https://user-images.githubusercontent.com/895728/36795769-dd18272a-1c71-11e8-9181-17b9a672e4bf.PNG) After: ![screen shot 2018-02-28 at 9 45 35 am](https://user-images.githubusercontent.com/895728/36795785-e549e7da-1c71-11e8-9304-0c0b18eb256f.PNG)
2 parents e7d723d + 0da48b9 commit dd7f1a0

35 files changed

+330
-515
lines changed

‎app/components/osc-webhook-triggers/osc-webhook-triggers.html

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@
1010
search-enabled="false"
1111
title="Select a webhook type"
1212
ng-class="{'has-warning': trigger.isDuplicate }"
13-
focus-on="focus-index-{{$index}}"
14-
flex>
13+
focus-on="focus-index-{{$index}}">
1514
<ui-select-match placeholder="Webhook type">
1615
{{ $select.selected.label }}
1716
</ui-select-match>
@@ -29,8 +28,7 @@
2928
title="Select a webhook secret reference"
3029
ng-class="{'has-error': $ctrl.secretsForm[secretFieldName].$invalid && $ctrl.secretsForm[secretFieldName].$touched}"
3130
ng-disabled="!trigger.data.type"
32-
ng-required="trigger.data.type"
33-
flex>
31+
ng-required="trigger.data.type">
3432
<ui-select-match placeholder="Webhook secret reference">
3533
{{ $select.selected.metadata.name }}
3634
</ui-select-match>

‎app/index.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@
2323
<link rel="stylesheet" href="bower_components/xterm.js/dist/xterm.css" />
2424
<link rel="stylesheet" href="bower_components/kubernetes-container-terminal/dist/container-terminal.css" />
2525
<link rel="stylesheet" href="bower_components/registry-image-widgets/dist/image-widgets.css" />
26-
<link rel="stylesheet" href="bower_components/layout.attrs/dist/layout.attrs.css" />
2726
<link rel="stylesheet" href="bower_components/ng-sortable/dist/ng-sortable.css" />
2827
<link rel="stylesheet" href="bower_components/ui-select/dist/select.css" />
2928
<link rel="stylesheet" href="bower_components/hopscotch/dist/css/hopscotch.css" />

‎app/scripts/directives/actionChip.js

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,4 @@
11
'use strict';
2-
// <div>
3-
// <div>Chips</div>
4-
// <div row mobile="column">
5-
// <action-chip
6-
// key="'1'"></action-chip>
7-
// <action-chip
8-
// key="'2'"
9-
// value="'foo'"></action-chip>
10-
// <action-chip
11-
// key="'3'"
12-
// action="foo('shizzle', 'pop')"></action-chip>
13-
// <action-chip
14-
// key="'4'"
15-
// value="'bar'"
16-
// icon="'fa fa-check'"
17-
// action="foo('shizzle', 'pop2')"></action-chip>
18-
// </div>
19-
// </div>
202
angular
213
.module('openshiftConsole')
224
.directive('actionChip', function() {

‎app/styles/_catalog.less

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
@bind-service-page-height: 310px;
22

3+
// old catalog page (/create)
4+
.filter-catalog {
5+
width: 100%;
6+
}
7+
38
.landing {
49
h1, .nav-tabs {
510
margin-bottom: 0 !important;

‎app/styles/_components.less

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,9 @@
3535
margin-top: 15px;
3636
}
3737
.pod-template {
38-
// so that .word-break() on children works
39-
[flex] {
40-
min-width: 0;
41-
}
4238
.icon-row {
4339
border-left: 3px solid @gray-lighter;
40+
display: flex;
4441
padding: 2px 0 0 2px;
4542
}
4643
.fa,
@@ -51,6 +48,10 @@
5148
.pod-template-build {
5249
.word-break();
5350
}
51+
.pod-template-detail {
52+
flex: 1 1 0%;
53+
min-width: 0; // so that .word-break() on children works
54+
}
5455
.pod-template-key {
5556
font-weight: 600;
5657
}
@@ -155,10 +156,19 @@ pod-donut[mini] {
155156
}
156157

157158
.deployment-donut {
159+
display: flex;
160+
flex-direction: column;
158161
justify-content: center;
159162
.browse-deployment-donut & {
160163
align-items: center;
161164
}
165+
.deployment-donut-column {
166+
display: flex;
167+
flex-direction: column;
168+
}
169+
.deployment-donut-row {
170+
display: flex;
171+
}
162172
.scaling-controls {
163173
justify-content: center;
164174
font-size: 24px;

‎app/styles/_core.less

Lines changed: 36 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -411,6 +411,12 @@ registry-imagestream-meta dt:after {
411411
margin: 0 20px;
412412
}
413413

414+
.quota-charts {
415+
display: flex;
416+
flex-wrap: wrap;
417+
justify-content: center;
418+
}
419+
414420
.route-service-bar-chart {
415421
.service-name,
416422
.service-weight {
@@ -1097,17 +1103,22 @@ a.disabled-link {
10971103
}
10981104

10991105
.status {
1106+
display: flex;
11001107
min-width: 130px;
1108+
// when status-icon is child of .status, add margin-right to the icon
1109+
// because the space resulting from display: inline-block collapses
1110+
status-icon {
1111+
margin-right: 3px;
1112+
}
1113+
}
1114+
1115+
.status-detail {
1116+
flex: 1 1 0%;
11011117
}
11021118

11031119
build-counts,
11041120
notification-icon,
11051121
status-icon {
1106-
// when status-icon is child of [row], add margin-right to the icon
1107-
// because the space resulting from display: inline-block collapses
1108-
[row] > & {
1109-
margin-right: 3px;
1110-
}
11111122
// so that status-icons have a fixed width (like .fa-fw, but better sized)
11121123
// this ensures when the icons change, the text that follows doesn't shift
11131124
.fa, .pficon {
@@ -1144,6 +1155,7 @@ pre.clipped {
11441155
}
11451156

11461157
.k8s-label {
1158+
display: flex;
11471159
margin-right: 5px;
11481160
// A bit more space below the actions button.
11491161
margin-top: 3px;
@@ -1153,6 +1165,7 @@ pre.clipped {
11531165
white-space: normal;
11541166
}
11551167
.label-pair {
1168+
display: flex;
11561169
margin-bottom: 2px;
11571170
max-width: 100%; // needed to enable truncation within table, but still allow inline display if room is available
11581171
.label {
@@ -1209,6 +1222,11 @@ pre.clipped {
12091222
}
12101223
}
12111224

1225+
.k8s-labels {
1226+
display: flex;
1227+
flex-wrap: wrap;
1228+
}
1229+
12121230
.action-divider {
12131231
color: @gray-light;
12141232
padding: 0 6px;
@@ -1325,3 +1343,16 @@ pre.clipped {
13251343
}
13261344
}
13271345
}
1346+
1347+
.init-container-status-detail {
1348+
flex: 1 1 0%;
1349+
}
1350+
1351+
.init-container-status,
1352+
.ui-select-choices-flex {
1353+
display: flex;
1354+
}
1355+
1356+
.ui-select-choices-flex {
1357+
justify-content: space-between;
1358+
}

‎app/styles/_log.less

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@
77
.h2();
88
.text-center();
99
}
10+
log-viewer {
11+
flex: 1 1 0%;
12+
}
1013
}
1114
.log-title {
1215
margin-top: 0;

‎app/styles/_membership.less

Lines changed: 33 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,57 @@
11
.membership {
22
.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;
3+
flex: 1 1 auto;
4+
@media(min-width: @screen-xs-min) {
5+
max-width: 65%;
6+
.container-pf-nav-pf-vertical.collapsed-nav & {
7+
max-width: 60%;
8+
}
129
}
1310
}
1411
.content-pane {
15-
width: 100%;
1612
.add-role-to {
1713
margin-left: -1px;
1814
}
19-
.col-add-role {
20-
width: 100%;
21-
@media(min-width: @screen-xs-min) {
22-
min-width: 245px;
23-
width: auto;
24-
}
15+
.col-add-role-inputs {
16+
display: flex;
2517
}
2618
.col-heading {
2719
border-bottom: 1px solid #ededed;
2820
display: none;
2921
@media(min-width: @screen-xs-min) {
3022
display: flex;
31-
margin: 0;
3223
}
3324
}
3425
.col-name {
26+
align-items: center;
27+
display: flex;
28+
flex: 1 1 auto;
29+
padding: 0 0 10px 0;
30+
.word-break-all;
3531
@media(min-width: @screen-xs-min) {
36-
max-width: 30%;
32+
max-width: 35%;
33+
padding: 0 5px 0 0;
34+
width: 100%;
3735
.container-pf-nav-pf-vertical.collapsed-nav & {
3836
max-width: 40%;
3937
}
40-
padding: 0 5px 0 0;
4138
input {
4239
max-width: 225px;
4340
}
4441
}
45-
&.half-width {
46-
max-width: 50%;
47-
}
48-
.word-break-all;
49-
padding: 0 0px 10px 0;
50-
width: 100%;
51-
.new-project {
52-
margin-top: 2px;
53-
}
5442
}
5543
.col-roles {
5644
display: flex;
5745
flex-wrap: wrap;
5846
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-
}
66-
.form-new-role {
67-
.col-roles {
68-
display: none;
69-
}
70-
@media(min-width: @screen-md-min) {
71-
.action-set {
72-
flex-direction: column;
73-
.col-add-role {
74-
align-self: flex-end;
75-
}
76-
}
77-
}
78-
}
79-
.input-name {
80-
margin-bottom: 5px;
8147
}
8248
.item-row {
8349
border-bottom: 1px solid #ededed;
84-
padding: 10px 10px 10px 5px;
50+
display: flex;
51+
flex-direction: column;
52+
padding: 10px 0;
8553
@media(min-width: @screen-xs-min) {
54+
flex-direction: row;
8655
&.highlight-hover:hover {
8756
background-color: #fafafa;
8857
}
@@ -91,51 +60,31 @@
9160
.membership-empty {
9261
margin-top: 20px;
9362
}
94-
.show-hidden-roles .action-set {
95-
display: flex;
96-
flex-direction: row;
97-
justify-content: flex-end;
98-
}
99-
.select-project {
100-
width: 150px;
63+
.show-hidden-roles {
64+
text-align: right;
10165
}
10266
.select-role {
67+
flex: 1 1 auto;
68+
.active {
69+
small {
70+
color: #c0e0f0;
71+
}
72+
}
10373
small {
10474
color: #999;
10575
display: inline-block;
10676
line-height: 1.4;
10777
white-space: pre-line;
10878
}
109-
.active {
110-
small {
111-
color: #c0e0f0;
112-
}
113-
}
11479
}
11580
.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-
}
81+
flex-wrap: wrap;
82+
margin-bottom: -5px;
83+
.select-project,
84+
.select-service-account {
85+
margin-bottom: 5px;
12586
}
12687
}
127-
// FIXME (bpeterse): to update in layout.attrs & eliminate the workaround here
128-
// fix for collapse of flex items in IE
129-
// https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored
130-
[flex-collapse-fix],
131-
[flex], // fixes ie flex-direction: column collapse issue
132-
.col-add-role,
133-
.col-heading,
134-
.col-name,
135-
.item-row {
136-
flex-shrink: 0;
137-
flex-basis: auto;
138-
}
13988
}
14089
// allow for taller select due to role help text
14190
.ui-select-bootstrap > .ui-select-choices {

‎app/styles/_overview.less

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -243,9 +243,6 @@
243243
}
244244
}
245245
.list-pf-expansion.in {
246-
.deployment-donut > div[row] {
247-
justify-content: center;
248-
}
249246
.empty-state-message {
250247
margin-bottom: 30px;
251248
margin-top: 20px;

‎app/styles/_pipeline.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -265,6 +265,7 @@
265265
}
266266
.build-pipeline {
267267
display: flex;
268+
flex: 1 1 0%;
268269
flex-direction: row;
269270
.build-name {
270271
white-space: nowrap;

0 commit comments

Comments
 (0)