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

2
views/maps.php
View File

@ -25,7 +25,7 @@
<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=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="inner">
<div class="info"> <div class="info">
<p> <p>