Add sidebar to Challenge page

[jayaike]

I have added the sidebar to the challenge page as described in other pages

Screenshots

After Login

Before Login

GCI Task: https://codein.withgoogle.com/dashboard/task-instances/6659470118092800/

[Sanji515]

Also please remove its css if its not using.

[jayaike]

Done! @Sanji515

[jayaike]

Let me revert

[jayaike]

Reverted! I guess it happened when I was trying to resolve conflicts. Thanks for showing me!

[Sanji515]

@nsjcorps You need to change the background color of sidebar as in the current version.

[jayaike]

That means I would also have to change the height because the sidebar does not occupy 100% height currently and if I change the background color it will look weird. Should I adjust the height too?

[jayaike]

Oh I see...there is no need to adjust the height because the container already has the background color

[jayaike]

Done @Sanji515

[Sanji515]

But you need to fix this(^) thing.

Hint: There is some top value given to the outer div. You need to remove that from the outer div and have to add some top value or margin to inner div.

[jayaike]

@Sanji515 What do you think of the changes?

[Sanji515]

@Sanji515 What do you think of the changes?

Now the scroll disappears as the links have the sufficient height and it is not consistent with the current version, in the current version sidebar links starts with some top value due to which scroll shows up.

Can you please make this same as in the current version?

[jayaike]

I will increase the padding to 128px

[Sanji515]

I will increase the padding to 128px

yes, sounds good!

[jayaike]

Done! @Sanji515

[Sanji515]

But you also need to fix that border-right, it will show up as we have removed the top value.

[jayaike]

I have removed it @Sanji515 . How does it look now?

[Sanji515]

I have removed it @Sanji515 . How does it look now?

But we cannot remove it completely, it does not have effect on small devices as it is hidden under the scroll but we cannot ignore devices with higher resolution.

[jayaike]

Should I add a media query for it to show on medium and large devices?

[Sanji515]

Should I add a media query for it to show on medium and large devices?

Its related to height not width, if some device height is large enough then scroll will not be shown there we need border on the right.

[Sanji515]

Hint: There is some top value given to the outer div. You need to remove that from the outer div and have to add some top value or margin to inner div.

Instead you can do this(^) way, you can apply border-right and margin as equal to the top value to the inner div with the class name links-section-outer

[jayaike]

I don't understand @Sanji515

[jayaike]

How does this look @Sanji515

[Sanji515]

I can see that border-right on the top which doesn't look good, please look to it @nsjcorps

[jayaike]

I did some math by removing the height of the navabr from the sidebar then setting it's top value to the height of the navabr. I then reduced the padding to 98px minus height of navbar.

Sorry I am using my phone. My laptop crashed as a result of the load so I had to reboot it

[jayaike]

@Sanji515 PTAL

[Sanji515]

Hmm... this way the scroll will start after the margin of 34px and also the margin-right is still showing above the scroll. Just moving the border-right to class links-section-outer will fix the margin-right thing but it will not be consistent as in the current version.

To make it consistent witht the current version, remove the top value from the ev-sidebar class and move the border-right to links-section-outer class and also add margin-top of 98px to this class and rest revert all the changes that you have did.

Let me know if you didn't get this @nsjcorps

[jayaike]

@Sanji515 Ok but what do I do with the height of the ev sidebar

[Sanji515]

@Sanji515 Ok but what do I do with the height of the ev sidebar

Let it be the same as before.

[jayaike]

That is I should leave it as it is @Sanji515

[jayaike]

Or I should revert all the changes the original way it was after adding margintop 98px to links-section-outer and removing top value from ev sidebar

[Sanji515]

Or I should revert all the changes the original way it was after adding margintop 98px to links-section-outer and removing top value from ev sidebar

Yes, also move the border-right from ev-sidebar to links-section-outer.

[jayaike]

That means I also need to add background color to the link section outer because currently it is transparent toward the botton

[jayaike]

I did that and the sidebar does not cover the full height anymore

[Sanji515]

That means I also need to add background color to the link section outer because currently it is transparent toward the botton

no, add the background-color to ev-sidebar.

[jayaike]

Ok but when I reverted the changes the sidebar did not occupy full height again

[Sanji515]

Ok but when I reverted the changes the sidebar did not occupy full height again

Please push the changes that you have done.

[jayaike]

@Sanji515 Alright....I have pushed it

[Sanji515]

It looks good on mine, and it is same as in the current version. Can you please paste screenshot how it looks on yours @nsjcorps

[jayaike]

Maybe mine is happening because of all the tweaks and hacks I have on my version of the project @Sanji515

[jayaike]

But I doubt though. Should I try and make some changes let's see if it works for both of us 😁

[jayaike]

This change I made looks like this @Sanji515

Can you test on your system?

[jayaike]

The sidebar border right doesn't go past anymore and it shows well over here

[Sanji515]

The sidebar border right doesn't go past anymore and it shows well over here

@nsjcorps Yes, this looks good, but I think it is not same as in the current version. Here the scroll doesn't touches the bottom.

[jayaike]

I just added a padding that is equal to that of the top so it is equal just like the current version of EvalAI @Sanji515

[jayaike]

Ok @Sanji515 . Done. I had to add that 34 px to the 98px already there

[jayaike]

Do you understand @Sanji515

[jayaike]

[jayaike]

This is the logic here.

[Sanji515]

Latest Commit	Current version (EvalAI)

Please look at the difference, Can't see all the links in one view @nsjcorps

[jayaike]

~calc(100% - 104px) makes it the same as current version...PTAL @Sanji515~