External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-07 17:37:37 -02:30
Code Issues Packages Projects Releases Wiki Activity

Fix alignment of action icons and invalid bar with css grid

Browse Source
This commit is contained in:
Marliana Lara
2018-04-16 14:55:43 -04:00
parent 60e3dfe22c
commit 92a742af98
8 changed files with 59 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
awx/ui/client/features/jobs/jobsList.view.html
View File

@@ -24,16 +24,18 @@
header-link="{{ vm.getLink(job) }}" header-link="{{ vm.getLink(job) }}"
header-tag="{{ vm.jobTypes[job.type] }}"> header-tag="{{ vm.jobTypes[job.type] }}">
</at-row-item> </at-row-item>
<at-row-item <div class="at-Row--inline">
label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_STARTED') }}" <at-row-item
value="{{ job.started | longDate }}" label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_STARTED') }}"
inline="true"> value="{{ job.started | longDate }}"
</at-row-item> inline="true">
<at-row-item </at-row-item>
label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_FINISHED') }}" <at-row-item
value="{{ job.finished | longDate }}" label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_FINISHED') }}"
inline="true"> value="{{ job.finished | longDate }}"
</at-row-item> inline="true">
</at-row-item>
</div>
<at-row-item <at-row-item
label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_WORKFLOW_JOB') }}" label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_WORKFLOW_JOB') }}"
value="{{ job.summary_fields.source_workflow_job.name }}" value="{{ job.summary_fields.source_workflow_job.name }}"

5
awx/ui/client/lib/components/launchTemplateButton/_index.less
View File

