From db1de27be669f1d64fccbabf8851a110dc0597f7 Mon Sep 17 00:00:00 2001 From: andreubisquerra Date: Fri, 28 Oct 2022 12:36:48 +0200 Subject: [PATCH 1/3] Header Scroll index.php --- htdocs/takepos/index.php | 69 ++++++++++++++++++++++++++++++++++++++-- 1 file changed, 66 insertions(+), 3 deletions(-) diff --git a/htdocs/takepos/index.php b/htdocs/takepos/index.php index 8be5a97e465..05e910790fc 100644 --- a/htdocs/takepos/index.php +++ b/htdocs/takepos/index.php @@ -939,6 +939,65 @@ $( document ).ready(function() { } } ?> + + /* For Header Scroll */ + var elem1 = $("#topnav-left")[0]; + var elem2 = $("#topnav-right")[0]; + var checkOverflow = function() { + if (scrollBars().horizontal) $("#topnav").addClass("overflow"); + else $("#topnav").removeClass("overflow"); + } + + var scrollBars = function(){ + var container= $('#topnav')[0]; + return { + vertical:container.scrollHeight > container.clientHeight, + horizontal:container.scrollWidth > container.clientWidth + }; + } + + $(window).resize(function(){ + checkOverflow(); + }); + + let resizeObserver = new ResizeObserver(() => { + checkOverflow(); + }); + resizeObserver.observe(elem1); + resizeObserver.observe(elem2); + checkOverflow(); + + var pressTimer = []; + var direction = 1; + var step = 200; + + $(".indicator").mousedown(function(){ + direction = $(this).hasClass("left") ? -1 : 1; + scrollTo(); + pressTimer.push(setInterval(scrollTo, 100)); + }); + + $(".indicator").mouseup(function(){ + pressTimer.forEach(clearInterval); + }); + + $("body").mouseup(function(){ + pressTimer.forEach(clearInterval); + console.log("body"); + }); + + function scrollTo(){ + console.log("here"); + var pos = $("#topnav").scrollLeft(); + document.getElementById("topnav").scrollTo({ left: $("#topnav").scrollLeft() + direction * step, behavior: 'smooth' }) + } + + $("#topnav").scroll(function(){ + if (($("#topnav").offsetWidth + $("#topnav").scrollLeft >= $("#topnav").scrollWidth)) { + console.log("end"); + } + }); + /* End Header Scroll */ }); @@ -951,8 +1010,8 @@ $keyCodeForEnter = getDolGlobalInt('CASHDESK_READER_KEYCODE_FOR_ENTER'.$_SESSION if (empty($conf->global->TAKEPOS_HIDE_HEAD_BAR)) { ?>
-
-
+
+
@@ -986,7 +1045,7 @@ if (empty($conf->global->TAKEPOS_HIDE_HEAD_BAR)) { } ?>
-
+
+
+ + +
Date: Fri, 28 Oct 2022 12:37:35 +0200 Subject: [PATCH 2/3] CSS Header Scroll --- htdocs/takepos/css/pos.css.php | 103 +++++++++++++++++++++++++++++++++ 1 file changed, 103 insertions(+) diff --git a/htdocs/takepos/css/pos.css.php b/htdocs/takepos/css/pos.css.php index f4a130dc5f1..c72ae215289 100644 --- a/htdocs/takepos/css/pos.css.php +++ b/htdocs/takepos/css/pos.css.php @@ -929,4 +929,107 @@ div#moreinfo, div#infowarehouse { div.wrapper2{ height:10%; } +} + +.arrows { + display: none; + position: absolute; + justify-content: space-between; + width: 100%; +} + +.indicator { + background: #00000042; + padding: 15px 5px; + cursor: pointer; +} + +.indicator:hover { + background: #000000; +} + +.indicator i { + color: white; +} + +.topnav-left { + margin-left: 20px; +} + +.topnav-right { + margin-right: 20px; +} + +/* For Header Scroll */ +html { + scroll-behavior: smooth; +} + +.topnav { + scroll-behavior: smooth; +} + +.header { + height: unset; +} + +.topnav { + width: 100%; + white-space: nowrap; + overflow-x: scroll; + display: inline-flex; +} + +.topnav-left { + white-space: nowrap; + float: none; + margin-right: auto; + align-items: center; +} + +.topnav-right { + display: flex; + white-space: nowrap; + float: none; + align-items: center; +} + +.topnav-left #shoppingcart { + display:inline-flex; +} + +.topnav-right .login_block_other { + display: flex; + white-space: nowrap; +} + +::-webkit-scrollbar { + width: 8px; +} + + +::-webkit-scrollbar-track { + background: #f1f1f1; +} + + +::-webkit-scrollbar-thumb { + background: #888; +} + +.topnav::-webkit-scrollbar-track{ + background: #eeeeee; +} + +.topnav::-webkit-scrollbar{ + width: 1px; + background: #F5F5F5; +} + +.topnav::-webkit-scrollbar-thumb{ + background: #f9171700; +} + +.topnav.overflow .arrows { + display: flex; } \ No newline at end of file From 764ddd4636a18ae86308fe7264669d60b5fea13a Mon Sep 17 00:00:00 2001 From: stickler-ci Date: Fri, 28 Oct 2022 10:44:04 +0000 Subject: [PATCH 3/3] Fixing style errors. --- htdocs/takepos/css/pos.css.php | 28 ++++++++++++++-------------- htdocs/takepos/index.php | 10 +++++----- 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/htdocs/takepos/css/pos.css.php b/htdocs/takepos/css/pos.css.php index c72ae215289..d39b3fb0b37 100644 --- a/htdocs/takepos/css/pos.css.php +++ b/htdocs/takepos/css/pos.css.php @@ -933,9 +933,9 @@ div#moreinfo, div#infowarehouse { .arrows { display: none; - position: absolute; - justify-content: space-between; - width: 100%; + position: absolute; + justify-content: space-between; + width: 100%; } .indicator { @@ -970,28 +970,28 @@ html { } .header { - height: unset; + height: unset; } .topnav { width: 100%; - white-space: nowrap; - overflow-x: scroll; + white-space: nowrap; + overflow-x: scroll; display: inline-flex; } .topnav-left { - white-space: nowrap; - float: none; + white-space: nowrap; + float: none; margin-right: auto; - align-items: center; + align-items: center; } .topnav-right { - display: flex; - white-space: nowrap; - float: none; - align-items: center; + display: flex; + white-space: nowrap; + float: none; + align-items: center; } .topnav-left #shoppingcart { @@ -1000,7 +1000,7 @@ html { .topnav-right .login_block_other { display: flex; - white-space: nowrap; + white-space: nowrap; } ::-webkit-scrollbar { diff --git a/htdocs/takepos/index.php b/htdocs/takepos/index.php index 05e910790fc..a128a0d66fd 100644 --- a/htdocs/takepos/index.php +++ b/htdocs/takepos/index.php @@ -960,11 +960,11 @@ $( document ).ready(function() { checkOverflow(); }); - let resizeObserver = new ResizeObserver(() => { - checkOverflow(); - }); - resizeObserver.observe(elem1); - resizeObserver.observe(elem2); + let resizeObserver = new ResizeObserver(() => { + checkOverflow(); + }); + resizeObserver.observe(elem1); + resizeObserver.observe(elem2); checkOverflow(); var pressTimer = [];