Skip to content

Commit

Permalink
add grw- prefix to class name
Browse files Browse the repository at this point in the history
  • Loading branch information
@bastyen
bastyen committed Feb 7, 2024
1 parent c10a3d5 commit a9d074d
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 60 deletions.
82 changes: 41 additions & 41 deletions src/components/grw-app/grw-app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,30 +8,30 @@ grw-app {
max-height: 100dvh;
}

.app-container {
.grw-app-container {
position: relative;
background-color: var(--color-background);
width: 100%;
height: 100%;
overflow: hidden;
}

.languages-container {
.grw-languages-container {
display: flex;
align-items: center;
justify-content: flex-end;
margin: 16px 16px 0px 0px;
}

.header-container,
.large-view-header-container {
.grw-header-container,
.grw-large-view-header-container {
height: var(--header-height);
.arrow-back-container {
.grw-arrow-back-container {
display: flex;
align-items: center;
height: 100%;
margin: 0px 16px;
.arrow-back-icon {
.grw-arrow-back-icon {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
color: var(--color-on-surface);
Expand All @@ -46,35 +46,35 @@ grw-app {
}
}

.handle-search-filters-container {
.grw-handle-search-filters-container {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0px 16px;
height: 64px;

.handle-search-container {
.grw-handle-search-container {
width: calc(50% + 48px);
max-width: 220px;
}
.handle-filters-container {
.grw-handle-filters-container {
margin-left: 16px;
}
}

.header-detail {
.grw-header-detail {
height: 64px;
}

.large-view-header-container {
.handle-search-filters-container {
.grw-large-view-header-container {
.grw-handle-search-filters-container {
justify-content: flex-start;
}
}

.init-loader-container,
.loader-container,
.large-view-loader-container {
.grw-init-loader-container,
.grw-loader-container,
.grw-large-view-loader-container {
position: absolute;
display: flex;
justify-content: center;
Expand All @@ -83,39 +83,39 @@ grw-app {
background-color: var(--color-background);
}

.content-container {
.grw-content-container {
position: relative;
display: flex;
height: calc(100% - var(--header-height));
}

.content-treks {
.grw-content-treks {
height: calc(100% - var(--header-height));
}

.content-trek {
.grw-content-trek {
height: 100%;
}

.large-view-app-treks-list-container,
.large-view-app-trek-detail-container,
.large-view-app-touristic-content-detail-container,
.large-view-app-touristic-event-detail-container,
.large-view-app-treks-list-container,
.large-view-app-trek-detail-container {
.grw-large-view-app-treks-list-container,
.grw-large-view-app-trek-detail-container,
.grw-large-view-app-touristic-content-detail-container,
.grw-large-view-app-touristic-event-detail-container,
.grw-large-view-app-treks-list-container,
.grw-large-view-app-trek-detail-container {
display: flex;
flex-direction: column;
max-width: 100%;
height: 100%;
}

.app-map-container,
.large-view-app-map-container {
.grw-app-map-container,
.grw-large-view-app-map-container {
width: 100%;
height: 100%;
}

.map-visibility-button-container {
.grw-map-visibility-button-container {
display: flex;
align-items: center;
justify-content: center;
Expand All @@ -125,15 +125,15 @@ grw-app {
z-index: 4;
}

.init-loader-container,
.loader-container {
.grw-init-loader-container,
.grw-loader-container {
width: 100%;
}

.app-treks-list-container,
.app-trek-detail-container,
.app-touristic-content-detail-container,
.app-touristic-event-detail-container {
.grw-app-treks-list-container,
.grw-app-trek-detail-container,
.grw-app-touristic-content-detail-container,
.grw-app-touristic-event-detail-container {
width: 100%;
}

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

.app-map-container {
.grw-app-map-container {
width: 100%;
position: absolute;
}

.large-view-loader-container {
.grw-large-view-loader-container {
width: 50%;
}

.large-view-app-treks-list-container,
.large-view-app-trek-detail-container,
.large-view-app-touristic-content-detail-container,
.large-view-app-touristic-event-detail-container {
.grw-large-view-app-treks-list-container,
.grw-large-view-app-trek-detail-container,
.grw-large-view-app-touristic-content-detail-container,
.grw-large-view-app-touristic-event-detail-container {
width: 50%;
}

.large-view-app-map-container {
.grw-large-view-app-map-container {
position: relative;
width: 50%;
}

.error-container {
.grw-error-container {
display: flex;
flex-direction: column;
align-items: center;
Expand Down
38 changes: 19 additions & 19 deletions src/components/grw-app/grw-app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -335,7 +335,7 @@ export class GrwApp {
!state.currentTouristicEvent &&
!state.currentTouristicContents &&
!state.currentTouristicEvents && (
<div class="init-loader-container">
<div class="grw-init-loader-container">
<grw-loader color-primary-container={this.colorPrimaryContainer} color-on-primary-container={this.colorOnPrimaryContainer}></grw-loader>
</div>
)}
Expand Down Expand Up @@ -403,15 +403,15 @@ export class GrwApp {
state.currentTouristicContent ||
state.currentTouristicEvent ||
state.networkError) && (
<div class="app-container">
<div class="grw-app-container">
{state.languages && state.languages.length > 1 && (
<div class="languages-container">
<div class="grw-languages-container">
<grw-select-language></grw-select-language>
</div>
)}
<div
class={`${this.isLargeView ? 'large-view-header-container' : 'header-container'}${
this.showTrek || this.showTouristicContent || this.showTouristicEvent ? ' header-detail' : ''
class={`${this.isLargeView ? 'grw-large-view-header-container' : 'grw-header-container'}${
this.showTrek || this.showTouristicContent || this.showTouristicEvent ? ' grw-header-detail' : ''
}`}
>
{Number(this.treks) + Number(this.touristicContents) + Number(this.touristicEvents) > 1 &&
Expand All @@ -426,11 +426,11 @@ export class GrwApp {
></grw-segmented-segment>
)}
{!this.showTrek && !this.showTouristicContent && !this.showTouristicEvent ? (
<div class="handle-search-filters-container">
<div class="handle-search-container">
<div class="grw-handle-search-filters-container">
<div class="grw-handle-search-container">
<grw-search fontFamily={this.fontFamily}></grw-search>
</div>
<div class="handle-filters-container">
<div class="hgrw-andle-filters-container">
<grw-common-button
fontFamily={this.fontFamily}
action={() => this.handleFilters()}
Expand All @@ -440,8 +440,8 @@ export class GrwApp {
</div>
</div>
) : (
<div class="arrow-back-container">
<button onClick={() => this.handleBackButton()} class="arrow-back-icon">
<div class="grw-arrow-back-container">
<button onClick={() => this.handleBackButton()} class="grw-arrow-back-icon">
{/* @ts-ignore */}
<span translate={false} class="material-symbols material-symbols-outlined">
arrow_back
Expand All @@ -451,15 +451,15 @@ export class GrwApp {
)}
</div>

<div class={`content-container ${this.showTrek || this.showTouristicContent || this.showTouristicEvent ? 'content-trek' : 'content-treks'}`}>
<div class={`grw-content-container ${this.showTrek || this.showTouristicContent || this.showTouristicEvent ? 'grw-content-trek' : 'grw-content-treks'}`}>
{state.networkError && (
<div class="error-container">
<div class="grw-error-container">
Une erreur est survenue.
<grw-common-button icon="refresh" name="Recharger la page" action={() => this.reload()}></grw-common-button>
</div>
)}
<div
class={this.isLargeView ? 'large-view-app-treks-list-container' : 'app-treks-list-container'}
class={this.isLargeView ? 'grw-large-view-app-treks-list-container' : 'grw-app-treks-list-container'}
style={{ display: this.showTrek || this.showTouristicContent || this.showTouristicEvent ? 'none' : 'flex', position: this.showTrek ? 'absolute' : 'relative' }}
>
{state.mode === 'treks' && this.treks && (
Expand Down Expand Up @@ -505,12 +505,12 @@ export class GrwApp {
(!state.treks && state.mode === 'treks') ||
(!state.touristicContents && state.mode === 'touristicContents') ||
(!state.touristicEvents && state.mode === 'touristicEvents')) && (
<div class={this.isLargeView ? 'large-view-loader-container' : 'loader-container'}>
<div class={this.isLargeView ? 'grw-large-view-loader-container' : 'grw-loader-container'}>
<grw-loader color-primary-container={this.colorSecondaryContainer} color-on-primary-container={this.colorOnSecondaryContainer}></grw-loader>
</div>
)}
{this.showTrek && (
<div class={this.isLargeView ? 'large-view-app-trek-detail-container' : 'app-trek-detail-container'}>
<div class={this.isLargeView ? 'grw-large-view-app-trek-detail-container' : 'grw-app-trek-detail-container'}>
<grw-trek-detail
style={{
visibility: (!this.showTrekMap && this.showTrek) || this.isLargeView ? 'visible' : 'hidden',
Expand All @@ -533,7 +533,7 @@ export class GrwApp {
</div>
)}
{this.showTouristicContent && (
<div class={this.isLargeView ? 'large-view-app-touristic-content-detail-container' : 'app-touristic-content-detail-container'}>
<div class={this.isLargeView ? 'grw-large-view-app-touristic-content-detail-container' : 'grw-app-touristic-content-detail-container'}>
<grw-touristic-content-detail
style={{
visibility: !this.showTouristicContentMap || this.isLargeView ? 'visible' : 'hidden',
Expand All @@ -553,7 +553,7 @@ export class GrwApp {
</div>
)}
{this.showTouristicEvent && (
<div class={this.isLargeView ? 'large-view-app-touristic-event-detail-container' : 'app-touristic-event-detail-container'}>
<div class={this.isLargeView ? 'grw-large-view-app-touristic-event-detail-container' : 'grw-app-touristic-event-detail-container'}>
<grw-touristic-event-detail
style={{
visibility: !this.showTouristicEventMap || this.isLargeView ? 'visible' : 'hidden',
Expand All @@ -575,7 +575,7 @@ export class GrwApp {
{!state.networkError && (
<grw-map
reset-store-on-disconnected={'false'}
class={this.isLargeView ? 'large-view-app-map-container' : 'app-map-container'}
class={this.isLargeView ? 'grw-large-view-app-map-container' : 'grw-app-map-container'}
style={{
visibility:
(this.showHomeMap && !this.showTrek) ||
Expand Down Expand Up @@ -610,7 +610,7 @@ export class GrwApp {
(this.showTrek && state.currentTrek) ||
(this.showTouristicContent && state.currentTouristicContent) ||
(this.showTouristicEvent && state.currentTouristicEvent)) && (
<div class="map-visibility-button-container">
<div class="grw-map-visibility-button-container">
<grw-extended-fab
fontFamily={this.fontFamily}
action={() => this.handleShowMap()}
Expand Down

0 comments on commit a9d074d

Please sign in to comment.