src/app/profile/guest-profile/guest-profile.page.ts
OnInit
| selector | app-guest-profile |
| styleUrls | ./guest-profile.page.scss |
| templateUrl | ./guest-profile.page.html |
constructor(profileService: ProfileService, frameworkService: FrameworkService, frameworkUtilService: FrameworkUtilService, preferences: SharedPreferences, events: Events, commonUtilService: CommonUtilService, appGlobalService: AppGlobalService, telemetryGeneratorService: TelemetryGeneratorService, translate: TranslateService, headerService: AppHeaderService, toastController: ToastController, router: Router, profileHandler: ProfileHandler, segmentationTagService: SegmentationTagService, platform: Platform, onboardingConfigurationService: OnboardingConfigurationService, formAndFrameworkUtilService: FormAndFrameworkUtilService)
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Parameters :
|
| editGuestProfile | |||||||||
editGuestProfile(isChangeRoleRequest: boolean, attribute)
|
|||||||||
|
Parameters :
Returns :
void
|
| Private getCategoriesAndUpdateAttributes |
getCategoriesAndUpdateAttributes()
|
|
Returns :
void
|
| getFieldDisplayValues | |||||||||
getFieldDisplayValues(field: Array
|
|||||||||
|
Parameters :
Returns :
string
|
| getFrameworkDetails |
getFrameworkDetails()
|
|
Returns :
void
|
| getSyllabusDetails |
getSyllabusDetails()
|
|
Returns :
void
|
| handleHeaderEvents | ||||
handleHeaderEvents($event)
|
||||
|
Parameters :
Returns :
void
|
| ionViewWillEnter |
ionViewWillEnter()
|
|
Returns :
void
|
| ionViewWillLeave |
ionViewWillLeave()
|
|
Returns :
void
|
| Async ngOnInit |
ngOnInit()
|
|
Returns :
any
|
| onLoginClick |
onLoginClick()
|
|
Returns :
void
|
| Private redirectToActiveDownloads |
redirectToActiveDownloads()
|
|
Returns :
void
|
| redirectToDistrictMappingPage |
redirectToDistrictMappingPage()
|
|
Returns :
void
|
| Async refreshProfileData |
refreshProfileData(refresher: any, showLoader: boolean)
|
|
Returns :
any
|
| refreshSignInCard |
refreshSignInCard()
|
|
Returns :
void
|
| signin |
signin()
|
|
Returns :
void
|
| Public appGlobalService |
Type : AppGlobalService
|
| boards |
Type : string
|
Default value : ''
|
| categories |
Type : Array<any>
|
Default value : []
|
| Public commonUtilService |
Type : CommonUtilService
|
| Public currentUserTypeConfig |
Type : any
|
Default value : {}
|
| deviceLocation |
Type : any
|
| frameworkData |
Type : []
|
Default value : []
|
| grade |
Type : string
|
Default value : ''
|
| headerObservable |
Type : any
|
| imageUri |
Type : string
|
Default value : 'assets/imgs/ic_profile_default.png'
|
| isNetworkAvailable |
Type : boolean
|
| isUpgradePopoverShown |
Default value : false
|
| loader |
Type : any
|
| medium |
Type : string
|
Default value : ''
|
| Public platform |
Type : Platform
|
| profile |
Type : Profile
|
| ProfileType |
Default value : ProfileType
|
| selectedLanguage |
Type : string
|
| showSignInCard |
Default value : false
|
| subjects |
Type : string
|
Default value : ''
|
| Public supportedProfileAttributes |
Type : literal type
|
Default value : {}
|
| syllabus |
Type : string
|
Default value : ''
|
| Public toastController |
Type : ToastController
|
import { TranslateService } from '@ngx-translate/core';
import { Component, Inject, OnInit } from '@angular/core';
import { Platform, ToastController } from '@ionic/angular';
import { Events } from '@app/util/events';
import {
Framework,
FrameworkCategoryCodesGroup,
FrameworkDetailsRequest,
FrameworkService,
FrameworkUtilService,
GetSuggestedFrameworksRequest,
ProfileService,
ProfileType,
SharedPreferences,
Profile
} from 'sunbird-sdk';
import { Router, NavigationExtras } from '@angular/router';
import { AppGlobalService } from '@app/services/app-global-service.service';
import { CommonUtilService } from '@app/services/common-util.service';
import { TelemetryGeneratorService } from '@app/services/telemetry-generator.service';
import { AppHeaderService } from '@app/services/app-header.service';
import { PageId, Environment, InteractType, InteractSubtype } from '@app/services/telemetry-constants';
import { ProfileConstants, RouterLinks, PreferenceKey } from '@app/app/app.constant';
import { ProfileHandler } from '@app/services/profile-handler';
import { SegmentationTagService, TagPrefixConstants } from '@app/services/segmentation-tag/segmentation-tag.service';
import { FormAndFrameworkUtilService, OnboardingConfigurationService } from '@app/services';
@Component({
selector: 'app-guest-profile',
templateUrl: './guest-profile.page.html',
styleUrls: ['./guest-profile.page.scss'],
})
export class GuestProfilePage implements OnInit {
imageUri = 'assets/imgs/ic_profile_default.png';
ProfileType = ProfileType;
showSignInCard = false;
isNetworkAvailable: boolean;
boards = '';
grade = '';
medium = '';
subjects = '';
categories: Array<any> = [];
profile: Profile;
syllabus = '';
selectedLanguage: string;
loader: any;
headerObservable: any;
isUpgradePopoverShown = false;
deviceLocation: any;
public supportedProfileAttributes: { [key: string]: string } = {};
public currentUserTypeConfig: any = {};
frameworkData = [];
constructor(
@Inject('PROFILE_SERVICE') private profileService: ProfileService,
@Inject('FRAMEWORK_SERVICE') private frameworkService: FrameworkService,
@Inject('FRAMEWORK_UTIL_SERVICE') private frameworkUtilService: FrameworkUtilService,
@Inject('SHARED_PREFERENCES') private preferences: SharedPreferences,
private events: Events,
public commonUtilService: CommonUtilService,
public appGlobalService: AppGlobalService,
private telemetryGeneratorService: TelemetryGeneratorService,
private translate: TranslateService,
private headerService: AppHeaderService,
public toastController: ToastController,
private router: Router,
private profileHandler: ProfileHandler,
private segmentationTagService: SegmentationTagService,
public platform: Platform,
private onboardingConfigurationService: OnboardingConfigurationService,
private formAndFrameworkUtilService: FormAndFrameworkUtilService
) { }
async ngOnInit() {
this.selectedLanguage = this.translate.currentLang;
this.getCategoriesAndUpdateAttributes();
// Event for optional and forceful upgrade
this.events.subscribe('force_optional_upgrade', async (upgrade) => {
if (upgrade && !this.isUpgradePopoverShown) {
await this.appGlobalService.openPopover(upgrade);
this.isUpgradePopoverShown = true;
}
});
this.refreshProfileData();
this.events.subscribe('refresh:profile', () => {
this.refreshProfileData(false, false);
});
this.events.subscribe(AppGlobalService.PROFILE_OBJ_CHANGED, () => {
this.refreshProfileData(false, false);
});
this.refreshSignInCard();
this.appGlobalService.generateConfigInteractEvent(PageId.GUEST_PROFILE);
}
ionViewWillEnter() {
this.events.subscribe('update_header', () => {
this.headerService.showHeaderWithHomeButton(['download']);
});
this.headerObservable = this.headerService.headerEventEmitted$.subscribe(eventName => {
this.handleHeaderEvents(eventName);
});
this.headerService.showHeaderWithHomeButton(['download']);
}
ionViewWillLeave() {
if (this.headerObservable) {
this.headerObservable.unsubscribe();
}
if (this.headerObservable) {
this.headerObservable.unsubscribe();
}
this.events.unsubscribe('update_header');
}
async refreshProfileData(refresher: any = false, showLoader: boolean = true) {
if (!this.loader) {
this.loader = await this.commonUtilService.getLoader();
}
if (showLoader) {
await this.loader.present();
}
if (refresher) {
this.telemetryGeneratorService.generatePullToRefreshTelemetry(PageId.GUEST_PROFILE, Environment.HOME);
}
const deviceLocationInfo = await this.preferences.getString(PreferenceKey.DEVICE_LOCATION).toPromise();
if (deviceLocationInfo) {
this.deviceLocation = JSON.parse(deviceLocationInfo);
window['segmentation'].SBTagService.pushTag(this.deviceLocation, TagPrefixConstants.USER_LOCATION, true);
}
this.profileService.getActiveSessionProfile({ requiredFields: ProfileConstants.REQUIRED_FIELDS }).toPromise()
.then(async (res: any) => {
this.profile = res;
const tagObj = {
board: res.board,
grade: res.grade,
syllabus: res.syllabus,
medium: res.medium,
};
window['segmentation'].SBTagService.pushTag(tagObj, TagPrefixConstants.USER_ATRIBUTE, true);
window['segmentation'].SBTagService.pushTag([res.profileType], TagPrefixConstants.USER_ROLE, true);
this.segmentationTagService.evalCriteria();
this.getSyllabusDetails();
this.refreshSignInCard();
const rootOrgId = this.onboardingConfigurationService.getAppConfig().overriddenDefaultChannelId
const supportedUserTypes = await this.profileHandler.getSupportedUserTypes(rootOrgId);
this.currentUserTypeConfig = supportedUserTypes.find(userTypes => userTypes.code === this.profile.profileType);
setTimeout(() => {
if (refresher) { refresher.target.complete(); }
}, 500);
})
.catch(async () => {
await this.loader.dismiss();
});
}
refreshSignInCard() {
const profileType = this.appGlobalService.getGuestUserType();
this.showSignInCard = this.commonUtilService.isAccessibleForNonStudentRole(profileType);
}
editGuestProfile(isChangeRoleRequest: boolean, attribute) {
const navigationExtras: NavigationExtras = {
state: {
profile: this.profile,
isCurrentUser: true,
isChangeRoleRequest
}
};
const values = new Map();
values['optionClicked'] = attribute;
this.telemetryGeneratorService.generateInteractTelemetry(
InteractType.TOUCH,
InteractSubtype.EDIT_CLICKED,
Environment.HOME,
PageId.GUEST_PROFILE, undefined, values);
this.router.navigate([RouterLinks.GUEST_EDIT], navigationExtras);
}
getSyllabusDetails() {
let selectedFrameworkId = '';
const getSuggestedFrameworksRequest: GetSuggestedFrameworksRequest = {
language: this.translate.currentLang,
requiredCategories: FrameworkCategoryCodesGroup.DEFAULT_FRAMEWORK_CATEGORIES
};
this.frameworkUtilService.getActiveChannelSuggestedFrameworkList(getSuggestedFrameworksRequest).toPromise()
.then(async (result: Framework[]) => {
if (result && result !== undefined && result.length > 0) {
result.forEach(element => {
if (this.profile && this.profile.syllabus && this.profile.syllabus.length && this.profile.syllabus[0] === element.identifier) {
this.syllabus = element.name;
selectedFrameworkId = element.identifier;
}
});
if (selectedFrameworkId !== undefined && selectedFrameworkId.length > 0) {
this.getFrameworkDetails();
} else {
await this.loader.dismiss();
}
} else {
await this.loader.dismiss();
this.commonUtilService.showToast(this.commonUtilService.translateMessage('NO_DATA_FOUND'));
}
});
}
getFrameworkDetails(): void {
const frameworkDetailsRequest: FrameworkDetailsRequest = {
frameworkId: (this.profile && this.profile.syllabus && this.profile.syllabus[0]) ? this.profile.syllabus[0] : '',
requiredCategories: FrameworkCategoryCodesGroup.DEFAULT_FRAMEWORK_CATEGORIES
};
this.frameworkService.getFrameworkDetails(frameworkDetailsRequest).toPromise()
.then(async (framework: Framework) => {
this.categories = framework.categories;
if (this.profile.board && this.profile.board.length) {
this.boards = this.getFieldDisplayValues(this.profile.board, 0);
}
if (this.profile.medium && this.profile.medium.length) {
this.medium = this.getFieldDisplayValues(this.profile.medium, 1);
}
if (this.profile.grade && this.profile.grade.length) {
this.grade = this.getFieldDisplayValues(this.profile.grade, 2);
}
if (this.profile.subject && this.profile.subject.length) {
this.subjects = this.getFieldDisplayValues(this.profile.subject, 3);
}
await this.loader.dismiss();
});
}
getFieldDisplayValues(field: Array<any>, catIndex: number): string {
const displayValues = [];
this.categories[catIndex].terms.forEach(element => {
if (field.includes(element.code)) {
displayValues.push(element.name);
}
});
return this.commonUtilService.arrayToString(displayValues);
}
onLoginClick() {
this.commonUtilService.showToast('NO_INTERNET_TITLE', false, '', 3000, 'top');
}
handleHeaderEvents($event) {
if ($event.name === 'download') {
this.redirectToActiveDownloads();
}
}
private redirectToActiveDownloads() {
this.telemetryGeneratorService.generateInteractTelemetry(
InteractType.TOUCH,
InteractSubtype.ACTIVE_DOWNLOADS_CLICKED,
Environment.HOME,
PageId.GUEST_PROFILE);
this.router.navigate([RouterLinks.ACTIVE_DOWNLOADS]);
}
redirectToDistrictMappingPage() {
this.telemetryGeneratorService.generateInteractTelemetry(
InteractType.TOUCH,
InteractSubtype.EDIT_DISTRICT_MAPPING_CLICKED,
Environment.HOME,
PageId.GUEST_PROFILE);
const navigationExtras: NavigationExtras = {
state: {
isShowBackButton: true,
source: PageId.GUEST_PROFILE
}
};
this.router.navigate([RouterLinks.DISTRICT_MAPPING], navigationExtras);
}
signin() { this.router.navigate([RouterLinks.SIGN_IN]); }
private getCategoriesAndUpdateAttributes() {
this.formAndFrameworkUtilService.getFrameworkCategoryList().then((categories) => {
if (categories && categories.supportedFrameworkConfig && categories.supportedAttributes) {
this.frameworkData = categories.supportedFrameworkConfig;
this.supportedProfileAttributes = categories.supportedAttributes;
}
});
}
}
<ion-content overflow-scroll="true" class="main-container avoid-bottom-tabs-space"
[ngClass]="{'ui-container': !platform.is('ios')}">
<div class="ui-container" *ngIf="platform.is('ios')"></div>
<div class="ui-content">
<ion-refresher (ionRefresh)="refreshProfileData($event)"></ion-refresher>
<div class="profile-info padding-top-10 padding-bottom-10 ion-text-center">
<div class="profile-icon">
<img src="./assets/imgs/guest_profile.svg" alt="guest-profile">
</div>
<p class="profile-name">
<span class="user">{{profile?.handle | titlecase}}</span>
<span role="button" aria-label="edit profile">
<ion-icon class="editIcon" role="button" aria-label="edit profile" name="create" color="primary"
(click)="editGuestProfile(false,'edit-profile')">
</ion-icon>
</span>
</p>
</div>
<div class="content-preferences-info">
<div class="content-header-info" role="heading" aria-level="2">{{ 'CONTENT_PREFERENCE' | translate }}</div>
<div class="grid-container">
<!-- Name -->
<!-- Role -->
<div *ngIf="profile?.profileType" class="grid-item info-title text-align-start ion-text-uppercase">
{{'FRMELEMNTS_LBL_PERSONA' | translate}}</div>
<div *ngIf="profile?.profileType" class="grid-item text-align-end"
(click)="editGuestProfile(true,'change-role')">
<div *ngIf="profile?.profileType" class="align-content">
<div class="ellipsis text-align width-100">{{currentUserTypeConfig?.name}}‎</div>
<span role="button" attr.aria-label="edit {{'FRMELEMNTS_LBL_PERSONA' | translate}}">
<ion-icon role="button" class="icon-align" float="end"
attr.aria-label="edit {{'FRMELEMNTS_LBL_PERSONA' | translate}}" name="create" color="primary">
</ion-icon>
</span>
</div>
</div>
<!-- Syllabus -->
<div [hidden]="true" class="grid-item info-title text-align-start ion-text-uppercase">
{{'SYLLABUS' | translate}}
</div>
<div [hidden]="true" class="grid-item text-align-end" (click)="editGuestProfile(false,'syllabus')">
<div *ngIf="profile?.syllabus && profile?.syllabus !== ''" class="align-content">
<div class="ellipsis text-align width-100">{{syllabus}}</div>
<span role="button" attr.aria-label="edit {{'SYLLABUS' | translate}}">
<ion-icon class="icon-align" float="end" attr.aria-label="edit {{'SYLLABUS' | translate}}" name="create"
color="primary" role="button">
</ion-icon>
</span>
</div>
<div *ngIf="!profile?.syllabus?.length" attr.aria-label="add {{'SYLLABUS' | translate}}" role="button"
class="vertical-align">
{{'ADD' | translate}}
</div>
</div>
<!-- Board -->
<div *ngIf="!!supportedProfileAttributes['board'] && frameworkData[0].code==='category1'"
class="grid-item info-title text-align-start ion-text-uppercase">{{frameworkData[0].label | translateJson}}</div>
<div *ngIf="!!supportedProfileAttributes['board']" class="grid-item text-align-end"
(click)="editGuestProfile(false,'board')">
<div *ngIf="profile?.syllabus?.length && profile?.board?.length" class="align-content">
<div class="ellipsis text-align width-100">{{boards | aliased}}‎</div>
<span role="button" attr.aria-label="edit {{'BOARD' | translate}}">
<ion-icon class="icon-align" float="end" attr.aria-label="edit {{'BOARD' | translate}}" name="create"
color="primary" role="button">
</ion-icon>
</span>
</div>
<div *ngIf="!profile?.syllabus?.length || !profile?.board?.length" role="button"
attr.aria-label="add {{'BOARD' | translate}}" class="vertical-align">{{'ADD' | translate}}
</div>
</div>
<!-- Medium -->
<div *ngIf="!!supportedProfileAttributes['medium'] && frameworkData.length>1 && frameworkData[1].code==='category2'"
class="grid-item info-title text-align-start ion-text-uppercase">{{frameworkData[1].label | translateJson}}</div>
<div *ngIf="!!supportedProfileAttributes['medium'] && frameworkData.length>1" class="grid-item text-align-end"
(click)="editGuestProfile(false,'medium')">
<div *ngIf="profile?.syllabus?.length && profile?.board?.length && profile?.medium?.length"
class="align-content">
<div class="ellipsis text-align width-100">{{medium}}</div>
<span role="button" attr.aria-label="edit {{'MEDIUM' | translate}}">
<ion-icon class="icon-align" float="end" attr.aria-lable="edit {{'MEDIUM' | translate}}" name="create"
color="primary" role="button">
</ion-icon>
</span>
</div>
<div role="button" attr.aria-label="add {{'MEDIUM' | translate}}"
*ngIf="!profile?.syllabus?.length || !profile?.board?.length || !profile?.medium?.length"
class="vertical-align">{{'ADD' | translate}}</div>
</div>
<!-- Class -->
<div *ngIf="!!supportedProfileAttributes['gradeLevel'] && frameworkData.length>2 && frameworkData[2].code==='category3'"
class="grid-item info-title text-align-start ion-text-uppercase">{{frameworkData[2].label | translateJson}}</div>
<div *ngIf="!!supportedProfileAttributes['gradeLevel'] && frameworkData.length>2" class="grid-item text-align-end"
(click)="editGuestProfile(false,'class')">
<div
*ngIf="profile?.syllabus?.length && profile?.board?.length && profile?.medium?.length && profile?.grade?.length"
class="align-content">
<div class="ellipsis text-align width-100">{{grade}}</div>
<span role="button" attr.aria-label="edit {{'CLASS' | translate}}">
<ion-icon class="icon-align" float="end" attr.aria-label="edit {{'CLASS' | translate}}" name="create"
color="primary" role="button">
</ion-icon>
</span>
</div>
<div role="button" attr.aria-label="add {{'CLASS' | translate}}"
*ngIf="!profile?.syllabus?.length || !profile?.board?.length || !profile?.medium?.length || !profile?.grade?.length"
class="vertical-align">{{'ADD' | translate}}</div>
</div>
<!-- Subject -->
<div *ngIf="!!supportedProfileAttributes['subject'] && frameworkData.length>3 &&frameworkData[3].code==='category4'"
class="grid-item info-title text-align-start ion-text-uppercase">{{frameworkData[3].label | translateJson}}</div>
<div *ngIf="!!supportedProfileAttributes['subject'] && frameworkData.length>3" class="grid-item text-align-end"
(click)="editGuestProfile(false,'subjects')">
<div
*ngIf="profile?.syllabus?.length && profile?.board?.length && profile?.medium?.length && profile?.grade?.length && profile?.subject?.length"
class="align-content">
<div class="ellipsis text-align width-100">{{subjects}}</div>
<span role="button" attr.aria-label="edit {{'SUBJECTS' | translate}}">
<ion-icon class="icon-align" float="end" attr.aria-label="edit {{'SUBJECTS' | translate}}" name="create"
color="primary" role="button">
</ion-icon>
</span>
</div>
<div role="button" attr.aria-label="add {{'SUBJECTS' | translate}}"
*ngIf="!profile?.syllabus?.length || !profile?.board?.length || !profile?.medium?.length || !profile?.grade?.length || !profile?.subject?.length"
class="vertical-align">{{'ADD' | translate}}</div>
</div>
</div>
<div class="grid-container">
<div class="grid-item info-title text-align-start ion-text-uppercase">{{'DISTRICT' | translate}}</div>
<div class="grid-item text-align-end" (click)="redirectToDistrictMappingPage()">
<div *ngIf="deviceLocation" class="align-content">
<div class="ellipsis text-align width-100">{{deviceLocation?.district}}</div>
<span role="button" attr.aria-label="edit {{'DISTRICT' | translate}}">
<ion-icon class="icon-align" float="end" attr.aria-label="edit {{'DISTRICT' | translate}}" name="create"
color="primary" role="button"></ion-icon>
</span>
</div>
<div *ngIf="!deviceLocation?.district" role="button" attr.aria-label="add {{'DISTRICT' | translate}}"
class="vertical-align">{{'ADD' | translate}}</div>
</div>
<div class="grid-item info-title text-align-start ion-text-uppercase">{{'STATE' | translate}}</div>
<div class="grid-item text-align-end" (click)="redirectToDistrictMappingPage()">
<div *ngIf="deviceLocation" class="align-content">
<div class="ellipsis text-align width-100">{{deviceLocation?.state}}</div>
<span role="button" attr.aria-label="edit {{'STATE' | translate}}">
<ion-icon class="icon-align" attr.aria-label="edit {{'STATE' | translate}}" float="end" name="create"
color="primary" role="button"></ion-icon>
</span>
</div>
<div *ngIf="!deviceLocation?.state" role="button" attr.aria-label="add {{'STATE' | translate}}"
class="vertical-align">{{'ADD' | translate}}</div>
</div>
</div>
</div>
<div *ngIf="showSignInCard" class="signin-card-bg">
<app-sign-in-card [source]="'profile'" (valueChange)="onLoginClick($event)"></app-sign-in-card>
</div>
</div>
</ion-content>
./guest-profile.page.scss
@import "src/assets/styles/variables";
@import "src/assets/styles/_custom-mixins";
@import "src/assets/styles/fonts";
:host {
.profile-info{
background-color: transparent;
border-radius: 0 0 0 1rem;
.profile-icon{
width: 5.625rem;
height: 5.625rem;
border-radius: 3.75rem;
background-color: map-get($colors, white);
box-shadow: 0 5px 2px 0 rgba(0,0,0,0.1);
margin: auto;
img{
position: relative;
top: 0.313rem;
width: 4.688rem;
}
}
}
.profile-name {
color: map-get($colors, dark);
margin: 0;
font-size: 1.2rem;
@include padding(5px);
@extend .font-weight-bold;
overflow: hidden;
text-overflow: ellipsis;
display: -ms-flexbox;
}
.user {
text-align: center !important;
@include padding(null, null, null, 1em !important);
}
.editIcon {
@include margin(null, null, null, 5px);
height: 0.938rem;
width: 0.938rem;
}
.change-role {
color: dodgerblue;
text-align: center;
@include margin(null, 10px, null, null);
font-size: 0.9rem;
@include padding(0 2px 2px 2px);
font-weight: normal;
margin: 0;
}
.user-type {
color: map-get($colors, dark);
text-align: center;
@include margin(null, 10px, null, null);
font-size: 1rem;
@include padding(2px);
@extend .font-weight-bold;
margin: 0;
}
.info-title {
color: map-get($colors, dark_gray);
font-size: 1rem;
@extend .font-weight-700;
}
.section-title {
color: map-get($colors, dark);
@include margin(null, null, -5px, null !important);
font-size: 1.3rem;
padding: 0;
@include margin(null, null, null, 0);
@extend .font-weight-700;
}
.vertical-align {
vertical-align: sub;
color: map-get($colors, dark_gray);
font-size: 1rem;
@extend .font-weight-700;
}
.text-align {
width: 90%;
display: inline-block;
vertical-align: top;
}
.icon-align {
@include margin(null, null, null, 2px);
size: 2px;
display: inline-block;
}
.details-container {
border-top: solid map-get($colors, medium_gray);
h2 {
margin-top: 10px !important;
margin-bottom: 10px;
}
}
.grid-container {
display: grid;
grid-template-columns: 50% 50%;
border-style: double;
margin-top: 8px;
border-radius: 1rem;
background-color: aliceblue;
border-color: aliceblue;
padding: 10px;
}
.grid-item {
padding: 0 10px 14px;
font-size: 0.75rem;
font-weight: 700;
.align-content {
display: flex;
flex-wrap: nowrap;
// align-items: center;
width: auto;
.width-100 {
width: 100%;
}
ion-icon {
width: 0.875rem;
height: 0.875rem;
padding-left: 4px;
}
}
}
.content-header-info {
font-weight: 600;
font-size: 1.3rem;
}
.content-preferences-info {
padding: 15px;
background-color: white;
text-align: center;
border-bottom: 0.3px solid map-get($colors, bright_blue_19);
border-top: 0.3px solid map-get($colors, bright_blue_19);
.container {
text-align: center;
@include margin(null, null, 10px, null);
}
}
}