web/satellite: api key and proj member name's length visibility extended
Change-Id: If42dc48849f6414f4224d57ffa7267431426b457
This commit is contained in:
parent
4b01a8dd18
commit
dbd036de8b
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user