Skip to content

Commit ba18fea

Browse files
rhamiltorhamilto
committed
Improving copy-to-clipboard display
Fixes 1235 Fixes 1236 Fixes issue where dl.secret-data didn’t display properly in IE Fixes issue where .btn inside .input-group-btn was 1px too tall in Firefox, Safari, IE/Edge
1 parent a091294 commit ba18fea

File tree

4 files changed

+52
-48
lines changed

4 files changed

+52
-48
lines changed

‎app/styles/_core.less

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1300,11 +1300,6 @@ pre.clipped {
13001300
}
13011301
}
13021302

1303-
// don't allow copy-to-clipboard .input-groups get bigger than 600px so Github webhook secrets aren't revealed within the input-group
1304-
copy-to-clipboard .input-group.limit-width {
1305-
max-width: 300px;
1306-
}
1307-
13081303
.tech-preview-header {
13091304
justify-content: space-between;
13101305
}

‎app/styles/_forms.less

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,24 @@
33
margin-top: 3px;
44
}
55

6-
.copy-to-clipboard input.form-control:read-only {
7-
background-color: white;
8-
color: @text-color;
6+
// don't allow copy-to-clipboard .input-groups get bigger than 300px so Github webhook secrets aren't revealed within the input-group
7+
copy-to-clipboard .input-group.limit-width {
8+
max-width: 300px;
9+
}
10+
11+
.copy-to-clipboard {
12+
input.form-control[readonly] {
13+
background-color: white;
14+
color: @text-color;
15+
}
16+
.jenkinsfile-examples & {
17+
margin-top: 3px;
18+
}
919
}
1020

1121
.copy-to-clipboard-multiline {
12-
position: relative;
13-
width: 100%;
22+
display: block;
23+
overflow-x: auto;
1424
a {
1525
box-shadow: none;
1626
position: absolute;
@@ -19,31 +29,25 @@
1929
}
2030
pre {
2131
background-color: #fff;
22-
max-width: 100%;
23-
overflow-x: auto;
32+
word-break: normal;
33+
word-wrap: normal;
2434
}
2535
}
2636

2737
.input-group-addon.wildcard-prefix {
2838
padding-left: 10px;
2939
}
3040

41+
.input-group-btn .btn {
42+
line-height: 1.6154em; // 21px; so that .btn isn't larger than .form-input
43+
}
44+
3145
.editor-examples {
3246
padding: 19px;
3347
margin-bottom: 20px;
3448
border: 1px solid @color-pf-black-300;
3549
}
3650

37-
.jenkinsfile-examples {
38-
p {
39-
// Show scrollbars as needed on small screens.
40-
overflow: auto;
41-
}
42-
.copy-to-clipboard {
43-
margin-top: 3px;
44-
}
45-
}
46-
4751
.compute-resource {
4852
margin-bottom: 5px;
4953
}

‎app/styles/_secrets.less

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,19 +55,27 @@
5555
}
5656

