MOSIP-29776 fixed multi language UI issues in update my data

Signed-off-by: Madhuravas <[email protected]>
mosip · Oct 12, 2023 · 21e55af · 21e55af
1 parent d90a1d0
commit 21e55af
Show file tree

Hide file tree

Showing 12 changed files with 447 additions and 299 deletions.
diff --git a/resident-ui/src/app/feature/uinservices/updatedemographic/updatedemographic.component.css b/resident-ui/src/app/feature/uinservices/updatedemographic/updatedemographic.component.css
@@ -294,11 +294,8 @@ label{
   font-size: 11px;
 }
 .warning-message-for-contact{
-  margin: 0px; 
   color: red; 
   font-size: 12px;
-  font-weight: 600;
-  margin-top: -14px;
 }
 
 ::ng-deep .mat-grid-tile .mat-figure{
@@ -398,18 +395,6 @@ label{
   color: #89730B;
   font-size: 14px;
 }
-.number-of-attems-arrow-shape{
-   position: absolute;
-   width: 10px;
-   height: 10px;
-   border: 1.5px solid #89730B;
-   top: 10px;
-   left: -5.5px;
-   transform: rotate(45deg);
-   background-color: #FFF9DB;
-   border-right: none;
-   border-top: none;
-}
 
 .low-number-of-attems-left-card{
   border: 1.5px solid #DB4F4F;
@@ -422,20 +407,61 @@ label{
   color: #DB4F4F;
   font-size: 14px;
 }
-.low-number-of-attems-arrow-shape{
+
+.number-of-attems-arrow-shape{
    position: absolute;
    width: 10px;
    height: 10px;
-   border: 1.5px solid #DB4F4F;
+   border: 1.5px solid #89730B;
    top: 10px;
    left: -5.5px;
    transform: rotate(45deg);
-   background-color: #FFEAEA;
+   background-color: #FFF9DB;
    border-right: none;
    border-top: none;
 }
 
+.low-number-of-attems-arrow-shape{
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border: 1.5px solid #DB4F4F;
+  top: 10px;
+  left: -5.5px;
+  transform: rotate(45deg);
+  background-color: #FFEAEA;
+  border-right: none;
+  border-top: none;
+}
+
+.ara-number-of-attems-arrow-shape{
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border: 1.5px solid #89730B;
+  top: 10px;
+  transform: rotate(45deg);
+  background-color: #FFF9DB;
+  border-left: none;
+  border-bottom: none;
+  margin-left: 1.36px;
+}
+
+.low-ara-number-of-attems-arrow-shape{
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border: 1.5px solid #DB4F4F;
+  top: 10px;
+  transform: rotate(45deg);
+  background-color: #FFEAEA;
+  border-left: none;
+  border-bottom: none;
+  margin-left: 1.36px;
+}
+
 .number-of-attems-main-card{
+  direction: ltr;
   display: block;
   margin-bottom: -25px;
   width: 60%;
@@ -449,6 +475,42 @@ label{
   display: none;
 }
 
+.perLang-submit-btn-card{
+  float: right;
+  margin-right: 2rem; 
+  margin-top: none;
+}
+.perLang-submit-btn-card-ara{
+  float: left;
+  margin-right: 2rem; 
+  margin-top: none;
+}
+
+.contact-update-card{
+  margin: 8px; 
+  display: flex;
+  flex-direction: row;
+  width:"100%";
+}
+
+.contact-update-sub-card{
+  display: flex; 
+  flex-direction: row;
+  width: 48%;
+  margin-bottom: 1rem;
+}
+
+.contact-update-each-sub-card{
+  width: 50%; 
+  margin-right: 12px;
+}
+
+.contact-lable{
+  height: 20px; 
+  overflow-wrap: break-word;
+  color: #000000 !important;
+}
+
 @media screen and ((min-width:950px) and (max-width:1300px)){
   .number-of-attems-main-card{
     width: 80%;
@@ -459,9 +521,6 @@ label{
   .show-preview-image-mobile{
     display: none;
   }
-  .contact-send-otp-btn{
-    margin-top: 1.4rem;
-  }
 }
 
 @media screen and ((min-width:824px) and (max-width:988px)) {
@@ -483,9 +542,6 @@ label{
   .file-Upload-card{
     width: 67%;
   }
-  .contact-send-otp-btn{
-    margin-top: 1.4rem;
-  }
   .number-of-attems-left-card{
     width: 100%;
   }
@@ -494,6 +550,17 @@ label{
   }
 }
 
+@media screen and ((min-width:550px) and (max-width:1300px)) {
+  .contact-update-card{
+    flex-direction: column;
+  }
+  .contact-update-sub-card{
+    display: flex; 
+    flex-direction: row;
+    width: 100%;
+  }
+}
+
 @media screen and (max-width:823px) {
   .main-contianer{
     padding: 0.5rem 1rem 0 1rem; 
@@ -522,27 +589,25 @@ label{
   .file-Upload-card{
     width: 100%;
   }
+
 }
 
 @media screen and ((min-width:550px) and (max-width:749px)) {
-  /* .each-tab-group-main-table{
-    width: 80%;
-  } */
   .width-of-input{
     width: 36%;
   }
   .file-Upload-card{
     width: 100%;
   }
-  .contact-send-otp-btn{
-    margin-top: 1.4rem;
+  .contact-update-card{
+    margin: 8px; 
+    display: flex;
+    flex-direction: column;
+    width:"99%";
   }
 
 }
 @media screen and (max-width:549px) {
-  /* .each-tab-group-main-table{
-    width: 90%;
-  } */
   .width-of-input{
     width: 45%;
   }
@@ -561,4 +626,15 @@ label{
   .preview-input-size{
     width: 100%;
   }
+  .contact-update-card{
+    flex-direction: column;
+  }
+  .contact-update-sub-card{
+    flex-direction: column;
+    width: 100%;
+  }
+  .contact-update-each-sub-card{
+    width: 100%; 
+    margin-right: 12px;
+  }
 }