vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Fix overflow of tag names in the tags view

Browse source 
Fixes #1405
This commit is contained in:
Joseph Schorr 2016-04-28 14:28:54 -04:00
parent 9e88b1413d
commit 3d7e514aa3
3 changed files with 38 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
static/css/core-ui.css
View file

@ -991,6 +991,17 @@ a:focus {
width: 100%;
}
.co-fixed-table {
table-layout: fixed;
}
.co-fixed-table .co-flowing-col{
overflow: hidden;
text-overflow: ellipsis;
padding-left: 16px;
vertical-align: middle;
}
.co-table td {
border-bottom: 1px solid #eee;
padding: 10px;
@ -1037,10 +1048,12 @@ a:focus {
.co-table .checkbox-col {
width: 24px;
text-align: center;
}
.co-table td.options-col {
width: 30px;
width: 36px;
text-align: center;
}
.co-table td.caret-col {

13
static/css/directives/repo-view/repo-panel-tags.css
View file

@ -118,6 +118,19 @@
color: black;
}
.arepo-panel-tags-element .tag-span {
overflow: hidden;
text-overflow: ellipsis;
max-width: 250px;
display: inline-block;
}
@media (max-width: 1000px) {
.repo-panel-tags-element .image-track {
display: none;
}
}
@media (max-width: 767px) {
.repo-panel-tags-element .tag-span {
overflow: hidden;

20
static/directives/repo-view/repo-panel-tags.html
View file

@ -77,7 +77,7 @@
<div class="cor-loader" ng-show="!isEnabled"></div>
<table class="co-table" id="tagsTable" ng-if="isEnabled">
<table class="co-table co-fixed-table" id="tagsTable" ng-if="isEnabled" style="margin-top: 20px;">
<thead>
<td class="checkbox-col"></td>
<td ng-class="tablePredicateClass('name', options.predicate, options.reverse)">
@ -85,29 +85,30 @@
</td>
<td class="hidden-xs"
ng-class="tablePredicateClass('last_modified_datetime', options.predicate, options.reverse)"
style="min-width: 120px;">
style="width: 140px;">
<a ng-click="orderBy('last_modified_datetime')">Last Modified</a>
</td>
<td class="hidden-xs"
ng-class="tablePredicateClass('security_scanned', options.predicate, options.reverse)"
style="min-width: 120px;"
style="width: 140px;"
quay-require="['SECURITY_SCANNER']">
Security Scan
</td>
<td class="hidden-xs"
ng-class="tablePredicateClass('size', options.predicate, options.reverse)"
style="min-width: 62px;">
style="width: 80px;">
<a ng-click="orderBy('size')">Size</a>
</td>
<td class="hidden-xs"
<td class="hidden-xs hidden-sm"
ng-class="tablePredicateClass('image_id', options.predicate, options.reverse)"
colspan="{{ imageTracks.length + 1 }}"
style="min-width: 120px;">
style="width: 140px;">
<a ng-click="orderBy('image_id')">Image</a>
</td>
<td class="hidden-xs image-track" ng-repeat="it in imageTracks" bindonce></td>
<td class="options-col"></td>
<td class="options-col"></td>
<td class="options-col"></td>
<td class="options-col hidden-xs hidden-sm"></td>
</thead>
<tr class="co-checkable-row"
@ -115,7 +116,7 @@
ng-class="checkedTags.isChecked(tag, checkedTags.checked) ? 'checked' : ''"
bindonce>
<td><span class="cor-checkable-item" controller="checkedTags" item="tag"></span></td>
<td><span class="tag-span"><i class="fa fa-tag"></i><span bo-text="tag.name"></span></span></td>
<td class="co-flowing-col"><span class="tag-span"><i class="fa fa-tag"></i><span bo-text="tag.name"></span></span></td>
<td class="hidden-xs">
<span am-time-ago="tag.last_modified" bo-if="tag.last_modified"></span>
<span bo-if="!tag.last_modified">Unknown</span>
@ -193,7 +194,7 @@
</span>
</td>
<td class="hidden-xs" bo-text="tag.size | bytes"></td>
<td class="hidden-xs image-id-col">
<td class="hidden-xs hidden-sm image-id-col">
<span class="image-link" repository="repository" image-id="tag.image_id"></span>
</td>
<td class="hidden-xs image-track" ng-repeat="it in imageTracks" bindonce>
@ -241,6 +242,7 @@
</span>
</span>
</td>
<td class="options-col hidden-xs hidden-sm"><!-- Whitespace col --></td>
</tr>
</table>