From f45d2946a45d6d0df77d847bfd924ed8d55ae1a4 Mon Sep 17 00:00:00 2001 From: Ajay Singh <37625112+Ajay-singh1@users.noreply.github.com> Date: Fri, 13 Dec 2024 03:21:01 +0000 Subject: [PATCH 01/10] Fix the table header Signed-off-by: Ajay Singh <37625112+Ajay-singh1@users.noreply.github.com> --- src/sections/Pricing/comparison.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/sections/Pricing/comparison.js b/src/sections/Pricing/comparison.js index 5dcd1f753513..ea191a72f9fb 100644 --- a/src/sections/Pricing/comparison.js +++ b/src/sections/Pricing/comparison.js @@ -80,6 +80,11 @@ h2, h5{ font-weight: 600; text-transform: uppercase; } +tr.price-table-head { + position : sticky; + z-index : 1; + top : 0; +} .price-table tr.price-table-head { background-color: #00b39f; color: #FFFFFF; From f7cb1cfbea7878c8cfaf8003f5f4f5d0d86e9013 Mon Sep 17 00:00:00 2001 From: Ajay Singh <37625112+Ajay-singh1@users.noreply.github.com> Date: Fri, 13 Dec 2024 04:15:58 +0000 Subject: [PATCH 02/10] Applied the property on table head Signed-off-by: Ajay Singh <37625112+Ajay-singh1@users.noreply.github.com> --- src/sections/Pricing/comparison.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/sections/Pricing/comparison.js b/src/sections/Pricing/comparison.js index ea191a72f9fb..15fb3416ad76 100644 --- a/src/sections/Pricing/comparison.js +++ b/src/sections/Pricing/comparison.js @@ -80,9 +80,9 @@ h2, h5{ font-weight: 600; text-transform: uppercase; } -tr.price-table-head { +tr.price-table-head th { position : sticky; - z-index : 1; + z-index : 10; top : 0; } .price-table tr.price-table-head { From cec46696a5c646109eb278c8347168e54fa8cb01 Mon Sep 17 00:00:00 2001 From: Ajay Singh <37625112+Ajay-singh1@users.noreply.github.com> Date: Sun, 15 Dec 2024 09:33:22 +0000 Subject: [PATCH 03/10] This will make the price table head sticky Signed-off-by: Ajay Singh <37625112+Ajay-singh1@users.noreply.github.com> --- src/sections/Pricing/comparison.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/sections/Pricing/comparison.js b/src/sections/Pricing/comparison.js index 15fb3416ad76..d40532b07b3d 100644 --- a/src/sections/Pricing/comparison.js +++ b/src/sections/Pricing/comparison.js @@ -21,8 +21,9 @@ h2, h5{ margin: 2rem auto; display: block; overflow-x: scroll; - overflow-y:hidden; + overflow-y:auto; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + position: relative; } .price-table { width: 100%; @@ -80,11 +81,6 @@ h2, h5{ font-weight: 600; text-transform: uppercase; } -tr.price-table-head th { - position : sticky; - z-index : 10; - top : 0; -} .price-table tr.price-table-head { background-color: #00b39f; color: #FFFFFF; @@ -92,6 +88,11 @@ tr.price-table-head th { padding: 1rem 0; } } +.price-table-head { + position: sticky; + top: 0; + z-index: 1; +} .price-table td.price { padding: 16px 24px; font-size: 20px; From af39f2dcfae00122ceb75cceb5cd01892d94a271 Mon Sep 17 00:00:00 2001 From: Ajay Singh <37625112+Ajay-singh1@users.noreply.github.com> Date: Sun, 15 Dec 2024 10:29:54 +0000 Subject: [PATCH 04/10] Set the scrollable area Signed-off-by: Ajay Singh <37625112+Ajay-singh1@users.noreply.github.com> --- src/sections/Pricing/comparison.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/sections/Pricing/comparison.js b/src/sections/Pricing/comparison.js index f63aacc94e40..d607a2711330 100644 --- a/src/sections/Pricing/comparison.js +++ b/src/sections/Pricing/comparison.js @@ -24,6 +24,7 @@ h2, h5{ overflow-y:auto; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); position: relative; + height: 200px; } .price-table { width: 100%; From ebca5a74fa117bbf4a913443eec7bea0fddaaf0d Mon Sep 17 00:00:00 2001 From: Ajay Singh <37625112+Ajay-singh1@users.noreply.github.com> Date: Sun, 15 Dec 2024 11:08:35 +0000 Subject: [PATCH 05/10] Make the view area large Signed-off-by: Ajay Singh <37625112+Ajay-singh1@users.noreply.github.com> --- src/sections/Pricing/comparison.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sections/Pricing/comparison.js b/src/sections/Pricing/comparison.js index d607a2711330..1835fe04fc12 100644 --- a/src/sections/Pricing/comparison.js +++ b/src/sections/Pricing/comparison.js @@ -24,7 +24,7 @@ h2, h5{ overflow-y:auto; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); position: relative; - height: 200px; + height: 500px; } .price-table { width: 100%; From 2cdb8318f56e85c863d36bd2f140ddf272eba6c1 Mon Sep 17 00:00:00 2001 From: Ajay Singh <37625112+Ajay-singh1@users.noreply.github.com> Date: Sun, 15 Dec 2024 11:27:48 +0000 Subject: [PATCH 06/10] Make the view area larger Signed-off-by: Ajay Singh <37625112+Ajay-singh1@users.noreply.github.com> --- src/sections/Pricing/comparison.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sections/Pricing/comparison.js b/src/sections/Pricing/comparison.js index 1835fe04fc12..697f2698cf8b 100644 --- a/src/sections/Pricing/comparison.js +++ b/src/sections/Pricing/comparison.js @@ -24,7 +24,7 @@ h2, h5{ overflow-y:auto; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); position: relative; - height: 500px; + height: 1000px; } .price-table { width: 100%; From 944c70b70907ec12745a9323c9a755eb9691d787 Mon Sep 17 00:00:00 2001 From: Ajay Singh <37625112+Ajay-singh1@users.noreply.github.com> Date: Sun, 15 Dec 2024 11:52:11 +0000 Subject: [PATCH 07/10] Test for the best view area (Try-1) Signed-off-by: Ajay Singh <37625112+Ajay-singh1@users.noreply.github.com> --- src/sections/Pricing/comparison.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sections/Pricing/comparison.js b/src/sections/Pricing/comparison.js index 697f2698cf8b..8c654487830c 100644 --- a/src/sections/Pricing/comparison.js +++ b/src/sections/Pricing/comparison.js @@ -24,7 +24,7 @@ h2, h5{ overflow-y:auto; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); position: relative; - height: 1000px; + height: 700px; } .price-table { width: 100%; From a7e1ce37d37d4d4a6745d8250da4eccfb7059fd9 Mon Sep 17 00:00:00 2001 From: Ajay Singh <37625112+Ajay-singh1@users.noreply.github.com> Date: Wed, 18 Dec 2024 18:37:58 +0530 Subject: [PATCH 08/10] Remove borders from the table cell. Signed-off-by: Ajay Singh <37625112+Ajay-singh1@users.noreply.github.com> --- src/sections/Pricing/comparison.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/sections/Pricing/comparison.js b/src/sections/Pricing/comparison.js index 8c654487830c..46d2200d30a0 100644 --- a/src/sections/Pricing/comparison.js +++ b/src/sections/Pricing/comparison.js @@ -95,6 +95,9 @@ h2, h5{ top: 0; z-index: 1; } +.price-table-head td { + border: none; +} .price-table td.price { padding: 16px 24px; font-size: 20px; From 3c94054c95a52b1884797b0cd5386410bed22552 Mon Sep 17 00:00:00 2001 From: Ajay Singh <37625112+Ajay-singh1@users.noreply.github.com> Date: Wed, 18 Dec 2024 19:08:10 +0530 Subject: [PATCH 09/10] Update comparison.js Signed-off-by: Ajay Singh <37625112+Ajay-singh1@users.noreply.github.com> --- src/sections/Pricing/comparison.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/sections/Pricing/comparison.js b/src/sections/Pricing/comparison.js index 46d2200d30a0..bb1d9ca6b54d 100644 --- a/src/sections/Pricing/comparison.js +++ b/src/sections/Pricing/comparison.js @@ -97,6 +97,7 @@ h2, h5{ } .price-table-head td { border: none; + margin: 0; } .price-table td.price { padding: 16px 24px; From 882f184c3f4984d8697b7e23c226d2f2f04c7dd0 Mon Sep 17 00:00:00 2001 From: Ajay Singh <37625112+Ajay-singh1@users.noreply.github.com> Date: Wed, 18 Dec 2024 20:02:24 +0530 Subject: [PATCH 10/10] Make the table header cells completely flush Signed-off-by: Ajay Singh <37625112+Ajay-singh1@users.noreply.github.com> --- src/sections/Pricing/comparison.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/sections/Pricing/comparison.js b/src/sections/Pricing/comparison.js index bb1d9ca6b54d..03634b95a76f 100644 --- a/src/sections/Pricing/comparison.js +++ b/src/sections/Pricing/comparison.js @@ -98,6 +98,7 @@ h2, h5{ .price-table-head td { border: none; margin: 0; + padding: 0; } .price-table td.price { padding: 16px 24px;