Peko Chen [:pekochen] Reporter
	Description • 10 years ago

Please modify the time of event list to right aligned and AM/PM to left aligned.

	Peko Chen [:pekochen] Reporter
	Comment 1 • 10 years ago

Hi Gareth,
Just found out this visual issue, is it possible to modify this in 2.0?
Thanks

	Miller Medeiros [:millermedeiros]
	Comment 2 • 10 years ago

I agree that this looks weird and I am going to fix it.

note about L10n, some locales doesn't have the AM/PM, the ones that does uses the `%p` to represent it, so it's safe to use RegExp to wrap the `%p` into a `<div>` that changes the text-align and adds the margin-left.

Peko, what should we do for locales that uses the 24h format "17:01" instead of "5:01 PM"?

	Miller Medeiros [:millermedeiros]
	Comment 3 • 10 years ago

Peko, we also need to think how it will behave on languages where the am/pm comes before the time like "zh-TW" (上午 2:25) and "ja" (午前2:25 - note that there is no space in between the am/pm and time): http://transvision.mozfr.org/string/?entity=shared/date/date.properties:shortTimeFormat&repo=gaia

What I'm thinking is to only split it in 2 if there is a space before/after the am/pm and always keep the left "block" aligned to the right and the right "block" aligned to the left (like the image you provided). What do you think?

	Miller Medeiros [:millermedeiros]
	Comment 4 • 10 years ago

Peko, not exactly what you asked for but since each locale will need a different width for the "left column" we can't align the elements the way you want. (notice that the time is not aligned with the "Wednesday, Jun 18").

I also moved the "colored dots" a little bit to the right (2px) since now we have enough space.

Let me know if this would be good enough to you.

	Peko Chen [:pekochen] Reporter
	Comment 5 • 10 years ago

Hi Miller,

Is it possible to change the width of left column dynamically?
I still wish the time aligned with date("Wednesday, Jun 18")
thank you so much~~ :D


(In reply to Miller Medeiros [:millermedeiros] from comment #4)
> Created attachment 8443113 [details]
> month_align_time.png
> 
> Peko, not exactly what you asked for but since each locale will need a
> different width for the "left column" we can't align the elements the way
> you want. (notice that the time is not aligned with the "Wednesday, Jun 18").
> 
> I also moved the "colored dots" a little bit to the right (2px) since now we
> have enough space.
> 
> Let me know if this would be good enough to you.

	Peko Chen [:pekochen] Reporter
	Comment 6 • 10 years ago

Hi Miller,

If we use 24hr format, please remove am/pm, and time align to the left.
please see attached file.
thanks for your help~ 

Peko

	Miller Medeiros [:millermedeiros]
	Comment 7 • 10 years ago

(In reply to Peko Chen [:peko] from comment #5)
> Hi Miller,
> 
> Is it possible to change the width of left column dynamically?
> I still wish the time aligned with date("Wednesday, Jun 18")
> thank you so much~~ :D

Hi Peko,

it's not* possible. We can't do that using only CSS. To do it dynamically we would need to:

 1. loop through all the elements and check which one is wider (not a cheap operation, might cause some performance regression).
 2. set the width of the other elements to match it.
 3. when locale changes: we need to reset the width of all elements.
 4. repeat step 1 and 2.

in fact while implementing this I realized we have another bug related to localization (right now the time format is not updated when the locale is changed while the app is running) and that by splitting the values into 2 columns we will need to implement a custom locale listener (which is sort of "bad" for maintenance).

so I'm not really sure if this change justifies the added complexity and potential performance impact. - even tho I agree that aligning things looks way nicer.

Dylan and/or Gareth, any feedback about this? Unsure on how to proceed.

 * in fact almost "everything" is possible given enough time and resources.

	Miller Medeiros [:millermedeiros]
	Comment 8 • 10 years ago

(In reply to Peko Chen [:peko] from comment #6)
> Created attachment 8443216 [details]
> sample.png
> 
> Hi Miller,
> 
> If we use 24hr format, please remove am/pm, and time align to the left.
> please see attached file.
> thanks for your help~ 
> 

uhm, so in fact the event description column should also be fluid.. that is not how it was originally implemented, right now it uses absolute position. maybe flexbox can help in this case but will probably require some changes to the markup as well. will wait for feedback from :gaye or :doliver to see if they think this should be fixed for 2.0

	Dylan Oliver [:doliver]
	Comment 9 • 10 years ago

(In reply to Miller Medeiros [:millermedeiros] from comment #7)
> Dylan and/or Gareth, any feedback about this? Unsure on how to proceed.

My guess is that splitting out the AM/PM and making it dynamic is going to be a confusing change for L10n - I don't think we can accommodate this in 2.0 so maybe we can rethink it for 2.1 if there's a different approach that might work better.

	Miller Medeiros [:millermedeiros]
	Comment 10 • 10 years ago

adding my work in progress patch here just so that we in the future we can use it as a reference. I'll stop working on this for now.

AM strings for all locales: http://transvision.mozfr.org/string/?entity=shared/date/date.properties:time_am&repo=gaia
PM strings for all locales: http://transvision.mozfr.org/string/?entity=shared/date/date.properties:time_pm&repo=gaia
short time format for all locales: http://transvision.mozfr.org/string/?entity=shared/date/date.properties:shortTimeFormat&repo=gaia

to understand time formats see strftime documentation: http://us3.php.net//manual/en/function.strftime.php

	Miller Medeiros [:millermedeiros]
	Comment 11 • 10 years ago

Comment on attachment 8443113 [details]
month_align_time.png

since we are not working on this for now, I'm removing all the flags.

	Pavel Ivanov [:ivanovpavel][:pivanov] UX
	Comment 12 • 10 years ago

I move this for 2.1

	BMO Automation
	Comment 13 • 6 years ago

Firefox OS is not being worked on