search

columbiaspace / columbiaspace.org

Okay, Houston, we have a website here.
http://columbiaspace.org/
7 stars 3 forks source link

awkward spacing in home page list of missions #150

Closed gschare closed 3 years ago

gschare commented 3 years ago

image

Why is there a big hole

gschare commented 3 years ago

The hole is because we have a "row" class for the div but this is being used across the entire list of missions. Meaning we're not splitting it into rows of 3. A simple fix is to make a new div after 3 missions. This works. It also seems to work alright for mobile, but not for different browser widths. I'm thinking of doing some browser math to figure out how many tiles to display in a row.

gschare commented 3 years ago

I spent a really annoying number of hours screwing with the HTML layout, Liquid programming, and the dark art of CSS only to find out that this would be working fine if we had upgraded to Bootstrap 4.

Well, upgrading to Bootstrap 4 isn't difficult. You just download it into /assets/stylesheets/ and switch which folder we're sourcing our CSS from. And then everything breaks because Bootstrap 4 is not backwards compatible, and the site looks like it was trampled by a herd of stampeding web developers.

Here's what I have to say about the hole. It's almost correct. The grid seems to be formatted correctly -- maybe it needs some sizing tweaks or shifting some elements around, but the core of the idea is there already. In fact, I copied the existing code into one of those online testing sites and it worked almost as-is (the one thing I'm 100% sure we need to change is that the tags need to be nested inside the card, not outside). So do that and some other minor changes, and the hole disappears! But to allow that fix to work, we need Bootstrap 4. And to get Bootstrap 4 to work, we need to do a ridiculous amount of work that (1) we should've done years ago and (2) I do not feel emotionally prepared to perform. So no, that's not gonna happen.

The alternative is more CSS shenanigans. If I can find a simple, straight-forward Bootstrap 3 fix, I will implement it. If I can't, the hole remains. If someone complains, they can aid in the quest for a Bootstrap 3 solution.

I'm so tired.

gschare commented 3 years ago

So I played around a bit more and the cause of the bug is seemingly, at least apparently, the card-body text. Not the div, but the elements inside the card-body div. Remove all of those, and it's fine. Remove any single one of those, and the spacing changes but still has holes somewhere. This leads me to believe the issue has something to do with the spacing between these elements. I wonder if there's some way of displaying the text that avoids these problems.

tigerlily-he commented 3 years ago

Hey @gschare! Wow, you made a deep dive into this problem. Bootstrap versions and compatibility are a huge headache. I see three general directions to removing this awkward spacing problem:

  1. Display the list of mission in some other way without using cards
    1. Use normal divs with CSS or tables. If there's a better way of showing all the missions on the home page, go for it. You do have to make sure the problem with distributing divs among rows such that there are 3 columns is resolved.
  2. Upgrade to Bootstrap 3 or 4 and truly solve the formatting issue.
  3. Remove this section completely from the home page.
    1. If you don't think it's useful to people and some other more useful info/resources could go in this space, make the change.

In regards to upgrading to Bootstrap 4, I remember that one of the major problems in switching from v2 to v4 is that the dropdown menu in the nav bar stops working. There are definitely other issues that arise. If fixing the website is going to take as long as making an entirely new one, it might be worth exploring the option of a new website redesign. You can get 1-3 other students to work on a website redesign with you so you don't have to do it all by yourself.

gschare commented 3 years ago

Thanks for the advice! You inspired me to take another look at it and use one of the methods I tried when I was messing with built-in Bootstrap classes. It seems to work now, though in an admittedly not-great way, since it relies more on the Jekyll Liquid code than actual CSS.

I think an upgrade to Bootstrap 4 is a good idea! I will look into it maybe during a less-busy time, perhaps around winter break? That would give me some time to assess what steps would be involved and find some willing volunteers.

tigerlily-he commented 3 years ago

Upgrading to Bootstrap 4 isn't urgent but it is necessary and would be a great improvement. I would suggest asking around for volunteers before winter break so that you can get actual work done during winter break.

People want experience building websites and doing "real software engineering" so this is a good project. Keeping up with new versions of software is a task that engineers have to do all the time.