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

MAPG-85 make static map's width mobile friendly

Browse Source 
further style improvements on map selection page
This commit is contained in:
Bence Pőcze 2020-05-30 19:11:38 +02:00
parent 5bc2d73ceb
commit b9a36e5ccf
2 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
public/static/css/mapguesser.css
View File

@ -47,7 +47,6 @@ p {
img {
display: block;
max-width: 100%;
}
.mono {
@ -136,7 +135,7 @@ div.header {
color: white;
}
div.header > div.grid {
div.header>div.grid {
display: grid;
grid-template-columns: auto auto;
}
@ -163,7 +162,7 @@ div.mapContainer {
}
div.mapItem {
width: 375px;
width: 350px;
background-color: #eeeeee;
border-radius: 3px;
margin: 10px auto;
@ -182,6 +181,10 @@ div.mapItem>div.title>p.title {
font-size: 18px;
}
div.mapItem>img {
width: 100%;
}
div.mapItem>div.inner {
padding: 8px;
}
@ -306,30 +309,36 @@ div.mapItem>div.inner>div.info>p:nth-child(2) {
display: none;
}
@media screen and (min-width: 1600px) {
@media screen and (min-width: 1504px) {
div.mapContainer {
grid-template-columns: auto auto auto auto;
}
}
@media screen and (min-width: 1200px) and (max-width: 1599px) {
@media screen and (min-width: 1134px) and (max-width: 1503px) {
div.mapContainer {
grid-template-columns: auto auto auto;
}
}
@media screen and (min-width: 800px) and (max-width: 1199px) {
@media screen and (min-width: 764px) and (max-width: 1133px) {
div.mapContainer {
grid-template-columns: auto auto;
}
}
@media screen and (max-width: 799px) {
@media screen and (max-width: 763px) {
div.mapContainer {
grid-template-columns: auto;
}
}
@media screen and (max-width: 374px) {
div.mapItem {
width: initial;
}
}
@media screen and (max-width: 599px) {
div.header.small h1 span {
display: none;

2
views/maps.php
View File

@ -25,7 +25,7 @@
<div class="title">
<p class="title"><?= $map['name'] ?></p>
</div>
<img src="https://maps.googleapis.com/maps/api/staticmap?size=375x200&visible=<?= $map['bound_south_lat'] . ',' . $map['bound_west_lng'] . '|' . $map['bound_north_lat'] . ',' . $map['bound_east_lng'] ?>&key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>" width="375" height="200">
<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="inner">
<div class="info">
<p>