diff --git a/Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.js b/Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.js index a981e0b6a..35070d034 100644 --- a/Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.js +++ b/Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.js @@ -76,6 +76,14 @@ function getLesionLocationCallback(measurementData, eventData) { display: 'block' }; + var pageHeight = $(window).height(); + dialogProperty.top = Math.max(dialogProperty.top, 0); + dialogProperty.top = Math.min(dialogProperty.top, pageHeight - dialog.outerHeight()); + + var pageWidth = $(window).width(); + dialogProperty.left = Math.max(dialogProperty.left, 0); + dialogProperty.left = Math.min(dialogProperty.left, pageWidth - dialog.outerWidth()); + // Device is touch device or not // If device is touch device, set position center of screen vertically and horizontally if (isTouchDevice()) { diff --git a/Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.styl b/Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.styl index 0a462cd22..6d3a2b773 100644 --- a/Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.styl +++ b/Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.styl @@ -7,18 +7,11 @@ right: 0 z-index: 100 width: 300px - margin: auto + height: 130px border-radius: 5px padding: 10px 20px 10px 20px background-color: rgba(255,255,255,1) - /* dialogMobile is added to #lesionLocationDialog when touchDevices is detected */ - .dialogMobile - margin: 0 auto - float: none - background-color: rgba(0,0,0,0.5) - text-align: center - #closeLesionPopup outline: none border: none diff --git a/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.html b/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.html index 47e737551..084d47b0d 100644 --- a/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.html +++ b/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.html @@ -54,7 +54,7 @@ {{ #if code }} {{ else }} - + {{ /if }} {{ /each}} diff --git a/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.js b/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.js index 9608d5e53..97284be1b 100644 --- a/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.js +++ b/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.js @@ -94,6 +94,14 @@ function getLesionLocationCallback(measurementData, eventData) { display: 'block' }; + var pageHeight = $(window).height(); + dialogProperty.top = Math.max(dialogProperty.top, 0); + dialogProperty.top = Math.min(dialogProperty.top, pageHeight - dialog.outerHeight()); + + var pageWidth = $(window).width(); + dialogProperty.left = Math.max(dialogProperty.left, 0); + dialogProperty.left = Math.min(dialogProperty.left, pageWidth - dialog.outerWidth()); + // Device is touch device or not // If device is touch device, set position center of screen vertically and horizontally if (isTouchDevice()) { @@ -103,6 +111,7 @@ function getLesionLocationCallback(measurementData, eventData) { dialogProperty.left = 0; dialogProperty.right = 0; dialogProperty.bottom = 0; + dialogProperty.margin = 'auto'; } dialog.css(dialogProperty); diff --git a/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.styl b/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.styl index 87f325f98..2914b715c 100644 --- a/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.styl +++ b/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.styl @@ -12,13 +12,6 @@ padding: 10px 20px 10px 20px background-color: rgba(255,255,255,1) - /* dialogMobile is added to #nonTargetLesionLocationDialog when touchDevices is detected */ - .dialogMobile - margin: 0 auto - float: none - background-color: rgba(0,0,0,0.5) - text-align: center - #selectNonTargetLesionLocation, #selectNonTargetLesionLocationResponse width: 100% @@ -27,4 +20,7 @@ .locationOK text-align: center - \ No newline at end of file + +/* dialogMobile is added to #nonTargetLesionLocationDialog when touchDevices is detected */ +.dialogMobile + margin: auto \ No newline at end of file diff --git a/Packages/lesiontracker/client/components/nonTargetResponseDialog/nonTargetResponseDialog.js b/Packages/lesiontracker/client/components/nonTargetResponseDialog/nonTargetResponseDialog.js index 7b0e5df09..d4a6630a7 100644 --- a/Packages/lesiontracker/client/components/nonTargetResponseDialog/nonTargetResponseDialog.js +++ b/Packages/lesiontracker/client/components/nonTargetResponseDialog/nonTargetResponseDialog.js @@ -44,6 +44,14 @@ changeNonTargetResponse = function(measurementData, eventData, doneCallback) { } else { dialogProperty.top = eventData.currentPoints.page.y - dialog.outerHeight() - 40; dialogProperty.left = eventData.currentPoints.page.x - dialog.outerWidth() / 2; + + var pageHeight = $(window).height(); + dialogProperty.top = Math.max(dialogProperty.top, 0); + dialogProperty.top = Math.min(dialogProperty.top, pageHeight - dialog.outerHeight()); + + var pageWidth = $(window).width(); + dialogProperty.left = Math.max(dialogProperty.left, 0); + dialogProperty.left = Math.min(dialogProperty.left, pageWidth - dialog.outerWidth()); } dialog.css(dialogProperty); diff --git a/Packages/lesiontracker/client/components/timepointTextDialog/timepointTextDialog.html b/Packages/lesiontracker/client/components/timepointTextDialog/timepointTextDialog.html index 32a50117b..ec2c876a8 100644 --- a/Packages/lesiontracker/client/components/timepointTextDialog/timepointTextDialog.html +++ b/Packages/lesiontracker/client/components/timepointTextDialog/timepointTextDialog.html @@ -3,7 +3,8 @@