CSS responsive changes

PSMRI · Jul 23, 2024 · 32cec5a · 32cec5a
1 parent 4fd461f
commit 32cec5a
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 31 deletions.
diff --git a/Common-UI b/Common-UI
diff --git a/src/app/app-modules/nurse-doctor/anc/anc-details/anc-details.component.css b/src/app/app-modules/nurse-doctor/anc/anc-details/anc-details.component.css
@@ -16,4 +16,11 @@
 
 .mat-form-field {
   line-height: unset;
+}
+
+.mat-mdc-form-field {
+ width: 300px !important;
+}
+.input-full-width[_ngcontent-ng-c1990878134] {
+  width: 300px
 }
diff --git a/src/app/app-modules/nurse-doctor/anc/anc-details/anc-details.component.html b/src/app/app-modules/nurse-doctor/anc/anc-details/anc-details.component.html
@@ -1,5 +1,5 @@
 <div [formGroup]="patientANCDetailsForm" class="row m-t-20">
-  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 box">
+  <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 box">
     <label class="control-label" for="pregnancyStatus"
       >{{ current_language_set?.ancData?.ancDataDetails?.primiGravida }}*</label
     >
@@ -18,7 +18,10 @@
     </mat-radio-group>
   </div>
 
-  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 box">
+  <div
+    class="col-xs-12 col-sm-6 col-md-6 col-lg-4 box"
+    style="margin-top: 10px"
+  >
     <mat-form-field class="fieldAlignment fontStyle">
       <mat-label class="mat-label-text" class="fontStyle">{{
         current_language_set?.ancData?.ancDataDetails?.lastMenstrualPeriod
@@ -43,7 +46,10 @@
     </mat-form-field>
   </div>
 
-  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 box">
+  <div
+    class="col-xs-12 col-sm-6 col-md-6 col-lg-4 box"
+    style="margin-top: 10px"
+  >
     <mat-form-field class="input-full-width">
       <mat-label class="mat-label-text">{{
         current_language_set?.ancData?.ancDataDetails?.currentGestationalAge
@@ -60,7 +66,7 @@
   </div>
 
   <div
-    class="col-xs-12 col-sm-6 col-md-4 col-lg-4 box"
+    class="col-xs-12 col-sm-6 col-md-6 col-lg-4 box"
     style="margin-top: 10px"
   >
     <mat-form-field class="fieldAlignment fontStyle" style="width: 270px">
@@ -85,7 +91,7 @@
   </div>
 
   <div
-    class="col-xs-12 col-sm-6 col-md-4 col-lg-4 box"
+    class="col-xs-12 col-sm-6 col-md-6 col-lg-4 box"
     style="margin-top: 10px"
   >
     <mat-form-field class="input-full-width">
@@ -106,7 +112,7 @@
   </div>
 
   <div
-    class="col-xs-12 col-sm-6 col-md-4 col-lg-4 box"
+    class="col-xs-12 col-sm-6 col-md-6 col-lg-4 box"
     style="margin-top: 10px"
   >
     <mat-form-field class="input-full-width">

diff --git a/...history/comorbidity-concurrent-conditions/comorbidity-concurrent-conditions.component.css b/...history/comorbidity-concurrent-conditions/comorbidity-concurrent-conditions.component.css
@@ -30,4 +30,7 @@ mat-form-field  >>>
 }
 mat-form-field >>> .mat-mdc-text-field-wrapper {
     height:unset !important;
+}
+.mat-mdc-form-field-infix{
+    width: 200px;
 }
diff --git a/...istory/comorbidity-concurrent-conditions/comorbidity-concurrent-conditions.component.html b/...istory/comorbidity-concurrent-conditions/comorbidity-concurrent-conditions.component.html
@@ -29,8 +29,8 @@
       [ngClass]="{ odd: !isOdd }"
     >
       <ng-container [formGroupName]="i">
-        <div class="col-3 box">
-          <mat-form-field>
+        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 box box">
+          <mat-form-field class="input-full-width">
             <mat-label class="mat-label-text">{{
               currentLanguageSet?.historyData?.ancHistory
                 ?.combordityANC_OPD_NCD_PNC?.comorbidConditions
@@ -81,7 +81,7 @@
           </mat-form-field>
         </div>
 
-        <div class="col-3 box">
+        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 box">
           <mat-form-field class="input-full-width">
             <mat-label class="mat-label-text">{{
               currentLanguageSet?.DurationData?.duration
@@ -99,8 +99,8 @@
           </mat-form-field>
         </div>
 
-        <div class="col-3 box">
-          <mat-form-field>
+        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 box">
+          <mat-form-field class="input-full-width">
             <mat-label class="mat-label-text">{{
               currentLanguageSet?.DurationData?.durationUnit
             }}</mat-label>
@@ -118,7 +118,9 @@
           </mat-form-field>
         </div>
 
-        <div class="col-3 box action-btn-container" style="text-align: end">
+        <div
+          class="col-xs-12 col-sm-6 col-md-2 col-lg-3 box action-btn-container"
+        >
           <button
             mat-mini-fab
             color="warn"

diff --git a/...rse-doctor/history/general-opd-history/menstrual-history/menstrual-history.component.html b/...rse-doctor/history/general-opd-history/menstrual-history/menstrual-history.component.html
@@ -16,7 +16,7 @@
   </button>
 </div>
 <div class="row m-t-10" [formGroup]="menstrualHistoryForm">
-  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 box">
+  <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 box">
     <mat-form-field class="mat_form_field_width">
       <mat-label class="mat-label-text">{{
         currentLanguageSet?.historyData?.ancHistory?.menstrualHistoryANC
@@ -124,7 +124,7 @@
       </mat-form-field>
     </div>
   </ng-template>
-  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 box">
+  <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 box">
     <mat-form-field class="fieldAlignment fontStyle">
       <mat-label class="mat-label-text" class="fontStyle"
         >{{

diff --git a/...nurse-doctor/history/general-opd-history/personal-history/personal-history.component.html b/...nurse-doctor/history/general-opd-history/personal-history/personal-history.component.html
@@ -65,13 +65,13 @@
     </div>
   </div>
   <div class="row m-t-10">
-    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 box">
+    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 box">
       <label class="control-label" for="dietaryType">{{
         currentLanguageSet?.historyData?.ancHistory
           ?.personalHistoryANC_OPD_NCD_PNC?.dietaryType
       }}</label>
       <div class="clearfix"></div>
-      <mat-radio-group formControlName="dietaryType" style="margin-left: -6px">
+      <mat-radio-group formControlName="dietaryType" style="margin-left: -5px">
         <mat-radio-button color="primary" value="Vegetarian">{{
           currentLanguageSet?.historyData?.ancHistory
             ?.personalHistoryANC_OPD_NCD_PNC?.vegetarian

diff --git a/src/app/app-modules/service-point/service-point.component.css b/src/app/app-modules/service-point/service-point.component.css
@@ -1,25 +1,19 @@
 .radio-btn {
   margin-left: 8px;
 }
-
+ 
 .align-Field {
   margin-top: -10px;
 }
-
+ 
 .container {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-
-.matCardService {
-  width: 500px;
-  margin-left: 10px;
-  margin-right: 10px;
-  border-radius: 5px;
-  align-items: center;
-}
-
+
+
+
 .mat-option {
   white-space: nowrap;
   overflow: hidden;
@@ -34,9 +28,90 @@
   cursor: pointer;
   outline: none;
 }
-
+ 
 mat-card-actions {
   display: block;
   float: right;
 }
-
+@media (min-width: 900px) {
+  /* CSS rules here */
+
+  .matCardService {
+    width: 300px;
+    margin-left: 10px;
+    margin-right: 10px;
+    border-radius: 5px;
+    align-items: center;
+}
+}
+
+@media (min-width: 320px) {
+  /* CSS rules here */
+  .matCardService {
+    width: 270px ;
+    margin-left: 10px;
+    margin-right: 10px;
+    border-radius: 5px;
+    align-items: center;
+
+}
+}
+
+/* Extra small devices (portrait phones, less than 576px) */
+@media (max-width: 575.98px) {
+  /* CSS rules here */
+  .matCardService {
+    width: 300px;
+    margin-left: 10px;
+    margin-right: 10px;
+    border-radius: 5px;
+    align-items: center;
+  }
+}
+
+/* Small devices (landscape phones, 576px and up) */
+@media (min-width: 576px) {
+  /* CSS rules here */
+  .matCardService {
+    width: 300px ;
+    margin-left: 10px;
+    margin-right: 10px;
+    border-radius: 5px;
+    align-items: center;
+}
+}
+/* Medium devices (tablets, 768px and up) */
+@media (min-width: 768px) {
+  /* CSS rules here */
+  .matCardService {
+    width: 500px ;
+    margin-left: 10px;
+    margin-right: 10px;
+    border-radius: 5px;
+    align-items: center;
+}
+}
+/* Large devices (desktops, 992px and up) */
+@media (min-width: 992px) {
+  /* CSS rules here */
+  .matCardService {
+    width: 500px ;
+    margin-left: 10px;
+    margin-right: 10px;
+    border-radius: 5px;
+    align-items: center;
+}
+}
+
+/* Extra large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) {
+  /* CSS rules here */
+  .matCardService {
+    width: 500px ;
+    margin-left: 10px;
+    margin-right: 10px;
+    border-radius: 5px;
+    align-items: center;
+}
+}
+
diff --git a/src/app/app-modules/service-point/service-point.component.html b/src/app/app-modules/service-point/service-point.component.html
@@ -3,7 +3,7 @@
 <div class="container" style="margin-top: 5%; margin-bottom: 5%">
   <section>
     <div class="col-md-3 col-sm-3 col-3"></div>
-    <div class="col-md-6 col-sm-6 col-6">
+    <div class="col-xs-12 col-md-6 col-sm-6">
       <mat-card class="matCardService">
         <mat-card-header>
           <img
+1 −1		srcs/registrar/generate-abha-component/generate-abha-component.component.html
+2 −1		srcs/registrar/generate-mobile-otp-generation/generate-mobile-otp-generation.component.html
+26 −23		srcs/registrar/health-id-display-modal/health-id-display-modal.component.html
+102 −24		srcs/registrar/health-id-display-modal/health-id-display-modal.component.ts
+2 −2		srcs/registrar/health-id-otp-generation/health-id-otp-generation.component.html
+3 −3		srcs/registrar/health-id-validatepopup/health-id-validatepopup.component.html
+1 −1		srcs/registrar/registration/abha-information/abha-information.component.ts
+5 −15		srcs/registrar/registration/location-information/location-information.component.html
+6 −6		srcs/registrar/registration/other-information/other-information.component.html
+5 −1		srcs/registrar/registration/other-information/other-information.component.ts
+7 −0		srcs/registrar/registration/personal-information/personal-information.component.css
+9 −17		srcs/registrar/registration/personal-information/personal-information.component.html
+39 −1		srcs/registrar/registration/personal-information/personal-information.component.ts
+16 −2		srcs/registrar/registration/registration.component.ts
+0 −1		srcs/registrar/search-dialog/search-dialog.component.html
+34 −0		srcs/registrar/search-dialog/search-dialog.component.ts
+102 −51		srcs/registrar/search/search.component.html
+91 −48		srcs/registrar/search/search.component.ts
+1 −1		srcs/registrar/set-password-for-abha/set-password-for-abha.component.css