Skip to content

Commit

Permalink
Merge pull request #567 from Madhuravas/develop
Browse files Browse the repository at this point in the history 
MOSIP-28915 fixed mobile view alignment in reg centers page
  • Loading branch information
@aranaravi
aranaravi authored Nov 2, 2023
2 parents 5b805a0 + 97cdc49 commit 00f3aa2
Show file tree
Hide file tree
Showing 14 changed files with 231 additions and 61 deletions.
2 changes: 1 addition & 1 deletion resident-ui/src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Component, HostListener } from '@angular/core';
import { AppConfigService } from './app-config.service';
import { AutoLogoutService } from 'src/app/core/services/auto-logout.service';
import { Subscription } from 'rxjs';
import { Event as NavigationEvent, Router, NavigationStart, NavigationEnd } from '@angular/router';
import { Event as NavigationEvent, Router, NavigationStart } from '@angular/router';
import { filter } from 'rxjs/operators';
import { LogoutService } from 'src/app/core/services/logout.service';
import { AuditService } from 'src/app/core/services/audit.service';
Expand Down
154 changes: 130 additions & 24 deletions resident-ui/src/app/feature/booking/center-selection/center-selection.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@
}

.details-card {
width: 100%;
width: 95%;
height: 770px;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 0px 5px #00000014;
border-radius: 10px;
opacity: 1;
margin: 1.5rem 1.5rem 1.5rem 3.4rem;
margin: 1.5rem;
padding: .3rem 1rem .3rem 1rem;
}

