908309 - [Settings] Add second line of text if truncation exits

Status: RESOLVED WONTFIX

(Firefox OS Graveyard :: Gaia::Settings, defect, P1)

Description

[Eric Pang [:epang] UX]

Attachment: Settings_second line_spacing.png

Ismael,

In settings it's been brought to our attention that there is not enough space to fit all translations into 1 line. (See bug 892778).

I've attached a proposed solution to allow text to wrap to more lines if needed.  Can this be added to the building blocks?

This should only be done when no other translation can be provided.

Comment 1

[Eric Pang [:epang] UX]

Hi Arnau, I wanted to check with you to see if this something that we can add to the building block to have the issue of truncated text.  thx!

Comment 2

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

AFAIK we cannot truncate text using CSS only for multiple lines of text, we would need some additional javascript. That means we cannot do it in the Building Blocks.

Comment 3

[Eric Pang [:epang] UX]

Hi Tim, since this cannot be part of the building blocks is this something you can help us with?

Comment 4

[Ismael Gonzalez [:basiclines]]

Well, we can just add a "max-height" then everything below that size will be hidden, but we will not be able to add ellpisis just with CSS.

A/ CSS ellipsis for single-line strings
B/ CSS multi-line text (only 2 lines) w/o ellipsis

Anything outside that, requires JS

Comment 5

[Eric Pang [:epang] UX]

