External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-14 03:10:42 -03:30
Code Issues Packages Projects Releases Wiki Activity

Fix padding and wrap of Labels section in Template

Browse Source 
Issue #5484
*Add top and bottom padding in Labels table cell
*Show View More link when there are more than 5 labels
*Add word-wrap to labels
*Add left padding between Activity and Label sections when page
shrinks
*Change table row border color to #E1E1E1
This commit is contained in:
Marliana Lara 2017-05-01 15:18:08 -04:00
parent 932f53b2ea
commit 9b78a919fb
4 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
awx/ui/client/legacy-styles/lists.less
View File

@ -60,7 +60,7 @@ table, tbody {
height: 40px;
font-size: 14px;
color: @list-item;
border-bottom: 1px solid #d7d7d7;
border-bottom: 1px solid #E1E1E1;
}
.List-tableRow:last-of-type {
@ -81,8 +81,7 @@ table, tbody {
}
.List-tableCell {
padding-left: 15px;
padding-right: 15px;
padding: 7px 15px;
border-top:0px!important;
word-wrap: break-word;
}

14
awx/ui/client/src/templates/labels/labelsList.block.less
View File

@ -7,10 +7,11 @@
align-items: flex-start;
}
.LabelList-tagContainer,
.LabelList-tagContainer,
.LabelList-seeMoreLess {
display: flex;
max-width: 100%;
max-width: 200px;
}
.LabelList-tag {
@ -22,9 +23,6 @@
background-color: @default-list-header-bg;
margin-right: 5px;
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.LabelList-seeMoreLess {
@ -86,3 +84,9 @@
.LabelList-deleteContainer:hover > .LabelList-tagDelete {
color: @default-bg;
}
@media (max-width: 1200px) {
.List-tableCell.col-md-4 {
padding-left: 40px;
}
}

4
awx/ui/client/src/templates/labels/labelsList.directive.js
View File

@ -50,7 +50,7 @@ export default
scope.seeLess = function() {
// Trim the labels array back down to 10 items
scope.labels = scope.labels.slice(0, 10);
scope.labels = scope.labels.slice(0, 5);
// Re-set the seeMoreInteractive flag so that the "See More" will be displayed
scope.seeMoreInactive = true;
};
@ -95,7 +95,7 @@ export default
// To keep the array of labels fresh, we need to set up a watcher - otherwise, the
// array will get set initially and then never be updated as labels are removed
if (scope[scope.$parent.list.iterator].summary_fields.labels){
scope.labels = scope[scope.$parent.list.iterator].summary_fields.labels.results;
scope.labels = scope[scope.$parent.list.iterator].summary_fields.labels.results.slice(0, 5);
scope.count = scope[scope.$parent.list.iterator].summary_fields.labels.count;
}
else{

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

@ -8,7 +8,7 @@
<span class="LabelList-name">{{ label.name }}</span>
</div>
</div>
<div class="LabelList-seeMoreLess" ng-show="count > 10 && seeMoreInactive"
<div class="LabelList-seeMoreLess" ng-show="count > 5 && seeMoreInactive"
ng-click="seeMore()">View More</div>
<div class="LabelList-seeMoreLess" ng-show="count > 10 && !seeMoreInactive"
<div class="LabelList-seeMoreLess" ng-show="count > 5 && !seeMoreInactive"
ng-click="seeLess()">View Less</div>