Fix at long inventory name snapshot in title is not visible

This commit is contained in:
Mojca Lorber 2020-09-24 17:19:41 +02:00
parent d02d48f10f
commit 94fea75fda
4 changed files with 48 additions and 28 deletions

View file

@ -453,7 +453,8 @@ var MyModuleRepositories = (function() {
FULL_VIEW_MODAL.on('show.bs.modal', function() { FULL_VIEW_MODAL.on('show.bs.modal', function() {
FULL_VIEW_MODAL.find('.table-container').empty(); FULL_VIEW_MODAL.find('.table-container').empty();
FULL_VIEW_MODAL.find('.repository-name').empty(); FULL_VIEW_MODAL.find('.repository-title').empty();
FULL_VIEW_MODAL.find('.repository-version').empty();
updateFullViewRowsCount(''); updateFullViewRowsCount('');
}); });
} }
@ -518,29 +519,31 @@ var MyModuleRepositories = (function() {
function updateFullViewRowsCount(value) { function updateFullViewRowsCount(value) {
FULL_VIEW_MODAL.data('rows-count', value); FULL_VIEW_MODAL.data('rows-count', value);
FULL_VIEW_MODAL.find('.repository-name').attr('data-rows-count', value); FULL_VIEW_MODAL.find('.repository-version').attr('data-rows-count', value);
} }
function renderFullViewRepositoryName(name, snapshotDate, assignMode) { function renderFullViewRepositoryName(name, snapshotDate, assignMode) {
var title; var title;
var repositoryName = name || FULL_VIEW_MODAL.find('.repository-name').data('repository-name'); var version;
var repositoryName = name || FULL_VIEW_MODAL.find('.repository-title').data('repository-name');
if (assignMode) { if (assignMode) {
title = I18n.t('my_modules.repository.full_view.assign_modal_header', { title = I18n.t('my_modules.repository.full_view.assign_modal_header', {
repository_name: repositoryName repository_name: repositoryName
}); });
version = '';
} else if (snapshotDate) { } else if (snapshotDate) {
title = I18n.t('my_modules.repository.full_view.modal_snapshot_header', { title = repositoryName;
repository_name: repositoryName, version = I18n.t('my_modules.repository.full_view.modal_snapshot_header', {
snaphot_date: snapshotDate snaphot_date: snapshotDate
}); });
} else { } else {
title = I18n.t('my_modules.repository.full_view.modal_live_header', { title = repositoryName;
repository_name: repositoryName version = I18n.t('my_modules.repository.full_view.modal_live_header');
});
} }
FULL_VIEW_MODAL.find('.repository-name').data('repository-name', repositoryName); FULL_VIEW_MODAL.find('.repository-title').data('repository-name', repositoryName);
FULL_VIEW_MODAL.find('.repository-name').html(title); FULL_VIEW_MODAL.find('.repository-title').html(title);
FULL_VIEW_MODAL.find('.repository-version').html(version);
} }
function initRepoistoryAssignView() { function initRepoistoryAssignView() {

View file

@ -5,21 +5,9 @@
@include font-h3; @include font-h3;
line-height: 22px; line-height: 22px;
overflow: hidden; overflow: hidden;
padding-right: 55px;
position: relative; position: relative;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
&::after {
color: $color-alto;
content: '[' attr(data-rows-count) ']';
display: inline-block;
line-height: 22px;
padding-left: 5px;
position: absolute;
right: 0;
width: 55px;
}
} }
.my-module-inventories { .my-module-inventories {
@ -131,6 +119,17 @@
.assigned-repository-title { .assigned-repository-title {
@include my-module-repository-title; @include my-module-repository-title;
padding-right: 36px;
&::after {
color: $color-alto;
content: '[' attr(data-rows-count) ']';
display: inline-block;
line-height: 22px;
padding-right: 12px;
position: absolute;
right: 0;
}
} }
.action-buttons { .action-buttons {
@ -218,11 +217,28 @@
flex-grow: 1; flex-grow: 1;
max-width: calc(100% - 20px); max-width: calc(100% - 20px);
.repository-name { .repository-name-container {
display: flex;
}
.repository-title {
@include my-module-repository-title; @include my-module-repository-title;
@include font-h2; @include font-h2;
display: inline-block; }
width: 100%;
.repository-version {
@include font-h2;
flex-shrink: 0;
line-height: 22px;
padding-right: 10px;
&::after {
color: $color-alto;
content: '[' attr(data-rows-count) ']';
display: inline-block;
line-height: 22px;
padding-left: 5px;
}
} }
.breadcrumbs { .breadcrumbs {

View file

@ -11,7 +11,8 @@
<span class="my-module" title="<%= @my_module.name %>"><%= @my_module.name %></span> <span class="my-module" title="<%= @my_module.name %>"><%= @my_module.name %></span>
</div> </div>
<div class="repository-name-container"> <div class="repository-name-container">
<span class="repository-name"></span> <span class="repository-title"></span>
<span class="repository-version"></span>
</div> </div>
</div> </div>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>

View file

@ -811,8 +811,8 @@ en:
head_title: "%{project} | %{module} | Inventory %{repository}" head_title: "%{project} | %{module} | Inventory %{repository}"
export: 'Export' export: 'Export'
full_view: full_view:
modal_live_header: '%{repository_name}: Live version' modal_live_header: ': Live version'
modal_snapshot_header: '%{repository_name}: Snapshot of %{snaphot_date}' modal_snapshot_header: ': Snapshot of %{snaphot_date}'
assign_modal_header: 'Assign from %{repository_name} inventory' assign_modal_header: 'Assign from %{repository_name} inventory'
snapshots: snapshots:
simple_view: simple_view: