875690 - [MMS] [UX] Thread view. Wrong alignment of elements

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia::SMS, defect)

Description

[Victoria Gerchinhoren [:vicky]]

Elements inside the bubble need to be adjusted alignment wise.
Please take a look at this spec for more detail:

https://bug870950.bugzilla.mozilla.org/attachment.cgi?id=753321

Comment 1

[greg]

:[e-mail] Can you please clarify what "left justified but right aligned" means? Justified is a type of alignment. I think I have an idea of what is desired, so I'll start working on it as I understand it!

Comment 2

[greg]

Someone has made some changes to this since the screenshot so I'm attaching a new one.

Comment 3

[greg]

Attachment: Current screen shot

Comment 4

[greg]

Attachment: Pull Request

Comment 5

[greg]

Assuming the current screen shot looks good, the only change that I had to make is the font size. Pull request reflects this.

Comment 6

[Corey Frang [:gnarf]]

Attachment: Screenshot with patch - short text

Comment 7

[Corey Frang [:gnarf]]

Attachment: Screenshot with patch - long text

Comment 8

[Corey Frang [:gnarf]]

Comment on attachment 755573 [details] [diff] [review]
Pull Request

Looks good to me, since this is to align with victoria's spec, I'd like her to confirm this meets her spec.  Check the screenshots attached.

Comment 9

[Corey Frang [:gnarf]]

Requesting leo+ - This is a UX issue for new features in 1.1

Comment 10

[Maria Angeles Oteo (:oteo)]

Hi Victoria, can you confirm if the patch is ok? 
Thanks a lot!

Comment 11

[Victoria Gerchinhoren [:vicky]]

This looks wrong: https://bug875690.bugzilla.mozilla.org/attachment.cgi?id=755589 
1. The text in the white bubble should be aligned to the right margin
2. The Margin in the white bubble is wrong, the photo and text should line up with the end of the orange bubble. 
See attachment with visual notes.

Comment 12

[Victoria Gerchinhoren [:vicky]]

Attachment: shows the missplacement of elements

Comment 13

[Victoria Gerchinhoren [:vicky]]

(In reply to greg from comment #1)
> :[e-mail] Can you please clarify what "left justified but right aligned"
> means? Justified is a type of alignment. I think I have an idea of what is
> desired, so I'll start working on it as I understand it!

It means that the text is justified left as a regular norm of reading but the overall text box sticks to the right margin as the image does.
So, if you have a short text the text box being attached to the right margin will make the bubble shorter from the left.
I hope I am making myself clear...

Comment 14

[Victoria Gerchinhoren [:vicky]]

Make sure margins are 4 rem from screen border in the right hand side of the white bubble and 4 rem in the left hand side of the orange bubble.

You can find the measurements here: https://www.dropbox.com/s/25mz65qfqk631iz/SMS.MMS_measurements.png

Comment 15

[Julien Wajsberg [:julienw]]

Comment on attachment 755573 [details] [diff] [review]
Pull Request

as far as I understand, this needs some work and I won't be there anymore to review, so I'm removing myself here.

Comment 16

[greg]

"1. The text in the white bubble should be aligned to the right margin"

:jugglinmike and I just spent a good amount of time trying to describe this issue in words, but it's a very esoteric and subtle issue. If you want to get on Skype to further clarify the issue that might make it easier. Having said that, we'll try to explain it in text here.

I understand what you're saying. However, this is not possible with CSS. In order for text wrapping to take place, the container has to grow to its maximum width. Once the container is at this width, each line will begin at the leftmost position of the container (thanks to the text-alignment). This will leave space on the right where the word that wrapped onto the next line could not fit. This prevents the right side of the text from aligning with the image below it as you described.

"2. The Margin in the white bubble is wrong, the photo and text should line up with the end of the orange bubble."

That helps me understand this issue, I will fix this problem.

Comment 17

[greg]

Another note: the alignment of the white and orange bubbles will only occur when the orange bubble is at its maximum size (when there is enough content for the text to wrap). But I have set it up so they are perfectly aligned in that case, so hopefully that does the trick!

Comment 18

[Corey Frang [:gnarf]]

Comment on attachment 755573 [details] [diff] [review]
Pull Request

please ask for new review flags when pull is updated

Comment 19

[Borja Salguero [:borjasalguero]]

Hi Greg,
Is there any update here? Could I help u here?

Comment 20

[greg]

:borjasalguero all that is needed is a response from :[e-mail]. I believe this is a case where we can't make it look exactly like the design mock but it is as close as is realistic and not "broken" per se.

Comment 21

[Victoria Gerchinhoren [:vicky]]

(In reply to greg from comment #16)
> "1. The text in the white bubble should be aligned to the right margin"
> 
> :jugglinmike and I just spent a good amount of time trying to describe this
> issue in words, but it's a very esoteric and subtle issue. If you want to
> get on Skype to further clarify the issue that might make it easier. Having
> said that, we'll try to explain it in text here.
> 
> I understand what you're saying. However, this is not possible with CSS. In
> order for text wrapping to take place, the container has to grow to its
> maximum width. Once the container is at this width, each line will begin at
> the leftmost position of the container (thanks to the text-alignment). This
> will leave space on the right where the word that wrapped onto the next line
> could not fit. This prevents the right side of the text from aligning with
> the image below it as you described.
> 
> "2. The Margin in the white bubble is wrong, the photo and text should line
> up with the end of the orange bubble."
> 
> That helps me understand this issue, I will fix this problem.

Hi Greg,
I understand that a text box is generated and grows until reaching the maximum width, stays in that size and when text is wrapped a blank space is generated there. I think you cannot do anything more about it, right?

Comment 22

[greg]

:[e-mail] Correct, I think the current version is perfect!

Comment 23

[Corey Frang [:gnarf]]

Comment on attachment 755573 [details] [diff] [review]
Pull Request

r=me seems everyone is agreed

Comment 24

[Corey Frang [:gnarf]]

master: https://github.com/mozilla-b2g/gaia/commit/7c21892f8bc7c348a24bef5256ee745f78f5300c

Comment 25

[John Ford [:jhford] CET/CEST Berlin Time]

Uplifted 7c21892f8bc7c348a24bef5256ee745f78f5300c to:
v1-train: 9f0326e4cae2a1c76a06ccc27c01fa47b1808048

Comment 26

[Deepa Subramanian]

This issue does not repro anymore. The user is able to see the text aligned as per the attachment in Comment 11.

Verified on 
Leo Build ID: 20130807071207
Gecko: http://hg.mozilla.org/releases/mozilla-b2g18/rev/11bb1b0eefff
Gaia: 60ca81600a080dae33058b0692ecaa213556c926
Platform Version: 18.1