#1180 Fix mobile display issue on Hotspot Image page

thexerteproject · Mar 2, 2023 · 671c332 · 671c332
1 parent d144c13
commit 671c332
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/hotspotImage.css b/modules/xerte/parent_templates/Nottingham/models_html5/hotspotImage.css
@@ -1,5 +1,10 @@
 /* hotspotImage.html */
 
+	#panel {
+		margin-left: 0;
+		margin-right: 0;
+	}
+
 	#panel.right {
 		float:	right;
 		margin:	0 0 20px 20px;
@@ -10,6 +15,10 @@
 		margin:	0 20px 20px 0;
 	}
 
+	#x_mainHolder.x_mobile #panel {
+		margin-top: 20px;
+	}
+
 	#imageHolder {
 		position:	relative;
 	}
@@ -19,7 +28,7 @@
 		cursor:		pointer;
 	}
 
-	#infoHolder {
+	#x_mainHolder:not(.x_mobile) #infoHolder {
 		padding-top: 10px;
 	}
 

diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/hotspotImage.html b/modules/xerte/parent_templates/Nottingham/models_html5/hotspotImage.html
@@ -47,8 +47,11 @@
 
 		this.init = function() {
 			$img = $("#image");
-
-            if (x_currentPageXML.getAttribute("align") == "Right") {
+
+			if (x_browserInfo.mobile == true) {
+				$("#textContents").insertBefore($("#panel"));
+				$("#infoHolder").insertAfter($("#panel"));
+			} else if (x_currentPageXML.getAttribute("align") == "Right") {
 				$("#panel").addClass("left");
 			} else {
 				$("#panel").addClass("right");
@@ -121,8 +124,14 @@
 		};
 
 		this.resizeImg = function(firstLoad) {
-			var imgMaxW = Math.round($x_pageHolder.width() * (400.0/800.0)),
-				imgMaxH = Math.round($x_pageHolder.height() * (550.0/600.0) - 100);
+			const maxW = x_browserInfo.mobile != true ? 0.6 : 1;
+			const maxH = 1;
+
+			let imgMaxW = Math.round($x_pageHolder.width() * maxW),
+				imgMaxH = Math.round($x_pageHolder.height() * maxH);
+
+			imgMaxW -= ($("#panel").outerWidth(true) - $("#panel").width()) + ($("#x_pageDiv").outerWidth(true) - $("#x_pageDiv").width());
+			imgMaxH -= ($("#panel").outerHeight(true) - $("#panel").height()) + $("#btnHolder").outerHeight(true) + ($("#x_pageDiv").outerHeight(true) - $("#x_pageDiv").height());
 
 			$img.mapster('unbind');
 
@@ -238,7 +247,7 @@
 					$hotspot
 						.attr("coords", coords_string)
 						.click(function() {
-							$("#infoHolder").html("<hr/><h3>" + _this.getAttribute("name") + "</h3>" + x_addLineBreaks(_this.getAttribute("text")));
+							$("#infoHolder").html((x_browserInfo.mobile == true ? "" : "<hr/>") + "<h3>" + _this.getAttribute("name") + "</h3>" + x_addLineBreaks(_this.getAttribute("text")));
 
 							$(".selected").removeClass("selected");
 							if (x_currentPageXML.getAttribute("highlight") !== "true") {