@@ -1,6 +1,4 @@
.at-LaunchTemplate { .at-LaunchTemplate {
margin-left: 15px;
&--button { &--button {
font-size: 16px; font-size: 16px;
height: 30px; height: 30px;
@@ -8,8 +6,9 @@
color: #848992; color: #848992;
background-color: inherit; background-color: inherit;
border: none; border: none;
border-radius: 4px; border-radius: 5px;
} }
&--button:hover { &--button:hover {
background-color: @at-blue; background-color: @at-blue;
color: white; color: white;

59
awx/ui/client/lib/components/list/_index.less
View File

@@ -68,12 +68,8 @@
} }
.at-Row { .at-Row {
display: flex; display: grid;
flex-direction: row; grid-template-columns: 10px 1fr;
justify-content: space-between;
align-items: center;
padding: @at-padding-list-row;
position: relative;
} }
.at-Row--active { .at-Row--active {
@@ -86,15 +82,21 @@
border-left: @at-white solid 1px; border-left: @at-white solid 1px;
} }
.at-Row--active .at-Row-content {
margin-left: -5px;
}
.at-Row ~ .at-Row {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top: @at-border-default-width solid @at-color-list-border;
}
.at-Row--invalid { .at-Row--invalid {
align-items: center; align-items: center;
background: @at-color-error; background: @at-color-error;
display: flex; display: flex;
height: 100%;
justify-content: center; justify-content: center;
left: 0;
position: absolute;
width: @at-space-2x;
.at-Popover { .at-Popover {
padding: 0; padding: 0;
@@ -109,31 +111,14 @@
} }
} }
.at-Row ~ .at-Row { .at-Row-content {
border-top-left-radius: 0px; align-items: center;
border-top-right-radius: 0px;
border-top: @at-border-default-width solid @at-color-list-border;
}
.at-Row--rowLayout {
display: flex; display: flex;
flex-direction: row; grid-column-start: 2;
padding: @at-padding-list-row;
.at-RowItem {
margin-right: @at-space-4x;
&-label {
width: auto;
}
}
} }
.at-RowStatus { .at-Row-toggle {
align-self: flex-start;
margin: 0 10px 0 0;
}
.at-Row-firstColumn {
margin-right: @at-space-4x; margin-right: @at-space-4x;
} }
@@ -142,12 +127,12 @@
} }
.at-Row-items { .at-Row-items {
align-self: flex-start;
flex: 1; flex: 1;
} }
.at-RowItem { .at-RowItem {
display: flex; display: grid;
grid-template-columns: 120px 1fr;
align-items: center; align-items: center;
line-height: @at-height-list-row-item; line-height: @at-height-list-row-item;
} }
@@ -157,6 +142,7 @@
} }
.at-RowItem--isHeader { .at-RowItem--isHeader {
display: flex;
color: @at-color-body-text; color: @at-color-body-text;
margin-bottom: @at-margin-bottom-list-header; margin-bottom: @at-margin-bottom-list-header;
line-height: @at-line-height-list-row-item-header; line-height: @at-line-height-list-row-item-header;
@@ -172,6 +158,8 @@
.at-RowItem--labels { .at-RowItem--labels {
line-height: @at-line-height-list-row-item-labels; line-height: @at-line-height-list-row-item-labels;
display: flex;
flex-wrap: wrap;
} }
.at-RowItem-header { .at-RowItem-header {
@@ -179,6 +167,7 @@
} }
.at-RowItem-tagContainer { .at-RowItem-tagContainer {
display: flex;
margin-left: @at-margin-left-list-row-item-tag-container; margin-left: @at-margin-left-list-row-item-tag-container;
} }
@@ -211,8 +200,6 @@
.at-RowItem-label { .at-RowItem-label {
text-transform: uppercase; text-transform: uppercase;
width: auto;
width: @at-width-list-row-item-label;
color: @at-color-list-row-item-label; color: @at-color-list-row-item-label;
font-size: @at-font-size; font-size: @at-font-size;
} }

2
awx/ui/client/lib/components/list/row.partial.html
View File

@@ -2,5 +2,5 @@
<div class="at-Row--invalid" ng-show="invalid"> <div class="at-Row--invalid" ng-show="invalid">
<at-popover state="invalidTooltip"></at-popover> <at-popover state="invalidTooltip"></at-popover>
</div> </div>
<ng-transclude></ng-transclude> <div class="at-Row-content" ng-transclude></div>
</div> </div>

4
awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less
View File

@@ -46,4 +46,8 @@ capacity-bar {
.Capacity-details--percentage { .Capacity-details--percentage {
width: 40px; width: 40px;
} }
&:only-child {
margin-right: 50px;
}
} }

17
awx/ui/client/src/instance-groups/instances/instances-list.partial.html
View File

@@ -35,7 +35,7 @@
<at-list results='vm.instances'> <at-list results='vm.instances'>
<at-row ng-repeat="instance in vm.instances" <at-row ng-repeat="instance in vm.instances"
ng-class="{'at-Row--active': (instance.id === vm.activeId)}"> ng-class="{'at-Row--active': (instance.id === vm.activeId)}">
<div class="at-Row-firstColumn"> <div class="at-Row-toggle">
<div class="ScheduleToggle" <div class="ScheduleToggle"
ng-class="{'is-on': instance.enabled}"> ng-class="{'is-on': instance.enabled}">
<button ng-show="instance.enabled" <button ng-show="instance.enabled"
@@ -53,14 +53,13 @@
<div class="at-Row-items"> <div class="at-Row-items">
<at-row-item header-value="{{ instance.hostname }}"></at-row-item> <at-row-item header-value="{{ instance.hostname }}"></at-row-item>
<div class="at-Row--rowLayout"> <at-row-item
<at-row-item label-value="Running Jobs"
label-value="Running Jobs" label-state="instanceGroups.instanceJobs({instance_group_id: {{vm.instance_group_id}}, instance_id: {{instance.id}}})"
label-state="instanceGroups.instanceJobs({instance_group_id: {{vm.instance_group_id}}, instance_id: {{instance.id}}})" value="{{ instance.jobs_running }}"
value="{{ instance.jobs_running }}" inline="true"
badge="true"> badge="true">
</at-row-item> </at-row-item>
</div>
</div> </div>
<div class="at-Row-actions"> <div class="at-Row-actions">

5
awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html
View File

@@ -39,11 +39,12 @@
header-link="/#/instance_groups/{{ instance_group.id }}"> header-link="/#/instance_groups/{{ instance_group.id }}">
</at-row-item> </at-row-item>
<div class="at-Row--rowLayout"> <div class="at-Row--inline">
<at-row-item <at-row-item
label-value="Instances" label-value="Instances"
label-link="/#/instance_groups/{{ instance_group.id }}/instances" label-link="/#/instance_groups/{{ instance_group.id }}/instances"
value="{{ instance_group.instances }}" value="{{ instance_group.instances }}"
inline="true"
badge="true"> badge="true">
</at-row-item> </at-row-item>
@@ -51,10 +52,10 @@
label-value="Running Jobs" label-value="Running Jobs"
label-link="/#/instance_groups/{{ instance_group.id }}/jobs" label-link="/#/instance_groups/{{ instance_group.id }}/jobs"
value="{{ instance_group.jobs_running }}" value="{{ instance_group.jobs_running }}"
inline="true"
badge="true"> badge="true">
</at-row-item> </at-row-item>
</div> </div>
</div> </div>
<div class="at-Row-actions"> <div class="at-Row-actions">

10
awx/ui/client/src/templates/labels/labelsList.partial.html
View File

@@ -12,10 +12,11 @@
ng-click="seeMore()" ng-if="!isRowItem">View More</div> ng-click="seeMore()" ng-if="!isRowItem">View More</div>
<div class="LabelList-seeMoreLess" ng-show="count > 5 && !seeMoreInactive" <div class="LabelList-seeMoreLess" ng-show="count > 5 && !seeMoreInactive"
ng-click="seeLess()" ng-if="!isRowItem">View Less</div> ng-click="seeLess()" ng-if="!isRowItem">View Less</div>
<div class="at-RowItem at-RowItem--labels" ng-show="count > 0" ng-if="isRowItem"> <div class="at-RowItem" ng-show="count > 0" ng-if="isRowItem">
<div class="at-RowItem-label"> <div class="at-RowItem-label">
Labels Labels
</div> </div>
<div class="at-RowItem--labels">
<div class="LabelList-tagContainer" ng-repeat="label in labels"> <div class="LabelList-tagContainer" ng-repeat="label in labels">
<div class="LabelList-tag" ng-class="{'LabelList-tag--deletable' : (showDelete && template.summary_fields.user_capabilities.edit)}"> <div class="LabelList-tag" ng-class="{'LabelList-tag--deletable' : (showDelete && template.summary_fields.user_capabilities.edit)}">
<span class="LabelList-name">{{ label.name }}</span> <span class="LabelList-name">{{ label.name }}</span>
@@ -30,4 +31,5 @@
ng-click="seeMore()">View More</div> ng-click="seeMore()">View More</div>
<div class="LabelList-seeMoreLess" ng-show="count > 5 && !seeMoreInactive" <div class="LabelList-seeMoreLess" ng-show="count > 5 && !seeMoreInactive"
ng-click="seeLess()">View Less</div> ng-click="seeLess()">View Less</div>
</div>
</div> </div>