search

keepassxreboot / keepassxc-org

Website files for KeePassXC
https://keepassxc.org
GNU General Public License v3.0
29 stars 43 forks source link

Update the Downloads page to work without JavaScript #139

Closed stefansundin closed 1 month ago

stefansundin commented 1 month ago

As KeePassXC is a security tool, I think it is important for the website to work well when JavaScript is disabled. The current state is that the Downloads page is completely unusable. With these tweaks it works pretty good. The collapsible sections now work completely without using any JavaScript, using <details> and <summary>.

I'm also fixing a few unrelated small issues, see the commit messages for detailed information on each change. I'm willing to split these out to separate PRs if you prefer, just let me know.

You may want to review with whitespace changes omitted, since a lot of the changes is pure indenting.

There's still some minor UI discrepancies when JavaScript is disabled, but I don't know uikit well enough to fix them without more research. As a test I did try and copy the final HTML after JavaScript had run (using the browser devtools) which I used to replace the HTML in the file, and this did seem to fix the styling issues. Perhaps the current classnames are wrong?

What it looks like:

Screenshot 2024-08-16 at 21 00 10

What it should look like:

Screenshot 2024-08-16 at 21 00 00

Anyway, at least the page is functional now!

droidmonkey commented 1 month ago

Looks like the ::before styling doesn't work when Javascript is disabled. That applies the horizontal bar and extra vertical padding on the download table.

stefansundin commented 1 month ago

Looks like the ::before styling doesn't work when Javascript is disabled. That applies the horizontal bar and extra vertical padding on the download table.

I don't think that is it, since JavaScript is definitely not required for that.

I think uikit, at runtime using JavaScript, is rewriting the classnames on the elements for some reason. As explained in the PR description above I did a quick test that seemed to confirm this.

stefansundin commented 1 month ago

I think this is ready to be merged. I don't see the styling issue to be blocking since it only affects people that have JavaScript disabled.

If you'd like me to attempt to address the styling then I would rather that this is merged first and I will open another PR where I replace the class names with the class names that are applied after JavaScript runs. I don't even know if this is a good solution since I don't have any experience with UIkit besides what I have learned through my improvements in this repo.