diff --git a/app/src/frontend/map/map.css b/app/src/frontend/map/map.css index 1a8204c3..d5b91e3a 100644 --- a/app/src/frontend/map/map.css +++ b/app/src/frontend/map/map.css @@ -8,25 +8,34 @@ box-shadow: 0px 0px 1px 1px #222; visibility: hidden; } + +.map-container { + flex: 1; + position: relative; +} .leaflet-container { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + height: 100%; + width: 100%; } .leaflet-container .leaflet-control-zoom { border: 1px solid #fff; 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 { cursor: crosshair; } @media (min-width: 768px){ /* Only show the "Click a building ..." notice for larger screens */ .map-notice { - left: 25.5rem; - top: 0.5rem; + left: 0.5rem; + top: 3.5rem; visibility: visible; } } diff --git a/app/src/frontend/map/map.tsx b/app/src/frontend/map/map.tsx index 5d48e1f0..e667bed3 100644 --- a/app/src/frontend/map/map.tsx +++ b/app/src/frontend/map/map.tsx @@ -143,7 +143,7 @@ class ColouringMap extends Component { // TODO: add prop : '/tiles/base_night/{z}/{x}/{y}.png' return ( - +
{ // TODO: add prop ) : null } - +
); } } diff --git a/app/src/frontend/map/search-box.css b/app/src/frontend/map/search-box.css index 0e13308a..7d51397c 100644 --- a/app/src/frontend/map/search-box.css +++ b/app/src/frontend/map/search-box.css @@ -46,11 +46,6 @@ margin-right: 0.1rem; } @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 */ .form-inline .form-control { width: 200px;