shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 16:51:11 +03:00
Code Releases Activity

Merge pull request #6999 from marshmalien/fix/styleLongCredentialNames

Browse Source 
Fix styling issues caused by long credential names
This commit is contained in:
Marliana Lara 2017-07-12 10:14:46 -04:00 committed by GitHub
commit 87101d18d2
7 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui/client/legacy-styles/forms.less
View File

@ -669,6 +669,8 @@ input[type='radio']:checked:before {
.Form-textInput--variableHeight {
height: inherit;
min-height: 30px;
max-height: 120px;
overflow-y: scroll;
}
.Form-variableHeightButtonGroup {

5
awx/ui/client/src/job-submission/job-submission.block.less
View File

@ -126,14 +126,15 @@
display: flex;
flex: 0 0 auto;
margin-top: 15px;
justify-content: space-between;
}
.JobSubmission-footerPreview {
display: flex;
flex: 1 0 auto;
}
.JobSubmission-footerButtons {
justify-content: flex-end;
display: flex;
align-items: flex-end;
}
.JobSubmission-previewItem {
min-width: 150px;
@ -193,6 +194,8 @@
border: 1px solid @default-border;
padding: 10px;
border-radius: 5px;
max-height: 120px;
overflow-y: scroll;
}
.JobSubmission-selectedItemRevert {
display: flex;

8
awx/ui/client/src/job-submission/job-submission.partial.html
View File

@ -57,7 +57,7 @@
</div>
<div class="JobSubmission-previewTags--outer">
<div class="JobSubmission-previewTags--inner">
<div class="JobSubmission-previewTagContainer" ng-show="selected_credentials.machine">
<div class="JobSubmission-previewTagContainer u-wordwrap" ng-show="selected_credentials.machine">
<div class="JobSubmission-previewTagContainerDelete" ng-click="deleteMachineCred()" ng-show="ask_credential_on_launch">
<i class="fa fa-times JobSubmission-previewTagContainerTagDelete"></i>
</div>
@ -333,15 +333,15 @@
</div>
<div>
<span ng-show="selected_credentials.machine" class="JobSubmission-previewItemSubTitle"><span translate>Machine</span>:&nbsp;</span>
<span ng-show="selected_credentials.machine">{{selected_credentials.machine.name}}</span>
<span class="u-wordwrap" ng-show="selected_credentials.machine">{{selected_credentials.machine.name}}</span>
</div>
<div ng-repeat="extraCredential in selected_credentials.extra">
<span class="JobSubmission-previewItemSubTitle">{{credential_types[extraCredential.credential_type].name}}:&nbsp;</span>
<span>{{extraCredential.name}}</span>
<span class="u-wordwrap">{{extraCredential.name}}</span>
</div>
<div>
<span ng-show="selected_credentials.vault" class="JobSubmission-previewItemSubTitle"><span translate>Vault</span>:&nbsp;</span>
<span ng-show="selected_credentials.vault">{{selected_credentials.vault.name}}</span>
<span ng-show="selected_credentials.vault" class="u-wordwrap">{{selected_credentials.vault.name}}</span>
</div>
</div>
</div>

10
awx/ui/client/src/shared/utilities/wordwrap.less Normal file
View File

@ -0,0 +1,10 @@
.u-wordwrap {
white-space: -moz-pre-wrap !important;
white-space: -webkit-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
white-space: normal;
}

2
awx/ui/client/src/templates/job_templates/multi-credential/multi-credential-modal.partial.html
View File

@ -39,7 +39,7 @@
ng-binding">
{{ tag.kind }}
</span>
<span class="MultiCredential-name
<span class="MultiCredential-name u-wordwrap
ng-binding">
{{ tag.name }}
</span>

4
awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.block.less
View File

@ -2,15 +2,17 @@
.MultiCredential-selectedBar {
display: flex;
align-items: center;
padding: 5px 10px;
background: @default-no-items-bord;
margin-bottom: 20px;
border: 1px solid @default-icon-hov;
border-radius: 5px;
max-height: 120px;
overflow-y: scroll;
}
.MultiCredential-selectedBarLabel {
align-self: center;
margin-right: 20px;
font-size: 12px;
color: @default-icon;

2
awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.partial.html
View File

@ -30,7 +30,7 @@
ng-binding">
{{ tag.kind }}
</span>
<span class="MultiCredential-name ng-binding">
<span class="MultiCredential-name u-wordwrap ng-binding">
{{ tag.name }}
</span>
</div>