Merge pull request #2570 from steinwinde/WEB-206

fix: fix rendering of server dropdown on login page

Author: gkbishnoi07

src/app/login/login.component.html

@@ -40,9 +40,9 @@ <h1 class="mat-display-1 cover-title">{{ 'APP_NAME' | translate }}</h1>
 
   <div class="layout-column flex-gt-sm-30 login-container">
     <!-- Language Selector to the extreme right -->
-    <div class="layout-row-reverse flex-auto">
-      <mifosx-language-selector class="p-r-10 p-t-10"></mifosx-language-selector>
-      <mifosx-theme-toggle class="p-r-10 p-t-10"></mifosx-theme-toggle>
+    <div class="layout-row-reverse">
+      <mifosx-language-selector class="p-t-10 p-r-10 width-40"></mifosx-language-selector>
+      <mifosx-theme-toggle class="p-t-10"></mifosx-theme-toggle>
       <mifosx-server-selector
         class="p-t-10"
         *ngIf="!environment.production && environment.allowServerSwitch"

src/app/login/login.component.scss

@@ -1,6 +1,6 @@
 mifosx-server-selector {
   padding-left: 5px;
-  width: 300px;
+  width: 40%;
 }
 
 .cover {
@@ -23,6 +23,10 @@ mifosx-server-selector {
     position: absolute;
   }
 
+  .width-40 {
+    width: 40%;
+  }
+
   .cover-content {
     display: block;
     max-width: 80%;
@@ -94,6 +98,10 @@ mifosx-server-selector {
   padding-top: 0;
 }
 
+.p-r-10 {
+  padding-right: 10px;
+}
+
 ::ng-deep .login-container mifosx-footer .divider {
   margin: 0 !important;
   width: 14rem !important;

src/app/shared/server-selector/server-selector.component.html

@@ -1,13 +1,16 @@
 <mat-form-field id="server-selector" *ngIf="existMoreThanOneServer">
   <mat-label>{{ 'labels.inputs.Server' | translate }}</mat-label>
-  <mat-select [formControl]="serverSelector" (selectionChange)="setServer()" panelClass="server-panel">
+  <mat-select
+    [formControl]="serverSelector"
+    (selectionChange)="setServer()"
+    panelClass="server-panel"
+    panelWidth="null"
+  >
     <div class="sticky">
       <form [formGroup]="form" (ngSubmit)="addNewServer()">
         <div class="actions">
           <mat-form-field class="ml align-start">
-            <span matPrefix
-              ><mat-icon>{{ 'labels.inputs.language' | translate }}</mat-icon></span
-            >
+            <span matPrefix><mat-icon>language</mat-icon></span>
             <mat-label>{{ 'labels.placeholders.Add new server' | translate }}</mat-label>
             <input matInput type="text" autocomplete="off" formControlName="url" />
             <mat-error *ngIf="form.controls.url.hasError('required')">

src/app/shared/server-selector/server-selector.component.scss

@@ -4,20 +4,10 @@
   justify-content: space-evenly;
 }
 
-.rg {
-  float: right;
-}
-
 .ml {
   margin-left: 10px;
 }
 
-/* .pba {
-    width: 80%;
-    left: 10%;
-    margin: 12px;
-} */
-
 .sticky {
   position: sticky;
   z-index: 1; // appear above mat-option