Expand Down Expand Up @@ -160,7 +160,7 @@ input[type="radio"] {
font-family: 'Roboto', 'Helvetica Neue', sans-serif;
opacity: 100%;
font-size: 14px;
border: 2px solid #707070;
border: 2px solid #909090;
border-radius: 5px;
padding: 0 10px 0 10px;
height: 40px;
Expand Down Expand Up @@ -204,13 +204,26 @@ input[type="radio"] {

.save-icon{
height: 40px;
margin-left: -5px;
}

.save-icon-btn{
width: 36px;
height: 40px;
background-color: #03A64A;
border: none;
border-radius: 5px;

}

.center_selection-form-container {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 100%;
height: 10%;
min-height: 10%;
row-gap: 10px;
column-gap: 5px;
}

.center-search-sub-card{
Expand Down Expand Up @@ -254,8 +267,9 @@ input[type="radio"] {
opacity: 100%;
background-color: white;
appearance: none;
width: 100%;
width: 100% !important;
font-size: 14px;
padding-top: 4.5px;
}

.mat-option:hover {
Expand All @@ -268,7 +282,7 @@ input[type="radio"] {
box-shadow: 4px;
border-radius: 4px !important;
height: 40px;
width: 40%;
width: 200px !important;
outline: none;
}

Expand All @@ -293,27 +307,27 @@ input[type="radio"] {
display: inline-flex;
padding: 7px;
margin-left: 5px;
border: 2px solid #707070;
border: 2px solid #909090;
}


.search-form {
display: flex;
align-items: center;
justify-content: center;
row-gap: 10px;
column-gap: 5px;
}

.search-form-card{
display: flex;
align-items: center;
margin-top: 2px;
}

.warning-message{
margin: 0px;
margin: 5px 0px;
color: red;
font-size: 10px;
margin-top: -8px;
}
::ng-deep .mat-select-panel {
margin-top: 38px !important;
Expand Down Expand Up @@ -362,8 +376,112 @@ input[type="radio"] {
font-weight: 600;
}

@media (max-width: 500px) {
.manual-loc-search-card{
display: flex;
align-items: center;
}

.manual-loc-search-btns{
width: 100%;
display: flex;
align-items: center;
}

.show-map-btn{
min-height: 40px;
width: 59%;
border-radius: 5px;
border: 2px solid #909090;
color: #03A64A;
font-weight: 600;
background-color: transparent;
display: none;
}

.back-btn {
min-width: 90px;
max-width: 120px;
height: 50px;
border: 1px solid #909090;
border-radius: 5px;
background-color: transparent;
color: #909090;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
}

@media screen and ((min-width:601px) and (max-width: 780px)){
.map{
width: 100%;
}
.details-card{
height: 1100px;
}
.centers-list{
height: 70%;
}
.container{
flex-direction: column;
}
.center_selection-nearby-btn{
min-width: 51%;
}
}

@media screen and (max-width: 600px){
.center_selection-nearby-btn{
min-width: 100%;
}
.center_selection-form-container{
flex-direction: column;
row-gap: 4px;
}
.search-form{
flex-direction: column;
align-items: flex-start;
}
.manual-loc-search-card{
width: 100%;

}
.search-form-card{
width: 100%;
}
.search-form{
width: 100%;
}
.mat-select{
width: 40%;
}
.search-card {
width: 58%;
}
.select-card {
width: 40% !important;
}
.search-btn {
width: 19%;
}
.save-icon-btn{
width: 19%;
}
.show-map-btn{
display: inline-block;
}
.details-card{
height: 900px;
padding: .3rem .5rem .3rem .5rem;
}
.map{
width: 100%;
flex-direction: column;
}

}

@media (max-width: 500px) {
.user-back-btn,
.user-book_later-btn,
.user-continue-btn {
Expand All @@ -372,17 +490,6 @@ input[type="radio"] {
margin-right: 20px;
}

.container {
display: flex;
padding: 0px 1rem 0px 2rem;
height: 100%;
width: 100%;
}

.centers-wrapper {
width: 90%;
}

.center_selection-center_recommendation-display {
white-space: normal;
}
Expand All @@ -395,9 +502,8 @@ input[type="radio"] {
.mat-select {
display: inline-block;
height: 40px !important;
border: 1px solid black;
border: 2px solid #909090;
width: 160px;
outline: #909090 solid 1px!important;
border-radius: 5px;
color: #fff!important;
}
Expand Down
39 changes: 23 additions & 16 deletions resident-ui/src/app/feature/booking/center-selection/center-selection.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,22 +25,22 @@
<mat-icon class="my-location-icon" matTooltip="{{ 'centerSelection.helpText' | translate }}"
[inline]="true">my_location</mat-icon>&nbsp;&nbsp;
{{ 'centerSelection.action_nearBy' | translate }}
</button>&nbsp;&nbsp;&nbsp;
</button>
<span class="or-text">{{ 'centerSelection.or' | translate }}</span>
<!-- </div> -->
&nbsp;&nbsp;&nbsp;
<form class="search-form-card">
<div class="search-form">
<mat-card class="select-card">
<mat-select disableOptionCentering name="select" class="select-input" [(ngModel)]="locationType"
value="locationType" (selectionChange)="onChangeLocationType()"
placeholder="{{ 'centerSelection.text_select' | translate }}">
<mat-option class="locationType-card" *ngFor="let locationType of locationTypes"
[value]="locationType">
{{ locationType.hierarchyLevelName }}
</mat-option>
</mat-select>
</mat-card>
<div class="manual-loc-search-card">
<mat-card class="select-card">
<mat-select disableOptionCentering name="select" class="select-input" [(ngModel)]="locationType"
value="locationType" (selectionChange)="onChangeLocationType()"
placeholder="{{ 'centerSelection.text_select' | translate }}">
<mat-option class="locationType-card" *ngFor="let locationType of locationTypes"
[value]="locationType">
{{ locationType.hierarchyLevelName }}
</mat-option>
</mat-select>
</mat-card>
<mat-card class="search-card">
<input [disabled]="!locationType" mat-input #search
placeholder="{{ 'centerSelection.text_search' | translate }}" name="search" class="search-input"
Expand All @@ -49,14 +49,19 @@
<i *ngIf="locationType" style="float: right; color: grey; cursor: pointer;" matSuffix
class="material-icons" (click)="openKeyboard()">keyboard</i>
</mat-card>
&nbsp;&nbsp;
</div>
<div class="manual-loc-search-btns" >
<button [disabled]="isBlankSpace" mat-raised-button (click)="showResults()" class="search-btn">
<mat-icon>search</mat-icon>
</button>
<button *ngIf="REGISTRATION_CENTRES.length >0" mat-raised-button (click)="downloadCentersPdf()">
&nbsp;
<button *ngIf="REGISTRATION_CENTRES.length >0" mat-raised-button (click)="downloadCentersPdf()" class="save-icon-btn">
<img alt="" class="save-icon" src="./assets/icons/iconfont/download-1.svg" />
</button>
&nbsp;
<button *ngIf="REGISTRATION_CENTRES.length >0" class="show-map-btn" (click)="showAllCenters()">{{ popupMessages.centerSelection.showMapBtnLabel }}</button>
</div>
</div>
</form>
</div>
<p *ngIf="showWarningMsg" class="warning-message">{{popupMessages.centerSelection.warnMessage}}</p>
Expand All @@ -65,13 +70,13 @@
</ng-template>
<div class="container">
<h4 *ngIf="showMessage" class="show-message-text">{{showMesssageText}}</h4>
<div class="centers-details-card">
<div *ngIf="showLocationDetails" class="centers-details-card">
<div class="centers-list">
<div *ngIf="REGISTRATION_CENTRES.length >0">
<ul>
<li *ngFor="let center of REGISTRATION_CENTRES; let i = index;">
<div [ngClass]="REGISTRATION_CENTRES.length === i+1 ? 'center-card item' :'center-card'">
<div style="width: 40%;cursor:pointer;" (click)="selectedRow(center)">
<div style="width: 40%;cursor:pointer;" (click)="selectedEachMap(center)">
<div class="inline-flex" [dir]="textDir">
<img alt="" src="assets\address.png" />
<div>
Expand Down Expand Up @@ -141,6 +146,8 @@ <h4 *ngIf="showMessage" class="show-message-text">{{showMesssageText}}</h4>
</div>
</div>
<div class="map" *ngIf="showMap">
<button *ngIf="showBackBtn" mat-button-toggle id="getUinBackBtn" (click)="backBtn()" class="back-btn"><img src="./assets/images/arrow_back_black_24dp.png"
alt="" />{{ popupMessages.centerSelection.action_back }}</button>
<app-map style="width:100%; height: auto;" [mapProvider]="mapProvider"></app-map>
</div>
</div>
Expand Down
Loading

0 comments on commit 00f3aa2

Please sign in to comment.