(In reply to Ismael Gonzalez [:basiclines] from comment #4)
> Well, we can just add a "max-height" then everything below that size will be
> hidden, but we will not be able to add ellpisis just with CSS.
> 
> A/ CSS ellipsis for single-line strings
> B/ CSS multi-line text (only 2 lines) w/o ellipsis
> 
> Anything outside that, requires JS

With this bug we are trying to avoid truncation and the use of ellipses.  If needed we can most likely have a max of 3-4 lines to avoid this having truncated text.  Would something like this be possible?

Comment 6

[Ismael Gonzalez [:basiclines]]

We can go with B/ but with the desired amount of lines (i put 2 as an example, it may be 3 or 4 or whatever)

Comment 7

[Eric Pang [:epang] UX]

If we put 3 or 4 lines (just for safe measure) and there's only 1-2 lines of text will empty spaces be shown?  Or will the extra lines only show up an needed?

Comment 8

[Sergi]

(In reply to Eric Pang [:epang] from comment #5)
> (In reply to Ismael Gonzalez [:basiclines] from comment #4)
> > Well, we can just add a "max-height" then everything below that size will be
> > hidden, but we will not be able to add ellpisis just with CSS.
> > 
> > A/ CSS ellipsis for single-line strings
> > B/ CSS multi-line text (only 2 lines) w/o ellipsis
> > 
> > Anything outside that, requires JS
> 
> With this bug we are trying to avoid truncation and the use of ellipses.  If
> needed we can most likely have a max of 3-4 lines to avoid this having
> truncated text.  Would something like this be possible?

I'm a little bit worried about this. You mean we may have headers with 4 line titles?

Comment 9

[Eric Pang [:epang] UX]

(In reply to Sergi from comment #8)
> (In reply to Eric Pang [:epang] from comment #5)
> > (In reply to Ismael Gonzalez [:basiclines] from comment #4)
> > > Well, we can just add a "max-height" then everything below that size will be
> > > hidden, but we will not be able to add ellpisis just with CSS.
> > > 
> > > A/ CSS ellipsis for single-line strings
> > > B/ CSS multi-line text (only 2 lines) w/o ellipsis
> > > 
> > > Anything outside that, requires JS
> > 
> > With this bug we are trying to avoid truncation and the use of ellipses.  If
> > needed we can most likely have a max of 3-4 lines to avoid this having
> > truncated text.  Would something like this be possible?
> 
> I'm a little bit worried about this. You mean we may have headers with 4
> line titles?

Hey Sergi, ideally we don't want this going anywhere past 2 lines.  But some localizations are really long so it might make sense to have the option.  But I agree that going over too lines starts looking really messy.  Maybe for now it might make sense to stick to a max of two lines.  It's a pretty generous amount of space, but if a translation cannot fit then we'll deal with it on an individual basis.  What do you think?

Comment 10

[Sergi]

IMHO using 2 lines of text would be the best approach. I mean, leaving open the possibility of adding 4 lines of text would make people use that extra space instead of looking for a better and/or shorter translation.  

Thanks for the clarification Eric!

Comment 11

[Eric Pang [:epang] UX]

The best choice would be: 
B/ CSS multi-line text (only 2 lines) w/o ellipsis

Ismael, can you look into implementing this?

Comment 12

[Ismael Gonzalez [:basiclines]]

Is this a Building Block lists.css default behaviour, or do we only need it for Settings app?
If it is a BB lists.css default's, is it something we need "now" or can we add it to the Building Blocks refactor?
If it is just a Settings app thing, i think i can go for it!

Comment 13

[Tim Guan-tin Chien [:timdream] (please needinfo)]

This is totally doable in Building Block in CSS as Ismael had said.

Comment 14

[Eric Pang [:epang] UX]

(In reply to Ismael Gonzalez [:basiclines] from comment #12)
> Is this a Building Block lists.css default behaviour, or do we only need it
> for Settings app?
> If it is a BB lists.css default's, is it something we need "now" or can we
> add it to the Building Blocks refactor?
> If it is just a Settings app thing, i think i can go for it!

I think this can be just for the settings app (but does this include the settings for other apps such as email, calendar, etc?).  I don't think we want this happening in places such as the media apps.  Would be great if this can get in by the 16th for v1.2.

Comment 15

[Ismael Gonzalez [:basiclines]]

I'll take care of it right now so!

Comment 16

[Ismael Gonzalez [:basiclines]]

Guys i will not be able to keep working on this, anyway this is the branch where i've been working for this: https://github.com/basiclines/gaia/tree/settings-ui-bugfixing

Comment 17

[Eric Pang [:epang] UX]

(In reply to Ismael Gonzalez [:basiclines] from comment #16)
> Guys i will not be able to keep working on this, anyway this is the branch
> where i've been working for this:
> https://github.com/basiclines/gaia/tree/settings-ui-bugfixing

Hey Arnau, have you had a chance to look into this bug?

I'm also flagging as 1.3 since this fix will help us with future truncation issues in settings.

Thanks!

Comment 18

[Jason Smith [:jsmith]]

(In reply to Eric Pang [:epang] from comment #17)
> (In reply to Ismael Gonzalez [:basiclines] from comment #16)
> > Guys i will not be able to keep working on this, anyway this is the branch
> > where i've been working for this:
> > https://github.com/basiclines/gaia/tree/settings-ui-bugfixing
> 
> Hey Arnau, have you had a chance to look into this bug?
> 
> I'm also flagging as 1.3 since this fix will help us with future truncation
> issues in settings.
> 
> Thanks!

I don't think that argues to block - that argues for wanting to fix something, but not arguing it's a blocker. A product blocker is what blocks the release.

Comment 19

[Eric Pang [:epang] UX]

(In reply to Eric Pang [:epang] from comment #17)
> (In reply to Ismael Gonzalez [:basiclines] from comment #16)
> > Guys i will not be able to keep working on this, anyway this is the branch
> > where i've been working for this:
> > https://github.com/basiclines/gaia/tree/settings-ui-bugfixing
> 
> Hey Arnau, have you had a chance to look into this bug?
> 
> I'm also flagging as 1.3 since this fix will help us with future truncation
> issues in settings.
> 
> Thanks!


Hey Arnau, just realized I didn't ni you on this!  Have you had a chance to look into this?  Seems like there's a lot of truncation issues coming in that would really benefit when this fix lands! Thanks!

Comment 20

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

We could achieve a two line truncated text using javascript, but another issue is how do we center the text when we only have one line. An easy way to do that would be using flex box, but in order to use flex we should first fix this: https://bugzilla.mozilla.org/show_bug.cgi?id=914892

Comment 21

[Bruce Huang [:bhuang] (inactive)]

This shouldn't be a release blocker, but if it lands before 1.3 FC we can take it.

Comment 22

[Eric Pang [:epang] UX]

Hey Arnau, looks like bug 914892 is close to landing :).  Once landed can you work on this bug when you have time?  Thanks!

Comment 23

[Stephany Wilkes]

Is this intended for 1.4? Trying to assess the localization issues this may or may not be able to help with.

Comment 24

[Patryk Adamczyk [:patryk] UX]

Yes, we want to have it done ASAP, so hopefully v.1.4

Comment 25

[Carol Huang [:Carol]]

Hello Eric, 
Do you know about the situation of this bug right now?
Is anybody working on this?
thank you!

Comment 26

[Eric Pang [:epang] UX]

Hey Carol, I believe Arnau was working on it last.

Arnau, I remember you were working on this bug a while back, can you let us know what the status of this is?  Can we have this ready for 1.4?  Thanks!

Comment 27

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

This bug depends on https://bugzilla.mozilla.org/show_bug.cgi?id=940355, which I believe Joan will have ready this week.

Comment 28

[Stephany Wilkes]

Flagging Casey so he is aware of this in the context of bug #979483, bug #979478 and bug #908300. Casey, I'm wondering if we may also want to add this to the special branch you do and treat it in the same manner as bug #908300?

Comment 29

[Stephany Wilkes]

Flagging Patryk to set a Target Milestone on this above.

Comment 30

[Stephany Wilkes]

What is the status of this, as we start the last week of 2.0? Is anyone working on this? It's noted as blocking the Sys FE Visual Refresh for 2.0.

Comment 31

[Stephany Wilkes]

Also flagging Arnau for an implementation update. Thanks!

Comment 32

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

This bug is blocked by bug 940355, where we need to redo how list layouts are done.
I would move that to 2.1

Comment 33

[Stephany Wilkes]

We agreed that for 2.0 we would not selectively move items to 2.1. This is important to L10N. Who else is a candidate to take this?

Comment 34

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Pavel will be working on that.
Sorry for not getting into this before, as this bug had the target milestone removed on 2014-05-08

Comment 35

[Stephany Wilkes]

Assigned to Pavel. Pavel, your other bugs are higher priority than this, though. Let me know if you have questions. Thanks for the update, Arnau!

Comment 36

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Hey Eric,
we have a lot of comments and proposals here, can you summarize the final needs of this one? :)

Comment 37

[Eric Pang [:epang] UX]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #36)
> Hey Eric,
> we have a lot of comments and proposals here, can you summarize the final
> needs of this one? :)

Hey Pavel, you can still follow the attached spec for line spacing.  Looks like you'll have to land bug 940355 (from Arnau's comment 32) first.  Let me know if you have any other questions, thanks!

Comment 38

[BMO Automation]

Firefox OS is not being worked on