ExactTarget / fuelux-mctheme

Marketing Cloud Theme: Use Fuel UX 3 and Bootstrap 3 to create a user interface with the look & feel of existing Salesforce Marketing Cloud applications. View the latest at
http://fuelux-mctheme.herokuapp.com/
BSD 3-Clause "New" or "Revised" License
19 stars 21 forks source link

Wizard Nav Secondary Text #234

Open scott-joe opened 9 years ago

scott-joe commented 9 years ago

Please see the image below. I have a PSD if needed. unnamed-1 The secondary text (e.g. Outbound) should be available for any step in the wizard as needed.

Text Size: 11px Text Color: #999

As far as I know, there are no restrictions on the tag used for the secondary text. That's something we can broadcast to the engineers. It'd be nice if there was a small amount of documentation around the newly supported markup and styling.

Let me know if you have any questions. Thanks!

chriscorwin commented 9 years ago

The text size for "Select Template" in your example does not match the current size (nor weight).

Are we to modify the main text when there is secondary text?

Also: it seems as if this needs to have a sister ticket in fuelux, where the actual markup/js would need to go.

scott-joe commented 9 years ago

@chriscorwin I probably agree. But @interactivellama said to just make a ticket here with a screenshot and sizing information so that when sub-text is present, it is represented as seen above. If you want the .psd Keith gave me, I can email it to you.

interactivellama commented 9 years ago

@chriscorwin There is no JS from my understanding. The app themselves would handle it if any text needed to change. We just need the classes to give them the style, so they have the approved UXDS CSS to avoid red lines which sounded like more of an MCtheme item.

chriscorwin commented 9 years ago

Coolio.

I'll just make something up, then. :)

swilliamset commented 9 years ago

@jamin-hall please provide some feedback

scott-joe commented 9 years ago

@swilliamset I don't believe he has notifications set up for his account. He's never really used Github before.

swilliamset commented 9 years ago

pinging him offline...

jamin-hall commented 9 years ago

Sorry guys. Thanks for pinging. I’ll take a look at the PSD from Keith and provide an answer shortly. Seems like it would be best if we can avoid having two separate classes for the primary text, but I want to see what that does to the spacing in the wizard step.

jamin-hall commented 9 years ago

Ok. Looked into this a little more. The standard 16pt font-size creates white space issues when the detail text is added.

Here’s what I recommend:

Let me know if there are any other questions. I’m attaching Keith’s PSD for reference.

chriscorwin commented 9 years ago

This is going to require javascript changes in the Wizard itself, can't be done just via CSS.

Therefore, this should now be a https://github.com/ExactTarget/fuelux issue, not an MC Theme one.

scott-joe commented 9 years ago

I don't see this as a viable solution. As Corwin stated, it requires JS to implement, and creates micro-variations in the pattern.

I would recommend changing the natural font-size for the primary text to 14pt or finding a design solution to ease the whitespace issues.

Programmatic conditionals around design properties such as font-size should be reserved for viewport re-sizing (responsive), not intermittent content.

scott-joe commented 9 years ago

I thought this was resolved in 1.6.1. It's present and styled here on the 3rd example http://fuelux-mctheme.herokuapp.com/examples/fuelux/fuelux.html#wizard