search

coopdevs / coopdevs-old-web

coopdevs.org content
http://coopdevs.org
2 stars 10 forks source link

Modified 404.html for betterment ui #84

Closed ankush-0x90 closed 4 years ago

ankush-0x90 commented 4 years ago

Details:

Using details.new layout instead of previous details leayout for 404.html

Fixes #81

sauloperez commented 4 years ago

Thanks a lot for your contribution @asprazz!

This is looking quite good but the footer looks like this on a large screen

Captura de pantalla 2019-10-03 a les 20 07 48

Let's find out how to do something like https://www.mapbox.com/foo. I haven't checked their markup but it can't be hard (famous last words :trollface: ).

ankush-0x90 commented 4 years ago

Yeah! It is the problem Lets think what we can do... :thinking:

sauloperez commented 4 years ago

Alright then. It's not a big deal to skip the footer. Let's just add some top margin to the body of the page. I would just use the same amount (mt- in Tailwind CSS) we use on the homepage for consistency.

ts-1 commented 4 years ago

@sauloperez can you confirm if we can use main element in 404.html template? I think the footer spacing issue can be fixed.

ts-1 commented 4 years ago

I have created the PR for the same. Please verify.

sauloperez commented 4 years ago

Welcome @ts-1 ! Thanks a lot for your contribution!

Would you mind creating a single pull request out of #86 and #87? they address a single change unit, so to say, and having them split makes it hard to manage. Also, for your change to be correctly applied on top of @asprazz work you should instead branch off his layout_fix_404 branch and not this repo's develop. Otherwise, you will override his changes and we want them.

Regarding the change itself you propose, I think that by controlling the hight of the main element doesn't quite solve the problem yet because it assumes heights so it won't always work. For instance, as you can see below, as a result a scrollbar will show up on smaller sizes

Screenshot from 2019-10-04 11-20-50

Googling a bit I found that https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ might have the solution. Lastly, do not forget we're using Tailwind CSS so we don't modify the SCSS unless there's no other way.

ts-1 commented 4 years ago

@sauloperez Okay, I am going to do the same.

ts-1 commented 4 years ago

@sauloperez I have created the PR with @asprazz code. Please verify the same.

sauloperez commented 4 years ago

Thank you both @asprazz and @ts-1 ! Now it looks ok!

Screenshot from 2019-10-07 12-20-49