a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Restyle map and controls

Browse Source
This commit is contained in:
Maciej Ziarkowski 2019-09-04 17:18:45 +01:00
parent ef218009d6
commit 05238b5963
3 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/src/frontend/map/map.css
View File

@ -8,25 +8,34 @@
box-shadow: 0px 0px 1px 1px #222; box-shadow: 0px 0px 1px 1px #222;
visibility: hidden; visibility: hidden;
} }
.map-container {
flex: 1;
position: relative;
}
.leaflet-container { .leaflet-container {
position: absolute; height: 100%;
top: 0; width: 100%;
bottom: 0;
left: 0;
right: 0;
} }
.leaflet-container .leaflet-control-zoom { .leaflet-container .leaflet-control-zoom {
border: 1px solid #fff; border: 1px solid #fff;
box-shadow: 0 0 1px 1px #222; box-shadow: 0 0 1px 1px #222;
} }
.leaflet-container .leaflet-control-attribution {
width: 100%;
background: #fff;
background: rgba(255, 255, 255, 0.7);
}
.leaflet-grab { .leaflet-grab {
cursor: crosshair; cursor: crosshair;
} }
@media (min-width: 768px){ @media (min-width: 768px){
/* Only show the "Click a building ..." notice for larger screens */ /* Only show the "Click a building ..." notice for larger screens */
.map-notice { .map-notice {
left: 25.5rem; left: 0.5rem;
top: 0.5rem; top: 3.5rem;
visibility: visible; visibility: visible;
} }
} }

4
app/src/frontend/map/map.tsx
View File

@ -143,7 +143,7 @@ class ColouringMap extends Component<any, ColouringMapState> { // TODO: add prop
: '/tiles/base_night/{z}/{x}/{y}.png' : '/tiles/base_night/{z}/{x}/{y}.png'
return ( return (
<Fragment> <div className="map-container">
<Map <Map
center={position} center={position}
zoom={this.state.zoom} zoom={this.state.zoom}
@ -177,7 +177,7 @@ class ColouringMap extends Component<any, ColouringMapState> { // TODO: add prop
</Fragment> </Fragment>
) : null ) : null
} }
</Fragment> </div>
); );
} }
} }

5
app/src/frontend/map/search-box.css
View File

@ -46,11 +46,6 @@
margin-right: 0.1rem; margin-right: 0.1rem;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
/* for large screens adopt the conventional search box position */
.search-box{
top: 3.625rem;
left: 25.5rem;
}
/* The following is a fix (?) for the truncation of the "Search for postcode" text */ /* The following is a fix (?) for the truncation of the "Search for postcode" text */
.form-inline .form-control { .form-inline .form-control {
width: 200px; width: 200px;