Skip to content

Commit d896a29

Browse files
Vishwas1Vishwas1
committed
updated design
1 parent 037dee3 commit d896a29

File tree

1 file changed

+35
-31
lines changed

1 file changed

+35
-31
lines changed

‎src/views/playground/SessionsDetails.vue

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@
44
padding: 0px;
55
}
66
7-
7+
img {
8+
border-radius: 10px;
9+
border: 2px solid lightgrey
10+
}
811
912
.goschema {
1013
color: #339af0;
@@ -156,6 +159,13 @@ h3 {
156159
157160
/*1rem = 16px*/
158161
}
162+
163+
.zoomin {
164+
text-align: right;
165+
font-size: medium;
166+
color: grey;
167+
cursor: pointer;
168+
}
159169
</style>
160170
<template>
161171
<div :class="isContainerShift ? 'homeShift' : 'home'">
@@ -212,7 +222,7 @@ h3 {
212222
<div class="card-header" style="padding: 10px">
213223
<h4><i class="fa fa-hourglass-end" aria-hidden="true"></i> Timelines</h4>
214224
</div>
215-
<div class="card-body">
225+
<div class="p-2">
216226
<div class="row">
217227
<div class="col-md-12">
218228
<ul class="timeline">
@@ -222,17 +232,17 @@ h3 {
222232
formatDate(session.createdAt) : "-"
223233
}}</a>
224234
</li>
225-
<li v-if="selfiDataFound">
235+
<li v-if="selfiDataFound && session.selfiDetails.createdAt">
226236
<a target="_blank"><strong>Selfie uploaded</strong></a>
227237
<a href="#" class="float-right greyFont">{{ session ?
228238
formatDate(session.selfiDetails.createdAt) : "-" }}</a>
229239
</li>
230-
<li v-if="idDocDataFound">
240+
<li v-if="idDocDataFound && session.ocriddocsDetails.createdAt">
231241
<a target="_blank"><strong>ID Document uploaded</strong></a>
232242
<a href="#" class="float-right greyFont">{{ session ?
233243
formatDate(session.ocriddocsDetails.createdAt) : "-" }}</a>
234244
</li>
235-
<li v-if="userConsentDataFound">
245+
<li v-if="userConsentDataFound && session.userConsentDetails.createdAt">
236246
<a target="_blank"><strong>User Consent provided</strong></a>
237247
<a href="#" class="float-right greyFont">{{ session ?
238248
formatDate(session.userConsentDetails.createdAt) : "-"
@@ -252,12 +262,12 @@ h3 {
252262
</div>
253263

254264
<!-- Personal Information -->
255-
<div class="card dataCard float-" style="max-height: 439px; overflow-y: scroll"
265+
<div class="card dataCard float-" style="max-height: 439px; overflow-y: scroll; max-width: 400px;"
256266
v-if="userPersonalDataFromUserConsent && Object.keys(userPersonalDataFromUserConsent).length > 0">
257267
<div class="card-header" style="padding: 10px">
258268
<h4> <i class="fa fa-id-badge" aria-hidden="true"></i> Personal Information</h4>
259269
</div>
260-
<div class="card-body">
270+
<div class="p-2">
261271
<table class="table">
262272
<tbody>
263273
<tr v-for="eachkey in Object.keys(userPersonalDataFromUserConsent)"
@@ -275,12 +285,12 @@ h3 {
275285
</div>
276286
</div>
277287

278-
<div class="card dataCard float-" style="max-height: 439px; overflow-y: scroll"
288+
<div class="card dataCard float-" style="max-height: 439px; overflow-y: scroll; max-width: 400px;"
279289
v-if="userPersonalDataGovIdFromUserConsent && Object.keys(userPersonalDataGovIdFromUserConsent).length > 0">
280290
<div class="card-header" style="padding: 10px">
281291
<h4> <i class="fa fa-id-badge" aria-hidden="true"></i> Personal Information</h4>
282292
</div>
283-
<div class="card-body">
293+
<div class="p-2">
284294
<table class="table">
285295
<tbody>
286296
<tr v-for="eachkey in Object.keys(userPersonalDataGovIdFromUserConsent)"
@@ -303,7 +313,7 @@ h3 {
303313
<div class="card-header" style="padding: 10px">
304314
<h4><i class="fa fa-laptop" aria-hidden="true"></i> Device Information</h4>
305315
</div>
306-
<div class="card-body">
316+
<div class="p-2">
307317
<table class="table">
308318
<tbody>
309319
<tr>
@@ -344,9 +354,9 @@ h3 {
344354
<div class="card dataCard float-" :style="{ 'border': getStatusColor }"
345355
v-if="session.selfiDetails && Object.keys(session.selfiDetails).length > 0 && session.ocriddocsDetails.tokenFaceImage">
346356
<div class="card-header" style="padding: 10px">
347-
<h4><i class="fa fa-smile" aria-hidden="true"></i> Face Verification</h4>
357+
<h4><i class="fa fa-smile" aria-hidden="true"></i> Face Authentication</h4>
348358
</div>
349-
<div class="card-body">
359+
<div class="p-2">
350360
<div class="row">
351361
<div class="col-md-5 centered-container" style="">
352362
<span class=""><img style="height:100px;"
@@ -358,7 +368,7 @@ h3 {
358368
aria-hidden="true"></i></span>
359369
</div>
360370
<div class="col-md-2 centered-container" style="" v-else>
361-
<span class="" style="font-size: 50px; color: red;"><i class="fa fa-times-circle"
371+
<span class="" style="font-size: 50px; color: indianred;"><i class="fa fa-times-circle"
362372
aria-hidden="true"></i></span>
363373
</div>
364374
<!-- <div class="col-md-2 centered-container" style="" v-else>
@@ -389,11 +399,11 @@ h3 {
389399

390400
<!-- Liveliness Check -->
391401
<div class="card dataCard float-" :style="{ 'border': passiveLivelinessData.borderColor }"
392-
v-if="session.selfiDetails && Object.keys(session.selfiDetails).length > 0">
402+
v-if="session.selfiDetails && session.selfiDetails.createdAt && Object.keys(session.selfiDetails).length > 0">
393403
<div class="card-header" style="padding: 10px">
394404
<h4><i class="fa fa-heartbeat" aria-hidden="true"></i> Liveliness Check</h4>
395405
</div>
396-
<div class="card-body">
406+
<div class="p-2">
397407
<div class="row">
398408
<div class="col-md-12 centered-container" style="">
399409
<span class=""><img style="height:200px; width: 200px;"
@@ -420,7 +430,7 @@ h3 {
420430
<div class="card-header" style="padding: 10px">
421431
<h4><i class="fa fa-map-marker" aria-hidden="true"></i> Location Information </h4>
422432
</div>
423-
<div class="card-body">
433+
<div class="p-2">
424434
<table class="table">
425435
<tbody>
426436
<tr>
@@ -448,8 +458,8 @@ h3 {
448458
<div class="card-header" style="padding: 10px">
449459
<h4><i class="fa fa-file" aria-hidden="true"></i> Images / Documents</h4>
450460
</div>
451-
<div class="card-body" v-if="selfiDataFound || idDocDataFound">
452-
<div class="card-body"
461+
<div class="p-2" v-if="selfiDataFound || idDocDataFound">
462+
<div class="p-2"
453463
style="margin-top: 0%; border: 1px solid rgb(228, 228, 228); border-radius: 10px;"
454464
v-if="selfiDataFound">
455465
<div class="row">
@@ -459,14 +469,13 @@ h3 {
459469
<div class="col-md-7">
460470
<span style="font-size: small;">Selfie</span>
461471
</div>
462-
<div class="col-md-2" style="text-align: right; font-size: medium; cursor: pointer;"
463-
title="Zoom" @click="zoomDocument('Selfie')">
472+
<div class="col-md-2 zoomin" title="Zoom" @click="zoomDocument('Selfie')">
464473
<i class="fa fa-search-plus" aria-hidden="true"></i>
465474
</div>
466475
</div>
467476
</div>
468477

469-
<div class="card-body"
478+
<div class="p-2"
470479
style="margin-top: 2%; border: 1px solid rgb(228, 228, 228); border-radius: 10px;"
471480
v-if="idDocDataFound">
472481
<div class="row">
@@ -476,16 +485,12 @@ h3 {
476485
<div class="col-md-7">
477486
<span style="font-size: medium;">Document Front</span>
478487
</div>
479-
<div class="col-md-2" style="text-align: right; font-size: medium; cursor: pointer;"
480-
title="Zoom" @click="zoomDocument('Document Front')">
488+
<div class="col-md-2 zoomin" title="Zoom" @click="zoomDocument('Document Front')">
481489
<i class="fa fa-search-plus" aria-hidden="true"></i>
482490
</div>
483491
</div>
484492
</div>
485-
486-
487-
488-
<div class="card-body mt-2" style="border: 1px solid rgb(228, 228, 228); border-radius: 10px;"
493+
<div class="p-2 mt-2" style="border: 1px solid rgb(228, 228, 228); border-radius: 10px;"
489494
v-if="session.ocriddocsDetails.tokenBackDocumentImage">
490495
<div class="row">
491496
<div class="col-md-3">
@@ -494,8 +499,7 @@ h3 {
494499
<div class="col-md-7">
495500
<span style="font-size: medium;">Document Back</span>
496501
</div>
497-
<div class="col-md-2" style="text-align: right; font-size: medium; cursor: pointer;"
498-
title="Zoom" @click="zoomDocument('Document Back')">
502+
<div class="col-md-2 zoomin" title="Zoom" @click="zoomDocument('Document Back')">
499503
<i class="fa fa-search-plus" aria-hidden="true"></i>
500504
</div>
501505
</div>
@@ -638,14 +642,14 @@ export default {
638642
return {
639643
success: status,
640644
result: ServiceLivenessResultEnum[this.session.selfiDetails.serviceLivenessResult],
641-
borderColor: status ? '1px solid rgb(81, 137, 81)' : '1px solid red'
645+
borderColor: status ? '1px solid rgb(81, 137, 81)' : '1px solid indianred'
642646
}
643647
},
644648
getStatusColor() {
645649
if (this.isFacialAuthenticationSuccess.success) {
646650
return '1px solid rgb(81, 137, 81)'
647651
} else {
648-
return '1px solid red'
652+
return '1px solid indianred'
649653
}
650654
},
651655
isContainerShift() {

0 commit comments

Comments
 (0)