Focus on second dose instead of first dose

[srakrn]

Currently, the design of the pass in Apple Wallet seemed to "focus" on the first dose of vaccine (with the larger font size on the name of the vaccine the user get). To my understanding, the inequal font size is a result of the limitations on the pass's layout.

In such a case, is it more intuitive to focus on the second dose since it means a single person is fully vaccinated, and is certified for a vaccination certificate?

[scomma]

You're correct to intuit that the pass layout forces font sizes. To my knowledge it also forces the first one ("secondary field") to be larger than the second one ("auxiliary field"), so the only way to achieve that effect would be to list the doses in reverse chronological order (dose 2 on top). I'm afraid of straying too far from the original format. Thoughts?

vaxwallet/functions/index.js

Lines 59 to 60 in d91b487

	pass.secondaryFields.add("level", new Date(req.query.dose1date).toDateString(), dose1);
	pass.auxiliaryFields.add("aux", new Date(req.query.dose2date).toDateString(), dose2);

[srakrn]

From my perspective, if the pass clearly indicates the arrangement of the dose, then I don't have any kind of problems. Chronologically reversed ordering is not something uncommon (social media feed widely adapts them, for example).

But I forgot to take the original vaccination certificate's design into consideration, thus I would say I could not give any constructive feedbacks or comments when considering such a limitation.

[scomma]

Ok, I'll leave this issue open for while in case anyone wants to pile on. In the meantime since we're not importing directly from MOPH API (yet), anyone who prefers reverse chronology is free to swap their first/second dose data in the interface.

[srakrn]

I tried the reversed chronological order with some text added to clarify the ordering. Interestingly, it appears that the text in both fields shrinks in font size to fit a longer line length to the screen size.

Not sure if we can apply whitespace hacks to make the size of the two lines as close as possible.