Node-solid-server: Login page is too long for login popup

[RubenVerborgh]

The UI changes in #842 have made the login page too long for the popup window:

Rather than making the popup window larger (it feels about the right size), we should have responsive CSS that saves vertical space on small vertical window sizes.

Perhaps you want to look into this, @he8us?

[KempfCreative]

@RubenVerborgh are you looking for contributors to this repository? I have been following the Solid project, looking for a way in via PR, and I would be interested in taking this PR on.

Please let me know if I could contribute via this PR. I believe that there are a few ways to handle this problem:

1. Viewport unit height ratios for each of the sections of the login popup
2. CSS Grid container with minmax ratios and max-content template definitions to be vertically responsive.

Please let me know if @he8us or you would be OK with a PR, or further discussion, thanks!

[RubenVerborgh]

@KempfCreative Thanks, it's all yours!

Both options look fine to me, your pick.

[KempfCreative]

Fantastic, I will get something up in a PR ASAP. Thanks!

[kjetilk]

Awesome, @KempfCreative ! Please note that the code is released under the MIT license, so please indicate if you are OK with that.

[KempfCreative]

@kjetilk I am more than happy to contribute to an MIT project 👍

Just working on a few issues I am having with my local version of the project, and then will open a PR.

[he8us]

Hello @KempfCreative, don't worry I'm in a rush in my job so I don't have time to finish it.

My feedback on what I already did:
I tried to use the boostrap classes col-sm- and col-xs- but that doesn't change layout to 2 columns in the modal. I did not had time to test that form on my mobile phone but I think on the phone it should be on 1 column otherwise it would be too small.

Be also aware that the same code is used when your account has not been created (you're still on the default pages) and you try to login.

[KempfCreative]

So I have taken a few hours here and there to try and verify my approach locally. However, no matter what I do, I am not getting the local version of this application to function how I expect. I could use some help.

Here is what I am doing:

1. Following the approach in the README.md to get a local version running locally 👍
2. Editing .hbs & .css files ( such as common/css/solid.css | default-views/auth/login.hbs ), then restarting the server via npm run clean && solid start.
3. Browsing the same workflow, and seeing absolutely none of my changes.

I know that if I make changes to the config/ files, I will see the changes locally, but that doesn't work for the PR, as that whole folder is .gitignored.

I would really like to know what the workflow is, and what I am missing. _I really want to contribute!_

[RubenVerborgh]

Hi @KempfCreative,

You will want to place the following symlinks in the config folder:

• templates -> ../default-templates/
• views -> ../default-views/

[KempfCreative]

@RubenVerborgh Unfortunately, work has made it difficult to spend a lot of time on this issue.

I can tell you that I have not been able to work on this in a way that makes me comfortable in issuing a PR back to this repo. I am not going to continue working on this so that someone else can. I hope they have more success on getting solid running locally in a way that lets them work on this issue. Just a recap of my issues, in case it will help someone else:

1. Achieved a locally running version of the site via README and solid start.
2. Made changes to default-views/templates to add more specific classes to elements in the login flow, in preparation of adding CSS.
3. Saw no such CSS classes in the rendered views/templates in config/.
4. Tried to add class declarations to solid.css.
5. Looked at the request to solid.css in the localhost network panel, saw no such class declaration in the response.
6. Tried the suggestion above by symlinking folders into config, but those were overridden whenever solid start ran.

I will follow this repo and take a look at the PR that gets opened for this issue to see what I might have done wrong in trying to contribute. Thanks for the assistance even if I wasn't successful!

[mielvds]

I'll have another attempt at this