Add GitHub pages style sheet #35
Conversation
This adds a couple files to support a GitHub pages rendering of the site This two files does a few things * Makes the page width adjustable with a button so you can see more columns * Changes the table height to 75% of the size of the viewport so you can see more rows * Sticky the header row and the left-most column so you can always see the photo library name and the attribute name while you scroll horizontally or vertically You can turn on GitHub pages along with this PR by * going to https://github.com/meichthys/foss_photo_libraries/settings/pages * Setting `Source` to `Deploy from a branch` * Setting `Branch` to `main` and `/(root)` and then clicking `Save` Once done, GitHub actions will build the site and it will be available at https://meichthys.github.io/foss_photo_libraries/ This solves a few problems with the current table as viewed through GitHub's repo rendering of the `readme.md` * The table is too narrow to show all of the photo libraries * The horizontal scrollbar is only at the bottom of the table so you have to scroll to the bottom to scroll right and left at which point you can't see the table header showing the name of the photo library * The table is too tall so when you scroll down you can't see the photo library name * When you scroll down the photo library name doesn't stay at the top of the table, it dissapears * Much of the page width is unused because of how GitHub renders a README. As a result you can't see that many columns at the same time
|
This looks like a nice addition! Thanks for the PR. I will take a look at it this week and get it merged if possible. I noticed that the expand collapse button does not seem to do anything when viewing the site on mobile. Is this something that would only be relevant for a desktop? |
Exactly. On mobile, the viewport is too narrow. I'll PR a change to remove the button when on mobile since it doesn't do anything. Good catch. |
|
@meichthys All that remains are the steps described above to turn on GitHub pages. https://meichthys.github.io/foss_photo_libraries/ You may also want to add the link to the GitHub pages version into the site description so it's something like
|
|
It should be all setup. It may have just taken a few minutes to Index. I'll add the link too 👍 |
|
Great. Thanks! |
|
It looks like the sticky headers which are enabled via css got deleted in December in e81d717 I only noticed as I was comparing two photo gallery providers and noticed that the sticky headers weren't working (so as you scroll down you can't see the heading of each column. @meichthys Looking in the commit history I'm not sure why this was removed. Was it not working? Or was there some reason the sticky headers weren't desirable? |
|
Hi @gene1wood it was probably an oversight on my part. I probably force pushed something that removed it. I'd be glad to add it back if you could help with that. |
This was originally added in meichthys#35 but lost in e81d717 accidentally. This style sheet does a few things * Changes the table height to 75% of the size of the viewport so you can see more rows * Sticky the header row and the left-most column so you can always see the photo library name and the attribute name while you scroll horizontally or vertically This solves a few problems with the current table as viewed through GitHub's repo rendering of the `readme.md` * The horizontal scrollbar is only at the bottom of the table so you have to scroll to the bottom to scroll right and left at which point you can't see the table header showing the name of the photo library * When you scroll down the photo library name doesn't stay at the top of the table, it dissapears
|
Cool, no prob. I opened #80 to add it back in. |
This was originally added in meichthys#35 but lost in e81d717 accidentally. This style sheet does a few things * Changes the table height to 75% of the size of the viewport so you can see more rows * Sticky the header row and the left-most column so you can always see the photo library name and the attribute name while you scroll horizontally or vertically This solves a few problems with the current table as viewed through GitHub's repo rendering of the `readme.md` * The horizontal scrollbar is only at the bottom of the table so you have to scroll to the bottom to scroll right and left at which point you can't see the table header showing the name of the photo library * When you scroll down the photo library name doesn't stay at the top of the table, it dissapears
This adds a couple files to support a GitHub pages rendering of the site
These two files do a few things
You can turn on GitHub pages along with this PR by
SourcetoDeploy from a branchBranchtomainand/(root)and then clickingSaveOnce done, GitHub actions will build the site and it will be available at https://meichthys.github.io/foss_photo_libraries/
This solves a few problems with the current table as viewed through GitHub's repo rendering of the
readme.mdYou can preview the GitHub pages rendering of this PR here, if you want to see what it looks like : https://gene1wood.github.io/foss_photo_libraries/