diff --git a/src/panel/poi_panel.js b/src/panel/poi_panel.js index 903457589..cfe1bdfd6 100644 --- a/src/panel/poi_panel.js +++ b/src/panel/poi_panel.js @@ -5,6 +5,7 @@ import PoiBlocContainer from './poi_bloc/poi_bloc_container'; import SearchInput from '../ui_components/search_input'; import Telemetry from '../libs/telemetry'; import headerPartial from '../views/poi_partial/header.dot'; +import titleImagePartial from '../views/poi_partial/title_image.dot'; import MinimalHourPanel from './poi_bloc/opening_minimal'; import layouts from './layouts.js'; import nconf from '@qwant/nconf-getter'; @@ -27,6 +28,7 @@ function PoiPanel(sharePanel) { this.lang = window.getBaseLang().code; this.card = true; this.headerPartial = headerPartial; + this.titleImagePartial = titleImagePartial; this.minimalHourPanel = new MinimalHourPanel(); this.isDirectionActive = nconf.get().direction.enabled; this.categories = CategoryService.getCategories(); diff --git a/src/scss/includes/panels/poi_panel.scss b/src/scss/includes/panels/poi_panel.scss index 56908f68b..418a25043 100644 --- a/src/scss/includes/panels/poi_panel.scss +++ b/src/scss/includes/panels/poi_panel.scss @@ -2,7 +2,6 @@ $BLOCK_INDENT: 28px; $CARD_ACTION_WIDTH: 112px; -$CARD_ACTION_RIGHT_MARGIN: 8px; $CARD_PADDING: 8px; $BLOCK_PADDING: 24px; $BLOCK_ICON_FONT_SIZE: 16px; @@ -30,10 +29,8 @@ $HEADER_SIZE: 40px; background-size: cover; background-position: center center; background-color: white; - position: absolute; - top: 0px; - right: 0; } + .poi_panel--hidden { display: none; } @@ -48,16 +45,6 @@ $HEADER_SIZE: 40px; position: relative; } -.poi_panel__content__card__content { - float: left; - width: calc(100vw - (2 * #{$CARD_PADDING} + #{$CARD_ACTION_WIDTH} + #{$CARD_ACTION_RIGHT_MARGIN})); -} - -.poi_panel__content__card__action__container { - margin-top: 42px; - float: right; -} - .poi_panel__content__card__action { display: block; width: $CARD_ACTION_WIDTH; @@ -68,7 +55,7 @@ $HEADER_SIZE: 40px; font-weight: 600; color: $primary_text; border-radius: 18px; - margin: 0 $CARD_ACTION_RIGHT_MARGIN 8px 0; + margin: 8px 0; cursor: pointer; text-align: center; /* secure long translation */ @@ -76,10 +63,6 @@ $HEADER_SIZE: 40px; overflow: hidden; } -.poi_panel__content__card__action__direction { - margin: 0 $CARD_ACTION_RIGHT_MARGIN 8px 0; -} - .poi_panel__close { position: absolute; right: 11px; @@ -134,17 +117,10 @@ $HEADER_SIZE: 40px; } .poi_panel__description_container { - position: relative; - padding: 0 120px 0 0; margin-bottom: 25px; cursor: pointer; - min-height: 50px; -} - -.poi_panel__description_container:after { - display: block; - clear: both; - content: ''; + display: flex; + justify-content: space-between; } /* wrap it into an element and then put padding on this new element instead */ @@ -313,75 +289,37 @@ $HEADER_SIZE: 40px; } .poi_panel__actions { - width: 100%; - position: relative; - margin-bottom: 10px; - overflow: auto; + display: flex; + margin-bottom: 12px; } -.button_container { - float: left; - text-decoration: none; +.poi_panel__action { + font-size: 22px; + color: $secondary_text; + cursor: pointer; + height: auto; text-align: center; - min-width: 45px; - - &:not(:last-child){ - margin-right: 15px; - max-width: calc(23% - 20px); - } - &.poi_panel__actions__phone_container { - max-width: 28%; - } - - &:not(:first-child){ - min-width: 20% + div { + margin: 9px 0; + font-family: Asap; + font-size: 12px; } - &:hover { + color: $primary_text; text-decoration: none; } - button { - width: 100%; - display: block; - cursor: pointer; + &:not(:last-child){ + margin-right: 15px; } -} -.button_container:hover { - button, div { - color: $primary_text; + &:not(:first-child){ + min-width: 20% } } -.button_container:hover { - cursor: pointer; -} - -.poi_panel__actions__icon { - display: inline-block; - height: 25px; - font-size: 22px; - color: $secondary_text; - vertical-align: middle; -} - -.poi_panel__actions__text { - display: flex; - justify-content: center; - height: 25px; - font-size: 12px; - color: $secondary_text; - margin: 7px 0 0; -} - -.poi_panel__actions__text:hover { - color: $primary_text; -} - - .poi_panel__store_status__toggle:after { content: ''; } @@ -468,12 +406,6 @@ $HEADER_SIZE: 40px; .poi_panel__title__symbol { font-size: 45px; color: #E93865; - - .poi_panel & { - position: absolute; - right: 0px; - top: 5px; - } } /* symbols */ @@ -583,14 +515,14 @@ $HEADER_SIZE: 40px; } .service_panel__categories--poi { - margin: 15px 0; + margin-bottom: 12px; border-top: 1px solid rgba(0,0,0,.16); .service_panel__categories_title { font-weight: normal; font-size: 16px; color: #495063; - margin: 20px 0 15px 12px; + margin: 15px 0; .icon-icon_compass { color: #c8cbd3; @@ -667,6 +599,22 @@ $HEADER_SIZE: 40px; } } +.poi_panel__content__card .poi_panel__description_container { + flex-grow: 1; + margin: 0; + flex-direction: row-reverse; + justify-content: flex-end; + + .poi_panel__image { + display: none; + } + + .poi_panel__title__symbol { + display: block; + margin: -9px 3px 0 0; + } +} + @media (max-width: 640px) { .poi_panel { width: 100vw; @@ -727,23 +675,17 @@ $HEADER_SIZE: 40px; min-height: 125px; } - .poi_panel__content__card { - display: none; - } - .poi_panel--card .poi_panel__content { display: none; } .poi_panel--card .poi_panel__content__card { - display: block; + display: flex; + justify-content: space-between; + padding: 20px $CARD_PADDING $CARD_PADDING; } .poi_panel--card { - .poi_panel__title { - width: auto; - padding-top: 20px; - } .poi_panel__address { font-size: 14px; padding: 8px 10px 0 0; @@ -782,12 +724,6 @@ $HEADER_SIZE: 40px; margin-top: 17px; } - .poi_panel__content__card__content .poi_panel__title__symbol.icon { - margin: 6px 0 0 7px; - right: initial; - padding-left: 0; - } - .poi_panel__info__section:not(:last-of-type):after { width: calc(100% - 40px); } @@ -796,21 +732,6 @@ $HEADER_SIZE: 40px; width: 100%; } - .poi_panel__content__card__content > .poi_panel__address, .poi_panel__content__card__content > * { - padding-left: 55px; - } - - .poi_panel__content__card__content .poi_panel__image { - display: none; - } - .poi_panel__image + .poi_panel__title__symbol { - display: block; - } - - .poi_panel__content__card__action__container { - margin-top: 26px; - } - .poi_panel__content__card__action__direction { background-color: $primary_text; border-color: $primary_text; diff --git a/src/views/poi_panel.dot b/src/views/poi_panel.dot index 82bca769c..a13dadb9d 100644 --- a/src/views/poi_panel.dot +++ b/src/views/poi_panel.dot @@ -55,9 +55,12 @@ {{?}} -
- {{= this.panel.renderPartial(this.headerPartial) }} - {{= this.minimalHourPanel.render() }} +
+
+ {{= this.panel.renderPartial(this.headerPartial) }} + {{= this.minimalHourPanel.render() }} +
+ {{= this.panel.renderPartial(this.titleImagePartial) }}
{{? this.isDirectionActive }} @@ -78,64 +81,49 @@
{{= this.panel.renderPartial(this.headerPartial) }} + {{= this.panel.renderPartial(this.titleImagePartial) }}
-
- {{? this.poi.stored}} - -
{{= _('SAVED', 'poi') }}
- {{??}} - -
{{= _('FAVORITES', 'poi') }}
- {{?}} -
- + + {{? this.isDirectionActive }} -
- -
{{= _('DIRECTIONS', 'poi') }}
-
+ {{?}} {{? this.poi.blocksByType.phone}} {{? this.shouldPhoneBeHidden() }} - - -
{{= _('SHOW NUMBER', 'poi') }}
- + {{?}} {{?}}
{{? isAnywherePoi && this.categories }}
-

{{= _("Search around this place", "poi") }}

{{~ this.categories:category:index }} - {{? - !this.mustDeployCategories || - (this.mustDeployCategories && !this.isDeployed && index + 1 < 8) || - (this.mustDeployCategories && this.isDeployed) - }} - - {{?}} - {{~}} + + {{~}}
{{?}} diff --git a/src/views/poi_partial/header.dot b/src/views/poi_partial/header.dot index 8958a390a..a6e28f307 100644 --- a/src/views/poi_partial/header.dot +++ b/src/views/poi_partial/header.dot @@ -1,47 +1,39 @@ {{ - const ico = IconManager.get(this.poi); const grades = this.poi.blocksByType ? this.poi.blocksByType.grades : null; }} -

- {{? this.poi.localName && this.poi.name }} - {{= this.htmlEncode(this.poi.name) }} - {{? this.poi.localName !== this.poi.name }} -

{{= this.htmlEncode(this.poi.localName) }}

+
+

+ {{? this.poi.localName && this.poi.name }} + {{= this.htmlEncode(this.poi.name) }} + {{? this.poi.localName !== this.poi.name }} +

{{= this.htmlEncode(this.poi.localName) }}

+ {{?}} + {{?? this.poi.name }} + {{= this.htmlEncode(this.poi.name) }} + {{?? this.poi.localName }} + {{= this.htmlEncode(this.poi.localName) }} + {{??}} + {{= this.poiSubClass(this.poi.subClassName) }} {{?}} - {{?? this.poi.name }} - {{= this.htmlEncode(this.poi.name) }} - {{?? this.poi.localName }} - {{= this.htmlEncode(this.poi.localName) }} - {{??}} - {{= this.poiSubClass(this.poi.subClassName) }} +

+ {{? this.poi.subClassName }} +

{{= this.poiSubClass(this.poi.subClassName) }}

{{?}} -

-{{? this.poi.subClassName }} -

{{= this.poiSubClass(this.poi.subClassName) }}

-{{?}} -{{? this.poi.address && this.poi.address.label }} -

- {{= this.htmlEncode(this.poi.address.label) }} -

-{{?}} -{{? grades }} - - {{~ [...Array(5)]:star:k }} - - {{~}} - - - {{= grades.total_grades_count }} {{= _n('review', 'reviews', grades.total_grades_count) }} - - -{{?}} -{{? ico }} -
-{{??}} -
-{{?}} -{{? this.poi.topImageUrl }} -
-{{?}} + {{? this.poi.address && this.poi.address.label }} +

+ {{= this.htmlEncode(this.poi.address.label) }} +

+ {{?}} + {{? grades }} + + {{~ [...Array(5)]:star:k }} + + {{~}} + + {{= grades.total_grades_count }} {{= _n('review', 'reviews', grades.total_grades_count) }} + + + {{?}} +
diff --git a/src/views/poi_partial/title_image.dot b/src/views/poi_partial/title_image.dot new file mode 100644 index 000000000..f02eb1af7 --- /dev/null +++ b/src/views/poi_partial/title_image.dot @@ -0,0 +1,15 @@ +{{ + const ico = IconManager.get(this.poi); +}} + +
+ {{? this.poi.topImageUrl }} +
+ {{?}} + {{? ico }} +
+ {{??}} +
+ {{?}} +
+ diff --git a/tests/integration/tests/poi.js b/tests/integration/tests/poi.js index 189da8f20..24407fd42 100644 --- a/tests/integration/tests/poi.js +++ b/tests/integration/tests/poi.js @@ -143,7 +143,7 @@ test('center the map to the poi on a poi click', async () => { window.MAP_MOCK.flyTo({ center: { lat: 0, lng: 0 }, zoom: 10 }); }); await wait(300); - await page.click('.poi_panel__description_container'); + await page.click('.poi_panel__content .poi_panel__description_container'); const center = await page.evaluate(() => { return window.MAP_MOCK.getCenter(); }); @@ -158,7 +158,7 @@ test('display details about the poi on a poi click', async () => { await page.waitForSelector('.poi_panel__title'); expect.assertions(8); - await page.click('.poi_panel__description_container'); + await page.click('.poi_panel__content .poi_panel__description_container'); let infoTitle = await page.evaluate(() => { return document.querySelector('.poi_panel__sub_block__title').innerText; }); @@ -176,7 +176,7 @@ test('display details about the poi on a poi click', async () => { contact: document.querySelector('.poi_panel__info__contact').innerText, contactUrl: document.querySelector('.poi_panel__info__contact').href, hours: document.querySelector('.poi_panel__info__hours__status').innerText, - phone: document.querySelector('.poi_panel__actions__phone_container').innerText, + phone: document.querySelector('.poi_phone_container_revealed').innerText, website: document.querySelector('.poi_panel__info__link').innerText, }; });