src/app/modules/public/module/help/components/faq/faq.component.ts
OnInit
| selector | app-faq |
| styleUrls | ./faq.component.scss |
| templateUrl | ./faq.component.html |
Properties |
|
Methods |
|
HostListeners |
constructor(http: HttpClient, _cacheService: CacheService, utilService: UtilService, tenantService: TenantService, resourceService: ResourceService, activatedRoute: ActivatedRoute, layoutService: LayoutService, navigationHelperService: NavigationHelperService, location: Location, router: Router, telemetryService: TelemetryService, faqService: FaqService, toasterService: ToasterService, configService: ConfigService, publicDataService: PublicDataService, contentUtilsServiceService: ContentUtilsServiceService, formService: FormService)
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Parameters :
|
| window:resize |
Arguments : '$event'
|
window:resize(event)
|
| checkScreenView | ||||
checkScreenView(width)
|
||||
|
Parameters :
Returns :
void
|
| Async enableDebugMode | ||||
enableDebugMode(event)
|
||||
|
Parameters :
Returns :
any
|
| enableFaqReport | ||||
enableFaqReport(event)
|
||||
|
Parameters :
Returns :
void
|
| Private Async getDebugTimeInterval |
getDebugTimeInterval()
|
|
Returns :
Promise<string>
|
| Private getDesktopFAQ | ||||||||
getDesktopFAQ(languageCode: string)
|
||||||||
|
Parameters :
Returns :
void
|
| Private getFaqJson |
getFaqJson()
|
|
Returns :
void
|
| goBack |
goBack()
|
|
Returns :
void
|
| initLayout |
initLayout()
|
|
Returns :
void
|
| logInteractEvent | |||||||||
logInteractEvent(event, subtype: string)
|
|||||||||
|
Parameters :
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onCategorySelect | ||||
onCategorySelect(event)
|
||||
|
Parameters :
Returns :
void
|
| onResize | ||||
onResize(event)
|
||||
Decorators :
@HostListener('window:resize', ['$event'])
|
||||
|
Parameters :
Returns :
void
|
| onVideoSelect | ||||
onVideoSelect(event)
|
||||
|
Parameters :
Returns :
void
|
| Private prepareFaqData | ||||
prepareFaqData(data)
|
||||
|
Parameters :
Returns :
any
|
| Private selectInitialCategory | ||||
selectInitialCategory(data)
|
||||
|
Parameters :
Returns :
void
|
| setTelemetryImpression |
setTelemetryImpression()
|
|
Returns :
void
|
| setTelemetryInteractEdata | ||||
setTelemetryInteractEdata(type)
|
||||
|
Parameters :
Returns :
IInteractEventEdata
|
| updateButtonVisibility |
updateButtonVisibility()
|
|
Returns :
void
|
| Public activatedRoute |
Type : ActivatedRoute
|
| Public contentUtilsServiceService |
Type : ContentUtilsServiceService
|
| defaultFooterConfig |
Type : any
|
| defaultToEnglish |
Default value : false
|
| faqBaseUrl |
Type : string
|
| faqData |
Type : any
|
| Public formService |
Type : FormService
|
| helpCenterLink |
Type : string
|
Default value : '/help/faqs/user/index.html'
|
| instance |
Type : string
|
| isDesktopApp |
Default value : false
|
| isDisabled |
Default value : false
|
| isExpanded |
Default value : false
|
| isMobileView |
Default value : false
|
| layoutConfiguration |
Type : any
|
| Public navigationHelperService |
Type : NavigationHelperService
|
| playerConfig |
Type : any
|
| Public resourceService |
Type : ResourceService
|
| sbFaqCategoryList |
Decorators :
@ViewChild('sbFaqCategoryList')
|
| selectedFaqCategory |
Type : any
|
| selectedLanguage |
Type : string
|
| showFaqReport |
Type : boolean
|
| showLoader |
Default value : true
|
| showOnlyFaqCategory |
Default value : true
|
| showVideoModal |
Default value : false
|
| Public telemetryImpression |
Type : IImpressionEventInput
|
| Public tenantService |
Type : TenantService
|
| time |
Type : number
|
Default value : 0
|
| timeInterval |
Default value : String(TEN_MINUTES)
|
| unsubscribe$ |
Default value : new Subject<void>()
|
| videoPlayer |
Decorators :
@ViewChildren('videoPlayer')
|
import { Component, HostListener, OnInit, ViewChild, ViewChildren } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { CacheService } from '../../../../../shared/services/cache-service/cache.service';
import { UtilService, ResourceService, LayoutService, NavigationHelperService, ToasterService, ConfigService, ContentUtilsServiceService } from '@sunbird/shared';
import { TenantService, PublicDataService } from '@sunbird/core';
import { IInteractEventEdata, IImpressionEventInput, TelemetryService } from '@sunbird/telemetry';
import { ActivatedRoute, Router } from '@angular/router';
import * as _ from 'lodash-es';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { Location } from '@angular/common';
import { FaqService } from '../../services/faq/faq.service';
import { VideoConfig } from './faq-data';
import { HttpOptions } from '../../../../../shared/interfaces/httpOptions';
import { FormService } from '../../../../../core/services/form/form.service';
const TEN_MINUTES = 1000 * 60 * 10;
@Component({
selector: 'app-faq',
templateUrl: './faq.component.html',
styleUrls: ['./faq.component.scss']
})
export class FaqComponent implements OnInit {
faqData: any;
faqBaseUrl: string;
selectedLanguage: string;
showLoader = true;
instance: string;
defaultFooterConfig: any;
layoutConfiguration: any;
unsubscribe$ = new Subject<void>();
public telemetryImpression: IImpressionEventInput;
defaultToEnglish = false;
isDesktopApp = false;
helpCenterLink = '/help/faqs/user/index.html';
selectedFaqCategory: any;
isMobileView = false;
showFaqReport: boolean;
showOnlyFaqCategory = true;
@ViewChild('sbFaqCategoryList') sbFaqCategoryList;
@ViewChildren('videoPlayer') videoPlayer;
showVideoModal = false;
playerConfig: any;
isDisabled = false;
timeInterval = String(TEN_MINUTES);
time = 0;
isExpanded = false;
@HostListener('window:resize', ['$event'])
onResize(event) {
if (event && event.target && event.target.innerWidth) {
this.checkScreenView(event.target && event.target.innerWidth);
}
}
constructor(private http: HttpClient, private _cacheService: CacheService, private utilService: UtilService,
public tenantService: TenantService, public resourceService: ResourceService, public activatedRoute: ActivatedRoute,
private layoutService: LayoutService, public navigationHelperService: NavigationHelperService, private location: Location,
private router: Router, private telemetryService: TelemetryService,
private faqService: FaqService, private toasterService: ToasterService,
private configService: ConfigService, private publicDataService: PublicDataService,
public contentUtilsServiceService: ContentUtilsServiceService, public formService: FormService) {
}
ngOnInit() {
this.isDesktopApp = this.utilService.isDesktopApp;
this.setTelemetryImpression();
this.initLayout();
this.instance = _.upperCase(this.resourceService.instance);
this.defaultFooterConfig = {
helpCenterLink: this.helpCenterLink,
helpDeskEmail: `support@${_.lowerCase(this.instance)}-ncte.freshdesk.com`
};
this.selectedLanguage = this._cacheService.get('portalLanguage') || 'en';
if (this.isDesktopApp) {
const baseUrl = this.utilService.getAppBaseUrl();
this.defaultFooterConfig.helpCenterLink = `${baseUrl}${this.helpCenterLink}`;
this.getDesktopFAQ(this.selectedLanguage);
} else {
this.faqService.getFaqJSON()
.pipe(takeUntil(this.unsubscribe$)).subscribe(data => {
this.faqBaseUrl = _.get(data, 'result.response.value');
this.getFaqJson();
}, (err) => {
this.showLoader = false;
this.toasterService.error(this.resourceService.messages.emsg.m0005);
});
}
this.utilService.languageChange.subscribe((langData) => {
this.showLoader = true;
this.selectedLanguage = _.get(langData, 'value') || 'en';
if (this.isDesktopApp) {
this.getDesktopFAQ(this.selectedLanguage);
} else {
this.getFaqJson();
}
});
this.checkScreenView(window.innerWidth);
if (localStorage.getItem('debugDisabled')) {
this.isDisabled = (localStorage.getItem('debugDisabled') === 'true') ? true : false;
this.updateButtonVisibility();
}
}
private getFaqJson() {
this.faqData = undefined;
this.http.get(`${this.faqBaseUrl}/faq-${this.selectedLanguage}.json`)
.pipe(takeUntil(this.unsubscribe$))
.subscribe(data => {
this.selectInitialCategory(data);
this.showLoader = false;
this.defaultToEnglish = false;
}, (err) => {
if (_.get(err, 'status') === 404 && !this.defaultToEnglish) {
this.selectedLanguage = 'en';
this.defaultToEnglish = true;
this.getFaqJson();
} else {
this.showLoader = false;
this.toasterService.error(this.resourceService.messages.emsg.m0005);
}
});
}
private getDesktopFAQ(languageCode = 'en') {
const requestParams = {
url: `${this.configService.urlConFig.URLS.OFFLINE.READ_FAQ}/${languageCode}`
};
this.faqData = undefined;
this.publicDataService.get(requestParams).pipe(takeUntil(this.unsubscribe$))
.subscribe((response) => {
this.showLoader = false;
const faqData = _.get(response, 'result.faqs');
this.selectInitialCategory(faqData);
this.defaultToEnglish = false;
}, (error) => {
if (_.get(error, 'status') === 404 && !this.defaultToEnglish) {
this.selectedLanguage = 'en';
this.defaultToEnglish = true;
this.getDesktopFAQ();
} else {
this.showLoader = false;
console.log(`Received Error while fetching faqs ${JSON.stringify(error.error)}`);
this.toasterService.error(this.resourceService.messages.emsg.m0005);
}
});
}
private selectInitialCategory(data) {
if (_.get(data, 'categories.length')) {
this.faqData = this.prepareFaqData(data);
this.selectedFaqCategory = _.get(this.faqData, 'categories.0');
this.selectedFaqCategory['constants'] = _.get(this.faqData, 'constants');
setTimeout(() => {
if (this.sbFaqCategoryList && this.sbFaqCategoryList.selectedIndex !== undefined) {
this.sbFaqCategoryList.selectedIndex = 0;
}
}, 0);
}
}
private prepareFaqData(data) {
for (let i = 0; i < data.categories.length; i++) {
if (_.get(data.categories[i], 'faqs.length')) {
for (let j = 0; j < data.categories[i].faqs.length; j++) {
data.categories[i].faqs[j].topic = _.replace(data.categories[i].faqs[j].topic, /{instance}/g, this.instance);
data.categories[i].faqs[j].description = _.replace(data.categories[i].faqs[j].description, /{instance}/g, this.instance);
}
}
if (_.get(data.categories[i], 'videos.length')) {
for (let j = 0; j < data.categories[i].videos.length; j++) {
data.categories[i].videos[j].name = _.replace(data.categories[i].videos[j].name, /{instance}/g, this.instance);
}
}
}
return data;
}
setTelemetryImpression() {
this.telemetryImpression = {
context: {
env: this.activatedRoute.snapshot.data.telemetry.env
},
edata: {
type: this.activatedRoute.snapshot.data.telemetry.type,
pageid: this.activatedRoute.snapshot.data.telemetry.pageid,
uri: this.router.url,
subtype: this.activatedRoute.snapshot.data.telemetry.subtype,
duration: this.navigationHelperService.getPageLoadTime()
}
};
}
initLayout() {
this.layoutConfiguration = this.layoutService.initlayoutConfig();
this.layoutService.switchableLayout().
pipe(takeUntil(this.unsubscribe$)).subscribe(layoutConfig => {
if (layoutConfig != null) {
this.layoutConfiguration = layoutConfig.layout;
}
});
}
goBack() {
if (!this.showOnlyFaqCategory && this.isMobileView) {
this.showOnlyFaqCategory = true;
return;
}
this.location.back();
}
setTelemetryInteractEdata(type): IInteractEventEdata {
return {
id: type,
type: 'click',
pageid: _.get(this.activatedRoute, 'root.firstChild.snapshot.data.telemetry.pageid')
};
}
logInteractEvent(event, subtype: string) {
const cardClickInteractData = {
context: {
cdata: [],
env: _.get(this.activatedRoute, 'root.firstChild.snapshot.data.telemetry.env'),
},
edata: {
id: 'faq',
subtype,
type: 'TOUCH',
pageid: _.get(this.activatedRoute, 'root.firstChild.snapshot.data.telemetry.pageid'),
extra: { values: event.data }
}
};
this.telemetryService.interact(cardClickInteractData);
}
onCategorySelect(event) {
this.showOnlyFaqCategory = false;
this.showFaqReport = false;
this.selectedFaqCategory = undefined;
if (!event || !event.data) {
return;
}
setTimeout(() => {
const faqCategory = event.data;
faqCategory.constants = this.faqData.constants;
this.selectedFaqCategory = faqCategory;
}, 0);
}
checkScreenView(width) {
if (width <= 767) {
this.isMobileView = true;
this.showOnlyFaqCategory = true;
} else {
this.isMobileView = false;
}
}
onVideoSelect(event) {
if (!event || !event.data) {
return;
}
const video = VideoConfig;
video.metadata.appIcon = event.data.thumbnail;
video.metadata.name = event.data.name;
video.metadata.artifactUrl = event.data.url;
this.playerConfig = video;
this.showVideoModal = true;
this.videoPlayer.changes.subscribe(() => {
if (_.get(document.getElementsByClassName('sb-player-side-menu-icon'), '0.style')) {
document.getElementsByClassName('sb-player-side-menu-icon')[0]['style'].display = 'none';
}
});
}
enableFaqReport(event) {
this.showOnlyFaqCategory = false;
this.showFaqReport = true;
if (this.sbFaqCategoryList && this.sbFaqCategoryList.selectedIndex !== undefined) {
this.sbFaqCategoryList.selectedIndex = -1;
}
}
private async getDebugTimeInterval(): Promise<string> {
try {
const params = { formType: 'config', formAction: 'get', contentType: 'debugMode', component: 'portal' };
const formFields = await this.formService.getFormConfig(params).toPromise();
const field = formFields.filter(item => item.timeInterval);
if (field.length) {
this.timeInterval = field[0].timeInterval;
}
} catch (error) {
this.timeInterval = String(TEN_MINUTES);
}
this.time = Number(this.timeInterval) / (1000 * 60);
return new Promise((resolve) => resolve(this.timeInterval));
}
updateButtonVisibility() {
const currentTime = Math.floor(Date.now());
const valueStored = Number(localStorage.getItem('debugDisabledAt'));
const disableTime = Number(valueStored + Number(this.timeInterval));
if (currentTime > disableTime) {
this.isDisabled = false;
localStorage.setItem('debugDisabled', 'false');
localStorage.setItem('debugDisabledAt', '0');
} else {
const time = disableTime - currentTime;
this.time = Number(this.timeInterval) / (1000 * 60);
setTimeout(() => {
this.isDisabled = false;
localStorage.setItem('debugDisabled', 'false');
localStorage.setItem('debugDisabledAt', '0');
}, time);
}
}
async enableDebugMode(event) {
const timeInterval = await this.getDebugTimeInterval();
localStorage.setItem('debugDisabled', 'true');
localStorage.setItem('debugDisabledAt', String(Math.floor(Date.now())));
this.isDisabled = true;
this.updateButtonVisibility();
const httpOptions: HttpOptions = {
params: {
logLevel: 'debug',
timeInterval
}
};
this.http.get('/enableDebugMode', httpOptions).subscribe((res) => {
this.toasterService.success(_.get(this.resourceService, 'frmelmnts.alert.debugModeEnabledSuccess'));
}, error => {
console.error('Error while enabling debug mode');
this.toasterService.error(_.get(this.resourceService, 'frmelmnts.alert.debugModeEnabledFailed'));
});
}
}
<app-landing-section [appTelemetryImpression]="telemetryImpression" [textToDisplay]=""
[layoutConfiguration]="layoutConfiguration" [noTitle]="true">
</app-landing-section>
<div [ngClass]="layoutConfiguration ? 'sb-back-actionbar' : 'sb-bg-white cc-player__btn-back'" class="relative position mt-0">
<div class="ui container d-flex flex-ai-center">
<button type="button" (click)="goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-primary sb-btn-round' : 'sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0'" class="sb-btn sb-btn-normal" tabindex="0" attr.aria-label=“{{resourceService?.frmelmnts?.btn?.back}}”><i
class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
<use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
</svg></i><span>{{resourceService?.frmelmnts?.btn?.back}}</span> </button>
<div class="d-flex flex-dc ml-8">
<h4 class="mb-4">{{resourceService?.frmelmnts?.tab?.help}}</h4>
<div class="fsmall" *ngIf="isDesktopApp">
{{resourceService?.frmelmnts?.lbl?.learn_more | interpolate:'{instance}': instance}}</div>
<div class="fsmall" *ngIf="!isDesktopApp">{{resourceService?.frmelmnts?.lbl?.frequentlyAskedQuestions}}</div>
</div>
</div>
</div>
<div class="help-page relative9 sbt-inside-page-container">
<div class="ui container">
<div class="help-page__content" *ngIf="showLoader">
<app-loader></app-loader>
</div>
<div class="m-16 font-weight-bold" *appDesktopOnly>
{{resourceService?.frmelmnts?.lbl?.frequentlyAskedQuestions}}</div>
<div class="help-page__content" *ngIf="faqData && !showLoader">
<div class="sbhelp_container mt-24" style="min-height:600px;">
<div class="flex-basis-1">
<section class="sbhelp_container__left" *ngIf="(isMobileView && showOnlyFaqCategory) || !isMobileView"
[ngClass]="{'category-list-mobile':isMobileView, 'category-list-web':!isMobileView}">
<sb-list #sbFaqCategoryList [title]="faqData?.constants?.selectCategoryTitle" [listData]="faqData?.categories"
[btnText]="faqData?.constants?.reportIssueMsg" [btnImg]="'./assets/images/report.svg'"
(itemClick)="onCategorySelect($event)" tabindex="0" (btnClick)="enableFaqReport($event)">
</sb-list>
</section>
<section class="sbhelp_container__left sbhelp_container__debug mt-16" *ngIf="(isMobileView && showOnlyFaqCategory) || !isMobileView"
[ngClass]="{'category-list-mobile':isMobileView, 'category-list-web':!isMobileView}">
<div class="sb-developer-option-panel">
<div class="sb-developer-option-panel-heading">
<div class="sb-developer-option-panel-heading__title">{{resourceService?.frmelmnts?.lbl?.debugModeTitle}}</div>
<div class="sb-developer-option-panel-icon">
<span *ngIf="isExpanded" (click)="isExpanded=false">
<i class="icon-svg icon-svg--xxs ml-4"><svg class="icon icon-svg--primary">
<use xlink:href="assets/common-consumption/images/sprite.svg#arrow-up"></use>
</svg></i>
</span>
<span *ngIf="!isExpanded" (click)="isExpanded=true">
<i class="icon-svg icon-svg--xxs ml-4"><svg class="icon icon-svg--primary">
<use xlink:href="assets/common-consumption/images/sprite.svg#arrow-down"></use>
</svg></i>
</span>
</div>
</div>
<div class="sb-developer-option-panel-body" [hidden]="!isExpanded">
<div class="sb-developer-option-panel-body__title">{{resourceService?.frmelmnts?.lbl?.enableDebugMode}}
<div class="enable-checkbox">
<label class="switch">
<input type="checkbox" [checked]="isDisabled" (change)="enableDebugMode($event);" [ngClass]="{'sb-btn-disabled': isDisabled }" [disabled]="isDisabled">
<span class="slider round"></span>
</label>
</div>
</div>
<div class="sb-developer-option-panel-body__info" [hidden]="!isDisabled">{{resourceService?.messages?.smsg?.debugMode | interpolate:'{time}':time}}</div>
</div>
</div>
</section>
</div>
<section class="sbhelp_container__right" [ngClass]="{'faq-section-mobile':isMobileView, 'faq-section-web':!isMobileView}" *ngIf="(isMobileView && !showOnlyFaqCategory) || !isMobileView">
<div *ngIf="!showFaqReport">
<div class="d-flex flex-ai-center mb-8" *ngIf="!showOnlyFaqCategory && isMobileView">
<h4 class="ml-16"><b>{{selectedFaqCategory?.name}}</b></h4>
</div>
<div *ngIf="selectedFaqCategory?.videos?.length">
<sb-carousel [title]="faqData?.constants?.videoTitle" [listData]="selectedFaqCategory?.videos" (itemClick)="onVideoSelect($event)"></sb-carousel>
</div>
<div *ngIf="selectedFaqCategory?.faqs?.length">
<h4 class="faq_title mb-16">{{faqData?.constants?.faqTitle}}</h4>
<div class="sbhelp_container__faq">
<sb-faq [extraTemplate]="extraTemplate" [data]="selectedFaqCategory"
(toggleGroupEvent)="logInteractEvent($event, 'toggle-clicked');"
(yesClickedEvent)="logInteractEvent($event, 'yes-clicked');" tabindex="0"
(noClickedEvent)="logInteractEvent($event, 'no-clicked');"
(submitClickedEvent)="logInteractEvent($event, 'submit-clicked');">
</sb-faq>
</div>
</div>
</div>
<div *ngIf="showFaqReport">
<app-faq-report [faqData]="faqData"></app-faq-report>
</div>
</section>
</div>
</div>
<div class="help-page__visit-helpcenter mt-24 w-100 p-16 d-flex flex-ai-center relative9"
*ngIf="faqData && !showLoader">
<div class="fnormal mr-auto visit-helpcenter__text">{{resourceService?.frmelmnts?.lbl?.stillCouldntFind}}
<b>{{resourceService.frmelmnts?.lnk?.footerHelpCenter}}</b></div>
<a class="sb-btn sb-btn-normal sb-btn-outline-primary" appTelemetryInteract
[telemetryInteractEdata]="setTelemetryInteractEdata('help-center')"
href="{{defaultFooterConfig?.helpCenterLink}}" [target]="isDesktopApp ? '_blank' : '_self'">
{{resourceService?.frmelmnts?.lbl?.goToHelpCenter}}
</a>
</div>
</div>
</div>
<ng-template #extraTemplate>
<div class="fnormal visit-helpcenter__text mr-16">{{resourceService?.frmelmnts?.lbl?.stillCouldntFind}}
<b>{{resourceService.frmelmnts?.lnk?.footerHelpCenter}}</b></div>
<a class="sb-btn sb-btn-normal sb-btn-primary visit-helpcenter__btn" appTelemetryInteract
[telemetryInteractEdata]="setTelemetryInteractEdata('help-center')" href="{{defaultFooterConfig?.helpCenterLink}}"
[target]="isDesktopApp ? '_blank' : '_self'">
{{resourceService?.frmelmnts?.lbl?.goToHelpCenter}}
</a>
</ng-template>
<app-modal-wrapper *ngIf="showVideoModal && playerConfig" [config]="{disableClose: true, size: 'large'}"
(dismiss)="showVideoModal = false">
<ng-template sbModalContent>
<div class="sb-modal">
<div class="transition ui dimmer page modals active visible">
<div class="ui modal transition active visible large">
<button aria-label="close dialog" mat-dialog-close class="mat-close-btn">
<span>×</span>
</button>
<div class="sb-modal-content height-auto">
<sunbird-video-player [playerConfig]="playerConfig" #videoPlayer>
</sunbird-video-player>
</div>
</div>
</div>
</div>
</ng-template>
</app-modal-wrapper>
./faq.component.scss
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
:root {
--visit-helpcenter-bg:var(--white);
}
:host::ng-deep {
.help-page {
&__content {
margin-top: calculateRem(24px);
.panel {
.panel-heading, .panel-interact, .panel-info {
background: var(--cc-faq-panel-interact-bg);
}
.panel-info {
max-width: 100%;
padding: calculateRem(16px);
}
}
ul li {
margin-bottom: auto;
list-style: initial;
}
}
&__visit-helpcenter {
background-color: var(--visit-helpcenter-bg);
.visit-helpcenter__text {
@include respond-below(sm) {
flex-basis: 50%;
}
}
}
code {
background-color: var(--gray-0);
border-radius: calculateRem(3px);
font-family: courier, monospace;
padding: 0 calculateRem(3px);
}
}
.extraTemplate {
@include respond-below(sm) {
flex-wrap: wrap;
.visit-helpcenter__text, .visit-helpcenter__btn {
flex-basis: 100%;
}
.visit-helpcenter__btn {
margin-top: calculateRem(16px);
}
}
}
sb-list {
.listView-compt{
section.mt-24{
button{
text-transform: uppercase;
font-weight: bold;
img{
height: 1rem;
}
}
}
}
}
sb-faq {
.panel {
ul {
list-style: disc;
margin-top: 1rem;
margin-bottom: 1rem;
}
ul li {
margin-bottom: auto;
}
code {
background-color: var(--gray-0);
border-radius: calculateRem(3px);
font-family: courier, monospace;
padding: 0 calculateRem(3px);
}
}
}
}
.faq_title {
color: var(--carousel-title);
font-size: 1rem;
font-weight: bold;
letter-spacing: 0;
line-height: 1.5rem;
}
.debug-btn {
text-transform: uppercase;
font-weight: bold;
}
.sbhelp_container {
.category-list-mobile{
width:100%;
display: block;
}
.faq-section-mobile{
width:100%;
float:none;
}
.category-list-web{
display: inline-block;
}
display: flex;
align-items: flex-start;
&__left {
min-width: calculateRem(312px);
flex:1;
padding:1.5rem;
min-height: 8rem;
background: var(--sbfaq-compt-bg);
transition: all ease-in-out .3s;
}
&__right {
padding-left: 2rem;
width: 100%;
transition: all ease-in-out .3s;
@include respond-below(sm) {
padding-left: 0rem;
}
}
&__faq {
background: var(--sbfaq-compt-bg);
padding: 1.5rem;
border-radius: 1.5rem;
}
}
.sbhelp_container__debug{
min-height: auto;
padding:1rem 1.5rem;
}
.sb-developer-option-panel-heading{
display: flex;
justify-content: space-between;
&__title{
color: var(--cc-listView-compt-title);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0;
line-height: 1.25rem;
}
.sb-developer-option-panel-icon{
cursor: pointer;
}
}
.sb-developer-option-panel-body{
&__title{
color: var(--cc-listView-compt-itemText);
font-size: .875rem;
letter-spacing: 0;
line-height: normal;
padding-top: .5rem;
display: flex;
justify-content: space-between;
.enable-checkbox{
.switch {
position: relative;
display: inline-block;
width: calculateRem(40px);
height: calculateRem(20px);
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--gray-100);
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: calculateRem(18px);
width: calculateRem(18px);
bottom: calculateRem(2px);
background-color: var(--white);
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: var(--primary-color);
}
input:focus + .slider {
box-shadow: 0 0 calculateRem(1px) var(--primary-color);
}
input:checked + .slider:before {
-webkit-transform: translateX(21px);
-ms-transform: translateX(21px);
transform: translateX(21px);
}
input:disabled + .slider {
cursor: default;
}
.slider.round {
border-radius: calculateRem(34px);
}
.slider.round:before {
border-radius: 50%;
}
}
}
&__info{
color: var(--cc-listView-compt-itemText);
font-size: calculateRem(12px);
opacity: 0.5;
max-width: calculateRem(200px);
}
}