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

Commit d78a0e3

Browse files
amatissartamatissart
authored
Merge pull request #209 from QwantResearch/RWD
Mobile / Design fixes
2 parents 9e7e804 + ae2d1da commit d78a0e3

12 files changed

+94
-29
lines changed

‎src/adapters/poi_popup.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,9 @@ PoiPopup.prototype.addListener = function(layer) {
3535
})
3636

3737
this.map.on('mouseleave', layer, async () => {
38-
this.popupHandle.remove()
38+
if(this.popupHandle){
39+
this.popupHandle.remove()
40+
}
3941
clearTimeout(this.timeOutHandler)
4042
})
4143
}

‎src/adapters/suggest.js

+9-8
Original file line numberDiff line numberDiff line change
@@ -100,17 +100,18 @@ export default class Suggest {
100100
const itemId = item.getAttribute('data-id')
101101

102102
if ('category' === type) {
103-
return PanelManager.openCategory({
103+
PanelManager.openCategory({
104104
category: CategoryService.getCategoryByName(val)
105105
})
106106
}
107-
108-
let prefixPoint = this.prefixes.find((prefix) => prefix.id === itemId)
109-
if(prefixPoint) {
110-
this.onSelect(prefixPoint)
111-
} else {
112-
let poi = items.find(poi => poi.id === itemId)
113-
this.onSelect(poi)
107+
else {
108+
let prefixPoint = this.prefixes.find((prefix) => prefix.id === itemId)
109+
if(prefixPoint) {
110+
this.onSelect(prefixPoint)
111+
} else {
112+
let poi = items.find(poi => poi.id === itemId)
113+
this.onSelect(poi)
114+
}
114115
}
115116
this.searchInputDomHandler.blur()
116117
}

‎src/panel/category_panel.js

+1
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,7 @@ export default class CategoryPanel {
120120
fire('fit_map', poi, layouts.LIST)
121121
this.close(false)
122122
PanelManager.loadPoiById(poi.id, {isFromList : true, list: this})
123+
this.highlightPoiMarker(poi)
123124
}
124125

125126
highlightPoiMarker(poi){

‎src/panel/direction/direction_panel.js

+3
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,9 @@ export default class DirectionPanel {
159159
}
160160

161161
close() {
162+
if(!this.active){
163+
return
164+
}
162165
Telemetry.add(Telemetry.ITINERARY_CLOSE)
163166
SearchInput.unMinify()
164167
document.querySelector('#panels').classList.remove('panels--direction-open')

‎src/panel/poi_panel.js

-1
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,6 @@ PoiPanel.prototype.close = async function() {
9898
this.panel.update()
9999
this.sceneState.unsetPoiID()
100100
UrlState.pushUrl()
101-
PanelManager.openService()
102101
}
103102

104103
PoiPanel.prototype.restorePoi = async function (id) {

‎src/proxies/panel_manager.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ PanelManager.init = function () {
1111
window.__panel_manager = {panels : []}
1212
}
1313

14-
PanelManager.setPoi = async function(poi, options) {
14+
PanelManager.setPoi = async function(poi, options = {}) {
1515
__panel_manager.panels.forEach((panel) => {
1616
if(panel.isPoiComplient) {
1717
panel.setPoi(poi, options)
18-
} else {
18+
} else if(!options.isFromList && !options.isFromFavorite){
1919
panel.close()
2020
}
2121
})

‎src/scss/includes/app.scss

+9-7
Original file line numberDiff line numberDiff line change
@@ -140,10 +140,12 @@ BODY {
140140
display: none;
141141
}
142142

143-
.map_container .marker:hover{
144-
z-index: 10;
143+
.map_container .marker.active ,
144+
.map_container .marker:hover {
145+
z-index: 2;
145146
}
146147

148+
.map_container .marker.active .marker-label,
147149
.map_container .marker:hover .marker-label {
148150
display: initial;
149151
font-weight: bold;
@@ -159,7 +161,7 @@ BODY {
159161
height: 29px;
160162
}
161163

162-
.map_container .marker-container.poi-hoverable.active,
164+
.map_container .marker.active .marker-container.poi-hoverable,
163165
.map_container .marker:hover .marker-container.poi-hoverable {
164166
width: 30px;
165167
height: 35px;
@@ -169,19 +171,19 @@ BODY {
169171
.map_container .marker-container i {
170172
font-size: 30px;
171173
color: white;
172-
margin-top: -3px;
174+
margin-top: calc(-25% + 3px);
173175
}
174176

175177
.map_container .marker-container.poi-hoverable:hover,
176-
.map_container .marker-container.poi-hoverable.active {
178+
.map_container .marker.active .marker-container.poi-hoverable {
177179
z-index: 1;
178180
}
179181

180182
.map_container .marker-container.poi-hoverable i {
181183
font-size: 20px;
182184
}
183185

184-
.map_container .marker-container.poi-hoverable.active i,
186+
.map_container .marker.active .marker-container.poi-hoverable i,
185187
.map_container .marker:hover .marker-container.poi-hoverable i {
186188
font-size: 25px;
187189
}
@@ -190,7 +192,7 @@ BODY {
190192
width: 24px;
191193
}
192194

193-
.map_container .marker-container.poi-hoverable.active img,
195+
.map_container .marker.active .marker-container.poi-hoverable img,
194196
.map_container .marker-container.poi-hoverable:hover img {
195197
width: 30px;
196198
}

‎src/scss/includes/direction.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -952,7 +952,7 @@
952952
border-radius: 50%;
953953
box-shadow: rgba(0,0,0,.2) 0 2px 12px 0;
954954
position: fixed;
955-
bottom: 100px;
955+
bottom: 70px;
956956
right: 9px;
957957
color: #5c6f84;
958958
font-size: 25px;

‎src/scss/includes/menu.scss

+16-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
2+
13
.menu__overlay {
24
display: none;
35
height: 100%;
@@ -12,6 +14,14 @@
1214
display: block;
1315
opacity: 0;
1416
transition: opacity .6s;
17+
18+
.menu {
19+
position: absolute;
20+
top: 0;
21+
left: 0;
22+
width: 100%;
23+
height: 100%;
24+
}
1525
}
1626

1727
.menu__overlay--fade_active {
@@ -32,7 +42,6 @@
3242

3343
.menu__panel__items_container {
3444
overflow-y: auto;
35-
padding-top: 40px;
3645
}
3746

3847
.menu__panel__top {
@@ -73,7 +82,7 @@
7382

7483
.menu__panel__section_title {
7584
font-size: 22px;
76-
margin: 40px 0 0 3px;
85+
margin: 10px 0 0 3px;
7786
font-weight: bold;
7887
color: $primary_text;
7988
}
@@ -84,12 +93,16 @@
8493

8594
.menu__panel__section {
8695
border-left: 1px solid $secondary_text;
87-
margin: 10px 0 0 42px;
96+
margin: 10px 0 30px 42px;
8897
padding: 5px 0;
8998
}
9099

91100
.menu__panel__section-internal {
92101
border-left: none;
102+
margin-bottom: 24px;
103+
border-bottom: 1px solid #e0e1e6;
104+
margin-left: 0;
105+
padding-left: 34px;
93106
}
94107

95108
.menu__panel__link, .menu__panel__action {

‎src/scss/includes/panels/categories.scss

+44
Original file line numberDiff line numberDiff line change
@@ -211,3 +211,47 @@
211211
position: relative;
212212
font-size: 16px;
213213
}
214+
215+
@media (max-width: 640px) {
216+
.category__panel {
217+
position: absolute;
218+
width: 100vw;
219+
bottom: 0;
220+
height: 50vh;
221+
min-height: 300px;
222+
background: #f4f6fa;
223+
}
224+
225+
.category__panel__item {
226+
padding: 0 16px;
227+
}
228+
229+
.category__panel__item:hover {
230+
border-left: none;
231+
padding: 0 16px;
232+
}
233+
234+
.category__panel__item_inner {
235+
border: none;
236+
background: #fff;
237+
margin: 4px 0 8px;
238+
padding: 14px 10px 14px 16px;
239+
border-radius: 3px;
240+
box-shadow: 0 0 4px rgba(0,0,0,.16);
241+
}
242+
243+
.category__panel__head {
244+
overflow: auto;
245+
}
246+
247+
.category__panel__pj {
248+
margin: auto;
249+
display: block;
250+
max-width: 180px;
251+
text-align: center;
252+
}
253+
254+
.category__panel__phone {
255+
display: none;
256+
}
257+
}

‎src/scss/includes/panels/service_panel.scss

+2-4
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
position: relative;
44
min-height: 90px;
55
width: $panel_width;
6-
margin-top: 14px;
76
background: url('../images/panel_top.svg') white repeat-x;
87
background-size: 100% 5px;
98
@include card_shadow();
@@ -21,7 +20,7 @@
2120
font-weight: 500;
2221
border-bottom: 1px solid #e0e1e6;
2322
padding: 20px 0 10px;
24-
margin: 20px 20px 8px;
23+
margin: 0px 20px 8px;
2524
}
2625

2726
.side_bar__item__icon {
@@ -87,8 +86,7 @@
8786

8887
@media (max-width: 640px) {
8988
.service_panel {
90-
margin: 72px auto 0;
91-
width: calc(100% - 16px);
89+
display: none !important;
9290
}
9391

9492
.service_panel__category {

‎src/views/category_panel.dot

+4-2
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@
33
{{? this.pois.length }}
44
<div class="category__panel">
55
<div class="category__panel__head">
6-
<span class="category__panel__logo_pj"></span>
7-
<span class="category__panel__title">{{= _('PAGES JAUNES', 'categories') }}</span>
86
<span class="category__panel__close icon-x" {{= click(this.closeAction) }}></span>
97
<span class="category__panel__partnership">{{= _('Partnership', 'categories') }}</span>
108
<span class="category__panel__partnership_icon">i</span>
9+
<span class="category__panel__pj">
10+
<span class="category__panel__logo_pj"></span>
11+
<span class="category__panel__title">{{= _('PAGES JAUNES', 'categories') }}</span>
12+
</span>
1113
</div>
1214
<div class="category__panel__scroll">
1315
{{~ this.pois:poi:i }}

0 commit comments

Comments
 (0)