no dragging on small screens and further tweaking

jvde-github · Sep 29, 2024 · 8f76cef · 8f76cef
1 parent ca3864c
commit 8f76cef
Show file tree

Hide file tree

Showing 9 changed files with 5,093 additions and 5,067 deletions.
diff --git a/Application/AIS-catcher.h b/Application/AIS-catcher.h
@@ -21,5 +21,5 @@
 #define VERSION		   "v0.60"
 #define COPYRIGHT	   "jvde-github and other contributors"
 
-#define VERSION_DESCRIBE	"v0.60-115-g78c6a23d"
-#define VERSION_URL_TAG	"v0_60_115_g78c6a23d"
+#define VERSION_DESCRIBE	"1727609403"
+#define VERSION_URL_TAG	"1727609403"
diff --git a/HTML/index.html b/HTML/index.html
@@ -20,7 +20,7 @@
 	<script src="https://cdn.jsdelivr.net/npm/ol@v10.0.0/dist/ol.js"></script>
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.0.0/ol.css">
 
-	<link rel="stylesheet" href="style_1727605515.css" />
+	<link rel="stylesheet" href="style_1727609403.css" />
 	<link rel="stylesheet" href="config.css" />
 
 </head>
@@ -1006,7 +1006,7 @@
 	</div>
 	<div class="bottombar"></div>
 
-	<script src="script_1727605515.js"></script>
+	<script src="script_1727609403.js"></script>
 	<script src="config.js"></script>
 
 	<script>

diff --git a/HTML/index_html.cpp b/HTML/index_html.cpp
diff --git a/HTML/index_local.html b/HTML/index_local.html
@@ -20,7 +20,7 @@
 	<script src="cdn/npm/ol@v10.0.0/dist/ol.js"></script>
 	<link rel="stylesheet" href="cdn/npm/ol@v10.0.0/ol.css">
 
-	<link rel="stylesheet" href="style_v0_60_115_g78c6a23d.css" />
+	<link rel="stylesheet" href="style_1727609403.css" />
 	<link rel="stylesheet" href="config.css" />
 
 </head>
@@ -1006,7 +1006,7 @@
 	</div>
 	<div class="bottombar"></div>
 
-	<script src="script_v0_60_115_g78c6a23d.js"></script>
+	<script src="script_1727609403.js"></script>
 	<script src="config.js"></script>
 
 	<script>

diff --git a/HTML/index_local_html.cpp b/HTML/index_local_html.cpp
diff --git a/HTML/script.js b/HTML/script.js
@@ -4540,9 +4540,6 @@ function showShipcard(m, pixel = undefined) {
         }
 
 
-        updateFocusMarker();
-        trackLayer.changed();
-
         if (isShipcardMax()) {
             toggleShipcardSize();
         }
@@ -4555,6 +4552,9 @@ function showShipcard(m, pixel = undefined) {
         aside.offsetHeight;
         aside.style.display = '';
     }
+
+    trackLayer.changed();
+    updateFocusMarker();
 }
 
 function compareObjects(obj1, obj2) {
@@ -5178,6 +5178,9 @@ addOverlayLayer("NOAA", new ol.layer.Tile({
     })
 }));
 
+let isDraggingGlobal = false;
+let clickPrevent = false;
+
 function makeDraggable(element) {
     let offsetX, offsetY;
     let dragging = false;
@@ -5201,8 +5204,8 @@ function makeDraggable(element) {
         if (!dragging && (Math.abs(dx) > moveThreshold || Math.abs(dy) > moveThreshold)) {
             dragging = true;
             isDraggingGlobal = true;
-            clickPrevent = true; 
-            element.classList.add('dragging'); 
+            clickPrevent = true;
+            element.classList.add('dragging');
 
             e.preventDefault();
         }
@@ -5216,14 +5219,14 @@ function makeDraggable(element) {
     function onDragEnd() {
         if (dragging) {
             isDraggingGlobal = false;
-            clickPrevent = true; 
+            clickPrevent = true;
             element.classList.remove('dragging');
         }
         dragging = false;
     }
 
     element.addEventListener('pointerdown', (e) => {
-        e.preventDefault(); 
+        e.preventDefault();
         element.setPointerCapture(e.pointerId);
         onDragStart(e.clientX, e.clientY);
 
@@ -5251,9 +5254,20 @@ function makeDraggable(element) {
     });
 }
 
-document.querySelectorAll('.draggable').forEach(card => {
-    makeDraggable(card);
-});
+document.addEventListener('click', function (e) {
+    if (clickPrevent) {
+        e.preventDefault();
+        e.stopPropagation();
+        clickPrevent = false;
+    }
+}, true);
+
+
+if (!window.matchMedia('(max-width: 500px), (max-height: 800px)').matches) {
+    document.querySelectorAll('.draggable').forEach(card => {
+        makeDraggable(card);
+    });
+}
 
 
 let mdabout = "This content can be defined by the owner of the station";

diff --git a/HTML/script_js.cpp b/HTML/script_js.cpp
diff --git a/HTML/style.css b/HTML/style.css
@@ -156,6 +156,15 @@ html {
     touch-action: none;
 }
 
+.draggable {
+    cursor: grab;
+}
+
+.draggable.dragging {
+    cursor: grabbing;
+}
+
+
 a {
     color: var(--link-color);
     text-decoration: none;
@@ -606,7 +615,7 @@ td {
     z-index: 100;
     font-size: 12px;
     background-color: rgba(var(--menu-background-color), 0.6) !important;
-    background-color: rgba(0,0,0, 0.2) !important;
+    background-color: rgba(0, 0, 0, 0.2) !important;
     color: var(--menu-font-color) !important;
     color: white !important;
     text-align: center;
@@ -2311,4 +2320,4 @@ td {
     background-color: var(--menu-background-color);
     cursor: pointer;
     border: none;
-}
+}
diff --git a/HTML/style_css.cpp b/HTML/style_css.cpp