Yes, we're real big

[BigActual]

Referencing #24. Yes, we're real big. Yes we're too big. When you have a chance, please restrict our max width, collectively to like 980 or 1080 or some other common width in that range. IDC really what the final number is in that general area.

[d4mation]

Here it is at 75% width centered (Which happens to be 1080px wide on my MacBook)

What do you think?

[joelworsham]

I'm totally open to you coming up with a different, better display of the staff. I've never really loved what I originally came up with anyways.

[d4mation]

Yeah, back when I was handling #24 it had to be handled in a less than ideal way to get two rows. It may be best to revisit it entirely.

[joelworsham]

My vote is go crazy @d4mation and make something cool.

Here's some cool people doing a cool job with it:

http://10up.com/about/ https://getflywheel.com/about/ https://wpengine.com/about-us/

[BigActual]

Nice ideas Joel. Yes, Eric, I like that better.

[d4mation]

Those are really slick, @joelworsham. I'm going to look into re-doing this section a bit to be more maintainable/flexible with something like those in mind.

[BigActual]

I'm not for circles.

[d4mation]

How about triangles?

Trying to think up as many different ways to handle this that won't break/look weird with odd numbers rather than even numbers—considering our potential to grow beyond the four of us.

[d4mation]

Actually I think this would be way cooler:

Hovering for the details something like this

Arranged like this:

The Hexagons give some visual interest while allowing us to add onto it in the future without things looking weird.

[brashrebel]

Cool with me.

[BigActual]

What about the gear in our logo?. Keeping a consistent design element instead of introducing a new one. Interlocking and offset, kinda like the black and gray hex shapes above.

[d4mation]

That's a great idea! I had thought about something similar, but I for some reason overlooked the gear and was just thinking the lightbulb which I thought wouldn't look right.

I'll have to be mindful of the size of the sprockets for @joelworsham's Gravatar in particular since he's off to the side. I got his looking pretty good within a hexagon

but his looked pretty weird/funny in a triangle

I'm going to start working on building out something for a gear-shaped crop.

[d4mation]

Went for an SVG clip this time rather than pure CSS so I could get those curves on the sprockets done nicely. Hopefully it works in IE 🙈 Downloading some VMs now to test.

[d4mation]

After what feels like centuries, I've got it working in IE 11 (Timestamp is incorrect—using a VM).

Going to try testing back a couple versions of IE as well. SVGs are pretty tricky cross-browser, but for a shape like this it was likely overall easier than using pure CSS.

[brashrebel]

That's amazing. I love it.

[d4mation]

