Merge pull request #143 from mozilla/truncate-long-container-names-141

fix #141: container-name class truncate long names
This commit is contained in:
luke crouch 2017-02-07 13:35:41 -06:00 committed by GitHub
commit ca31f396ed
3 changed files with 11 additions and 4 deletions

View file

@ -162,6 +162,13 @@ table.unstriped tbody tr {
color: #0a0a0a;
}
.container-name {
max-inline-size: 7em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.edit-container-panel [type="radio"] {
display: inline;
margin-inline-start: -17px;

View file

@ -234,7 +234,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
data-identity-color="${identity.color}">
</div>
</td>
<td class="open-newtab">${identity.name}</td>
<td class="open-newtab container-name">${identity.name}</td>
<td class="show-tabs"><img src="/img/container-arrow.svg" class="show-tabs ${arrowClass}" /></td>`;
tr.addEventListener("click", e => {
@ -397,7 +397,7 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
data-identity-color="${identity.color}">
</div>
</td>
<td>${identity.name}</td>
<td class="container-name">${identity.name}</td>
<td class="edit-container">
<img
title="Edit ${identity.name} container"

View file

@ -68,7 +68,7 @@
<div class="small-10 columns">
<div class="row container-info-panel-header">
<span class="usercontext-icon" id="container-info-icon"></span>
<h3 id="container-info-name" class="panel-header-text"></h3>
<h3 id="container-info-name" class="panel-header-text container-name"></h3>
</div>
<div class="row container-info-panel-hide container-info-has-tabs clickable" id="container-info-hideorshow">
<img id="container-info-hideorshow-icon" alt="Hide Container icon" src="/img/container-hide.svg" class="icon container-info-panel-hideorshow-icon"/><span id="container-info-hideorshow-label">Hide this container</span><br/>
@ -144,7 +144,7 @@
<div class="small-12 columns">
<div class="row container-info-panel-header">
<span class="usercontext-icon" id="delete-container-icon"></span>
<h3 id="delete-container-name" class="panel-header-text"></h3>
<h3 id="delete-container-name" class="panel-header-text container-name"></h3>
</div>
<div class="row delete-container-confirm">
<h4 class="delete-container-confirm-title">Remove This Container</h4>