Responsiveness and coordinates

css/ds.css

@@ -44,7 +44,6 @@ td ul {
     padding-left: 0;
 }
 .report-container {
-    width: 75%;
     margin: 0 auto;
     background-color: #fff;
     padding: 1rem 1rem 3rem 1rem;
@@ -52,20 +51,20 @@ td ul {
 .mt-2 {
     margin-top: 2rem !important;
 }
-td.key {
-    min-width: 400px;
-}
 table.table td,
 table.table th {
     border: none;
 }
 #map {
-    height: 450px;
+    height: 500px;
 }
 #gallery img {
     max-height: 200px;
     min-height: 200px;
 }
+#coord span {
+    display: block;
+}
 
 /* Print styles */
 @media print {
@@ -78,3 +77,20 @@ table.table th {
         display: none;
     }
 }
+/* Responsiveness... */
+@media (min-width: 1652px) {
+    .report-container {
+        width: 75%;
+    }
+    td.key {
+        min-width: 400px;
+    }
+}
+@media (max-width: 1652px) {
+    .report-container {
+        width: 100%;
+    }
+    td.key {
+        min-width: 200px;
+    }
+}

js/views/report.js

@@ -42,6 +42,12 @@ document.addEventListener('readystatechange', async () => {
     
     DataSpace.createMap([lat, long]);
 
+    // Write coordinates below map
+    document.querySelector('#coord').innerHTML = `
+        <span><strong>Latitude</strong>: ${lat}</span>
+        <span><strong>Longitude</strong>: ${long}</span>  
+    `;
+
     resKeys = resKeys.filter(e => !e.includes('Coordinates'));
 
     document.querySelector('#rep-tit')

report/index.html

@@ -37,17 +37,21 @@
                 <div id="error"></div>
                 <h2 class="mt-1 p-2" id="rep-tit"></h2>
                 <div class="columns">
-                    <div class="column col-7">
+                    <div class="column col-lg-7 col-md-12 col-sm-12">
                         <table class="table mt-2" id="res-before">
                             <tbody>
                             </tbody>
                         </table>
                     </div>
-                    <div class="column col-5 p-2 mt-2">
+                    <div class="column col-lg-5  col-md-12 col-sm-12 p-2 mt-1">
                         <div id="map"></div>
+                        <p class="mt-2 p-2">
+                            <strong>Coordinates</strong>
+                        </p>
+                        <p id="coord" class="p-2"></p>
                     </div>
                 </div>
-                <div class="container d-hide mt-2 pt-2">
+                <div class="container d-hide mt-1 pt-2">
                     <p class="text-small">
                         Click on any image to open gallery
                     </p>