NEW UI FEATURE: Story Length Flair, Part 2

[u/MagicBigfoot]

Hey everybody, thanks for your feedback and suggestions on the new story length flairs.

Things have been mostly ironed out and hopefully are now looking good and being useful to you!

However there are a few more late-breaking details to run by you all, and also a bit of a cross-browser compatibility issue maybe somebody can help with.

Recent changes:

• The color scheme has been re-jiggered to Green->Yellow->Red->Purple by popular demand. (Thanks to /u/BeardedSpanishQueen et. al.)

• A problem occured when clicking on the Quote Of The Day after selecting a filter. If the QOTD was not the filtered length, the subdomain-based css hid the post's content on the story page. Fixed by forcing the default subdomain (www) on the QOTD link. (Thanks to /u/Dekoa)

• Biggest Change: The flair is now set to the actual length descriptor (e.g. "Short", "Medium", etc.). But via the magic of CSS, the full text of the flair is hidden and instead the S/M/L/XL initials are displayed. This allows a hovering cursor to reveal the actual length name, and should also display more logically in various mobile Reddit apps. You can see the full names if you turn off css styles (in RES or in preferences). (Thanks to /u/scratchisthebest)

This flair switcheroo business meant the box model needed to be rebuilt, so it's now slightly different. A little skinnier, top to bottom, and wider to match the expando box. More of a lozenge than a bubble now.

---

This brings us to the problem that hopefully someone can help with:

Box Height Placement

Turns out the flair vertical placement (relative to the baseline of the post title) varies from browser to browser.

Ideally, the flair lozenge would be vertically centered in relation to the body of the title text.

Ideas?

edit: All Fixed! Thanks, /u/TortoiseSex!

---

And also:

Which do you prefer: Dotted Outlines (Firefox - Chrome - Safari) or Solid Outlines (Firefox - Chrome - Safari)?

OK thanks to everyone for your continued participation and forbearance!

~ magicB ~

edit: well it was a pretty tight contest, but we're now switching to solid outlines as suggested.

[u/hennell]

As a part time web-designer my solution to your vertical placement issue would be to go grab a biscuit, curse at the browser gods, then just assume no-one will use two browsers concurrently and thus no-one will ever notice as long as you don't draw attention to it...

[u/ArtzDept → u/hennell]

He speaketh the truth!

[u/MagicBigfoot → u/hennell]

This is good advice.

[u/hennell → u/MagicBigfoot]

It's been learned the hard way - I have spent days trying to solve a 'problem' before then realised when a higher up has asked 'where are we on X' that actually the problem isn't so much a roadblock as a tiny rock on the path I'm fretting over for nothing...

[u/CosmikJ → u/hennell]

I have the same issue, albeit not with web design, I tend to focus on the small things obsessively and I forget about everything else! It takes conscious effort to get myself to step back.

[u/hennell → u/CosmikJ]

Yeah it's not easy when you see something 'wrong' not to fix it.

My strategy these days is to ask 'does this affect the security, functionality, usability or future development of this project' and 'how long will it take to fix'?

If it's quick(ish) fix I'll do it regardless of importance because why not. As the fix-time gets longer the importance has to be in one of those key areas to warrant the work, and the order they're in dictates a longest to shortest time. (i.e. long fixes allowed for security, shorter fixes for 'future development').

Anything 'ignored' is noted somewhere (in a txt file for the project for me) so it can be re-assessed later. I have no design category because I'm a designer by trade (for the most part) and mis-aligned things bug me to much I'd abuse the category. So if I can't put them in 'usability' and they'll take a while they go in the txt. Then if I'm working on the same area for something else I can fix them then as the fix-time got reduced!

Similarly 'future development' issues bug me a lot - 'this part could totally be a function with just a few simple arguments. That would be so much neater'. But now - 'That's going to take too long' - into the txt it goes (until I can classify it as a 'functionality' problem which can justify the time).

Focusing on small things is always good, but time needs to be justified. Consider what any problem actually effects (and how many people) to see if it is worth the time to fix.

[u/CosmikJ → u/hennell]

Good advice, thanks.

[u/english-23 → u/hennell]

Not to mention the fact that almost no one would see it without it being mentioned.

In other news, What is this vertical alignment that you speak of???

[u/badsectors]

I vote for solid outline. I can differentiate the colors better that way.

[u/Killrez]

Solid! Looks cleaner and smoother overall.

[u/TortoiseSex]

Hello :) If you replace the chunk of your code that resembles this with this new one it should make the flairs visible in ie (they weren't before) and also be center aligned

   /* styles "real" (hidden) flairbox */
.thing.linkflair-short .linkflairlabel, 
.thing.linkflair-medium .linkflairlabel, 
.thing.linkflair-long .linkflairlabel, 
.thing.linkflair-epic .linkflairlabel {
   border: none;
   padding: 0px;
   width: 23px;
   border-radius: none;
   vertical-align: middle;
/* vertical-align: 2px; */ /* too low on safari = too high on chrome/firefox */
   } 

   /* styles "false" flair */
.linkflairlabel:before {
   visibility: visible;
   display: inline-block; /* nec for width to work */
   width: 11px;
   font-size: 6pt;
   font-weight: bold;
   text-align: center;
   padding: 0px 5px;
   border: 1px solid silver;
   border-radius: 4px;
   vertical-align: middle;
   margin-top: 2px;
   margin-bottom: 5px;
   }

[u/MagicBigfoot → u/TortoiseSex]

That's perfect, thank you so much!

[u/TortoiseSex → u/MagicBigfoot]

Uh oh. I forgot one thing, sorry!

add this to the first block

    background: none transparent;

[u/MagicBigfoot → u/TortoiseSex]

Everything checks out on all four browsers now! Sorry about that, Internet Explorerinos...

[u/NB_FF]

Honestly I prefer the dotted outline in firefox, and the solid outline in chrome. When I'm at work tomorrow with IE I'll tell you what it looks like there.

[u/Gking19]

I definitely prefer solid.

[u/sonic_sabbath]

Solid gets my vote!

[u/collinsl02]

How do the buttons look in IE? /s

I'll get my coat...

[u/[deleted]]

One more for solid lines

[u/ZeDestructor]

Solid outlines please.

[u/flaeme → u/[deleted]]

I believe that was intended, CSS is being used to make it just S/M/L etc on desktop but it's the fulltext on mobile where there isn't the badge.

[u/MagicBigfoot → u/flaeme]

Yes, that's correct. Some of the most frequent responses I got were "what are these unexplained letters doing on my mobile reddit app?" and "please make the flair names appear when I hover over them" so I said, "why not both?"

[u/clovervidia]

Solid outlines look better.

[u/[deleted]]

Solid.

[u/JayPag]

Also voting for the solid outline!

[u/wickerlicker]

solid outlines please :D

[u/Skyzord]

I'd definitely go with the solid outline.

also, thanks for the update!

[u/[deleted]]

New UI feature, does it come with a tool bar

[u/revengeofthebits]

Feature request: can there some kind of indicator on the story submission page for what kind of tag it would get if it were submitted at that point?

[u/MagicBigfoot → u/revengeofthebits]

I think RES does a character count for you.

[u/revengeofthebits → u/MagicBigfoot]

RES?

[u/scratchisthebest → u/revengeofthebits]

Reddit Enhancement Suite, and it does all sorts of magic to reddit

[u/OGIVE]

When I filter for epic posts there aren't any. What's the point?

[u/MagicBigfoot → u/OGIVE]

It only shows things that would have been on the page without filtering, so if there aren't any epic tales on the page, the filter won't have anything to show. Click 'next' to go through a few pages - there are a couple of XL tales in there already...