JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/satellite/src/components/apiKeys/ApiKeysItem.vue
View File

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

18
web/satellite/src/components/apiKeys/SortingHeader.vue
View File

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

4
web/satellite/src/types/apiKeys.ts
View File

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

4
web/satellite/src/types/projectMembers.ts
View File

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

2
web/satellite/tests/unit/apiKeys/__snapshots__/ApiKeysItem.spec.ts.snap
View File

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