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

@ -235,3 +235,23 @@ Framework7 and FontAwesome both have a .fab class
transform-origin: 50% 100%; transform-origin: 50% 100%;
transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); 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; margin-top: 0;
} }
.no-margin-vertical-md {
margin-top: 0;
margin-bottom: 0;
}
@media all and (min-width: 768px) { @media all and (min-width: 768px) {
.only-tablet { .only-tablet {
display: inherit; display: inherit;
@ -47,3 +52,17 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
margin: var(--f7-list-margin-vertical) 0; 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="page-content">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-100 medium-60 large-50 xlarge-40"> <div class="col-100 medium-75 large-90 xlarge-75">
<div class="list transparent no-hairlines no-margin-top-sm tablet-inset elevation-tablet"> <div class="row justify-content-center align-items-stretch flex-direction-row-reverse-md">
<ul> {{#if map.enabled}}
{{#if map.enabled}} <div class="col-100 large-50 xlarge-50">
<li> <div class="no-margin-vertical-md tablet-inset elevation-tablet display-flex align-items-stretch" id="trackMapContainer">
<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> <div class="mapbox" style="width: 100%; height: 100%;" id="mapbox-track" data-latitude="{{map.latitude}}" data-longitude="{{map.longitude}}" data-accurate="{{map.accurate}}"></div>
</li> </div>
{{/if}} </div>
{{#js_if "this.info != []"}} {{/if}}
<li class="item-divider">Info</li> <div class="col-100 large-50 xlarge-50">
{{#each info}} <div class="list transparent no-hairlines no-margin-vertical-md tablet-inset elevation-tablet" id="trackResultContainer">
<li> <ul>
<div class="item-content"> {{#js_if "this.info != []"}}
<div class="item-inner"> <li class="item-divider">Info</li>
<div class="item-title" style="white-space: normal !important;"> {{#each info}}
<div class="item-header">{{label}}</div> <li>
{{value}} <div class="item-content">
</div> <div class="item-inner">
</div> <div class="item-title" style="white-space: normal !important;">
</div> <div class="item-header">{{label}}</div>
</li> {{value}}
{{/each}} </div>
{{/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> </div>
<div class="item-row"> </li>
<div class="item-cell"> {{/each}}
{{date}} {{/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>
</div> </li>
</div> {{/each}}
</li> {{/if}}
{{/each}} </ul>
{{/if}} </div>
</ul> </div>
</div> </div>
</div> </div>
</div> </div>