It is now working correctly in the latest Chrome, Firefox, Safari, and IE 9-11 (Possibly 8, but I was testing in JSFiddle and that wouldn't load in IE 8 for me).

Now I've just got to translate the mockups into something real, which should be much simpler 👍

Here's the Fiddle, for anyone possibly interested

[d4mation]

Here's a sneak-peek:

On even rows, I'm tilting the gears slightly, that way they appear to "match up". Conveniently, that could also visually represent that we all work together as one "machine". Unfortunately, since @joelworsham is currently on the second row his eye gets cut off. 🙊 We may want to rearrange things so that doesn't happen. Alternatively, we can decide against tilting the gears.

All I've got to implement still are hover-overlays for our names/titles and re-adding in a link to our profiles.

I've set up some rather complicated logic to ensure this expands going into the future without any need for intervention/recoding. I've included a crude diagram of different layouts (Asterisks are gears).

However, currently this logic doesn't work very well for 6, 7, or 9 Staff Members for example. We'd get some orphans hanging down below unless we add another conditional for have them revert to another layout. Any ideas for handling that are appreciated.

1 Staff Member

-------------
------*------
-------------

2 Staff Members

--------------
---*------*---
--------------

3 Staff Members

--------------
--*---*---*--
--------------

4 Staff Members

--------------
---*------*---
-----*--*-----
--------------

5+ Staff Members. As many gears that are needed are added following this pattern.

-------------
---*--*--*---
-----*--*----
---*--*--*---
-------------

[BigActual]

In your mockup we all seem, proportionately, quite large. Try knocking us down to 2/3 of the size. May have you go smaller. Let's see it pushed to a dev site or something.

[brashrebel]

I personally like them large like that.

[BigActual]

No

[d4mation]

Here's a quick mockup of the gears at 66% of their current size (I used some CSS Transforms, to do it properly I need to remake the SVG). The weirdness with the gradient at the bottom is caused by the color shifting as you scroll and my screenshot triggered it weird.

I'm going to set up their current sizes on Staging. Might take a minute or two.

[BigActual]

Love it.

[d4mation]

Staging for the rbmin install was acting strange and redirecting every install to Real Big Plugins Staging, so I had to make some destructive changes. _Staging should not be merged on-top of Live for this install until this is reverted. It will prevent the other sites within the multisite from loading._

The large version of the gears can be seen here: http://rbmin.staging.wpengine.com/about/

My only concern with the smaller gears is that I was going to have our names/titles appear on hover similar to how they are on the Live site now and having smaller gears means less room for the text.

[BigActual]

This is the only place on the site where I see a black outline. I believe everything else is just flat (for lack of a more thought out description), not outlines.

[d4mation]

I just removed them on the Staging site. I had originally placed them there since without them there isn't a very clear distinction between the shape and the background.

Maybe we could use a dark green outline instead?

[d4mation]

I just redeployed to Staging as I'm having WP Engine look into the problem I mentioned above, so the URL for Staging won't work for the time being.

[BigActual]

Much better w/o, but it looks like they grew again though.

[d4mation]

Yeah, I had only done something very temporary earlier to show what they could look like smaller. I will need to recreate the SVG for the gear shape to make it smaller as scaling SVGs does not work very well cross-browser.

I'll work on getting it recreated for a smaller size.

[d4mation]

I've sized down the gears on Staging to be 66% of their original size. Since they no longer have a border (Which was technically created by having another, non-clipped shape behind the profile images), it was a bit easier to resize them than they would have been otherwise.

[BigActual]

Yeup. That's sweet. Nice.

[BigActual]

Anything keeping from closing this issue?

[d4mation]

Still have to implement our names/titles on hover. Now that the gears are smaller, I may have to instead place them below the gears using some kind of banner as longer names/titles may not fit nicely inside the gears.

[joelworsham]

Man, I was with @brashrebel. I liked them better a bit bigger.

Also, there's no name now when hovering, because it can't fit. Can you find a way to incorporate the name and positions? Even if it's just under or above or on hover or something.

[d4mation]

Yeah, I'm with you @joelworsham. I was going to put them in as overlays similar to how they were before, but I'm not sure if I can do it so simply now that they are smaller. I've been thinking perhaps a banner along the bottom of the gear that appears on hover.

[d4mation]

Fades into view on Hover with a 100ms delay so it begins to appear after the gear starts to scale up. Our names use the font-size of an h4 and our titles use the font-size of an h5.

I thought clipping it to the same shape would be cool, but we don't have a lot of space to work with and most of our titles would spill out of the edges slightly and be lost.

Changes will be viewable on Staging shortly.

[d4mation]

It is working in the latest Chrome, Firefox and IE 9-11 flawlessly currently.

In Safari, there's a slight bug with how it is positioning the text:

I'm thinking it is related to the contents of this article. However, since the alignment issues only seem to apply to the very basic <text> elements, I'm not sure what can really be done about it. Changing the y values would fix it for Safari, but break it everywhere else. CSS doesn't seem to affect it either (And targeting just Safari via CSS would be ridiculous).

[d4mation]

I've been brainstorming the "orphaned gears" problem and I think I've come up with a solution. It is unfortunately verbose, but it should cover just about any use case.

At 5+ Staff Members, we are following this pattern:

-------------
---*--*--*---
-----*--*----
-------------

Which repeats indefinitely. Basically, it is based on the same repeating 5 gears.

I figure that since it is based on 5, we could do some modulus division to determine what to do in cases where the number of Staff Members doesn't divide equally into 5.

For example:

6 % 5 = 1

-------------
---*--*--*---
-----*--*----
-------*-----
-------------

7 % 5 = 2

-------------
---*--*--*---
-----*--*----
---*-----*---
-------------

9 % 5 = 4

-------------
---*--*--*---
-----*--*----
---*--*--*---
------*------
-------------

In the case of 8 % 5 = 3 or 10 % 5 = 0, it by default leaves us with a nice, finished pattern so nothing special should need to be done. So, we basically have slightly varied patterns if the result of the modulus division is 1, 2, or 4 as those are the only possible results other than 3 or 0 which we will just ignore and treat normally.

Once this is taken care of, I'd feel comfortable closing this Issue and moving these changes to Live.

[d4mation]

Modulus cases are implemented! :tada:

I tested each possibility from 1-14 Staff Members and everything worked as it should following all my really crude diagrams from above. Given the nature of modulus division, going up through infinity things should always work the same.

The current revision is up on Staging. If all looks good to you guys, I'll go ahead and SFTP these changes to Live.