Improve tracking result UI on large screens

www/assets/css/app.css

@@ -235,3 +235,23 @@ Framework7 and FontAwesome both have a .fab class
     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;
+    }
+}

www/assets/css/tablet.css

@@ -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;
@@ -47,3 +52,17 @@ file, You can obtain one at http://mozilla.org/MPL/2.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;
+    }
+}

www/pages/trackresult.html

@@ -25,14 +25,18 @@
 
     <div class="page-content">
         <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}}
-                        <li>
+                    <div class="col-100 large-50 xlarge-50">
-                            <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="no-margin-vertical-md tablet-inset elevation-tablet display-flex align-items-stretch" id="trackMapContainer">
-                        </li>
+                            <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}}
@@ -74,5 +78,7 @@
                     </div>
                 </div>
             </div>
+        </div>
+    </div>
 
 </div>