From f88ca1ca1cb330d37971ecccf4ba7553213b125b Mon Sep 17 00:00:00 2001
From: Tom Gibbs <23391211+FreesphereTom@users.noreply.github.com>
Date: Tue, 11 Jan 2022 23:50:51 +0000
Subject: [PATCH] Added padding when menu opened

Added padding to account for the horizontal shift when the menu is opened and the scrollbar is hidden

Signed-Off-By: Tom Gibbs 23391211+FreesphereTom@users.noreply.github.com
---
 css/app.css  | 17 +++++++++++++++++
 js/script.js | 24 ++++++++++++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/css/app.css b/css/app.css
index fcbbc30..45833f3 100644
--- a/css/app.css
+++ b/css/app.css
@@ -26,4 +26,21 @@
 .rightClickOpened {
     height: 100% !important;
     overflow: hidden !important;
+    padding: 0 12px 0 0;
+}
+.rightClickOpenedFF {
+    padding: 0 8px 0 0;
+}
+.openedHorizontalShift {
+  padding: 0 12px 0 0;
+}
+.openedHorizontalShiftFF {
+  padding: 0 8px 0 0;
+}
+/* separate padding values for the view-toggle element as it already has padding */
+.view-togglePadding {
+  padding: 22px 46px 22px 22px!important; /* Maths genius */
+}
+.view-togglePaddingFF {
+  padding: 22px 38px 22px 22px!important;
 }
diff --git a/js/script.js b/js/script.js
index b579259..b7f6749 100644
--- a/js/script.js
+++ b/js/script.js
@@ -11,6 +11,10 @@ var RightClick = RightClick || {};
         menuClass: 'rightClickMenu',
         subMenuClass: 'rightClickSubMenu',
         openedClass: 'rightClickOpened',
+        openedShiftClass: 'openedHorizontalShift',
+        openedShiftClassFF: 'openedHorizontalShiftFF',
+        openedVTPaddingClass: 'view-togglePadding',
+        openedVTPaddingClassFF: 'view-togglePaddingFF',
         arrowClass: 'rightClickArrow',
     };
     exports.handableKeys = [
@@ -438,6 +442,18 @@ var RightClick = RightClick || {};
         if (!exports.isAMenuOpened()) {
             $(window).on('resize', exports.closeAllMenus);
             $('body').addClass(exports.selectors.openedClass);
+            //Add padding to elements to stop page jumping on right click
+            if(navigator.userAgent.match(/firefox|fxios/i)){ // More if statements can be added for other browsers with elseif
+              console.log('Match');
+             $('body').addClass(exports.selectors.openedShiftClassFF);
+             $('#header').addClass(exports.selectors.openedShiftClassFF);
+             $('#view-toggle').addClass(exports.selectors.openedVTPaddingClassFF);
+           } else {
+             console.log('No match');
+             $('#header').addClass(exports.selectors.openedShiftClass);
+             $('body').addClass(exports.selectors.openedShiftClass);
+             $('#view-toggle').addClass(exports.selectors.openedVTPaddingClass);
+           }
         }
 
         $('#' + exports.selectors.detectorId).css('display', 'block');
@@ -466,6 +482,14 @@ var RightClick = RightClick || {};
         if (!exports.isAMenuOpened()) {
             $(window).off('resize', exports.closeAllMenus);
             $('body').removeClass(exports.selectors.openedClass);
+            //Remove padding shift classes
+            $('#header').removeClass(exports.selectors.openedShiftClass);
+            $('body').removeClass(exports.selectors.openedShiftClass);
+            $('#view-toggle').removeClass(exports.selectors.openedVTPaddingClass);
+            //Specific for Firefox
+            $('#header').removeClass(exports.selectors.openedShiftClassFF);
+            $('body').removeClass(exports.selectors.openedShiftClassFF);
+            $('#view-toggle').removeClass(exports.selectors.openedVTPaddingClassFF);
             $('#' + exports.selectors.detectorId).css('display', 'none');
 
             return true;