Issue 1092 fix

[yoshi2095]

Proposed changes in this pull request

Changed the order of divs (contact vs projects) on org pages - fix for issue 1092.

Functionality

• Are all requirements met? Compare implemented functionality with the requirements specification.
• Does the UI work as expected? There should be no Javascript errors in the console; all resources should load. There should be no unexpected errors. Deliberately try to break the feature to find out if there are corner cases that are not handled.

Code

• Do you fully understand the introduced changes to the code? If not ask for clarification, it might uncover ways to solve a problem in a more elegant and efficient way.

[CLAassistant]

All committers have signed the CLA.

[oliverroick]

Hi @yoshi2095, thank you for your contribution.

There a few issues which I would like to ask you to resolve before we can proceed with your PR.

In general, the issue is fixed; the project list is displayed before organisation details. However, your changes introduce some other problems:

Between a screen width of 991px and 1625px the right-hand panel containing organisation and contacts informations is almost not visible.

In mobile view (screen width < 991px) the panel containing organisation and contacts informations isn't visible as well. The projects list in this view should also span the complete width of the screen and not just ~2/3.

Could you please have a look into these issues? Once fixed, we can proceed and pass your PR on to a second reviewer to have a closer look at your code.

Thanks!

[clash99]

Hi @yoshi2095 -

You only should need to adjust the css for responsive max-width: 991px.

The display: table and display: table-header-group properties are allowing the divs to stack opposite of their order in the html. If you undo those styles, it should fix the issue. I hope that helps!

Thanks,
Chandra

[yoshi2095]

Hi @oliverroick and @clash99, thanks for the review. I'll just commit the suggested changes. Thanks.

[yoshi2095]

Hi @oliverroick and @clash99, I have committed the new changes. Now, It's working just the way it should be. Everything is responsive, all the issues that @oliverroick highlighted in the previous commit are now solved and, the projects list appear before the contact information.

[oliverroick]

Hi @yoshi2095, there are still many issues with your PR.

In Chrome, the right-hand panel is still not visible:

In Firefox, there's a gap at the end of the panel, which shouldn't be there:

In Firefox, when the user is logged out the panel doesn't span the whole height of the page:

In Safari, a similar gap is there but on top of the panel:

Please make sure the pages look consistent across all browsers.

Many thanks!

[oliverroick]

@yoshi2095 I also just noticed you have been changing the CSS in main.css directly. main.css is a file which is auto-generated by SASS. You need to change the code in any of the *.scss files in that directory to make sure your changes persist.

[yoshi2095]

@oliverroick Hi oliver, thanks for the review. Sure, I will soon make the changes as suggested by you. But one thing, I can't reproduce the first case. In Chrome, the right-hand panel is still not visible. In my tab, everything is visible just the right way:

Although, I was able to produce the errors in other browsers, ill just fix them very soon. I'll make sure that I make the changes that work well in all the browsers. Thanks again.

[yoshi2095]

Hi @oliverroick, fixed the issue. I have rechecked everything from my side, for every browser.

[oliverroick]

Thanks. Looks good. @clash99 can you check if the HTML and CSS are ok?

[yoshi2095]

hi @oliverroick, please confirm if its done or are there any other changes needed? Thanks.

[clash99]

Can you remove the display: table-footer-group completely for #organization-single .detail? I don't believe it's needed and removing it will improve the spacing. Let me know if you have questions. Thanks!

[yoshi2095]

@clash99 made the suggested changes. Please review. Thanks.

[yoshi2095]

Hi @clash99, Please confirm if its done or are there are any other changes needed. Thanks.

[clash99]

Looks good - thanks @yoshi2095

[amplifi]

@yoshi2095 Thanks for completing this PR! If you rebase your branch onto our master, I can merge your code.

[yoshi2095]

@amplifi done :)