Merge pull request #465 from rahulramakrishnan3/login-activity

mobile view UI issue
ELEVATE-Project · Apr 2, 2024 · ec8146f · ec8146f
2 parents 559f9fe + 547a021
commit ec8146f
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 19 deletions.
diff --git a/src/app/pages/login-activity/login-activity.page.html b/src/app/pages/login-activity/login-activity.page.html
@@ -22,28 +22,30 @@
 
                     <ion-row><b>{{data.device_info.osName}} ( {{ data.device_info.browserName }})</b></ion-row>
                     <ion-row> {{"LAST_LOGIN_AT" | translate}} {{convertEpochToRealTime(data.login_time)}}</ion-row>
-                    <ion-row class="d-flex flex-align-items-center">
-                        <ion-icon name="checkmark-circle"
+                    <ion-row class="d-flex flex-align-items-center activity-row">
+                        <div class="container" *ngIf="data.status === 'ACTIVE'">
+                          <ion-icon name="checkmark-circle"
                             [ngClass]="{
                               'active-icon': sessionId === data.id && data.status === 'ACTIVE',
                               'inactive-icon': sessionId !== data.id,
                               'active-but-logout-icon': data.status === 'ACTIVE' && sessionId !== data.id
                               }">
-                        </ion-icon>
-                        <ion-label *ngIf="data.status === 'ACTIVE'">
-                          <ng-container *ngIf="sessionId === data.id">{{"YOUR_CURRENT_DEVICE" | translate}}</ng-container>
-                          <ng-container *ngIf="!(sessionId === data.id)">{{"LOGGED_IN" | translate}}</ng-container>
-                        </ion-label>
-                        <ion-label *ngIf="data.status === 'INACTIVE'">
-                          <ng-container *ngIf="sessionId === data.id">{{"YOUR_CURRENT_DEVICE" | translate}}</ng-container>
-                          <ng-container *ngIf="!(sessionId === data.id)">{{"LOGGED_OUT_AT" | translate}} {{convertEpochToRealTime(data.logout_time)}}</ng-container>
-                        </ion-label>
-                        <ion-label *ngIf="data.status === 'EXPIRED'">
-                          <ng-container> {{ "EXPIRED" | translate }} </ng-container>
-                        </ion-label>
+                            </ion-icon>
+                          <ion-label class="activity-label" *ngIf="sessionId === data.id">{{"YOUR_CURRENT_DEVICE" | translate}}</ion-label>
+                          <ion-label class="activity-label" *ngIf="!(sessionId === data.id)">{{"LOGGED_IN" | translate}}</ion-label>
+                        </div>
+                        <div class="container" *ngIf="data.status === 'INACTIVE'">
+                          <ion-icon name="checkmark-circle"></ion-icon>
+                          <ion-label class="activity-label" *ngIf="sessionId === data.id">{{"YOUR_CURRENT_DEVICE" | translate}}</ion-label>
+                          <ion-label class="activity-label" *ngIf="!(sessionId === data.id)">{{"LOGGED_OUT_AT" | translate}} {{convertEpochToRealTime(data.logout_time)}}</ion-label>
+                        </div>
+                        <div class="container" *ngIf="data.status === 'EXPIRED'">
+                          <ion-icon name="checkmark-circle"></ion-icon>
+                          <ion-label class="activity-label"> {{ "EXPIRED" | translate }}</ion-label>
+                        </div>
                     </ion-row>
                   </ion-col>
-                  <ion-col size="3" class="d-flex flex-justify-center flex-align-items-center">
+                  <ion-col [hidden]="!(data.status === 'ACTIVE')" size="3" class="d-flex flex-justify-center flex-align-items-center active-button">
                     <ng-template [ngIf]="data.status === 'ACTIVE' && data.login_time">
                       <ion-button size="small" (click)="sessionId === data.id ? logout() : logoutInactive(data.id)">
                         {{ "LOGOUT" | translate }}

diff --git a/src/app/pages/login-activity/login-activity.page.scss b/src/app/pages/login-activity/login-activity.page.scss
@@ -1,6 +1,3 @@
-.field {
-  height: 18vh;
-}
 .active-icon {
   color: green; // Change color to green for active session
 }
@@ -12,3 +9,15 @@
 .active-but-logout-icon {
   color: var(--ion-color-primary);
 }
+.active-button{
+  height: fit-content;
+}
+.activity-label{
+  padding-left: 5px;
+  width: 100%;
+}
+.container{
+  display: flex !important;
+  align-items: center !important;
+  justify-content: right !important;
+}
diff --git a/src/app/pages/login-activity/login-activity.page.ts b/src/app/pages/login-activity/login-activity.page.ts
@@ -81,7 +81,7 @@ export class LoginActivityPage implements OnInit {
   }
 
   convertEpochToRealTime(epochTime: number): string {
-    return moment.unix(epochTime).format('YYYY-MM-DD HH:mm:ss');
+    return moment.unix(epochTime).format('h:mm A [on] DD MMMM YYYY');
   }
   onPageChange(event){
     this.page = event.pageIndex + 1,