From a114ec768994965cbbc2d055f1ef2b1df6ee4057 Mon Sep 17 00:00:00 2001 From: ghazal-salehi Date: Tue, 12 Sep 2023 16:02:15 +1000 Subject: [PATCH 1/4] QOLDEV-602 Moving quick exit at the bottom of the page --- .../components/quick-exit/_qg-quick-exit.scss | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/src/assets/_project/_blocks/components/quick-exit/_qg-quick-exit.scss b/src/assets/_project/_blocks/components/quick-exit/_qg-quick-exit.scss index 16a4317de..2aefb0f6e 100644 --- a/src/assets/_project/_blocks/components/quick-exit/_qg-quick-exit.scss +++ b/src/assets/_project/_blocks/components/quick-exit/_qg-quick-exit.scss @@ -105,10 +105,6 @@ -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; - position: relative; - position: -webkit-sticky; - position: sticky; - top: 0; z-index: 999; .qg-quick-exit__inner { //background: none; @@ -148,20 +144,8 @@ margin-left: 25px; } .qg-tooltip__wrapper { - bottom: auto; - top: 40px; padding: 16px } - .qg-tooltip__wrapper:after { - border-bottom: 8px solid #ffd200; - border-left: 8px solid #ffd200; - border-right: 8px solid transparent; - border-top: 8px solid transparent; - bottom: auto; - left: 25px; - top: -8px; - transform: rotate(135deg) - } .qg-quick-exit__button { padding-left: 48px; padding-right: 48px From 727b8749d125fd28c4f64c48462316625a3cf885 Mon Sep 17 00:00:00 2001 From: ghazal-salehi Date: Wed, 13 Sep 2023 10:22:39 +1000 Subject: [PATCH 2/4] QOLDEV-602 Making quick exit stick to top after scrolling down --- .../components/quick-exit/_qg-quick-exit.scss | 16 ++++++++++++++++ .../_project/_blocks/utils/qg-quickexit.js | 15 +++++++++++++++ src/assets/_project/_blocks/utils/qg-util.js | 1 + 3 files changed, 32 insertions(+) create mode 100644 src/assets/_project/_blocks/utils/qg-quickexit.js diff --git a/src/assets/_project/_blocks/components/quick-exit/_qg-quick-exit.scss b/src/assets/_project/_blocks/components/quick-exit/_qg-quick-exit.scss index 2aefb0f6e..16a4317de 100644 --- a/src/assets/_project/_blocks/components/quick-exit/_qg-quick-exit.scss +++ b/src/assets/_project/_blocks/components/quick-exit/_qg-quick-exit.scss @@ -105,6 +105,10 @@ -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; + position: relative; + position: -webkit-sticky; + position: sticky; + top: 0; z-index: 999; .qg-quick-exit__inner { //background: none; @@ -144,8 +148,20 @@ margin-left: 25px; } .qg-tooltip__wrapper { + bottom: auto; + top: 40px; padding: 16px } + .qg-tooltip__wrapper:after { + border-bottom: 8px solid #ffd200; + border-left: 8px solid #ffd200; + border-right: 8px solid transparent; + border-top: 8px solid transparent; + bottom: auto; + left: 25px; + top: -8px; + transform: rotate(135deg) + } .qg-quick-exit__button { padding-left: 48px; padding-right: 48px diff --git a/src/assets/_project/_blocks/utils/qg-quickexit.js b/src/assets/_project/_blocks/utils/qg-quickexit.js new file mode 100644 index 000000000..31d5a04d9 --- /dev/null +++ b/src/assets/_project/_blocks/utils/qg-quickexit.js @@ -0,0 +1,15 @@ +var handleQuickExit = function(e) { + var $el = $('.qg-quick-exit'); + if (document.documentElement.clientWidth > 992) { + if ($(this).scrollTop() > 200) { + $el.css({'position': 'fixed', 'top': '0px'}); + } + if ($(this).scrollTop() < 200) { + $el.css({'position': 'sticky', 'top': '0px'}); + } + } else { + $el.css({'position': 'fixed', 'top': 'auto'}); + } +}; +$(window).on('scroll', handleQuickExit); +window.addEventListener('resize', handleQuickExit, true); \ No newline at end of file diff --git a/src/assets/_project/_blocks/utils/qg-util.js b/src/assets/_project/_blocks/utils/qg-util.js index f0dabd227..6766e5005 100644 --- a/src/assets/_project/_blocks/utils/qg-util.js +++ b/src/assets/_project/_blocks/utils/qg-util.js @@ -3,4 +3,5 @@ import './qg-ajax-call'; import './qg-load-google-api'; import './parent-width'; import './qg-datepicker'; +import './qg-quickexit'; import './qg-datatables'; From b31875d39ce58b2330b55f0cd772149149ed4845 Mon Sep 17 00:00:00 2001 From: ghazal-salehi Date: Wed, 13 Sep 2023 10:35:47 +1000 Subject: [PATCH 3/4] QOLDEV-602 Fixing lint warnings --- .../_project/_blocks/utils/qg-quickexit.js | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/assets/_project/_blocks/utils/qg-quickexit.js b/src/assets/_project/_blocks/utils/qg-quickexit.js index 31d5a04d9..e012a2e4d 100644 --- a/src/assets/_project/_blocks/utils/qg-quickexit.js +++ b/src/assets/_project/_blocks/utils/qg-quickexit.js @@ -1,15 +1,15 @@ -var handleQuickExit = function(e) { - var $el = $('.qg-quick-exit'); - if (document.documentElement.clientWidth > 992) { - if ($(this).scrollTop() > 200) { - $el.css({'position': 'fixed', 'top': '0px'}); - } - if ($(this).scrollTop() < 200) { - $el.css({'position': 'sticky', 'top': '0px'}); - } - } else { - $el.css({'position': 'fixed', 'top': 'auto'}); +var handleQuickExit = function (e) { + var $el = $('.qg-quick-exit'); + if (document.documentElement.clientWidth > 992) { + if ($(this).scrollTop() > 200) { + $el.css({ 'position': 'fixed', 'top': '0px' }); } + if ($(this).scrollTop() < 200) { + $el.css({ 'position': 'sticky', 'top': '0px' }); + } + } else { + $el.css({ 'position': 'fixed', 'top': 'auto' }); + } }; $(window).on('scroll', handleQuickExit); window.addEventListener('resize', handleQuickExit, true); \ No newline at end of file From 9ab5f6dd2653877a102086057d120207c1fa1bdd Mon Sep 17 00:00:00 2001 From: ghazal-salehi Date: Wed, 13 Sep 2023 10:37:23 +1000 Subject: [PATCH 4/4] QOLDEV-602 new line --- src/assets/_project/_blocks/utils/qg-quickexit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/_project/_blocks/utils/qg-quickexit.js b/src/assets/_project/_blocks/utils/qg-quickexit.js index e012a2e4d..6f0d64e15 100644 --- a/src/assets/_project/_blocks/utils/qg-quickexit.js +++ b/src/assets/_project/_blocks/utils/qg-quickexit.js @@ -12,4 +12,4 @@ var handleQuickExit = function (e) { } }; $(window).on('scroll', handleQuickExit); -window.addEventListener('resize', handleQuickExit, true); \ No newline at end of file +window.addEventListener('resize', handleQuickExit, true);