Footer in website

[yasirobai99]

I can add a footer to the website which will make the website more attractive and which will make a complete website

[Substancia]

Hey @YasirObaibullah99 is this a critical work, and if I proceed with #41, will it be breaking changes to your work?

[yasirobai99]

No you just tell me how you are doing in #41 it will not break

[Substancia]

Sure. Basically the "components" folder will have only folders, each folder named different components (like items, search etc), and each folder will have the component files (js) and their supporting files like css (basically all files with same name goes in sane folder with that name).

If you're creating new component files, please follow this practice. I'll take care of converting the structure of existing files.

[Substancia]

Reference: https://github.com/Substancia/OneshotAI-MERN-client-webapp/

[yasirobai99]

Ya this is best practices for react js and go for it

[Substancia]

@YasirObaibullah99 is this work done? Let me know once I can start with the code restructuring without affecting your work. Thanks.

[yasirobai99]

Ya it merged now you can start your work

[Substancia]

Awesome!

@aditya-singh9 @Rudresh-pandey since the new UI work starts tomorrow and the repo will be blocked for the entire day, and since no critical work is being done right now, I'll do the code restructuring after my dinner. That cool?

[aditya-singh9]

Cool

[Substancia]

Why are we using an entire library (cdbreact) just for the footer? Couldn't we have just coded a footer component manually? An additional package means higher vulnerability risk in the future.

Also the footer is misbehaving.

[Substancia]

1. Are we having a footer in mobile view?
2. In desktop view, do we want the footer sticky or at bottom of page?

[Rudresh-pandey]

left-bottom in desktop view - fixed
bottom in tablet and mobile view

[Rudresh-pandey]

i am not getting any of the footer issue in my local npm server

[Rudresh-pandey]

@Substancia i have this code

[Substancia]

Sorry, my bad, I've got this particular issue fixed, with a new question. Do we want the footer to stick to the bottom when emojis list is empty? Because that wasn't implemented.

[Rudresh-pandey]

i have already implemented it

[Rudresh-pandey]

[Substancia]

That's the code in big screen (width >= 1400px). In smaller screens, the footer isn't sticking.

https://user-images.githubusercontent.com/27500147/194071152-64e265ed-aadd-47ae-9660-5bcc5e5baa30.png

[Rudresh-pandey]

check this :- it was working when i made the pr
https://kekfinder-cnjf9wcez-aditya-singh9.vercel.app/

[Rudresh-pandey]

ok now i understand , since i was using my laptop to see the progress i didn't check the height of the device that's why the footer is behaving like this , it's not a big issue

[Rudresh-pandey]

i am just confused 😑, i don't know which property should i use to make this footer on the bottom of the screen

[Rudresh-pandey]

Sorry, my bad, I've got this particular issue fixed, with a new question. Do we want the footer to stick to the bottom when emojis list is empty? Because that wasn't implemented.

yes i didn't considered the heights of the screen , i wasted a lot of time 😑 and didn't allow others to get there code merged

[Substancia]

I did spend some time on this issue, and realized that the difficulty in this issue arises from the way the divisions and blocks are defined in the html code (basically the elements structure). To fix this, all I see are either do some nasty hacks (like force fixing heights of certain elements), or restructuring the elements altogether. If anyone can come up with a GOOD solution, I'll be very curious.

[Substancia]

This is what I came up with, simple change, works fine. Please do some edge-testing.
@aditya-singh9 @Rudresh-pandey