Skip to content

Commit

Permalink
Merge pull request #116 from GeotrekCE/bpo_ajusting_style_bis
Browse files Browse the repository at this point in the history 
improve style
  • Loading branch information
@bastyen
bastyen authored Apr 25, 2024
2 parents 8fe4334 + a4efdda commit 0262777
Show file tree
Hide file tree
Showing 7 changed files with 163 additions and 137 deletions.
17 changes: 7 additions & 10 deletions src/components/grw-information-desk/grw-information-desk.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@
position: relative;
.information-desk-img {
width: 100%;
height: 100%;
max-height: 200px;
height: 200px;
object-fit: cover;
}
}
Expand All @@ -27,6 +26,11 @@
padding: 12px;
}

.information-desk-sub-container-short {
max-height: 200px;
overflow: hidden;
}

.information-desk-name {
font-size: 16px;
line-height: 24px;
Expand All @@ -38,13 +42,6 @@
line-height: 20px;
}

.information-desk-description-short {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}

.handle-information-desk-description {
cursor: pointer;
color: var(--color-primary-app);
Expand Down Expand Up @@ -83,7 +80,7 @@
position: relative;
border: none;
font-size: 14px;
margin: 12px 0px;
margin: 12px auto;
&:hover {
box-shadow: var(--elevation-2);
}
Expand Down
110 changes: 56 additions & 54 deletions src/components/grw-information-desk/grw-information-desk.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,61 +68,63 @@ export class GrwInformationDeskDetail {
</div>
)}
<div part="information-desk-sub-container" class="information-desk-sub-container">
{this.informationDesk.name && (
<div part="information-desk-name" class="information-desk-name">
{this.informationDesk.name}
</div>
)}
{this.informationDesk.latitude && this.informationDesk.longitude && (
<button part="center-on-map-button" class="center-on-map-button" onClick={() => this.handleCenterOnMap()}>
<span part="icon" class="icon" innerHTML={LocationSearchingIcon}></span>
<span part="label">{translate[state.language].centerOnMap}</span>
</button>
)}
{(this.informationDesk.postal_code || this.informationDesk.municipality || this.informationDesk.street) && (
<div part="information-desk-informations" class="information-desk-informations">
{this.informationDesk.postal_code && this.informationDesk.postal_code}
{this.informationDesk.municipality && ` ${this.informationDesk.municipality}`}
{this.informationDesk.street && ` ${this.informationDesk.street}`}
</div>
)}
{this.informationDesk.phone && (
<div class="phone-container">
<span part="icon" class="icon" innerHTML={CallIcon}></span>
<a part="label" class="label" href={`tel:${this.informationDesk.phone}`}>
{this.informationDesk.phone}
</a>
</div>
)}
{this.informationDesk.email && (
<div part="mail-container" class="mail-container">
<span part="icon" class="icon" innerHTML={MailIcon}></span>
<a part="label" class="label" href={`mailto:${this.informationDesk.email}`}>
{this.informationDesk.email}
</a>
</div>
)}
{this.informationDesk.website && (
<div part="link-container" class="link-container">
<span part="icon" class="icon" innerHTML={LinkIcon}></span>
<a part="label" class="label" href={`${this.informationDesk.website}`}>
{this.informationDesk.website}
</a>
</div>
)}
<div class={this.displayShortDescription ? "information-desk-sub-container-short" : ""}>
{this.informationDesk.name && (
<div part="information-desk-name" class="information-desk-name">
{this.informationDesk.name}
</div>
)}
{this.informationDesk.latitude && this.informationDesk.longitude && (
<button part="center-on-map-button" class="center-on-map-button" onClick={() => this.handleCenterOnMap()}>
<span part="icon" class="icon" innerHTML={LocationSearchingIcon}></span>
<span part="label">{translate[state.language].centerOnMap}</span>
</button>
)}
{(this.informationDesk.postal_code || this.informationDesk.municipality || this.informationDesk.street) && (
<div part="information-desk-informations" class="information-desk-informations">
{this.informationDesk.postal_code && this.informationDesk.postal_code}
{this.informationDesk.municipality && ` ${this.informationDesk.municipality}`}
{this.informationDesk.street && ` ${this.informationDesk.street}`}
</div>
)}
{this.informationDesk.phone && (
<div class="phone-container">
<span part="icon" class="icon" innerHTML={CallIcon}></span>
<a part="label" class="label" href={`tel:${this.informationDesk.phone}`}>
{this.informationDesk.phone}
</a>
</div>
)}
{this.informationDesk.email && (
<div part="mail-container" class="mail-container">
<span part="icon" class="icon" innerHTML={MailIcon}></span>
<a part="label" class="label" href={`mailto:${this.informationDesk.email}`}>
{this.informationDesk.email}
</a>
</div>
)}
{this.informationDesk.website && (
<div part="link-container" class="link-container">
<span part="icon" class="icon" innerHTML={LinkIcon}></span>
<a part="label" class="label" href={`${this.informationDesk.website}`}>
{this.informationDesk.website}
</a>
</div>
)}
{this.informationDesk.description && (
<div part="information-desk-description-container" class="information-desk-description-container">
<div
part="information-desk-description"
class='information-desk-description'
innerHTML={this.informationDesk.description}
ref={el => (this.descriptionRef = el)}
></div>
</div>
)}
</div>
{this.informationDesk.description && (
<div part="information-desk-description-container" class="information-desk-description-container">
<div
part="information-desk-description"
class={this.displayShortDescription ? 'information-desk-description information-desk-description-short' : 'information-desk-description'}
innerHTML={this.informationDesk.description}
ref={el => (this.descriptionRef = el)}
></div>
{false && (
<div part="handle-information-desk-description" class="handle-information-desk-description" onClick={() => this.handleInformationDeskDescription()}>
{this.displayShortDescription ? translate[state.language].readMore : translate[state.language].readLess}
</div>
)}
<div part="handle-information-desk-description" class="handle-information-desk-description" onClick={() => this.handleInformationDeskDescription()}>
{this.displayShortDescription ? translate[state.language].readMore : translate[state.language].readLess}
</div>
)}
</div>
Expand Down
19 changes: 19 additions & 0 deletions src/components/grw-outdoor-course-detail/grw-outdoor-course-detail.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -352,3 +352,22 @@ grw-outdoor-course-detail {
padding-left: 32px;
padding-bottom: 20px;
}

