Nav bar doesn't fit in one line - Githubissues

team178 / team178.github.io

The 2nd Law Enforcers' Website

http://farmingtonrobotics.org

Mozilla Public License 2.0

14 stars 17 forks source link

Nav bar doesn't fit in one line #93

Closed nandantumu closed 7 years ago

nandantumu commented 8 years ago

[x] Edit names of tabs to maintain meaning, but reduce character count.
[ ] Compress share buttons to take up less horizontal space

gisellegk commented 8 years ago

Challenge: make the font size set itself relative to the length of the content. ie. when there's more text, the font size goes down. Might be possible to do with Javascript.

If we have super long words in our nav bar, expected behavior of the function would be to make the font size very tiny. It would be up to the designers to make sure that it's still at an acceptably legible size, but this way we don't have to pull our hair out over one or two letters.

TJScalzo commented 8 years ago

Going off of what @gisellegk said, you could:

Use @media and then different pixel sizes for different window sizes
Use vw as the unit for the pixel size and then @media for window sizes where the text would get too big/small
You could also use some magical, pre-made JavaScript program that does everything automatically for you (probably doesn't exist but...)

gisellegk commented 8 years ago

@TJScalzo You'd be surprised what JS libraries exist. Though creating one ourselves from scratch is not always a bad thing, since it will do exactly what we want it to do.

Your first two suggestions are fine, but don't get at what I was trying to say. Rather than resizing the container based on window size, I'm suggesting we resize the font so that it can't ever overflow to the next line. Even if we were to put the entirety of Lorem Ipsum in it.

TJScalzo commented 8 years ago

@gisellegk I've no idea how it'll work and what already exists. (However, you can use vw when defining font-size.)

gisellegk commented 8 years ago

Yeah I know you can use be for font size, but that still makes it relative to the size of the screen/container, not the length of the text. I would recommend writing a Javascript function that sets the font size after counting the # of characters in the nav bar. On Jan 29, 2016 8:03 PM, "Tim Scalzo" notifications@github.com wrote:

@gisellegk https://github.com/gisellegk I've no idea how it'll work and what already exists. (However, you can use vw when defining font-size.)

— Reply to this email directly or view it on GitHub https://github.com/team178/team178.github.io/issues/93#issuecomment-177035935 .

TJScalzo commented 8 years ago

Oh, look what I found... FlowType.JS & FitText. Also maybe Lettering.JS?

nandantumu commented 8 years ago

After the character count was reduced, and various other commits were made, the Nav bar resizes until it turns into a hamburger fairly well. The issue isn't as much the fonts as it is the social buttons' tendency to arrange in to a row of 4 and one row of 1. I don't really know enough to fix this right now.

TJScalzo commented 8 years ago

The external links bar could probably be fixed to your specifications with one or two @media queries. I'll see if I can fix it tomorrow.

TJScalzo commented 8 years ago

Maybe this could help? (Is this even still a problem?)

gisellegk commented 8 years ago

http://www.metaltoad.com/blog/resizing-text-fit-container ??????????

I have no idea.... I'm too tired lol

TJScalzo commented 8 years ago

It'd be cool, but I also think it's more trouble than it's worth.

gisellegk commented 8 years ago

https://css-tricks.com/flexbox-truncated-text/ saw this on the internets. thought it might be useful, if not for this, then for something else lol