5757
dl.secret-data {
58-
overflow: hidden;
59-
pre {
60-
margin-bottom: 0;
61-
}
6258
dd {
6359
margin-bottom: 10px;
64-
overflow-x: auto;
60+
@media (min-width: @screen-md-min) {
61+
margin-left: @dl-horizontal-offset;
62+
}
6563
.copy-to-clipboard {
6664
font-family: @font-family-monospace;
6765
}
6866
}
69-
@media (min-width: @screen-md-min) {
70-
.dl-horizontal();
67+
dt {
68+
margin-bottom: 5px;
69+
@media (min-width: @screen-md-min) {
70+
clear: left;
71+
float: left;
72+
text-align: right;
73+
.text-overflow();
74+
width: (@dl-horizontal-offset - 20);
75+
}
76+
}
77+
pre {
78+
margin-bottom: 0;
7179
}
7280
}
7381

‎dist/styles/main.css

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3645,7 +3645,6 @@ table.dataTable th:active{outline:0}
36453645
.wizard-pf-row{bottom:58px;position:absolute;overflow:hidden;top:172px;width:100%}
36463646
.word-break{word-break:break-word;overflow-wrap:break-word;min-width:0}
36473647
.word-break-all{word-break:break-all;word-break:break-word;overflow-wrap:break-word}
3648-
.modal-resource-action h1,.resource-description,.row-cards-pf-flex .card-pf-body p{word-break:break-word;word-wrap:break-word}
36493648
.pre-wrap{white-space:pre-wrap}
36503649
.visible-xlg-inline-block{display:none!important}
36513650
@media (max-width:767px){.td-long-string{word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;min-width:0}
@@ -3669,15 +3668,16 @@ table.dataTable th:active{outline:0}
36693668
.btn-remove:focus,.btn-remove:hover{color:inherit;opacity:1;text-decoration:none}
36703669
.static-form-value-large{font-family:inherit;font-weight:500;line-height:1.1;color:inherit;margin-bottom:10.5px;font-size:16px;margin-top:3px}
36713670
.static-form-value-large .small,.static-form-value-large small{font-weight:400;line-height:1;color:#9c9c9c;font-size:65%}
3672-
.copy-to-clipboard input.form-control:read-only{background-color:#fff;color:#363636}
3673-
.copy-to-clipboard-multiline{position:relative;width:100%}
3671+
copy-to-clipboard .input-group.limit-width{max-width:300px}
3672+
.copy-to-clipboard input.form-control[readonly]{background-color:#fff;color:#363636}
3673+
.jenkinsfile-examples .copy-to-clipboard{margin-top:3px}
3674+
.copy-to-clipboard-multiline{display:block;overflow-x:auto}
36743675
.copy-to-clipboard-multiline a{box-shadow:none;position:absolute;right:0;top:0}
36753676
.card-pf,.tile{box-shadow:0 3px 1px -2px rgba(0,0,0,.15),0 2px 2px 0 rgba(0,0,0,.1),0 1px 5px 0 rgba(0,0,0,.09)}
3676-
.copy-to-clipboard-multiline pre{background-color:#fff;max-width:100%;overflow-x:auto}
3677+
.copy-to-clipboard-multiline pre{background-color:#fff;word-break:normal;word-wrap:normal}
36773678
.input-group-addon.wildcard-prefix{padding-left:10px}
3679+
.input-group-btn .btn{line-height:1.6154em}
36783680
.editor-examples{padding:19px;margin-bottom:20px;border:1px solid #d1d1d1}
3679-
.jenkinsfile-examples p{overflow:auto}
3680-
.jenkinsfile-examples .copy-to-clipboard{margin-top:3px}
36813681
.compute-resource{margin-bottom:5px}
36823682
@media (max-width:767px){.compute-resource .inline-select{margin-top:5px}
36833683
}
@@ -3699,7 +3699,7 @@ table.dataTable th:active{outline:0}
36993699
.row-cards-pf-flex:before{display:none}
37003700
.row-cards-pf-flex .card-pf,.row-cards-pf-flex [class^=col]{display:flex;flex-direction:column}
37013701
.row-cards-pf-flex .card-pf,.row-cards-pf-flex .card-pf-body{flex-grow:1}
3702-
.row-cards-pf-flex .card-pf-body p{overflow-wrap:break-word;min-width:0}
3702+
.row-cards-pf-flex .card-pf-body p{word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;min-width:0}
37033703
.row-cards-pf-flex .card-pf-body-with-version{display:flex;flex-direction:column;justify-content:space-between}
37043704
.row-cards-pf-flex .card-pf-footer .btn{margin-bottom:10px}
37053705
.row-cards-pf-flex .card-pf-title{line-height:1.3;margin:0;overflow:hidden;text-overflow:ellipsis}
@@ -4016,7 +4016,7 @@ label.checkbox{font-weight:400}
40164016
.attention-message,.tasks,div.code,pre.code{background-color:#fff}
40174017
.template-message .resource-description{margin-bottom:0;font-size:12px}
40184018
.resource-metadata,.tasks{margin-bottom:20px}
4019-
.resource-description{margin-bottom:20px;white-space:pre-wrap;overflow-wrap:break-word;min-width:0}
4019+
.resource-description{margin-bottom:20px;white-space:pre-wrap;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;min-width:0}
40204020
.tasks{font-weight:400;padding:20px;position:relative}
40214021
.tasks.success{border:1px solid #3f9c35;border-left:3px solid #3f9c35}
40224022
.tasks.failure{border:1px solid #c00;border-left:3px solid #c00}
@@ -4076,7 +4076,7 @@ a.disabled-link:active,a.disabled-link:focus,a.disabled-link:hover{color:#bbb;te
40764076
}
40774077
.header-actions{font-size:84%;margin-left:5px}
40784078
.modal-resource-action{background-color:#f1f1f1}
4079-
.modal-resource-action h1{font-size:21px;font-weight:500;margin-bottom:20px;overflow-wrap:break-word;min-width:0}
4079+
.modal-resource-action h1{font-size:21px;font-weight:500;margin-bottom:20px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;min-width:0}
40804080
.modal-resource-action p{font-size:16px}
40814081
.modal-resource-action .help-block{margin-top:0px;margin-bottom:10px}
40824082
.ace_editor.dockerfile-mode .ace_constant.ace_numeric,.editor.yaml-mode .ace_constant.ace_numeric{color:inherit}
@@ -4142,7 +4142,6 @@ pre.clipped.scroll{max-height:150px;overflow:auto;width:100%}
41424142
.environment-variables.table.table-bordered>tbody>tr>td:last-child .env-var-value a{font-family:"Open Sans",Helvetica,Arial,sans-serif}
41434143
.info-popover,.warnings-popover{cursor:help;vertical-align:middle;margin-left:2px}
41444144
.info-popover.pficon-info,.warnings-popover.pficon-info{color:#4d5258}
4145-
copy-to-clipboard .input-group.limit-width{max-width:300px}
41464145
.tech-preview-header{justify-content:space-between}
41474146
@media (max-width:479px){.col-xxs-12{width:100%}
41484147
}
@@ -4980,8 +4979,7 @@ to{background-color:transparent}
49804979
@media (min-width:768px){.navbar-project-menu .form-group{min-width:220px;width:220px}
49814980
}
49824981
@media (min-width:992px){.navbar-project-menu .form-group{min-width:400px;width:400px}
4983-
dl.secret-data.left dt{text-align:left}
4984-
dl.secret-data.indent{margin-left:20px}
4982+
dl.secret-data dd{margin-left:180px}
49854983
}
49864984
.navbar-project-menu .form-group .form-control{background-color:transparent;margin-bottom:0;height:auto}
49874985
@-ms-viewport{width:device-width}
@@ -5045,6 +5043,7 @@ td.visible-print,th.visible-print{display:table-cell!important}
50455043
}
50465044
::-webkit-scrollbar-corner{background:0 0}
50475045
::-webkit-scrollbar{height:10px;overflow:visible;width:15px}
5046+
.events-sidebar .right-content .event .event-details,.events-sidebar .right-content .event .event-details .event-message,.events-sidebar .right-content .event .event-details .event-object,.events-sidebar .right-content .event .event-details .event-reason{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
50485047
::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.08);background-clip:padding-box;border:solid transparent;border-width:1px;min-height:28px;max-height:60px;padding:100px 0 0;-webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07)}
50495048
::-webkit-scrollbar-thumb:active,::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.18)}
50505049
::-webkit-scrollbar-track{background-clip:padding-box;background-color:rgba(0,0,0,.03)}
@@ -5061,20 +5060,18 @@ td.visible-print,th.visible-print{display:table-cell!important}
50615060
.osc-secrets-form .advanced-secrets .help-blocks .help-block,.osc-secrets-form .advanced-secrets .help-blocks .input-label,.osc-secrets-form .advanced-secrets .input-labels .help-block,.osc-secrets-form .advanced-secrets .input-labels .input-label{width:50%}
50625061
.osc-secrets-form .advanced-secrets .secret-row .destination-dir,.osc-secrets-form .advanced-secrets .secret-row .secret-name{width:50%;display:inline-block}
50635062
.osc-secrets-form .advanced-secrets .secret-row .destination-dir{padding-left:5px}
5064-
dl.secret-data{overflow:hidden}
5065-
dl.secret-data pre{margin-bottom:0}
5066-
.create-secret-form .help-block,dl.secret-data dd{margin-bottom:10px}
5067-
dl.secret-data dd{overflow-x:auto}
5068-
.events-sidebar .right-content .event .event-details,.events-sidebar .right-content .event .event-details .event-message,.events-sidebar .right-content .event .event-details .event-object,.events-sidebar .right-content .event .event-details .event-reason{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
5063+
dl.secret-data dd{margin-bottom:10px}
50695064
dl.secret-data dd .copy-to-clipboard{font-family:Menlo,Monaco,Consolas,monospace}
5070-
@media (min-width:992px) and (min-width:415px){dl.secret-data dt{float:left;width:160px;clear:left;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
5071-
dl.secret-data dd{margin-left:180px}
5065+
dl.secret-data dt{margin-bottom:5px}
5066+
@media (min-width:992px){dl.secret-data dt{clear:left;float:left;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:160px}
50725067
}
50735068
.log-view,.sidebar-left .navbar-sidebar .sidebar-header:after{clear:both}
5069+
dl.secret-data pre{margin-bottom:0}
50745070
.create-secret-modal{background-color:#F5F5F5}
50755071
.create-secret-modal .modal-footer{margin-top:0px}
50765072
.create-secret-modal .modal-body{padding:0px 18px}
50775073
.create-secret-editor{height:150px}
5074+
.create-secret-form .help-block{margin-bottom:10px}
50785075
.nav-sidenav-secondary .dropdown-header{color:#b3b3b3;font-size:12px;padding-bottom:10px;padding-left:37px;padding-top:10px}
50795076
.sidebar-left .navbar-sidebar{border-bottom:0;border-left:0;border-top:0;margin:0;min-height:46px}
50805077
.sidebar-left .navbar-sidebar.visible-xs-block{border:0}

0 commit comments

Comments
 (0)