Skip to content

Commit a9d074d

Browse files
bastyenbastyen
committed
add grw- prefix to class name
1 parent c10a3d5 commit a9d074d

File tree

2 files changed

+60
-60
lines changed

2 files changed

+60
-60
lines changed

‎src/components/grw-app/grw-app.scss

Lines changed: 41 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -8,30 +8,30 @@ grw-app {
88
max-height: 100dvh;
99
}
1010

11-
.app-container {
11+
.grw-app-container {
1212
position: relative;
1313
background-color: var(--color-background);
1414
width: 100%;
1515
height: 100%;
1616
overflow: hidden;
1717
}
1818

19-
.languages-container {
19+
.grw-languages-container {
2020
display: flex;
2121
align-items: center;
2222
justify-content: flex-end;
2323
margin: 16px 16px 0px 0px;
2424
}
2525

26-
.header-container,
27-
.large-view-header-container {
26+
.grw-header-container,
27+
.grw-large-view-header-container {
2828
height: var(--header-height);
29-
.arrow-back-container {
29+
.grw-arrow-back-container {
3030
display: flex;
3131
align-items: center;
3232
height: 100%;
3333
margin: 0px 16px;
34-
.arrow-back-icon {
34+
.grw-arrow-back-icon {
3535
cursor: pointer;
3636
-webkit-tap-highlight-color: transparent;
3737
color: var(--color-on-surface);
@@ -46,35 +46,35 @@ grw-app {
4646
}
4747
}
4848

49-
.handle-search-filters-container {
49+
.grw-handle-search-filters-container {
5050
display: flex;
5151
align-items: center;
5252
justify-content: space-between;
5353
margin: 0px 16px;
5454
height: 64px;
5555

56-
.handle-search-container {
56+
.grw-handle-search-container {
5757
width: calc(50% + 48px);
5858
max-width: 220px;
5959
}
60-
.handle-filters-container {
60+
.grw-handle-filters-container {
6161
margin-left: 16px;
6262
}
6363
}
6464

65-
.header-detail {
65+
.grw-header-detail {
6666
height: 64px;
6767
}
6868

69-
.large-view-header-container {
70-
.handle-search-filters-container {
69+
.grw-large-view-header-container {
70+
.grw-handle-search-filters-container {
7171
justify-content: flex-start;
7272
}
7373
}
7474

75-
.init-loader-container,
76-
.loader-container,
77-
.large-view-loader-container {
75+
.grw-init-loader-container,
76+
.grw-loader-container,
77+
.grw-large-view-loader-container {
7878
position: absolute;
7979
display: flex;
8080
justify-content: center;
@@ -83,39 +83,39 @@ grw-app {
8383
background-color: var(--color-background);
8484
}
8585

86-
.content-container {
86+
.grw-content-container {
8787
position: relative;
8888
display: flex;
8989
height: calc(100% - var(--header-height));
9090
}
9191

92-
.content-treks {
92+
.grw-content-treks {
9393
height: calc(100% - var(--header-height));
9494
}
9595

96-
.content-trek {
96+
.grw-content-trek {
9797
height: 100%;
9898
}
9999

100-
.large-view-app-treks-list-container,
101-
.large-view-app-trek-detail-container,
102-
.large-view-app-touristic-content-detail-container,
103-
.large-view-app-touristic-event-detail-container,
104-
.large-view-app-treks-list-container,
105-
.large-view-app-trek-detail-container {
100+
.grw-large-view-app-treks-list-container,
101+
.grw-large-view-app-trek-detail-container,
102+
.grw-large-view-app-touristic-content-detail-container,
103+
.grw-large-view-app-touristic-event-detail-container,
104+
.grw-large-view-app-treks-list-container,
105+
.grw-large-view-app-trek-detail-container {
106106
display: flex;
107107
flex-direction: column;
108108
max-width: 100%;
109109
height: 100%;
110110
}
111111

112-
.app-map-container,
113-
.large-view-app-map-container {
112+
.grw-app-map-container,
113+
.grw-large-view-app-map-container {
114114
width: 100%;
115115
height: 100%;
116116
}
117117

118-
.map-visibility-button-container {
118+
.grw-map-visibility-button-container {
119119
display: flex;
120120
align-items: center;
121121
justify-content: center;
@@ -125,15 +125,15 @@ grw-app {
125125
z-index: 4;
126126
}
127127

128-
.init-loader-container,
129-
.loader-container {
128+
.grw-init-loader-container,
129+
.grw-loader-container {
130130
width: 100%;
131131
}
132132

133-
.app-treks-list-container,
134-
.app-trek-detail-container,
135-
.app-touristic-content-detail-container,
136-
.app-touristic-event-detail-container {
133+
.grw-app-treks-list-container,
134+
.grw-app-trek-detail-container,
135+
.grw-app-touristic-content-detail-container,
136+
.grw-app-touristic-event-detail-container {
137137
width: 100%;
138138
}
139139

@@ -153,28 +153,28 @@ grw-touristic-event-detail {
153153
max-height: calc(100vh - 64px);
154154
}
155155

156-
.app-map-container {
156+
.grw-app-map-container {
157157
width: 100%;
158158
position: absolute;
159159
}
160160

161-
.large-view-loader-container {
161+
.grw-large-view-loader-container {
162162
width: 50%;
163163
}
164164

165-
.large-view-app-treks-list-container,
166-
.large-view-app-trek-detail-container,
167-
.large-view-app-touristic-content-detail-container,
168-
.large-view-app-touristic-event-detail-container {
165+
.grw-large-view-app-treks-list-container,
166+
.grw-large-view-app-trek-detail-container,
167+
.grw-large-view-app-touristic-content-detail-container,
168+
.grw-large-view-app-touristic-event-detail-container {
169169
width: 50%;
170170
}
171171

172-
.large-view-app-map-container {
172+
.grw-large-view-app-map-container {
173173
position: relative;
174174
width: 50%;
175175
}
176176

177-
.error-container {
177+
.grw-error-container {
178178
display: flex;
179179
flex-direction: column;
180180
align-items: center;

‎src/components/grw-app/grw-app.tsx

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -335,7 +335,7 @@ export class GrwApp {
335335
!state.currentTouristicEvent &&
336336
!state.currentTouristicContents &&
337337
!state.currentTouristicEvents && (
338-
<div class="init-loader-container">
338+
<div class="grw-init-loader-container">
339339
<grw-loader color-primary-container={this.colorPrimaryContainer} color-on-primary-container={this.colorOnPrimaryContainer}></grw-loader>
340340
</div>
341341
)}
@@ -403,15 +403,15 @@ export class GrwApp {
403403
state.currentTouristicContent ||
404404
state.currentTouristicEvent ||
405405
state.networkError) && (
406-
<div class="app-container">
406+
<div class="grw-app-container">
407407
{state.languages && state.languages.length > 1 && (
408-
<div class="languages-container">
408+
<div class="grw-languages-container">
409409
<grw-select-language></grw-select-language>
410410
</div>
411411
)}
412412
<div
413-
class={`${this.isLargeView ? 'large-view-header-container' : 'header-container'}${
414-
this.showTrek || this.showTouristicContent || this.showTouristicEvent ? ' header-detail' : ''
413+
class={`${this.isLargeView ? 'grw-large-view-header-container' : 'grw-header-container'}${
414+
this.showTrek || this.showTouristicContent || this.showTouristicEvent ? ' grw-header-detail' : ''
415415
}`}
416416
>
417417
{Number(this.treks) + Number(this.touristicContents) + Number(this.touristicEvents) > 1 &&
@@ -426,11 +426,11 @@ export class GrwApp {
426426
></grw-segmented-segment>
427427
)}
428428
{!this.showTrek && !this.showTouristicContent && !this.showTouristicEvent ? (
429-
<div class="handle-search-filters-container">
430-
<div class="handle-search-container">
429+
<div class="grw-handle-search-filters-container">
430+
<div class="grw-handle-search-container">
431431
<grw-search fontFamily={this.fontFamily}></grw-search>
432432
</div>
433-
<div class="handle-filters-container">
433+
<div class="hgrw-andle-filters-container">
434434
<grw-common-button
435435
fontFamily={this.fontFamily}
436436
action={() => this.handleFilters()}
@@ -440,8 +440,8 @@ export class GrwApp {
440440
</div>
441441
</div>
442442
) : (
443-
<div class="arrow-back-container">
444-
<button onClick={() => this.handleBackButton()} class="arrow-back-icon">
443+
<div class="grw-arrow-back-container">
444+
<button onClick={() => this.handleBackButton()} class="grw-arrow-back-icon">
445445
{/* @ts-ignore */}
446446
<span translate={false} class="material-symbols material-symbols-outlined">
447447
arrow_back
@@ -451,15 +451,15 @@ export class GrwApp {
451451
)}
452452
</div>
453453

454-
<div class={`content-container ${this.showTrek || this.showTouristicContent || this.showTouristicEvent ? 'content-trek' : 'content-treks'}`}>
454+
<div class={`grw-content-container ${this.showTrek || this.showTouristicContent || this.showTouristicEvent ? 'grw-content-trek' : 'grw-content-treks'}`}>
455455
{state.networkError && (
456-
<div class="error-container">
456+
<div class="grw-error-container">
457457
Une erreur est survenue.
458458
<grw-common-button icon="refresh" name="Recharger la page" action={() => this.reload()}></grw-common-button>
459459
</div>
460460
)}
461461
<div
462-
class={this.isLargeView ? 'large-view-app-treks-list-container' : 'app-treks-list-container'}
462+
class={this.isLargeView ? 'grw-large-view-app-treks-list-container' : 'grw-app-treks-list-container'}
463463
style={{ display: this.showTrek || this.showTouristicContent || this.showTouristicEvent ? 'none' : 'flex', position: this.showTrek ? 'absolute' : 'relative' }}
464464
>
465465
{state.mode === 'treks' && this.treks && (
@@ -505,12 +505,12 @@ export class GrwApp {
505505
(!state.treks && state.mode === 'treks') ||
506506
(!state.touristicContents && state.mode === 'touristicContents') ||
507507
(!state.touristicEvents && state.mode === 'touristicEvents')) && (
508-
<div class={this.isLargeView ? 'large-view-loader-container' : 'loader-container'}>
508+
<div class={this.isLargeView ? 'grw-large-view-loader-container' : 'grw-loader-container'}>
509509
<grw-loader color-primary-container={this.colorSecondaryContainer} color-on-primary-container={this.colorOnSecondaryContainer}></grw-loader>
510510
</div>
511511
)}
512512
{this.showTrek && (
513-
<div class={this.isLargeView ? 'large-view-app-trek-detail-container' : 'app-trek-detail-container'}>
513+
<div class={this.isLargeView ? 'grw-large-view-app-trek-detail-container' : 'grw-app-trek-detail-container'}>
514514
<grw-trek-detail
515515
style={{
516516
visibility: (!this.showTrekMap && this.showTrek) || this.isLargeView ? 'visible' : 'hidden',
@@ -533,7 +533,7 @@ export class GrwApp {
533533
</div>
534534
)}
535535
{this.showTouristicContent && (
536-
<div class={this.isLargeView ? 'large-view-app-touristic-content-detail-container' : 'app-touristic-content-detail-container'}>
536+
<div class={this.isLargeView ? 'grw-large-view-app-touristic-content-detail-container' : 'grw-app-touristic-content-detail-container'}>
537537
<grw-touristic-content-detail
538538
style={{
539539
visibility: !this.showTouristicContentMap || this.isLargeView ? 'visible' : 'hidden',
@@ -553,7 +553,7 @@ export class GrwApp {
553553
</div>
554554
)}
555555
{this.showTouristicEvent && (
556-
<div class={this.isLargeView ? 'large-view-app-touristic-event-detail-container' : 'app-touristic-event-detail-container'}>
556+
<div class={this.isLargeView ? 'grw-large-view-app-touristic-event-detail-container' : 'grw-app-touristic-event-detail-container'}>
557557
<grw-touristic-event-detail
558558
style={{
559559
visibility: !this.showTouristicEventMap || this.isLargeView ? 'visible' : 'hidden',
@@ -575,7 +575,7 @@ export class GrwApp {
575575
{!state.networkError && (
576576
<grw-map
577577
reset-store-on-disconnected={'false'}
578-
class={this.isLargeView ? 'large-view-app-map-container' : 'app-map-container'}
578+
class={this.isLargeView ? 'grw-large-view-app-map-container' : 'grw-app-map-container'}
579579
style={{
580580
visibility:
581581
(this.showHomeMap && !this.showTrek) ||
@@ -610,7 +610,7 @@ export class GrwApp {
610610
(this.showTrek && state.currentTrek) ||
611611
(this.showTouristicContent && state.currentTouristicContent) ||
612612
(this.showTouristicEvent && state.currentTouristicEvent)) && (
613-
<div class="map-visibility-button-container">
613+
<div class="grw-map-visibility-button-container">
614614
<grw-extended-fab
615615
fontFamily={this.fontFamily}
616616
action={() => this.handleShowMap()}

0 commit comments

Comments
 (0)