Responsive UI

[ghuser-io]

Responsive UI

[jamesgeorge007]

@AurelienLourot Contributing guidelines should also be included.

Right now what shows up is how to run the project locally which shall be kept under a separate title.
cheers 👍

[venarius]

@AurelienLourot Hey 👋
Just started using ghuser for my github account and noticed that’s it's not responsive on mobile devices like my galaxy note 8. Would love to work a bit on the UI to make it work on mobile devices :)

[jamesgeorge007]

@AurelienLourot I would love to work on this issue 😃

[lourot]

oh yes please :) that would be great, thanks!

[jamesgeorge007]

@AurelienLourot You may assign this issue to me. Right now no one is assigned 👍

[lourot]

Yes I wanted to, but I can only assign issues to collaborators. Collaborators have push rights on all branches, so it's a bit early for me to give you so many access rights 😄 That's why I have created the assigned label, so at least it's obvious for other people and no one will steal this task from you 🙂

[lourot]

I can only assign issues to collaborators

it's not 100% true by the way, I can also assign issues to their original authors. For example #72 I'll be able to assign it back to you when I'm done with it, but unfortunately not this one #46. Not sure why GitHub made this choice.

[jamesgeorge007]

Fine 😃

[jamesgeorge007]

The project hierarchy seems a bit confusing to me since I haven't looked into reframe.js before.
It would be great if you could mention those source files which makes sense to my task.
I came across multiple stylesheets.
Thank you 👍

[lourot]

You're right, I need to write things inside reframe/README.md, it's too empty, I'll try to do this tomorrow.

What you'll have to touch is inside reframe/views/profile/. The main React component is Profile.js. Each *.js file there starting with a capital letter is a React component. Some components come together with a stylesheet.

The CSS itself is quite messy, because I have manually copied the GItHub CSS that I needed, which was already messy. Feel free to improve things there :) Thanks!

[lourot]

By the way, you can chat with me and @brillout (Reframe's author and big contributor of ghuser) on Reframe's Discord chat.

I need to go offline for a few hours but in general I'm all the time there :)

[lourot]

Hi @jamesgeorge007 :) Still working on this?

[jamesgeorge007]

@AurelienLourot Sorry for the delay. I started out examining the project hierarchy and in between got busy with one of the projects that I'm engaged with.
I'll come up with the required workarounds ASAP 👍

Just curious to know that whether you stopped following me for the same reason 😃 .

[lourot]

no problem, no pressure :)

unfollowing is not related: I receive an e-mail when someone I follow stars or creates a repo, and I look into these repos to discover things that might be useful to me in a foreseeable future. For example if someone is starring a lot of Go libs right now, I unfollow as it's not relevant for me right now and I might refollow that person some day :) So there is nothing personal here, and usually the amount or persons I follow stays around 30.

[jamesgeorge007]

@AurelienLourot for the NavBar part is it Ok to bring about react-bootstrap (The bootstrap-3 binding for React) which takes care of the responsiveness part by bringing in hamburger button for smaller screens.

[lourot]

yes if that's easier 👍 we should then get rid of bootstrap-4 that we use already, because mixing up might be nasty

[jamesgeorge007]

@AurelienLourot if that's the case I would use reactstrap instead. Well, what do you prefer?

[lourot]

Personally I think it's nicer to be on bootstrap 4 than 3, and at the moment all components of bootstrap we use need only bootstrap.min.css (no JS at all), and bootstrap's navbar is as well purely CSS. So I'm not sure it has any advantage to change everything to react-bootstrap, or am I missing something?

And BTW we're already using a bootstrap navbar and also bootstrap for several components. I'm just blocking the responsiveness with a min-width in PageContent.css.

[jamesgeorge007]

Fine 😄

[jamesgeorge007]

@AurelienLourot I made some sort of minor workarounds for larger screens @ #123
For mobile screens it requires an overall redesign of the UI part and I would love to hear your suggestions on the same. Does it suit your requirement?

Do you have some sort of wire-frame on how it should appear on the mobile devices?

[jamesgeorge007]

@AurelienLourot It would be great if you could invite me to the ghuser organisation 😄

[lourot]

@jamesgeorge007 Thanks a lot for your contribution again!

Adding you to the organization would give you some permissions and I feel it's too early. Maybe I'm too wary but one pull request is not enough for me to trust you and give you these permissions. If you start doing regular/major contributions, then I'll definitely think about it!

[jamesgeorge007]

@AurelienLourot Fine, just enquired 😃

[lourot]

Thanks @venarius and @jamesgeorge007 !