1211887 - Pinned pages look weird on the homescreen since style update

Status: RESOLVED FIXED

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

Description

[Chris Lord [:cwiiis]]

Attachment: Pinned pages on the homescreen

Since the style update of gaia pinned pages card, they look very odd on the homescreen. I had a quick look at the inspector, and it seems they ignore the size given to them by layout and force a particular size.

Web components, especially shared ones, shouldn't layout outside of their given dimensions, and they shouldn't force particular sizes unless there's a good reason. Alberto, can you take a look at this? Also n?epang, as I'm pretty sure there were homescreen mock-ups for how they should look too.

Comment 1

[Eric Pang [:epang] UX]

I've added a link to the visual spec in the user story (the spec for the cards and home screen are both in there).  Alberto has implemented the cards in the pin dialogue but they aren't looking right here.  I'm sure he'll know what's going on :)

Comment 2

[GitHub Autolander Bot]

Attachment: [gaia] albertopq:1211887-homescreen-pages > mozilla-b2g:master

Comment 3

[Alberto Pastor [:albertopq]]

Comment on attachment 8671394 [details] [review]
[gaia] albertopq:1211887-homescreen-pages > mozilla-b2g:master

Hey Eric, does that look alright now? Thanks!

Comment 4

[Eric Pang [:epang] UX]

Comment on attachment 8671394 [details] [review]
[gaia] albertopq:1211887-homescreen-pages > mozilla-b2g:master

Thanks Alberto, looks better now.  Have a few other questions that aren't part of this bug so will msg you about them.

Comment 5

[Michael Henretty [:mikehenrty][:mhenretty]]

Comment on attachment 8671394 [details] [review]
[gaia] albertopq:1211887-homescreen-pages > mozilla-b2g:master

Thanks!

Comment 6

[Chris Lord [:cwiiis]]

Merged: https://github.com/mozilla-b2g/gaia/commit/a9399f148859dc9dce73c4f2a2fd7653388aa9bc

Comment 7

[Chris Lord [:cwiiis]]

Attachment: Pinned pages on the homescreen after this patch

This is why my pinned pages now look like - certainly an improvement, but not quite to spec.

Issues I see:
- Margin on left/right is not large enough
- Cards are more square than they should be
- Font is wrong
- Cards without detailed descriptions (which is all of mine... Is that a bug?) have the title vertical-aligned to the center instead of the top.
- Drop-shadow is not as prominent as the design

Do we want to open up another bug to finish up these polish issues? And do these issues exist in the pin-page dialog too?

Comment 8

[Eric Pang [:epang] UX]

Attachment: screen_comparison.png

Thanks Chris, I put together a comparison screen.  Looks like it's looking off the spec. 
https://mozilla.box.com/s/a25ot7ruu5u0mvxjirhrtu8d3rt5r107

I've made a few comments to what you've been seeing and added a few more. 

- Margin on left/right is not large enough (see pg 26 of spec)
   - Yes, should be the same as the grid view
- Cards are more square than they should be
   - Looks like the dimensions are off
- Font is wrong 
   - Wrong size
- Cards without detailed descriptions (which is all of mine... Is that a bug?) 
have the title vertical-aligned to the center instead of the top.
    - I've brought this up before, Alberto says there's another bug that will cover this (Alberto, what's the bug number).  But if there's no descriptions they default to the title vertically centered (which isn't ideal so I hope we can get the descriptions in! See page 32 of spec)
- Drop-shadow is not as prominent as the design
    - This is fine
- Default Icon not showing (pin icon shown)
- If only a favicon is available styling of icon
- White part of the card should be 95% opacity so the wallpaper can be slightly seen (sorry I forgot to add this to the spec)

Alberto can you take a look?  Feel free to open a new bug if it makes more sense.