layer5 icon indicating copy to clipboard operation
layer5 copied to clipboard

[Pricing] Make Tier Comparison Header Sticky

Open leecalcote opened this issue 1 year ago • 20 comments

Current Behavior

Site visitors that want to compare features offered between subscription tiers, visit the "Compare All Features" section of the https://layer5.io/pricing page.

Desired Behavior

While examining the checkmarks and x's in the Compare All Features section, when users scroll down the page, past the names of the subscription tiers and have a hard time recalling which checkmark and which "x" are associated with which subscription tier.

Screenshots / Mockups

Screenshot 2024-12-12 at 3 39 01 PM

Implementation

Make the subscription tier table header sticky under the "Compare All Features" section.

Acceptance Tests

Users can see the subscription tier names at the top of the page.


Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

Join the Layer5 Community by submitting your community member form.

leecalcote avatar Dec 12 '24 21:12 leecalcote

@leecalcote Can I work on this issue?

Ajay-singh1 avatar Dec 13 '24 03:12 Ajay-singh1

Sounds great. , @Ajay-singh1

leecalcote avatar Dec 13 '24 04:12 leecalcote

@leecalcote , can you assign this issue to me?

eyeaadil avatar Dec 18 '24 09:12 eyeaadil

@Ajay-singh1 how are things progressing here?

leecalcote avatar Dec 18 '24 09:12 leecalcote

@leecalcote I have raised a PR! I wanted feedback if it looks good or need some changes , I need to make some adjustments with the table cells padding and margin so that the UI looks good as their was some problem with gatsby I cannot see the site locally so... I have marked this as a draft until then.

Ajay-singh1 avatar Dec 18 '24 12:12 Ajay-singh1

hey @leecalcote kindly assign this issue to me in past i also contribute to this repo i also have local setup also of this repo also

krishkumar84 avatar Dec 27 '24 20:12 krishkumar84

@eyeaadil Would you like to work on this issue?Also can you confirm if you have setup the local development environment?

Ajay-singh1 avatar Jan 03 '25 07:01 Ajay-singh1

@eyeaadil Would you like to work on this issue?Also can you confirm if you have setup the local development environment?

Yes, i would like to work in this issue and I setup the local development environment.

eyeaadil avatar Jan 03 '25 07:01 eyeaadil

Okay @eyeaadil!

Ajay-singh1 avatar Jan 03 '25 08:01 Ajay-singh1

@Ajay-singh1, you’ve tossed in the towel on your attempt to complete this, correct?

@krishkumar84, how are you progressing?

@eyeaadil, I recall you asking to be assigned too many, many different issues. I don’t recall any of your PR’s being successful. More self-study needed before volunteering again.

leecalcote avatar Jan 03 '25 13:01 leecalcote

hey @leecalcote i raised the pr for this issue couple of days ago #6138 kindly review this

krishkumar84 avatar Jan 03 '25 14:01 krishkumar84

@leecalcote No! Never.I will take this up anytime.Waiting for the Gatsby fix!!

Ajay-singh1 avatar Jan 03 '25 15:01 Ajay-singh1

@leecalcote @Ajay-singh1 can you please review the my above PR?

eyeaadil avatar Jan 03 '25 15:01 eyeaadil

@vr-varad can you assign this issue to me ?

Rajesh-Nagarajan-11 avatar Aug 21 '25 17:08 Rajesh-Nagarajan-11

Thanks @Rajesh-Nagarajan-11 for taking up this issue.

vr-varad avatar Aug 22 '25 10:08 vr-varad

@vr-varad @Rajesh-Nagarajan-11 can i contribute to this issue, i have seen something similar, in using table for tabulating, it equates to compromise between scroll and sticky headers. If sticky header is required then horizonatal scrolling on thinner width will be compromised. Only working solution i found was tabulating using divs , compromisisng seo. Could I be assigned this issue.?

priyanshu4999 avatar Aug 27 '25 15:08 priyanshu4999

@priyanshu4999 We can't compromise Horizontal scrolling as well , it needed for mobile view

Rajesh-Nagarajan-11 avatar Aug 27 '25 15:08 Rajesh-Nagarajan-11

@Rajesh-Nagarajan-11 , Yes thats what i thought, then recreating tabulation with divs was the solution that worked for both scrolling and sticky, i think there is a whole disscussion regarding same on CSS-tricks. Do tell if you need help or come up with different solution.!!

priyanshu4999 avatar Aug 27 '25 15:08 priyanshu4999

@priyanshu4999 You can take over this issue and work it on , @vr-varad Unassign me and assign this to @priyanshu4999 !

Rajesh-Nagarajan-11 avatar Aug 28 '25 10:08 Rajesh-Nagarajan-11

@priyanshu4999 Its your's.

vr-varad avatar Aug 28 '25 11:08 vr-varad