search

BRL-CAD / web

BRL-CAD's primary website
BSD 2-Clause "Simplified" License
11 stars 28 forks source link

Improve positioning of "about" section blurbs #11

Closed pl-semiotics closed 8 years ago

pl-semiotics commented 8 years ago

Previously, the about section element had a static fixed height, excluding the height of the three icons and blurbs at the bottom, and space was reserved for those through the use of a large static fixed top margin on the following element. This caused significant problems in cases where the height of the reflowed blurb text exceeded the expected height, and can also look bad when the text is shorter than expected, resulting in a large expanse of white appearing beneath the blurbs. This commit modifies the markup to make those blurb heights be considered part of the about section, while maintaining the exact positioning of most elements and backgrounds. Several pixel constants are still used in order to keep the site looking precisely as it did before; in the future, it may be a good idea to make the sizing of various other elements more dynamic as well. The positioning of the icons, blurbs, BRL-CAD logo, and white background behind the blurbs is, to the pixel, the same as it was before, although the lower bound of the white background behind the blurbs now resizes based on the calculated height of the blurb, providing the desired functionality. There is a single deviation in appearance from the previous version: the thin black bar between the aforementioned white background and the background of the BRL-CAD logo is now a fixed height. This compromise was accepted due to the impossibility of reproducing the previous arrangement without accepting influences on the section from markup in other regions: previously, the bar was generated by the lower padding of the items in the menu, and as such depended on the font size, baseline alignment, etc. of those menu items.

pl-semiotics commented 8 years ago

After seeing some of how the markup on the main page is interacting, I think that fully cleaning up this version of the site is going to take a significant amount of work. This particular change focuses on not making any/many changes to the appearance while hopefully making some of the markup cleaner and fixing one major problem, but after seeing this site scale over several different resolutions, we're at least going to have to change the way that the logo is sized in the top bar, possibly the way that the rest of the top bar is aligned, the way that the project name is positioned, the way that blurbs and icons are positioned under it, and, as a consequence of those, the way that the white underlay for the blurbs is positioned.

Depending on the desired aesthetic, it might be simpler to try to update the other design from @inderpreetsingh in order to get a fully functional site that doesn't break really easily with different browser conditions, although this might be easier to get into a shape that works with one particular system.

brlcad commented 8 years ago

Peter, I agree that the top menu needs to be reworked. Comparing where we're at now with what @utkarshsingh originally designed, you'll find fixing one problem introduces another. Lots of tradeoffs due to needing more careful div containment.

I'm seeing a few problems with this PR. 1) on really wide windows, the menu disappears beneath the main gray section whereas the current stays in front, 2) the text for the three main highlights ends up overlapping the "what is brlcad" section illegibly on really narrow windows, and 3) not digging the hairline rule added before and after the what is brl-cad sections.

(1) It's a problem both before and after as the portion of the menu overlapping the gray cannot be selected in either, but not being about to even read the menu seems ever so slightly worse. I think the fix is to make the menu a table without the padding-bottom. This should keep the text always visible, but care will have to be taken to make sure the logo stays centered on the 4th table column, above the gray, but below the brl-cad text.

(2) The white underneath the three callouts is annoying, but it does prevent the text from overlapping the what is brl-cad section... we need a solution that has a balance of some padding, but keeps the text in that region too.

(3) The black bar under the gray ties it back with the menu. Putting a rule before/after the what is brl-cad section does not serve that purpose, so it seems out of of place. It's need to be applied to all the sections, and I think doing so would just make it feel cluttered.

pl-semiotics commented 8 years ago

Hmm, okay, I must have missed numbers one a three somehow, I'll try to fix them tomorrow when I have access to the right computer. Number two sounds like issue that this was supposed to resolve, and I don't recall seeing it at all, can you elaborate a little bit?

Making this site reliable seems like it'll involved rewriting most if not all of it, are we still sure that it wouldn't be easier to start over on the implementation? This PR alone (with the issues that you mentioned) took at least several hours to get into close to working order, and it doesn't even try to tackle bigger things like aligning to a baseline grid.

Also: Marc from gci last year has offered to help make a production ready version of the website once he has a new computer set up right, which should help...

pl-semiotics commented 8 years ago

@brlcad, Hmm I can't seem to reproduce your third item now, I don't see any rules in my copy that aren't present in the original, and even at its widest, on my machine, I'm not seeing that problem with the menu. On number one, it looks like @inderpreetsingh has added a new menu that doesn't have most of the old problems, maybe I should just try to integrate that one?

pl-semiotics commented 8 years ago

@inderpreetsingh, can you reproduce the problems that @brlcad was seeing?

inderpreetsingh commented 8 years ago

I don't completely understand this discussion yet, I will look into again tomorrow when I wake up and let you know.

pl-semiotics commented 8 years ago

Sounds good, thanks!

inderpreetsingh commented 8 years ago

I think both HTML markup and the CSS needs heavy cleanup for which it would take time.

I have used better markup for navigation. So I think, whatever new stuff that we are adding we can use better markup for that, this would get rid of many of the problems mentioned above. For example instead of having a task like "improve the markup" let's rather have something like "making the blurbs responsive" and while doing that use a better markup. This way we would get rid of issues as well as have better markup for the page. I am going to make an issue for responsiveness of the about section blurbs.

pl-semiotics commented 8 years ago

@interpreetsingh, I agree that we need to tackle the cleanup from the perspective of fixing one concrete, user-facing issue at a time. I believe that this does that (specifically, it removes the possibility of about blurbs overlapping the what-is section with large fonts and/or small screens), and in doing so prepares the markup for relatively easily making more changes---for example, wrapping the about blurbs (if I understand #14, I believe that we should be able to make it work just by adding min-width to the correct divs, and possibly horizontal centering). Can you reproduce any of the issues that @brlcad was seeing with the new code but not the old code? If not, I'll merge this as (1) a good issue fix and (2) preparing the ground for fixing more things.

Has anyone here had experience working with aligning content to a baseline grid before?

pl-semiotics commented 8 years ago

The HTML cleanup in #13 makes the approach taken in the original version of this unnecessary, so I'm closing it.