Netsyms/HelenaExpressApp
2
0
Fork 0
Code Issues Pull Requests Releases 15 Wiki Activity

Fix service area map legend being too small on iPhone SE

Browse Source
This commit is contained in:
Skylar Ittner 2022-05-02 18:45:56 -06:00
parent df6a3e38e0
commit 35436dec09
2 changed files with 33 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
www/assets/css/customstyles.css
View File

@ -51,6 +51,25 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
margin: 0;
}
/*
Service Area page
*/
.md, .aurora {
--service-area-map-height: calc(100vh - calc(var(--f7-navbar-height) + var(--f7-toolbar-height)));
}
.ios {
--service-area-map-height: calc(100vh - calc(var(--f7-navbar-height) + calc(var(--f7-toolbar-height) * 2)));
}
#mapbox-servicearea {
width: 100%;
height: var(--service-area-map-height);
}
/*

24
www/pages/servicearea.html
View File

@ -17,16 +17,20 @@
</div>
</div>
<div class="toolbar toolbar-top">
<div class="toolbar-inner justify-content-start">
<span class="margin-horizontal-half">Legend:</span>
<span class="badge margin-horizontal-half padding-half" style="background-color: rgba(0,135,51,0.7)/*#008733*/;">Notary</span>
<span class="badge margin-horizontal-half padding-half" style="background-color: rgba(0,83,135,0.7)/*#005387*/;">Courier</span>
<a class="margin-horizontal-half link" href="#" onclick="openServiceAreaExtraChargeInfo()">Outside Service Area?</a>
</div>
</div>
<div class="page-content noselect">
<div id="mapbox-servicearea" style="width: 100%; height: calc(100vh - calc(var(--f7-navbar-height) + var(--f7-toolbar-height)));"></div>
<div class="toolbar">
<div class="toolbar-inner justify-content-start">
<span class="margin-horizontal-half">Legend:</span>
<span class="badge margin-horizontal-half padding-half" style="background-color: rgba(0,135,51,0.7)/*#008733*/;">Notary</span>
<span class="badge margin-horizontal-half padding-half" style="background-color: rgba(0,83,135,0.7)/*#005387*/;">Courier</span>
<a class="margin-horizontal-half link if-not-ios" href="#" onclick="openServiceAreaExtraChargeInfo()">Outside Service Area?</a>
</div>
</div>
<div class="toolbar if-ios">
<div class="toolbar-inner justify-content-start">
<a class="margin-horizontal-half link" href="#" onclick="openServiceAreaExtraChargeInfo()">Outside Service Area?</a>
</div>
</div>
<div id="mapbox-servicearea"></div>
</div>
</div>