web/satellite: api key and proj member name's length visibility extended

Change-Id: If42dc48849f6414f4224d57ffa7267431426b457
This commit is contained in:
VitaliiShpital 2020-03-26 18:44:57 +02:00 committed by Vitalii Shpital
parent 4b01a8dd18
commit dbd036de8b
5 changed files with 20 additions and 16 deletions

View File

@ -14,7 +14,7 @@
<p class="name">{{ itemData.formattedName() }}</p>
</div>
</div>
<div class="apikey-item-container__common-info">
<div class="apikey-item-container__common-info date-item-container">
<p class="date">{{ itemData.getDate() }}</p>
</div>
</div>
@ -58,7 +58,7 @@ export default class ApiKeysItem extends Vue {
display: flex;
align-items: center;
justify-content: flex-start;
width: 40%;
width: 60%;
.checkbox-container {
margin-left: 28px;
@ -130,4 +130,8 @@ export default class ApiKeysItem extends Vue {
color: #fff;
}
}
.date-item-container {
width: 40%;
}
</style>

View File

@ -85,17 +85,9 @@ export default class SortApiKeysHeader extends Vue {
background-color: rgba(255, 255, 255, 0.3);
margin-top: 31px;
&__date-item {
width: 60%;
&__title {
margin: 0;
}
}
&__name-item,
&__date-item {
width: 40%;
width: 60%;
display: flex;
align-items: center;
margin: 0;
@ -112,5 +104,13 @@ export default class SortApiKeysHeader extends Vue {
margin-left: 0;
}
}
&__date-item {
width: 40%;
&__title {
margin: 0;
}
}
}
</style>

View File

@ -93,11 +93,11 @@ export class ApiKey {
public formattedName(): string {
const name = this.name;
if (name.length < 12) {
if (name.length < 20) {
return name;
}
return name.slice(0, 12) + '...';
return name.slice(0, 20) + '...';
}
public getDate(): string {

View File

@ -114,8 +114,8 @@ export class ProjectMember {
public formattedFullName(): string {
let fullName: string = this.user.getFullName();
if (fullName.length > 16) {
fullName = fullName.slice(0, 13) + '...';
if (fullName.length > 15) {
fullName = fullName.slice(0, 15) + '...';
}
return fullName;

View File

@ -16,7 +16,7 @@ exports[`ApiKeysItem.vue renders correctly 1`] = `
<p class="name"></p>
</div>
</div>
<div class="apikey-item-container__common-info">
<div class="apikey-item-container__common-info date-item-container">
<p class="date"></p>
</div>
</div>