Changes to Home Page Formatting

[Pulathisi]

Description

Changing the home page formatting.

• New feature (non-breaking change which adds functionality)

How Has This Been Tested?

yarn test done. All tests passed

Checklist:

• I have performed a self-review of my own code

[SudharakaP]

You don't need to comment them; just delete them if they are unnecessary. 😄

[SudharakaP]

@Pulathisi : Thanks for the changes 😄

Can you please fill out the description of the PR with what it does and change the heading too into what the PR is about. 😄

Also I saw that you've added a package-lock.json file. This means you've used npm. However the project uses yarn. Could you remove that file and use yarn instead. Yarn works almost the same way as npm; https://github.com/python-sinhala-education-society/OpenLearnr/blob/master/docs/DEVELOPER_DOCUMENTATION.md; except you'll get a yarn.lock file.

[SudharakaP]

This is unnecessary. The generator of this project (JHipster) auto installs yarn locally. If you go to your root folder of the project you'll see a npm directory and within it a yarn directory (provided that you build the project with ./mvnw).

[Pulathisi]

yarn suggested to do 'yarn audit autofix' to fix some yarn irregularities. I did that and yarn has added this.

[SudharakaP]

Can we not use this !important annotation when making changes, but rather directly change .jh-navbar and .hipster. It makes it difficult to maintain the code in the future; https://css-tricks.com/when-using-important-is-the-right-choice/

[Pulathisi]

changed css to navbar.scss and deleted overrides.css file ;) change come in the next sync

[SudharakaP]

@Pulathisi : I tested your change and it seems to remove some formatting from the front page. Also the mobile formatting seems off.

whereas the original one was,

Also the change seems to make the titles and text centered;

whereas the original was,

Normally card text and titles are left aligned (https://material.io/components/cards/#). I try to maintain the Google Material Design guide; so can we go by it for these kind of changes. 😄

Can we not do this change for now machn? I don't see a huge improvement to the front page. One way we could improve it though is making it more in accordance with material design guidelines.

[Pulathisi]

@Pulathisi : I tested your change and it seems to remove some formatting from the front page. Also the mobile formatting seems off.

whereas the original one was,

Also the change seems to make the titles and text centered;

whereas the original was,

Normally card text and titles are left aligned (https://material.io/components/cards/#). I try to maintain the Google Material Design guide; so can we go by it for these kind of changes. 😄

Can we not do this change for now machn? I don't see a huge improvement to the front page. One way we could improve it though is making it more in accordance with material design guidelines.

@SudharakaP LOL is this material. I thought its flat design. Let me know if you want a material touch to it. U have to add shadows and stuff

https://en.wikipedia.org/wiki/Flat_design

Will check the why the quote went missing :D

Loader makes the site look like a game. reminds us of PACMAN 😄 Shall I change it to something meaningful. Like that of a book folding or something related to education ?

Will change code to make it match for mobile devices as well.

[Pulathisi]

@SudharakaP I force pushed my changes related to home page. Let me know if there is any issues with that ;) check for mobile devices now. I did some ui modifications. Also please note that I didnt check for Ipads. Only mobiles

[SudharakaP]

@Pulathisi : Hey, machn, sorry; can we not do this change for now? The reason is our front page and stuff is okay for now and it works without issue; surely it can be improved but there's more pressing issues with the site than changing the look of the front page. I'll keep this in mind and we'll revisit this later if you are okay with that. 😄

It's my fault actually and I should have been more clear of the process; sorry if it wasted your time. Normally what I do is this; I go to issues (https://github.com/python-sinhala-education-society/OpenLearnr/issues) and create a new issue with the changes I want to do. Sometimes @asanka-herath will do that too. Also I normally add the appropriate badges and include it in our project board (https://github.com/python-sinhala-education-society/OpenLearnr/projects/2). And when I have time I go to this project board and take an issue and work on it. This is how normally most open source projects work. The issue is for discussing the change and then we do the pull request if it's agreed to do it.

How about this? For front end stuff, there's lots of things to do actually. One of the things that @asanka-herath has problems with is searching for videos from the comment approval screen. We have an issue for that; #51 . Also #116 is a good improvement that could make things easier for admins. In addition the following two issues that I just created; #154, #155 could improve user experience for the admin/instructors greatly. If you have any questions about these feel free to comment on those issues. Also feel free to create any new issues if you have new ideas. 😄 I am sure there's lots of this kind of issues; and I'll create some more in the days to come.

The aesthetic appeal of the website is okay for now. We lack lots of features such as notifications when a comment is made; and comment editing #55 and after we do these we'll come back to polishing the UI aspects.

[Pulathisi]

@SudharakaP Its now I realized what you really intend me to do. 😄 I will work on the issues you are referring to but since you are saying the UI can be improved I doubt why you don't go ahead with these changes. For me the mobile UIs and Desktop UIs have improved with my changes and I don't see any reason to reject these changes. If front page stuff is okay but surely can be improved shall we accept these changes and move on from here ?

[SudharakaP]

@SudharakaP Its now I realized what you really intend me to do. smile I will work on the issues you are referring to but since you are saying the UI can be improved I doubt why you don't go ahead with these changes. For me the mobile UIs and Desktop UIs have improved with my changes and I don't see any reason to reject these changes. If front page stuff is okay but surely can be improved shall we accept these changes and move on from here ?

The reason is, trying to merge this we'll have to do few more iterations of testing and corrections. For example the CI is failing with this change. I like us to work on things that being currently are problems for users (such as the ones I described in my previous comment). And I feel we have more pressing matters to address than doing visual changes right now and keep iterating on this issue wastes both our time. Does that make sense? 😄 😄

Also if you don't like the issues I mentioned above please feel free to just open an issue with your ideas then we could discuss about them. 😄

We could definitely discuss about these kind of changes once we make the site a bit more user friendly in terms of it's functionality. The visual appearance is a matter of perspective and it's hard to make a compelling argument in either direction on what it should really look like. 😄

[SudharakaP]

@Pulathisi : I am going to close this issue for now; I've added some more info to our readme and contributions pages about opening an issue before making pull requests. This way in the future we can all be in the same page. 😄

[Pulathisi]

@SudharakaP If that's the case I am not the one suitable for this project. 😄 Because front end look and feel is what I enjoy working with. So best of luck with your project. Wish you guys strength to continue the good work. 😄

[SudharakaP]

@Pulathisi : How about this. If you like to work on front end UI changes can you open an issue on how it can be improved, maybe even linking to this PR? Is this PR a larger change you anticipate to get the site in accordance with some sort of design you have in mind? 😄

The problem I am thinking is with the PR first approach it's harder to understand what the change achieves. What I am suggesting is exactly what we do for example in this project; https://github.com/jhipster/generator-jhipster.