Skip to content
This repository has been archived by the owner on Jun 3, 2024. It is now read-only.

Commit

Permalink
Merge pull request #208 from QwantResearch/panel-no-results
Browse files Browse the repository at this point in the history 
QMAPS-806 - Implemented the 'no results' panel
  • Loading branch information
@amatissart
amatissart authored May 20, 2019
2 parents 5ef59e2 + a0b353b commit e328361
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 78 deletions.
5 changes: 4 additions & 1 deletion src/panel/category_panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export default class CategoryPanel {
this.active = false
this.poiSubClass = poiSubClass
this.PoiMarkers = []
this.loading = false

UrlState.registerUrlShard(this, 'places', paramTypes.RESOURCE)
PanelManager.register(this)
Expand Down Expand Up @@ -51,13 +52,15 @@ export default class CategoryPanel {
}

async search() {
this.loading = true
let bbox = window.map.bbox()
let urlBBox = [bbox.getWest(),bbox.getSouth(),bbox.getEast(),bbox.getNorth()]
.map((cardinal) => cardinal.toFixed(7))
.join(',')

this.pois = await IdunnPoi.poiCategoryLoad(urlBBox, 50, this.categoryName)


this.loading = false
this.panel.update()
let container = document.querySelector(".category__panel__scroll");
if(container){
Expand Down
52 changes: 48 additions & 4 deletions src/scss/includes/panels/categories.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,6 @@
@include card_radius();
}

.category__panel--hidden {
display: none;
}

.category__panel__scroll {
position: relative;
overflow-y: auto;
Expand Down Expand Up @@ -178,3 +174,51 @@
margin: 0 5px 0 0;
}
}

.category__panel__notfound {
position: relative;
width: 400px;
border-radius: 3px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.16);
background-color: #ffffff;
padding: 35px 70px;
text-align: center;
}

.category__panel__notfound .category__panel__close {
position: absolute;
top: 9px;
right: 9px;
color: $secondary_text;
}

.category__panel__warning {
width: 24px;
height: 24px;
display: inline-block;
font-size: 26px;
color: rgba(0, 0, 0, 0.16);
margin-bottom: 8px;
}

.category__panel__close_text {
text-align: center;
color: #48718b;
margin-bottom: 15px;
}

.category__panel__back {
cursor: pointer;
text-transform: uppercase;
color: $secondary_text;
font-size: 12px;
}

.category__panel__back_icon {
display: inline-block;
vertical-align: bottom;
width: 16px;
height: 16px;
position: relative;
font-size: 16px;
}
161 changes: 88 additions & 73 deletions src/views/category_panel.dot
View file
Original file line number Diff line number Diff line change
@@ -1,86 +1,101 @@
{{? this.pois && this.pois.length }}
{{? this.pois && this.active }}

{{? this.pois.length }}
<div class="category__panel">
<div class="category__panel__head">
<span class="category__panel__logo_pj"></span>
<span class="category__panel__title">{{= _('PAGES JAUNES', 'categories') }}</span>
<span class="category__panel__close icon-x" {{= click(this.closeAction) }}></span>
<span class="category__panel__partnership">{{= _('Partnership', 'categories') }}</span>
<span class="category__panel__partnership_icon">i</span>
</div>
<div class="category__panel__scroll">
{{~ this.pois:poi:i }}

<div class="category__panel{{= this.active ? '' : ' category__panel--hidden' }}">
<div class="category__panel__head">
<span class="category__panel__logo_pj"></span>
<span class="category__panel__title">{{= _('PAGES JAUNES', 'categories') }}</span>
<span class="category__panel__close icon-x" {{= click(this.closeAction) }}></span>
<span class="category__panel__partnership">{{= _('Partnership', 'categories') }}</span>
<span class="category__panel__partnership_icon">i</span>
</div>
<div class="category__panel__scroll">
{{~ this.pois:poi:i }}
{{
let phoneBlock = poi.blocks.find((block) => block.type === 'phone');
let phoneNumber = null;
if(phoneBlock) {
phoneNumber = phoneBlock.international_format;
}

{{
let phoneBlock = poi.blocks.find((block) => block.type === 'phone');
let phoneNumber = null;
if(phoneBlock) {
phoneNumber = phoneBlock.international_format;
}
let imagesBlock = poi.blocks.find((block) => block.type === 'images');
let image = null;
if(imagesBlock) {
image = imagesBlock.images[0].url;
}

let imagesBlock = poi.blocks.find((block) => block.type === 'images');
let image = null;
if(imagesBlock) {
image = imagesBlock.images[0].url;
}
let ico = IconManager.get(poi);

let ico = IconManager.get(poi);
}}

}}
<div class="category__panel__item" {{= click(this.selectPoi, this, poi) }} {{= mouseover(this.highlightPoiMarker, this, poi) }} {{= mouseout(this.unhighlightPoiMarker, this, poi) }}>
<div class="category__panel__item_inner">

