Merge pull request #6147 from marshmalien/fix/templateLabelsWidth

Fix padding and wrap of Labels section in Template
This commit is contained in:
Marliana Lara 2017-05-02 10:44:06 -04:00 committed by GitHub
commit 4926a78f53
4 changed files with 15 additions and 12 deletions

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 @default-white-button-bord;
}
.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;
}

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;
}
}

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{

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>