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

Improve tracking result UI on large screens

Browse Source
This commit is contained in:
Skylar Ittner 2021-10-02 15:18:09 -06:00
parent f17e8520ee
commit 8f5af7075e
3 changed files with 86 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
www/assets/css/app.css
View File

@ -234,4 +234,24 @@ Framework7 and FontAwesome both have a .fab class
width: 100%;
transform-origin: 50% 100%;
transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
}
#trackMapContainer {
margin: 0;
min-height: 200px;
max-height: 500px;
height: 30vh;
}
@media all and (min-width: 1024px) {
#trackMapContainer {
height: calc(calc(100vh - calc(var(--f7-list-margin-vertical) * 2)) - var(--f7-navbar-height));
min-height: none;
max-height: none;
margin: var(--f7-list-margin-vertical) 0;
}
#trackResultContainer ul {
height: calc(calc(100vh - calc(var(--f7-list-margin-vertical) * 2)) - var(--f7-navbar-height));
overflow-y: auto;
}
}

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

@ -16,6 +16,11 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
margin-top: 0;
}
.no-margin-vertical-md {
margin-top: 0;
margin-bottom: 0;
}
@media all and (min-width: 768px) {
.only-tablet {
display: inherit;
@ -46,4 +51,18 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
.list.no-margin-top-sm {
margin: var(--f7-list-margin-vertical) 0;
}
}
@media all and (min-width: 1024px) {
.margin-top-tablet-md {
margin-top: 1rem;
}
.list.no-margin-vertical-md {
margin: var(--f7-list-margin-vertical) 0;
}
.flex-direction-row-reverse-md {
flex-direction: row-reverse;
}
}

88
www/pages/trackresult.html
View File

@ -25,51 +25,57 @@
<div class="page-content">
<div class="row justify-content-center">
<div class="col-100 medium-60 large-50 xlarge-40">
<div class="list transparent no-hairlines no-margin-top-sm tablet-inset elevation-tablet">
<ul>
{{#if map.enabled}}
<li>
<div class="mapbox" style="width: 100%; min-height: 200px; max-height: 500px; height: 30vh;" id="mapbox-track" data-latitude="{{map.latitude}}" data-longitude="{{map.longitude}}" data-accurate="{{map.accurate}}"></div>
</li>
{{/if}}
{{#js_if "this.info != []"}}
<li class="item-divider">Info</li>
{{#each info}}
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title" style="white-space: normal !important;">
<div class="item-header">{{label}}</div>
{{value}}
</div>
</div>
</div>
</li>
{{/each}}
{{/js_if}}
{{#if events}}
<li class="item-divider">Events</li>
{{#each events}}
<li>
<div class="item-content">
<div class="item-inner item-cell">
<div class="item-row">
<div class="item-cell">
<img src="{{icon}}" class="trackingeventicon" /> {{text}}
<div class="col-100 medium-75 large-90 xlarge-75">
<div class="row justify-content-center align-items-stretch flex-direction-row-reverse-md">
{{#if map.enabled}}
<div class="col-100 large-50 xlarge-50">
<div class="no-margin-vertical-md tablet-inset elevation-tablet display-flex align-items-stretch" id="trackMapContainer">
<div class="mapbox" style="width: 100%; height: 100%;" id="mapbox-track" data-latitude="{{map.latitude}}" data-longitude="{{map.longitude}}" data-accurate="{{map.accurate}}"></div>
</div>
</div>
{{/if}}
<div class="col-100 large-50 xlarge-50">
<div class="list transparent no-hairlines no-margin-vertical-md tablet-inset elevation-tablet" id="trackResultContainer">
<ul>
{{#js_if "this.info != []"}}
<li class="item-divider">Info</li>
{{#each info}}
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title" style="white-space: normal !important;">
<div class="item-header">{{label}}</div>
{{value}}
</div>
</div>
</div>
<div class="item-row">
<div class="item-cell">
{{date}}
</li>
{{/each}}
{{/js_if}}
{{#if events}}
<li class="item-divider">Events</li>
{{#each events}}
<li>
<div class="item-content">
<div class="item-inner item-cell">
<div class="item-row">
<div class="item-cell">
<img src="{{icon}}" class="trackingeventicon" /> {{text}}
</div>
</div>
<div class="item-row">
<div class="item-cell">
{{date}}
</div>
</div>
</div>
</div>
</div>
</div>
</li>
{{/each}}
{{/if}}
</ul>
</li>
{{/each}}
{{/if}}
</ul>
</div>
</div>
</div>
</div>
</div>