Update Design for IA's that return facts

[moollaza]

In an effort to further standardize our IA displays, we'd like to update IA's that return factual data like numbers, to display the number prominently at the top, with a short subtitle to provide context.

For example the Sales Tax IA should show:

---

6%

Pennsylvania - State Tax

---

The following IA's should be updated:

• [x] Sales Tax (@MrChrisW, @javathunderman would you be interested in tackling this one?) - #1497
• [x] Expatisan - #1501
• [x] Annual Rainfall - #1501
• [x] URL Shorten - #1501
• Any others?

---

/cc @abeyang @jagtalon

[javathunderman]

I’ll see what I can do…

[MrChrisW]

Seems reasonable. Can you approve the suggestion text below for the rainfall IA.

---

Title: 534mm Subtitle: Australia - Average annual rainfall in millimeters

[MrChrisW]

Expatisan suggestion

---

Current Title: Sydney cost of living index = 222 Subtitle: in Expatistan's scale (100 = Prague, Czech Republic)

---

Suggestion Title: 222 Subtitle: Sydney - Cost of living - Expatistan's scale (100 = Prague, Czech Republic)

[MrChrisW]

The URL shorten IA uses a custom template currently to display the editable input box. Guessing you'd just like the "Shortened URL" appended below the input box? Please clarify.

[moollaza]

@MrChrisW these look pretty good to me, I see you made a PR so I'll comment over there. Thanks!

[javathunderman]

@moollaza @MrChrisW Anything else to do here?

[moollaza]

@javathunderman I don't think so, it looks like @MrChrisW managed to get to everything already!

[moollaza]

@javathunderman hehe if you're looking for work I made a few new issues today about reviving some old Spice IAs. I'd love to see Forvo up and running again.

[javathunderman]

Right, looking into that!

[moollaza]

The URL shorten IA uses a custom template currently to display the editable input box. Guessing you'd just like the "Shortened URL" appended below the input box? Please clarify.

@MrChrisW yup that sounds perfect!

[MrChrisW]

@moollaza Ok, I've had a play around with the shorten link design. I don't think we really need to display "Shortened URL" under the link as it's on the answer bar, it feels repetitive. Maybe if the answer bar, was just "Answer" then we could provide a subtitle. Anyway see some examples below.

Current selection_201

---

Suggested selection_202

---

Improved selection_200 Improved + Suggested selection_199

[moollaza]

@MrChrisW looking good! Maybe we should switch URL with the actual URL that we shortened? Then it's less redundant.

@abeyang any thoughts on how the "URL Shorten" IA should look?

[abeyang]

@MrChrisW let's go with the standard title / subtitle, but with the input field included:

Couple of things to note:

• input field is sticking out to the left, so that the text inside is lined up with everything else
• I kept the "shortened link" in the subtitle. A bit redundant, I know, but I think it's ok b/c the url itself is first.

LMK if you have any thoughts / questions!

[MrChrisW]

@abeyang Updated as per your recommendations :+1: - View online

[abeyang]

Sweet @MrChrisW -- almost there! Just need a few more css tweaks:

.zci--shorten input.tag {
  font-size: 1.2em;
}

.zci__subheader, .zci__header__sub {
  margin-top: 2px;
  color: #999;
}

[MrChrisW]

@abeyang Updated as per your request.

• View CSS
• View online

One question, why are we changing these default values? You can just say "for design purposes" and I'll shut up :laughing:

.zci__header {
    font-size: 1.38em
}
.zci__subheader, .zci__header__sub {
    color: #888;
}

[abeyang]

Looks good! :+1:

That's a good question. We're still in the process of standardizing things, including going back and revisiting existing templates. Until we actually make those changes in the templates, it's going to require some hand-tweaking here and there...

But with that said, for the subheader, I think #888 would've been okay -- but yeah, looks good!

[MrChrisW]

Thanks for the explanation @abeyang Looking forward to seeing styles standardised :smiley:

@moollaza This should be good to close, provide there are no other fact IA's? Will have to remember if any new fact Spices appear to stick to these guidelines! Thanks

[moollaza]

@MrChrisW apologies for the delay, will tackle this ASAP.

[moollaza]

Haha whoops, thought this was a PR last night. We can close, the IA's have all been updated :+1:

[moollaza]

Will have to remember if any new fact Spices appear to stick to these guidelines! Thanks

@MrChrisW we're also updating our templates and adding some new ones. I expect these kinds of IA's will be covered under a new template :)