esoko/mapguesser
esoko/mapguesser
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

MAPG-137 place static maps into container to avoid large layout shifts

Browse Source
This commit is contained in:
Bence Pőcze 2020-06-14 11:11:37 +02:00
parent 61ce915ec0
commit 86f05f7738
2 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/static/css/maps.css
View File

@ -26,8 +26,15 @@ div.mapItem>div.title>p.title {
font-size: 18px; font-size: 18px;
} }
div.mapItem>img { div.mapItem>div.imgContainer {
width: 100%; width: 100%;
padding-top: 50%;
background: #cccccc;
}
div.mapItem>div.imgContainer>img {
width: 100%;
margin-top: -50%
} }
div.mapItem>div.inner { div.mapItem>div.inner {

4
views/maps.php
View File

@ -13,7 +13,9 @@ $cssFiles = [
<div class="title"> <div class="title">
<p class="title"><?= $map['name'] ?></p> <p class="title"><?= $map['name'] ?></p>
</div> </div>
<img src="https://maps.googleapis.com/maps/api/staticmap?size=350x175&visible=<?= $map['bound_south_lat'] . ',' . $map['bound_west_lng'] . '|' . $map['bound_north_lat'] . ',' . $map['bound_east_lng'] ?>&key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>"> <div class="imgContainer">
<img src="https://maps.googleapis.com/maps/api/staticmap?size=350x175&visible=<?= $map['bound_south_lat'] . ',' . $map['bound_west_lng'] . '|' . $map['bound_north_lat'] . ',' . $map['bound_east_lng'] ?>&key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>" alt="Map area">
</div>
<div class="inner"> <div class="inner">
<div class="info"> <div class="info">
<p> <p>