<div class="category__panel__item" {{= click(this.selectPoi, this, poi) }} {{= mouseover(this.highlightPoiMarker, this, poi) }} {{= mouseout(this.unhighlightPoiMarker, this, poi) }}>
<div class="category__panel__item_inner">
<div class="category__panel__image" {{? image}}style="background-image:url('{{= image}}')"{{?}}>

<div class="category__panel__image" {{? image}}style="background-image:url('{{= image}}')"{{?}}>
{{? !image && ico }}
<div class="poi_panel__title__symbol icon icon-{{= ico.iconClass }}" style="color:{{= ico.color ? ico.color : '#444648' }}"></div>
{{?}}

{{? !image && ico }}
<div class="poi_panel__title__symbol icon icon-{{= ico.iconClass }}" style="color:{{= ico.color ? ico.color : '#444648' }}"></div>
{{?}}
</div>

</div>
<h3 class="category__panel__name">
{{= poi.getInputValue() }}
</h3>

<h3 class="category__panel__name">
{{= poi.getInputValue() }}
</h3>

{{? poi.subClassName }}
<p class="category__panel__type">
{{= this.poiSubClass(poi.subClassName) }}
</p>
{{?}}

{{? poi.address && poi.address.label }}
<p class="category__panel__address">
{{= this.htmlEncode(poi.address.label) }}
</p>
{{?}}

<!-- <div class="category__panel__note">
<span class="icon-icon_star-filled"></span>
<span class="icon-icon_star"></span>
<span class="icon-icon_star"></span>
<span class="icon-icon_star"></span>
<span class="icon-icon_star"></span>
???
{{= _('reviews', 'categories') }}
</div-->

{{= this.minimalHourPanel.set(poi).render() }}

{{? phoneNumber }}

<div class="category__panel__phone" {{= click(this.showPhoneNumber, this, {poi, i}) }}>
<span class="icon-icon_phone"></span>
<span id="category__panel__phone_hidden_{{= i}}">{{= _('See the phone number', 'categories') }}</span>
<span id="category__panel__phone_revealed_{{= i}}" style="display: none">{{= phoneNumber }}</span>
</div>
{{? poi.subClassName }}
<p class="category__panel__type">
{{= this.poiSubClass(poi.subClassName) }}
</p>
{{?}}

{{?}}
{{? poi.address && poi.address.label }}
<p class="category__panel__address">
{{= this.htmlEncode(poi.address.label) }}
</p>
{{?}}

</div>
</div>
{{~}}
</div>
</div>
<!-- <div class="category__panel__note">
<span class="icon-icon_star-filled"></span>
<span class="icon-icon_star"></span>
<span class="icon-icon_star"></span>
<span class="icon-icon_star"></span>
<span class="icon-icon_star"></span>
???
{{= _('reviews', 'categories') }}
</div-->

{{= this.minimalHourPanel.set(poi).render() }}

{{? phoneNumber }}

<div class="category__panel__phone" {{= click(this.showPhoneNumber, this, {poi, i}) }}>
<span class="icon-icon_phone"></span>
<span id="category__panel__phone_hidden_{{= i}}">{{= _('See the phone number', 'categories') }}</span>
<span id="category__panel__phone_revealed_{{= i}}" style="display: none">{{= phoneNumber }}</span>
</div>

{{?}}
{{?}}

</div>
</div>
{{~}}
</div>
</div>

{{?? !this.loading }}
<div class="category__panel__notfound">
<button class="category__panel__close icon-x" {{= click(this.closeAction) }}>
</button>
<div class="category__panel__warning icon-alert-triangle"></div>
<div class="category__panel__close_text">
{{= _('Qwant Maps found no results, please rephrase your query or zoom out of the map.', 'categories') }}
</div>
<div class="category__panel__back" {{= click(this.closeAction) }}>
<span class="category__panel__back_icon icon-chevron-left"></span>
{{= _('return') }}
</div>
</div>
{{?}}
{{?}}

0 comments on commit e328361

Please sign in to comment.