.accessibilities-container {
padding: 0px 24px 0px 24px;
font-size: 16px;
line-height: 24px;
font-weight: 400;
a {
color: var(--color-primary-app);
}
}

.accessibilities-title {
color: var(--color-on-surface);
font-size: 22px;
line-height: 28px;
font-weight: 400;
font-weight: bold;
margin-bottom: 16px;
}
11 changes: 11 additions & 0 deletions src/components/grw-outdoor-course-detail/grw-outdoor-course-detail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -383,6 +383,17 @@ export class GrwOutdoorCourseDetail {
</div>
</div>
)}
{this.currentOutdoorCourse.accessibility && (
<div>
<div part="divider" class="divider"></div>
<div part="accessibilities-container" class="accessibilities-container">
<div part="accessibilites-title" class="accessibilities-title">
{translate[state.language].accessibility}
</div>
<div part="accessibilities" innerHTML={this.currentOutdoorCourse.accessibility}></div>
</div>
</div>
)}
{state.trekTouristicContents && state.trekTouristicContents.length > 0 && (
<div>
<div part="divider" class="divider"></div>
Expand Down
17 changes: 0 additions & 17 deletions src/components/grw-outdoor-site-detail/grw-outdoor-site-detail.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -508,23 +508,6 @@ grw-outdoor-site-detail {
}
}

.source-container {
.source-sub-container {
display: flex;
align-items: center;
img {
width: 26px;
margin-right: 16px;
}
.source-name {
color: var(--color-on-surface);
font-size: 16px;
line-height: 20px;
font-weight: 500;
padding: 12px 0px;
}
}
}
.weblinks-container {
.weblink-container {
display: flex;
Expand Down
124 changes: 69 additions & 55 deletions src/components/grw-outdoor-site-detail/grw-outdoor-site-detail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -801,6 +801,29 @@ export class GrwOutdoorSiteDetail {
<div part="cities" innerHTML={this.currentOutdoorSite.cities.map(currentCity => state.cities.find(city => city.id === currentCity)?.name).join(', ')}></div>
</div>
)}
{state.currentPois && state.currentPois.length > 0 && (
<div>
<div part="divider" class="divider"></div>
<div part="pois-container" class="pois-container">
<div part="pois-title" class="pois-title" ref={el => (this.poiRef = el)}>
{translate[state.language].pois(state.currentPois.length)}
</div>
<div part="swiper-pois" class="swiper swiper-pois" ref={el => (this.swiperPoisRef = el)}>
<div part="swiper-wrapper" class="swiper-wrapper">
{state.currentPois.map(poi => (
<div part="swiper-slide" class="swiper-slide">
<grw-poi
exportparts="poi-type-img-container,poi-type,swiper-poi,swiper-wrapper,swiper-slide,poi-img,default-poi-img,swiper-pagination,swiper-button-prev,swiper-button-next,poi-sub-container,poi-name,poi-description,handle-poi-description"
poi={poi}
></grw-poi>
</div>
))}
</div>
<div part="swiper-scrollbar" class="swiper-scrollbar" ref={el => (this.poisSwiperScrollbar = el)}></div>
</div>
</div>
</div>
)}
{this.currentOutdoorSite.advice && (
<div>
<div part="divider" class="divider"></div>
Expand All @@ -817,32 +840,17 @@ export class GrwOutdoorSiteDetail {
</div>
</div>
)}
{state.currentInformationDesks &&
state.currentInformationDesks.filter(currentInformationDesks => this.currentOutdoorSite.information_desks.includes(currentInformationDesks.id)).length > 0 && (
<div>
<div part="divider" class="divider"></div>
<div part="information-desks-container" class="information-desks-container">
<div part="information-desks-title" class="information-desks-title" ref={el => (this.informationPlacesRef = el)}>
{translate[state.language].informationPlaces}
</div>
<div part="swiper-information-desks" class="swiper swiper-information-desks" ref={el => (this.swiperInformationDesksRef = el)}>
<div part="swiper-wrapper" class="swiper-wrapper">
{state.currentInformationDesks
.filter(currentInformationDesks => this.currentOutdoorSite.information_desks.includes(currentInformationDesks.id))
.map(informationDesk => (
<div part="swiper-slide" class="swiper-slide">
<grw-information-desk
exportparts="information-desk-img-container,information-desk-img,information-desk-sub-container,information-desk-name,center-on-map-button,icon,label,information-desk-informations,phone-container,mail-container,link-container,information-desk-description-container,information-desk-description,handle-information-desk-description"
informationDesk={informationDesk}
></grw-information-desk>
</div>
))}
</div>
<div part="swiper-scrollbar" class="swiper-scrollbar" ref={el => (this.informationDesksContentsSwiperScrollbar = el)}></div>
</div>
{this.currentOutdoorSite.accessibility && (
<div>
<div part="divider" class="divider"></div>
<div part="accessibilities-container" class="accessibilities-container">
<div part="accessibilites-title" class="accessibilities-title">
{translate[state.language].accessibility}
</div>
<div part="accessibilities" innerHTML={this.currentOutdoorSite.accessibility}></div>
</div>
)}
</div>
)}
{state.currentRelatedOutdoorSites && state.currentRelatedOutdoorSites.length > 0 && (
<div>
<div part="divider" class="divider"></div>
Expand Down Expand Up @@ -893,6 +901,43 @@ export class GrwOutdoorSiteDetail {
</div>
</div>
)}
{state.currentInformationDesks &&
state.currentInformationDesks.filter(currentInformationDesks => this.currentOutdoorSite.information_desks.includes(currentInformationDesks.id)).length > 0 && (
<div>
<div part="divider" class="divider"></div>
<div part="information-desks-container" class="information-desks-container">
<div part="information-desks-title" class="information-desks-title" ref={el => (this.informationPlacesRef = el)}>
{translate[state.language].informationPlaces}
</div>
<div part="swiper-information-desks" class="swiper swiper-information-desks" ref={el => (this.swiperInformationDesksRef = el)}>
<div part="swiper-wrapper" class="swiper-wrapper">
{state.currentInformationDesks
.filter(currentInformationDesks => this.currentOutdoorSite.information_desks.includes(currentInformationDesks.id))
.map(informationDesk => (
<div part="swiper-slide" class="swiper-slide">
<grw-information-desk
exportparts="information-desk-img-container,information-desk-img,information-desk-sub-container,information-desk-name,center-on-map-button,icon,label,information-desk-informations,phone-container,mail-container,link-container,information-desk-description-container,information-desk-description,handle-information-desk-description"
informationDesk={informationDesk}
></grw-information-desk>
</div>
))}
</div>
<div part="swiper-scrollbar" class="swiper-scrollbar" ref={el => (this.informationDesksContentsSwiperScrollbar = el)}></div>
</div>
</div>
</div>
)}
{/* TODO: insert access */}
{this.weather && city && (
<div>
<div part="divider" class="divider"></div>
<div part="weather-container" class="weather-container">
<iframe height="150" frameborder="0" src={`https://meteofrance.com/widget/prevision/${city.id}0#${this.colorPrimaryApp}`}></iframe>
</div>
</div>
)}
{/* TODO: insert Sources */}
{/* TODO: insert weblinks */}
{state.trekTouristicContents && state.trekTouristicContents.length > 0 && (
<div>
<div part="divider" class="divider"></div>
Expand Down Expand Up @@ -943,37 +988,6 @@ export class GrwOutdoorSiteDetail {
</div>
</div>
)}
{state.currentPois && state.currentPois.length > 0 && (
<div>
<div part="divider" class="divider"></div>
<div part="pois-container" class="pois-container">
<div part="pois-title" class="pois-title" ref={el => (this.poiRef = el)}>
{translate[state.language].pois(state.currentPois.length)}
</div>
<div part="swiper-pois" class="swiper swiper-pois" ref={el => (this.swiperPoisRef = el)}>
<div part="swiper-wrapper" class="swiper-wrapper">
{state.currentPois.map(poi => (
<div part="swiper-slide" class="swiper-slide">
<grw-poi
exportparts="poi-type-img-container,poi-type,swiper-poi,swiper-wrapper,swiper-slide,poi-img,default-poi-img,swiper-pagination,swiper-button-prev,swiper-button-next,poi-sub-container,poi-name,poi-description,handle-poi-description"
poi={poi}
></grw-poi>
</div>
))}
</div>
<div part="swiper-scrollbar" class="swiper-scrollbar" ref={el => (this.poisSwiperScrollbar = el)}></div>
</div>
</div>
</div>
)}
{this.weather && city && (
<div>
<div part="divider" class="divider"></div>
<div part="weather-container" class="weather-container">
<iframe height="150" frameborder="0" src={`https://meteofrance.com/widget/prevision/${city.id}0#${this.colorPrimaryApp}`}></iframe>
</div>
</div>
)}
<div part="detail-bottom-space" class="detail-bottom-space"></div>
</div>
)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/grw-trek-detail/grw-trek-detail.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -477,7 +477,7 @@ grw-trek-detail {
display: flex;
align-items: center;
img {
width: 26px;
width: 100px;
margin-right: 16px;
}
.source-name {
Expand Down

0 comments on commit 0262777

Please sign in to comment.